Skip to content

Commit 52671c1

Browse files
author
Adam Bradley
committed
fix(transform): Polyfill style.transform to work w/ non-webkit
1 parent a0492f3 commit 52671c1

File tree

9 files changed

+21
-21
lines changed

9 files changed

+21
-21
lines changed

js/ext/angular/test/content.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@
149149
if(scrollTop > startTop) {
150150
var diff = scrollTop - startTop;
151151
console.log(diff);
152-
header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';
152+
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';
153153
content.style.marginTop = -diff + 'px';
154154
}
155155
console.log('Scroll', scrollTop, scrollLeft);

js/ext/angular/test/content_defer.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
if(scrollTop > startTop) {
8888
var diff = scrollTop - startTop;
8989
console.log(diff);
90-
header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';
90+
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';
9191
content.style.marginTop = -diff + 'px';
9292
}
9393
console.log('Scroll', scrollTop, scrollLeft);

js/ext/angular/test/content_h.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@
108108
if(scrollTop > startTop) {
109109
var diff = scrollTop - startTop;
110110
console.log(diff);
111-
header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';
111+
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';
112112
content.style.marginTop = -diff + 'px';
113113
}
114114
console.log('Scroll', scrollTop, scrollLeft);

js/ext/angular/test/scroll.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ <h3>Hourly Forecast</h3>
110110
if(scrollTop > startTop) {
111111
var diff = scrollTop - startTop;
112112
console.log(diff);
113-
header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';
113+
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';
114114
content.style.marginTop = -diff + 'px';
115115
}
116116
console.log('Scroll', scrollTop, scrollLeft);

js/ext/angular/test/subControllers.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -88,15 +88,15 @@ <h1>Settings</h1>
8888
endDrag: function(e) {},
8989
getTranslateX: function() {
9090
var r = /translate3d\((-?.+)px/;
91-
var d = r.exec(this.el.style.webkitTransform);
91+
var d = r.exec(this.el.style[ionic.CSS.TRANSFORM]);
9292
9393
if(d && d.length > 0) {
9494
return parseFloat(d[1]);
9595
}
9696
return 0;
9797
},
9898
setTranslateX: function(amount) {
99-
this.el.style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
99+
this.el.style[ionic.CSS.TRANSFORM] = 'translate3d(' + amount + 'px, 0, 0)';
100100
},
101101
enableAnimation: function() {
102102
this.el.classList.add(this.animateClass);

js/utils/dom.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
*
3939
* @example
4040
* this.setTranslateX = ionic.animationFrameThrottle(function(x) {
41-
* this.el.style.webkitTransform = 'translate3d(' + x + 'px, 0, 0)';
41+
* this.el.style[ionic.CSS.TRANSFORM] = 'translate3d(' + x + 'px, 0, 0)';
4242
* })
4343
*/
4444
animationFrameThrottle: function(cb) {

js/views/listView.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
content.classList.remove(ITEM_SLIDING_CLASS);
4646

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

5050
// Grab the buttons
5151
buttons = content.parentNode.querySelector('.' + ITEM_OPTIONS_CLASS);
@@ -91,7 +91,7 @@
9191
newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
9292
}
9393

94-
this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
94+
this._currentDrag.content.style[ionic.CSS.TRANSFORM] = 'translate3d(' + newX + 'px, 0, 0)';
9595
this._currentDrag.content.style.webkitTransition = 'none';
9696
}
9797
});
@@ -132,17 +132,17 @@
132132
// };
133133

134134
ionic.requestAnimationFrame(function() {
135-
// var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
135+
// var currentX = parseFloat(_this._currentDrag.content.style[ionic.CSS.TRANSFORM].replace('translate3d(', '').split(',')[0]) || 0;
136136
// if(currentX !== restingPoint) {
137137
// _this._currentDrag.content.classList.add(ITEM_SLIDING_CLASS);
138138
// _this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
139139
// }
140140
if(restingPoint === 0) {
141-
_this._currentDrag.content.style.webkitTransform = '';
141+
_this._currentDrag.content.style[ionic.CSS.TRANSFORM] = '';
142142
} else {
143-
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
143+
_this._currentDrag.content.style[ionic.CSS.TRANSFORM] = 'translate3d(' + restingPoint + 'px, 0, 0)';
144144
}
145-
_this._currentDrag.content.style.webkitTransition = '';
145+
_this._currentDrag.content.style[ionic.CSS.TRANSFORM] = '';
146146

147147

148148
// Kill the current drag
@@ -166,15 +166,15 @@
166166

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

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

175175

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

179179
var startIndex = ionic.DomUtil.getChildIndex(this.el, this.el.nodeName.toLowerCase());
180180
var elementHeight = this.el.offsetHeight;
@@ -278,7 +278,7 @@
278278

279279
// Reposition the element
280280
this.el.classList.remove(ITEM_REORDERING_CLASS);
281-
this.el.style.webkitTransform = '';
281+
this.el.style[ionic.CSS.TRANSFORM] = '';
282282

283283
placeholder.parentNode.insertBefore(this.el, placeholder);
284284
placeholder.parentNode.removeChild(placeholder);

js/views/sideMenuView.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,10 @@
5757
this.el.classList.add(this.animationClass);
5858
},
5959
getTranslateX: function() {
60-
return parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[0]);
60+
return parseFloat(this.el.style[ionic.CSS.TRANSFORM].replace('translate3d(', '').split(',')[0]);
6161
},
6262
setTranslateX: ionic.animationFrameThrottle(function(x) {
63-
this.el.style.webkitTransform = 'translate3d(' + x + 'px, 0, 0)';
63+
this.el.style[ionic.CSS.TRANSFORM] = 'translate3d(' + x + 'px, 0, 0)';
6464
})
6565
});
6666

js/views/toggleView.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
} else {
4242
var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
4343
openPixel = (openPixel < 1 ? 0 : openPixel);
44-
this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
44+
this.handle.style[ionic.CSS.TRANSFORM] = 'translate3d(' + openPixel + 'px,0,0)';
4545
}
4646
}
4747
},
@@ -52,8 +52,8 @@
5252

5353
val: function(value) {
5454
if(value === true || value === false) {
55-
if(this.handle.style.webkitTransform !== "") {
56-
this.handle.style.webkitTransform = "";
55+
if(this.handle.style[ionic.CSS.TRANSFORM] !== "") {
56+
this.handle.style[ionic.CSS.TRANSFORM] = "";
5757
}
5858
this.checkbox.checked = value;
5959
this.openPercent = (value ? 100 : 0);

0 commit comments

Comments
 (0)