From 32d0f48e211481d8a1fd1293149b8a7d958b9fce Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 7 Nov 2013 19:24:55 -0600 Subject: [PATCH] Fixed #99 with requestAnimationFrame polyfill --- dist/css/ionic.css | 10 +++---- dist/css/themes/ionic-ios7.css | 5 ++-- dist/js/ionic.js | 49 ++++++++++++++++++++++------------ js/utils/poly.js | 16 +++++++++++ js/views/listView.js | 6 ++--- js/views/loadingView.js | 14 +++++----- js/views/popupView.js | 2 +- js/views/scrollView.js | 6 ++--- js/views/slideBox.js | 4 +-- 9 files changed, 71 insertions(+), 41 deletions(-) create mode 100644 js/utils/poly.js diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 12f6e4320b..f228734762 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -2019,7 +2019,7 @@ sub { fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; - border: 1px solid #c0c0c0; } + border: 1px solid silver; } /** * 1. Correct `color` not being inherited in IE 8/9. @@ -3894,7 +3894,7 @@ input[type="file"] { line-height: 34px; } select { - border: 1px solid #ccc; + border: 1px solid #cccccc; background-color: white; } select[multiple], @@ -3953,7 +3953,7 @@ input[type="checkbox"][readonly] { border-radius: 50%; background: white; content: ' '; - transition: background-color .1s ease-in-out; } + transition: background-color 0.1s ease-in-out; } /* the checkmark within the box */ .checkbox input:after { @@ -3968,7 +3968,7 @@ input[type="checkbox"][readonly] { border-right: 0; content: ' '; opacity: 0; - transition: opacity .05s ease-in-out; + transition: opacity 0.05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @@ -4397,7 +4397,7 @@ input[type="range"] { .button-icon:active, .button-icon.active { background: none; box-shadow: none; - text-shadow: 0px 0px 10px #fff; } + text-shadow: 0px 0px 10px white; } .padding > .button.block:first-child { margin-top: 0; } diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css index e119d59757..e027d9919a 100644 --- a/dist/css/themes/ionic-ios7.css +++ b/dist/css/themes/ionic-ios7.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /** * Mixins * -------------------------------------------------- @@ -123,7 +124,7 @@ right: 20px; transition: 0.2s ease; transition-property: left, right; - transition-delay: 0s, .05s; } + transition-delay: 0s, 0.05s; } .toggle :checked + .track { /* When the toggle is "on" */ @@ -138,4 +139,4 @@ right: 0; left: 20px; -webkit-transform: none; - transition-delay: .05s, 0s; } + transition-delay: 0.05s, 0s; } diff --git a/dist/js/ionic.js b/dist/js/ionic.js index f7968d7552..7b04bf5c09 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -1742,6 +1742,23 @@ window.ionic = { }; ionic.Platform.detect(); +})(window.ionic); +; +(function(ionic) { + 'use strict'; + + // From the man himself, Mr. Paul Irish. + // The requestAnimationFrame polyfill + window.rAF = (function(){ + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + function( callback ){ + window.setTimeout(callback, 1000 / 60); + }; + })(); + + })(window.ionic); ; (function(window, document, ionic) { @@ -2307,7 +2324,7 @@ window.ionic = { this.el.style.webkitTransitionDuration = '0'; - window.requestAnimationFrame(function() { + window.rAF(function() { if(_this.wrapScrollPosition(_this.bounceTime)) { _this._didEndScroll = true; } @@ -2422,7 +2439,7 @@ window.ionic = { var drag = _this._drag; // Request an animation frame to batch DOM reads/writes - window.requestAnimationFrame(function() { + window.rAF(function() { // We are dragging, grab the current content height var totalWidth = _this.el.scrollWidth; @@ -2527,7 +2544,7 @@ window.ionic = { // animate to that position _animateToStop: function(e) { var _this = this; - window.requestAnimationFrame(function() { + window.rAF(function() { var drag = _this._drag; @@ -2774,7 +2791,7 @@ window.ionic = { SlideDrag.prototype.drag = function(e) { var _this = this, buttonsWidth; - window.requestAnimationFrame(function() { + window.rAF(function() { // We really aren't dragging if(!_this._currentDrag) { return; @@ -2841,7 +2858,7 @@ window.ionic = { e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd); }; - window.requestAnimationFrame(function() { + window.rAF(function() { var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; if(currentX !== restingPoint) { _this._currentDrag.content.classList.add(ITEM_SLIDING_CLASS); @@ -2890,7 +2907,7 @@ window.ionic = { ReorderDrag.prototype.drag = function(e) { var _this = this; - window.requestAnimationFrame(function() { + window.rAF(function() { // We really aren't dragging if(!_this._currentDrag) { return; @@ -3165,18 +3182,16 @@ window.ionic = { var _this = this; if(this._loadingBox) { - //window.requestAnimationFrame(function() { - var lb = _this._loadingBox; + var lb = _this._loadingBox; - var width = Math.min(_this.maxWidth, Math.max(window.outerWidth - 40, lb.offsetWidth)); + var width = Math.min(_this.maxWidth, Math.max(window.outerWidth - 40, lb.offsetWidth)); - lb.style.width = width; + lb.style.width = width; - lb.style.marginLeft = (-lb.offsetWidth) / 2 + 'px'; - lb.style.marginTop = (-lb.offsetHeight) / 2 + 'px'; + lb.style.marginLeft = (-lb.offsetWidth) / 2 + 'px'; + lb.style.marginTop = (-lb.offsetHeight) / 2 + 'px'; - _this.el.classList.add('active'); - //}); + _this.el.classList.add('active'); } }, hide: function() { @@ -3285,7 +3300,7 @@ window.ionic = { alert: function(message) { var _this = this; - window.requestAnimationFrame(function() { + window.rAF(function() { _this.setTitle(message); _this.el.classList.add('active'); }); @@ -3520,7 +3535,7 @@ window.ionic = { var _this = this, finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX; - window.requestAnimationFrame(function() { + window.rAF(function() { // We didn't have a drag, so just init and leave if(!_this._drag) { @@ -3613,7 +3628,7 @@ window.ionic = { _handleDrag: function(e) { var _this = this; - window.requestAnimationFrame(function() { + window.rAF(function() { var content; // We really aren't dragging diff --git a/js/utils/poly.js b/js/utils/poly.js new file mode 100644 index 0000000000..d359db58ea --- /dev/null +++ b/js/utils/poly.js @@ -0,0 +1,16 @@ +(function(ionic) { + 'use strict'; + + // From the man himself, Mr. Paul Irish. + // The requestAnimationFrame polyfill + window.rAF = (function(){ + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + function( callback ){ + window.setTimeout(callback, 1000 / 60); + }; + })(); + + +})(window.ionic); diff --git a/js/views/listView.js b/js/views/listView.js index 106f03522e..d5dd96e30c 100644 --- a/js/views/listView.js +++ b/js/views/listView.js @@ -65,7 +65,7 @@ SlideDrag.prototype.drag = function(e) { var _this = this, buttonsWidth; - window.requestAnimationFrame(function() { + window.rAF(function() { // We really aren't dragging if(!_this._currentDrag) { return; @@ -132,7 +132,7 @@ e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd); }; - window.requestAnimationFrame(function() { + window.rAF(function() { var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; if(currentX !== restingPoint) { _this._currentDrag.content.classList.add(ITEM_SLIDING_CLASS); @@ -181,7 +181,7 @@ ReorderDrag.prototype.drag = function(e) { var _this = this; - window.requestAnimationFrame(function() { + window.rAF(function() { // We really aren't dragging if(!_this._currentDrag) { return; diff --git a/js/views/loadingView.js b/js/views/loadingView.js index 049d119670..cd776a3d6e 100644 --- a/js/views/loadingView.js +++ b/js/views/loadingView.js @@ -21,18 +21,16 @@ var _this = this; if(this._loadingBox) { - //window.requestAnimationFrame(function() { - var lb = _this._loadingBox; + var lb = _this._loadingBox; - var width = Math.min(_this.maxWidth, Math.max(window.outerWidth - 40, lb.offsetWidth)); + var width = Math.min(_this.maxWidth, Math.max(window.outerWidth - 40, lb.offsetWidth)); - lb.style.width = width; + lb.style.width = width; - lb.style.marginLeft = (-lb.offsetWidth) / 2 + 'px'; - lb.style.marginTop = (-lb.offsetHeight) / 2 + 'px'; + lb.style.marginLeft = (-lb.offsetWidth) / 2 + 'px'; + lb.style.marginTop = (-lb.offsetHeight) / 2 + 'px'; - _this.el.classList.add('active'); - //}); + _this.el.classList.add('active'); } }, hide: function() { diff --git a/js/views/popupView.js b/js/views/popupView.js index 57c69b1f19..bdc8ecec4d 100644 --- a/js/views/popupView.js +++ b/js/views/popupView.js @@ -22,7 +22,7 @@ alert: function(message) { var _this = this; - window.requestAnimationFrame(function() { + window.rAF(function() { _this.setTitle(message); _this.el.classList.add('active'); }); diff --git a/js/views/scrollView.js b/js/views/scrollView.js index 8a05872b1c..b2526ffe0b 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -430,7 +430,7 @@ this.el.style.webkitTransitionDuration = '0'; - window.requestAnimationFrame(function() { + window.rAF(function() { if(_this.wrapScrollPosition(_this.bounceTime)) { _this._didEndScroll = true; } @@ -545,7 +545,7 @@ var drag = _this._drag; // Request an animation frame to batch DOM reads/writes - window.requestAnimationFrame(function() { + window.rAF(function() { // We are dragging, grab the current content height var totalWidth = _this.el.scrollWidth; @@ -650,7 +650,7 @@ // animate to that position _animateToStop: function(e) { var _this = this; - window.requestAnimationFrame(function() { + window.rAF(function() { var drag = _this._drag; diff --git a/js/views/slideBox.js b/js/views/slideBox.js index 2c8dea0d18..ecfab82c5f 100644 --- a/js/views/slideBox.js +++ b/js/views/slideBox.js @@ -192,7 +192,7 @@ var _this = this, finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX; - window.requestAnimationFrame(function() { + window.rAF(function() { // We didn't have a drag, so just init and leave if(!_this._drag) { @@ -285,7 +285,7 @@ _handleDrag: function(e) { var _this = this; - window.requestAnimationFrame(function() { + window.rAF(function() { var content; // We really aren't dragging