add newer rAF ployfill

mojs-contrib · Jul 2, 2015 · 0541c7f · 0541c7f
1 parent 0f2da04
commit 0541c7f
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 107 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "mojs",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.123.0",
+  "version": "0.123.1",
   "license": "MIT",
   "homepage": "https://github.com/legomushroom/mojs",
   "authors": [

diff --git a/build/mo.js b/build/mo.js
@@ -1,7 +1,7 @@
 /*! 
 	:: mo · js :: motion graphics toolbelt for the web
 	Oleg Solomka @LegoMushroom 2015 MIT
-	0.123.0 
+	0.123.1 
 */
 
 (function(f){
@@ -1320,7 +1320,7 @@ module.exports = h;
 var mojs;
 
 mojs = {
-  revision: '0.123.0',
+  revision: '0.123.1',
   isDebug: true,
   helpers: require('./h'),
   Bit: require('./shapes/bit'),
@@ -2053,32 +2053,30 @@ module.exports = PathEasing;
 },{}],9:[function(require,module,exports){
 
 (function() {
-  var k, lastTime, vendors, x;
-  lastTime = 0;
-  x = 0;
-  vendors = ["ms", "moz", "webkit", "o"];
-  while (x < vendors.length && !window.requestAnimationFrame) {
-    window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
-    k = window[vendors[x] + "CancelRequestAnimationFrame"];
-    window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || k;
-    ++x;
+  'use strict';
+  var cancel, i, isOldBrowser, lastTime, vendors, vp, w;
+  vendors = ['webkit', 'moz'];
+  i = 0;
+  w = window;
+  while (i < vendors.length && !w.requestAnimationFrame) {
+    vp = vendors[i];
+    w.requestAnimationFrame = w[vp + 'RequestAnimationFrame'];
+    cancel = w[vp + 'CancelAnimationFrame'];
+    w.cancelAnimationFrame = cancel || w[vp + 'CancelRequestAnimationFrame'];
+    ++i;
   }
-  if (!window.requestAnimationFrame) {
-    window.requestAnimationFrame = function(callback, element) {
-      var currTime, id, timeToCall;
-      currTime = new Date().getTime();
-      timeToCall = Math.max(0, 16 - (currTime - lastTime));
-      id = window.setTimeout(function() {
-        callback(currTime + timeToCall);
-      }, timeToCall);
-      lastTime = currTime + timeToCall;
-      return id;
-    };
-  }
-  if (!window.cancelAnimationFrame) {
-    window.cancelAnimationFrame = function(id) {
-      clearTimeout(id);
+  isOldBrowser = !w.requestAnimationFrame || !w.cancelAnimationFrame;
+  if (/iP(ad|hone|od).*OS 6/.test(w.navigator.userAgent) || isOldBrowser) {
+    lastTime = 0;
+    w.requestAnimationFrame = function(callback) {
+      var nextTime, now;
+      now = Date.now();
+      nextTime = Math.max(lastTime + 16, now);
+      return setTimeout((function() {
+        callback(lastTime = nextTime);
+      }), nextTime - now);
     };
+    w.cancelAnimationFrame = clearTimeout;
   }
 })();
 

diff --git a/build/mo.min.js b/build/mo.min.js
diff --git a/docs/js/mojs.coffee.html b/docs/js/mojs.coffee.html
@@ -33,7 +33,7 @@
 
 
         <div class="code"><div class="wrapper">mojs =
-  <span class="hljs-attribute">revision</span>:   <span class="hljs-string">'0.123.0'</span>, <span class="hljs-attribute">isDebug</span>: <span class="hljs-literal">true</span>
+  <span class="hljs-attribute">revision</span>:   <span class="hljs-string">'0.123.1'</span>, <span class="hljs-attribute">isDebug</span>: <span class="hljs-literal">true</span>
   helpers     : <span class="hljs-built_in">require</span> <span class="hljs-string">'./h'</span>
   Bit         : <span class="hljs-built_in">require</span> <span class="hljs-string">'./shapes/bit'</span>
   bitsMap     : <span class="hljs-built_in">require</span> <span class="hljs-string">'./shapes/bitsMap'</span>

diff --git a/docs/js/polyfills/raf.coffee.html b/docs/js/polyfills/raf.coffee.html
@@ -33,36 +33,44 @@
 
         <div class="comments ">
           <div class="wrapper"><p>istanbul ignore next
-raf polyfill</p>
+Adapted from <a href="https://gist.github.com/paulirish/1579671">https://gist.github.com/paulirish/1579671</a> which derived from 
+<a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">http://paulirish.com/2011/requestanimationframe-for-smart-animating/</a>
+<a href="http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating">http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating</a>
+requestAnimationFrame polyfill by Erik Möller.
+Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
+MIT license</p>
 </div>
         </div>
 
 
-        <div class="code"><div class="wrapper">(<span class="hljs-function">-&gt;</span>
-  lastTime = <span class="hljs-number">0</span>; x = <span class="hljs-number">0</span>
-  vendors = [<span class="hljs-string">"ms"</span>, <span class="hljs-string">"moz"</span>, <span class="hljs-string">"webkit"</span>, <span class="hljs-string">"o"</span> ]
+        <div class="code"><div class="wrapper"><span class="hljs-keyword">do</span> -&gt;
+  <span class="hljs-string">'use strict'</span>
+  vendors = [
+    <span class="hljs-string">'webkit'</span>
+    <span class="hljs-string">'moz'</span>
+  ]
+  i = <span class="hljs-number">0</span>
+  w = <span class="hljs-built_in">window</span>
+  <span class="hljs-keyword">while</span> i &lt; vendors.length <span class="hljs-keyword">and</span> !w.requestAnimationFrame
+    vp = vendors[i]
+    w.requestAnimationFrame = w[vp + <span class="hljs-string">'RequestAnimationFrame'</span>]
+    cancel = w[vp + <span class="hljs-string">'CancelAnimationFrame'</span>]
+    w.cancelAnimationFrame = cancel <span class="hljs-keyword">or</span> w[vp + <span class="hljs-string">'CancelRequestAnimationFrame'</span>]
+    ++i
+  isOldBrowser = !w.requestAnimationFrame <span class="hljs-keyword">or</span> !w.cancelAnimationFrame
+  <span class="hljs-keyword">if</span> <span class="hljs-regexp">/iP(ad|hone|od).*OS 6/</span>.test(w.navigator.userAgent) <span class="hljs-keyword">or</span> isOldBrowser
+    lastTime = <span class="hljs-number">0</span>
 
-  <span class="hljs-keyword">while</span> x &lt; vendors.length <span class="hljs-keyword">and</span> <span class="hljs-keyword">not</span> <span class="hljs-built_in">window</span>.requestAnimationFrame
-    <span class="hljs-built_in">window</span>.requestAnimationFrame = <span class="hljs-built_in">window</span>[vendors[x] + <span class="hljs-string">"RequestAnimationFrame"</span>]
-    k = <span class="hljs-built_in">window</span>[vendors[x] + <span class="hljs-string">"CancelRequestAnimationFrame"</span>]
-    <span class="hljs-built_in">window</span>.cancelAnimationFrame = <span class="hljs-built_in">window</span>[vendors[x]+<span class="hljs-string">"CancelAnimationFrame"</span>] <span class="hljs-keyword">or</span> k
-    ++x
-  <span class="hljs-keyword">unless</span> <span class="hljs-built_in">window</span>.requestAnimationFrame
-    <span class="hljs-built_in">window</span>.requestAnimationFrame = <span class="hljs-function"><span class="hljs-params">(callback, element)</span> -&gt;</span>
-      currTime = <span class="hljs-keyword">new</span> Date().getTime()
-      timeToCall = Math.max(<span class="hljs-number">0</span>, <span class="hljs-number">16</span> - (currTime - lastTime))
-      id = <span class="hljs-built_in">window</span>.setTimeout(<span class="hljs-function">-&gt;</span>
-        callback currTime + timeToCall
+    w.requestAnimationFrame = <span class="hljs-function"><span class="hljs-params">(callback)</span> -&gt;</span>
+      now = Date.now()
+      nextTime = Math.max(lastTime + <span class="hljs-number">16</span>, now)
+      setTimeout (<span class="hljs-function">-&gt;</span>
+        callback lastTime = nextTime
         <span class="hljs-keyword">return</span>
-      , timeToCall)
-      lastTime = currTime + timeToCall
-      id
-  <span class="hljs-keyword">unless</span> <span class="hljs-built_in">window</span>.cancelAnimationFrame
-    <span class="hljs-built_in">window</span>.cancelAnimationFrame = <span class="hljs-function"><span class="hljs-params">(id)</span> -&gt;</span>
-      clearTimeout id
-      <span class="hljs-keyword">return</span>
-  <span class="hljs-keyword">return</span>
-)()</div></div>
+      ), nextTime - now
+
+    w.cancelAnimationFrame = clearTimeout
+  <span class="hljs-keyword">return</span></div></div>
 
       </div>
 

diff --git a/js/mojs.coffee b/js/mojs.coffee
@@ -1,6 +1,6 @@
 
 mojs =
-  revision:   '0.123.0', isDebug: true
+  revision:   '0.123.1', isDebug: true
   helpers     : require './h'
   Bit         : require './shapes/bit'
   bitsMap     : require './shapes/bitsMap'

diff --git a/js/polyfills/raf.coffee b/js/polyfills/raf.coffee
@@ -1,27 +1,36 @@
 ### istanbul ignore next ###
-# raf polyfill
-(->
-  lastTime = 0; x = 0
-  vendors = ["ms", "moz", "webkit", "o" ]
+# Adapted from https://gist.github.com/paulirish/1579671 which derived from 
+# http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+# http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+# requestAnimationFrame polyfill by Erik Möller.
+# Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
+# MIT license
 
-  while x < vendors.length and not window.requestAnimationFrame
-    window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"]
-    k = window[vendors[x] + "CancelRequestAnimationFrame"]
-    window.cancelAnimationFrame = window[vendors[x]+"CancelAnimationFrame"] or k
-    ++x
-  unless window.requestAnimationFrame
-    window.requestAnimationFrame = (callback, element) ->
-      currTime = new Date().getTime()
-      timeToCall = Math.max(0, 16 - (currTime - lastTime))
-      id = window.setTimeout(->
-        callback currTime + timeToCall
+do ->
+  'use strict'
+  vendors = [
+    'webkit'
+    'moz'
+  ]
+  i = 0
+  w = window
+  while i < vendors.length and !w.requestAnimationFrame
+    vp = vendors[i]
+    w.requestAnimationFrame = w[vp + 'RequestAnimationFrame']
+    cancel = w[vp + 'CancelAnimationFrame']
+    w.cancelAnimationFrame = cancel or w[vp + 'CancelRequestAnimationFrame']
+    ++i
+  isOldBrowser = !w.requestAnimationFrame or !w.cancelAnimationFrame
+  if /iP(ad|hone|od).*OS 6/.test(w.navigator.userAgent) or isOldBrowser
+    lastTime = 0
+
+    w.requestAnimationFrame = (callback) ->
+      now = Date.now()
+      nextTime = Math.max(lastTime + 16, now)
+      setTimeout (->
+        callback lastTime = nextTime
         return
-      , timeToCall)
-      lastTime = currTime + timeToCall
-      id
-  unless window.cancelAnimationFrame
-    window.cancelAnimationFrame = (id) ->
-      clearTimeout id
-      return
-  return
-)()
+      ), nextTime - now
+
+    w.cancelAnimationFrame = clearTimeout
+  return
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mo-js",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.123.0",
+  "version": "0.123.1",
   "license": "MIT",
   "private": false,
   "scripts": {

diff --git a/spec/mo.spec.js b/spec/mo.spec.js
@@ -1318,7 +1318,7 @@ module.exports = h;
 var mojs;
 
 mojs = {
-  revision: '0.123.0',
+  revision: '0.123.1',
   isDebug: true,
   helpers: require('./h'),
   Bit: require('./shapes/bit'),
@@ -2062,32 +2062,30 @@ module.exports = PathEasing;
 
 /* istanbul ignore next */
 (function() {
-  var k, lastTime, vendors, x;
-  lastTime = 0;
-  x = 0;
-  vendors = ["ms", "moz", "webkit", "o"];
-  while (x < vendors.length && !window.requestAnimationFrame) {
-    window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
-    k = window[vendors[x] + "CancelRequestAnimationFrame"];
-    window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || k;
-    ++x;
+  'use strict';
+  var cancel, i, isOldBrowser, lastTime, vendors, vp, w;
+  vendors = ['webkit', 'moz'];
+  i = 0;
+  w = window;
+  while (i < vendors.length && !w.requestAnimationFrame) {
+    vp = vendors[i];
+    w.requestAnimationFrame = w[vp + 'RequestAnimationFrame'];
+    cancel = w[vp + 'CancelAnimationFrame'];
+    w.cancelAnimationFrame = cancel || w[vp + 'CancelRequestAnimationFrame'];
+    ++i;
   }
-  if (!window.requestAnimationFrame) {
-    window.requestAnimationFrame = function(callback, element) {
-      var currTime, id, timeToCall;
-      currTime = new Date().getTime();
-      timeToCall = Math.max(0, 16 - (currTime - lastTime));
-      id = window.setTimeout(function() {
-        callback(currTime + timeToCall);
-      }, timeToCall);
-      lastTime = currTime + timeToCall;
-      return id;
-    };
-  }
-  if (!window.cancelAnimationFrame) {
-    window.cancelAnimationFrame = function(id) {
-      clearTimeout(id);
+  isOldBrowser = !w.requestAnimationFrame || !w.cancelAnimationFrame;
+  if (/iP(ad|hone|od).*OS 6/.test(w.navigator.userAgent) || isOldBrowser) {
+    lastTime = 0;
+    w.requestAnimationFrame = function(callback) {
+      var nextTime, now;
+      now = Date.now();
+      nextTime = Math.max(lastTime + 16, now);
+      return setTimeout((function() {
+        callback(lastTime = nextTime);
+      }), nextTime - now);
     };
+    w.cancelAnimationFrame = clearTimeout;
   }
 })();
 

diff --git a/todo.md b/todo.md
@@ -1,5 +1,13 @@
 ## TODO
 
+- merge timeline and tween
+- make setPrefixedStyle alias (or style method)
+- add el warn on Motion Path (if wasnt specified)
+- add motion path stagger
+- ability to add a module to tween
+- add new rAF polyfill
+- add easing inverse method
+
 - fix coverage
 - release
   - docs