javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Adam Bradley
2014-02-20 15:40:12 -06:00
parent a0492f319c
commit 52671c18f9
9 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/ext/angular/test/content.html
View File

@@ -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);

2
js/ext/angular/test/content_defer.html
View File

@@ -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);

2
js/ext/angular/test/content_h.html
View File

@@ -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);

2
js/ext/angular/test/scroll.html
View File

@@ -110,7 +110,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);

4
js/ext/angular/test/subControllers.html
View File

@@ -88,7 +88,7 @@
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]);
@@ -96,7 +96,7 @@
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);

2
js/utils/dom.js
View File

@@ -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) {

18
js/views/listView.js
View File

@@ -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,7 +166,7 @@
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) {
@@ -174,7 +174,7 @@
// 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);

4
js/views/sideMenuView.js
View File

@@ -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)';
})
});

6
js/views/toggleView.js
View File

@@ -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);