fix(transform): Polyfill style.transform to work w/ non-webkit

Adam Bradley · Adam Bradley · commit 52671c18f97d · 2014-02-20T15:40:12.000-06:00
diff --git a/js/ext/angular/test/content.html b/js/ext/angular/test/content.html
@@ -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);
diff --git a/js/ext/angular/test/content_defer.html b/js/ext/angular/test/content_defer.html
@@ -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);
diff --git a/js/ext/angular/test/content_h.html b/js/ext/angular/test/content_h.html
@@ -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);
diff --git a/js/ext/angular/test/scroll.html b/js/ext/angular/test/scroll.html
@@ -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);
diff --git a/js/ext/angular/test/subControllers.html b/js/ext/angular/test/subControllers.html
@@ -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);
diff --git a/js/utils/dom.js b/js/utils/dom.js
@@ -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) {
diff --git a/js/views/listView.js b/js/views/listView.js
@@ -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);
@@ -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';
     }
   });
@@ -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
@@ -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;
@@ -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);
diff --git a/js/views/sideMenuView.js b/js/views/sideMenuView.js
@@ -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)';
     })
   });
 
diff --git a/js/views/toggleView.js b/js/views/toggleView.js
@@ -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)';
         }
       }
     },
@@ -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);

Original file line number	Diff line number	Diff line change
`@@ -149,7 +149,7 @@`
`149`	`149`	`if(scrollTop > startTop) {`
`150`	`150`	`var diff = scrollTop - startTop;`
`151`	`151`	`console.log(diff);`
`152`		`- header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';`
	`152`	`+ header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';`
`153`	`153`	`content.style.marginTop = -diff + 'px';`
`154`	`154`	`}`
`155`	`155`	`console.log('Scroll', scrollTop, scrollLeft);`
Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@`
`87`	`87`	`if(scrollTop > startTop) {`
`88`	`88`	`var diff = scrollTop - startTop;`
`89`	`89`	`console.log(diff);`
`90`		`- header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';`
	`90`	`+ header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';`
`91`	`91`	`content.style.marginTop = -diff + 'px';`
`92`	`92`	`}`
`93`	`93`	`console.log('Scroll', scrollTop, scrollLeft);`
Original file line number	Diff line number	Diff line change
`@@ -108,7 +108,7 @@`
`108`	`108`	`if(scrollTop > startTop) {`
`109`	`109`	`var diff = scrollTop - startTop;`
`110`	`110`	`console.log(diff);`
`111`		`- header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';`
	`111`	`+ header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';`
`112`	`112`	`content.style.marginTop = -diff + 'px';`
`113`	`113`	`}`
`114`	`114`	`console.log('Scroll', scrollTop, scrollLeft);`
Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ <h3>Hourly Forecast</h3>`
`110`	`110`	`if(scrollTop > startTop) {`
`111`	`111`	`var diff = scrollTop - startTop;`
`112`	`112`	`console.log(diff);`
`113`		`- header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';`
	`113`	`+ header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';`
`114`	`114`	`content.style.marginTop = -diff + 'px';`
`115`	`115`	`}`
`116`	`116`	`console.log('Scroll', scrollTop, scrollLeft);`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@`
`38`	`38`	`*`
`39`	`39`	`* @example`
`40`	`40`	`* 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)';`
`42`	`42`	`* })`
`43`	`43`	`*/`
`44`	`44`	`animationFrameThrottle: function(cb) {`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@`
`41`	`41`	`} else {`
`42`	`42`	`var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );`
`43`	`43`	`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)';`
`45`	`45`	`}`
`46`	`46`	`}`
`47`	`47`	`},`
`@@ -52,8 +52,8 @@`
`52`	`52`
`53`	`53`	`val: function(value) {`
`54`	`54`	`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] = "";`
`57`	`57`	`}`
`58`	`58`	`this.checkbox.checked = value;`
`59`	`59`	`this.openPercent = (value ? 100 : 0);`