Merge pull request #104 from openseadragon/raf

Our requestAnimationFrame no longer changes the global window object

src/openseadragon.js

@@ -1644,33 +1644,31 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
     };
         
 
-    // Adding support for HTML5's requestAnimationFrame as suggested by acdha
+    // Adding support for HTML5's requestAnimationFrame as suggested by acdha.
-    // implementation taken from matt synders post here:s
+    // Implementation taken from matt synder's post here:
     // http://mattsnider.com/cross-browser-and-legacy-supported-requestframeanimation/
     (function( w ) {
 
         // most browsers have an implementation
-        w.requestAnimationFrame = w.requestAnimationFrame ||
+        var requestAnimationFrame = w.requestAnimationFrame ||
             w.mozRequestAnimationFrame || 
             w.webkitRequestAnimationFrame ||
             w.msRequestAnimationFrame;
 
-        w.cancelAnimationFrame = w.cancelAnimationFrame ||
+        var cancelAnimationFrame = w.cancelAnimationFrame ||
             w.mozCancelAnimationFrame || 
             w.webkitCancelAnimationFrame ||
             w.msCancelAnimationFrame;
 
-
         // polyfill, when necessary
-        if ( w.requestAnimationFrame && w.cancelAnimationFrame ) {
+        if ( requestAnimationFrame && cancelAnimationFrame ) {
-            //we cant assign window.requestAnimationFrame directly to $.requestAnimationFrame
+            // We can't assign these window methods directly to $ because they
-            //without getting Illegal Invocation errors in webkit so call in a
+            // expect their "this" to be "window", so we call them in wrappers.
-            //wrapper
+            $.requestAnimationFrame = function(){
-            $.requestAnimationFrame = function( callback ){ 
+                return requestAnimationFrame.apply( w, arguments );
-                return w.requestAnimationFrame( callback );
             };
-            $.cancelAnimationFrame = function( requestId ){ 
+            $.cancelAnimationFrame = function(){
-                return w.cancelAnimationFrame( requestId );
+                return cancelAnimationFrame.apply( w, arguments );
             };
         } else {
             var aAnimQueue = [],

test/utils.js

@@ -62,4 +62,30 @@
         });
     });
 
+    // ----------
+    asyncTest("requestAnimationFrame", function() {
+        var timeWatcher = Util.timeWatcher();
+
+        OpenSeadragon.requestAnimationFrame(function() {
+            ok(true, 'frame fired');
+            timeWatcher.done();
+        });
+    });
+
+    // ----------
+    asyncTest("cancelAnimationFrame", function() {
+        var frameFired = false;
+
+        setTimeout(function() {
+            strictEqual(frameFired, false, 'the frame never fired');
+            start();
+        }, 150);
+
+        var frameId = OpenSeadragon.requestAnimationFrame(function() {
+            frameFired = true;
+        });
+
+        OpenSeadragon.cancelAnimationFrame(frameId);
+    });
+
 })();