Skip to content

Commit

Permalink
fix(transform): Polyfill style.transform to work w/ non-webkit
Browse files Browse the repository at this point in the history
  • Loading branch information
Adam Bradley committed Feb 20, 2014
1 parent a0492f3 commit 52671c1
Show file tree
Hide file tree
Showing 9 changed files with 21 additions and 21 deletions.
2 changes: 1 addition & 1 deletion js/ext/angular/test/content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
if(scrollTop > startTop) {
var diff = scrollTop - startTop;
console.log(diff);
header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';
content.style.marginTop = -diff + 'px';
}
console.log('Scroll', scrollTop, scrollLeft);
Expand Down
2 changes: 1 addition & 1 deletion js/ext/angular/test/content_defer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
if(scrollTop > startTop) {
var diff = scrollTop - startTop;
console.log(diff);
header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';
content.style.marginTop = -diff + 'px';
}
console.log('Scroll', scrollTop, scrollLeft);
Expand Down
2 changes: 1 addition & 1 deletion js/ext/angular/test/content_h.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
if(scrollTop > startTop) {
var diff = scrollTop - startTop;
console.log(diff);
header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';
content.style.marginTop = -diff + 'px';
}
console.log('Scroll', scrollTop, scrollLeft);
Expand Down
2 changes: 1 addition & 1 deletion js/ext/angular/test/scroll.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ <h3>Hourly Forecast</h3>
if(scrollTop > startTop) {
var diff = scrollTop - startTop;
console.log(diff);
header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';
content.style.marginTop = -diff + 'px';
}
console.log('Scroll', scrollTop, scrollLeft);
Expand Down
4 changes: 2 additions & 2 deletions js/ext/angular/test/subControllers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,15 @@ <h1>Settings</h1>
endDrag: function(e) {},
getTranslateX: function() {
var r = /translate3d\((-?.+)px/;
var d = r.exec(this.el.style.webkitTransform);
var d = r.exec(this.el.style[ionic.CSS.TRANSFORM]);
if(d && d.length > 0) {
return parseFloat(d[1]);
}
return 0;
},
setTranslateX: function(amount) {
this.el.style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
this.el.style[ionic.CSS.TRANSFORM] = 'translate3d(' + amount + 'px, 0, 0)';
},
enableAnimation: function() {
this.el.classList.add(this.animateClass);
Expand Down
2 changes: 1 addition & 1 deletion js/utils/dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
*
* @example
* this.setTranslateX = ionic.animationFrameThrottle(function(x) {
* this.el.style.webkitTransform = 'translate3d(' + x + 'px, 0, 0)';
* this.el.style[ionic.CSS.TRANSFORM] = 'translate3d(' + x + 'px, 0, 0)';
* })
*/
animationFrameThrottle: function(cb) {
Expand Down
18 changes: 9 additions & 9 deletions js/views/listView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
content.classList.remove(ITEM_SLIDING_CLASS);

// Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
offsetX = parseFloat(content.style[ionic.CSS.TRANSFORM].replace('translate3d(', '').split(',')[0]) || 0;

// Grab the buttons
buttons = content.parentNode.querySelector('.' + ITEM_OPTIONS_CLASS);
Expand Down Expand Up @@ -91,7 +91,7 @@
newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
}

this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
this._currentDrag.content.style[ionic.CSS.TRANSFORM] = 'translate3d(' + newX + 'px, 0, 0)';
this._currentDrag.content.style.webkitTransition = 'none';
}
});
Expand Down Expand Up @@ -132,17 +132,17 @@
// };

ionic.requestAnimationFrame(function() {
// var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
// var currentX = parseFloat(_this._currentDrag.content.style[ionic.CSS.TRANSFORM].replace('translate3d(', '').split(',')[0]) || 0;
// if(currentX !== restingPoint) {
// _this._currentDrag.content.classList.add(ITEM_SLIDING_CLASS);
// _this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
// }
if(restingPoint === 0) {
_this._currentDrag.content.style.webkitTransform = '';
_this._currentDrag.content.style[ionic.CSS.TRANSFORM] = '';
} else {
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
_this._currentDrag.content.style[ionic.CSS.TRANSFORM] = 'translate3d(' + restingPoint + 'px, 0, 0)';
}
_this._currentDrag.content.style.webkitTransition = '';
_this._currentDrag.content.style[ionic.CSS.TRANSFORM] = '';


// Kill the current drag
Expand All @@ -166,15 +166,15 @@

ReorderDrag.prototype._moveElement = function(e) {
var y = (e.gesture.center.pageY - this._currentDrag.elementHeight/2);
this.el.style.webkitTransform = 'translate3d(0, '+y+'px, 0)';
this.el.style[ionic.CSS.TRANSFORM] = 'translate3d(0, '+y+'px, 0)';
};

ReorderDrag.prototype.start = function(e) {
var content;


// Grab the starting Y point for the item
var offsetY = this.el.offsetTop;//parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
var offsetY = this.el.offsetTop;//parseFloat(this.el.style[ionic.CSS.TRANSFORM].replace('translate3d(', '').split(',')[1]) || 0;

var startIndex = ionic.DomUtil.getChildIndex(this.el, this.el.nodeName.toLowerCase());
var elementHeight = this.el.offsetHeight;
Expand Down Expand Up @@ -278,7 +278,7 @@

// Reposition the element
this.el.classList.remove(ITEM_REORDERING_CLASS);
this.el.style.webkitTransform = '';
this.el.style[ionic.CSS.TRANSFORM] = '';

placeholder.parentNode.insertBefore(this.el, placeholder);
placeholder.parentNode.removeChild(placeholder);
Expand Down
4 changes: 2 additions & 2 deletions js/views/sideMenuView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,10 @@
this.el.classList.add(this.animationClass);
},
getTranslateX: function() {
return parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[0]);
return parseFloat(this.el.style[ionic.CSS.TRANSFORM].replace('translate3d(', '').split(',')[0]);
},
setTranslateX: ionic.animationFrameThrottle(function(x) {
this.el.style.webkitTransform = 'translate3d(' + x + 'px, 0, 0)';
this.el.style[ionic.CSS.TRANSFORM] = 'translate3d(' + x + 'px, 0, 0)';
})
});

Expand Down
6 changes: 3 additions & 3 deletions js/views/toggleView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
} else {
var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
openPixel = (openPixel < 1 ? 0 : openPixel);
this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
this.handle.style[ionic.CSS.TRANSFORM] = 'translate3d(' + openPixel + 'px,0,0)';
}
}
},
Expand All @@ -52,8 +52,8 @@

val: function(value) {
if(value === true || value === false) {
if(this.handle.style.webkitTransform !== "") {
this.handle.style.webkitTransform = "";
if(this.handle.style[ionic.CSS.TRANSFORM] !== "") {
this.handle.style[ionic.CSS.TRANSFORM] = "";
}
this.checkbox.checked = value;
this.openPercent = (value ? 100 : 0);
Expand Down

0 comments on commit 52671c1

Please sign in to comment.