Merge pull request #904 from plotly/request-animation-frame-polyfill

Add a requestAnimationFrame polyfill

Author: rreusser

dist/extras/request_animation_frame.js

@@ -0,0 +1,42 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+// This code adapted 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 and Tino Zijdel
+
+// MIT license
+
+
+'use strict';
+
+if(!Date.now) {
+    Date.now = function() { return new Date().getTime(); };
+}
+
+var vendors = ['webkit', 'moz'];
+for(var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
+    var vp = vendors[i];
+    window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
+    window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame'] ||
+                                   window[vp + 'CancelRequestAnimationFrame']);
+}
+if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || // iOS6 is buggy
+    !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+    var lastTime = 0;
+    window.requestAnimationFrame = function(callback) {
+        var now = Date.now();
+        var nextTime = Math.max(lastTime + 16, now);
+        return setTimeout(function() { callback(lastTime = nextTime); },
+                          nextTime - now);
+    };
+    window.cancelAnimationFrame = clearTimeout;
+}

src/components/rangeslider/create_slider.js

@@ -221,16 +221,9 @@ module.exports = function createSlider(gd) {
     }
 
     function setDataRange(dataMin, dataMax) {
-
-        if(window.requestAnimationFrame) {
-            window.requestAnimationFrame(function() {
-                Plotly.relayout(gd, 'xaxis.range', [dataMin, dataMax]);
-            });
-        } else {
-            setTimeout(function() {
-                Plotly.relayout(gd, 'xaxis.range', [dataMin, dataMax]);
-            }, 16);
-        }
+        window.requestAnimationFrame(function() {
+            Plotly.relayout(gd, 'xaxis.range', [dataMin, dataMax]);
+        });
     }
 
 

tasks/stats.js

@@ -52,6 +52,7 @@ function getInfoContent() {
         '',
         '```html',
         '<script>if(typeof window.Int16Array !== \'function\')document.write("<scri"+"pt src=\'extras/typedarray.min.js\'></scr"+"ipt>");</script>',
+        '<script>document.write("<scri"+"pt src=\'extras/request_animation_frame.js\'></scr"+"ipt>");</script>',
         '```',
         '',
         'before the plotly.js script tag.',