Add roam plugin.

src/plugins/roam/roam.js

@@ -13,6 +13,12 @@
 ( function( document, window ) {
     "use strict";
     var api = window.impress();
+    var gc = api.lib.gc;
+
+    // Stores the active state of impress.
+    // It will be set to `true` when impress inits,
+    // and set to `false` when `impress().tear()` is called.
+    var impressActive;
 
     // Seconds per frame, used to calculate the value move or rotate each time.
     var spf;
@@ -39,7 +45,12 @@
 
     // Called every time before the browser renders the frame to change the view by moving, rotating or both of them.
     function roamAnimationFrame( timestamp ) {
-        // Request to be called before next time the frame renders.
+        if ( !impressActive ) {
+            // Stop requesting animation frame and do nothing for the coming frame if impress is no longer active.
+            return;
+        }
+
+        // Request to be called before next time the frame renders as long as impress is active.
         window.requestAnimationFrame( roamAnimationFrame );
 
         // The value of `spfNow` is the timestamp when the browser rendered last frame,
@@ -59,7 +70,7 @@
         //
         // The `getVectorQuaternion()` function here converts a vector( which contains x, y and z coordinates )
         // in the step( which might be rotated ) coordinate system to the world coordinate system
-        // so that could be used to move the step int the world coordinate system.
+        // so that could be used to move the step in the world coordinate system.
         //
         // For those who missed the computer graphics lessons, you may say, "But whay quaternion?".
         // That's because CSS rotation uses Euler angles which is not easy to calculate,
@@ -90,59 +101,59 @@
 
             // And here comes math.
             var rotateQuaternion;
-            switch ( ( presentStep.dataset.rotateOrder || 'xyz' ).toUpperCase() ){
-                case 'XYZ':
+            switch ( ( presentStep.dataset.rotateOrder || "xyz" ).toUpperCase() ) {
+                case "XYZ":
                     rotateQuaternion = [
                         c1 * c2 * c3 - s1 * s2 * s3,
                         s1 * c2 * c3 + c1 * s2 * s3,
                         c1 * s2 * c3 - s1 * c2 * s3,
                         c1 * c2 * s3 + s1 * s2 * c3
-                    ]
+                    ];
                     break;
 
-                case 'YXZ':
+                case "YXZ":
                     rotateQuaternion = [
                         c1 * c2 * c3 + s1 * s2 * s3,
                         s1 * c2 * c3 + c1 * s2 * s3,
                         c1 * s2 * c3 - s1 * c2 * s3,
                         c1 * c2 * s3 - s1 * s2 * c3
-                    ]
+                    ];
                     break;
 
-                case 'ZXY':
+                case "ZXY":
                     rotateQuaternion = [
                         c1 * c2 * c3 - s1 * s2 * s3,
                         s1 * c2 * c3 - c1 * s2 * s3,
                         c1 * s2 * c3 + s1 * c2 * s3,
                         c1 * c2 * s3 + s1 * s2 * c3
-                    ]
+                    ];
                     break;
 
-                case 'ZYX':
+                case "ZYX":
                     rotateQuaternion = [
                         c1 * c2 * c3 + s1 * s2 * s3,
                         s1 * c2 * c3 - c1 * s2 * s3,
                         c1 * s2 * c3 + s1 * c2 * s3,
                         c1 * c2 * s3 - s1 * s2 * c3
-                    ]
+                    ];
                     break;
 
-                case 'YZX':
+                case "YZX":
                     rotateQuaternion = [
                         c1 * c2 * c3 - s1 * s2 * s3,
                         s1 * c2 * c3 + c1 * s2 * s3,
                         c1 * s2 * c3 + s1 * c2 * s3,
                         c1 * c2 * s3 - s1 * s2 * c3
-                    ]
+                    ];
                     break;
 
-                case 'XZY':
+                case "XZY":
                     rotateQuaternion = [
                         c1 * c2 * c3 + s1 * s2 * s3,
                         s1 * c2 * c3 - c1 * s2 * s3,
                         c1 * s2 * c3 - s1 * c2 * s3,
                         c1 * c2 * s3 + s1 * s2 * c3
-                    ]
+                    ];
                     break;
             }
 
@@ -236,19 +247,35 @@
         }
     }
 
-    // Init `roams.keys` with `""`, which means no key's pressed down.
-    roams.keys = "";
-    Array.from( roamKeys ).forEach( ( key ) => {
-        roams[ key ] = {
-            start: undefined
-        };
-    } );
+    document.addEventListener( "impress:init", function() {
+        // Update `api` and `gc` to current ones.
+        api = window.impress();
+        gc = api.lib.gc;
 
-    // Request to be called before next frame renders.
-    // And every single frame after is going to be called in the `roamAnimationFrame()` function.
-    window.requestAnimationFrame( roamAnimationFrame );
+        // Stop requesting animation frame when `impress().tear()` is called.
+        api.tear = new Proxy( api.tear, {
+            apply ( target, thisArg, argumentsList ) {
+                impressActive = false;
+                target.apply( thisArg, argumentsList );
+            }
+        } );
 
-    // Make the keys controlling.
-    document.addEventListener( "keydown", eventHandler );
-    document.addEventListener( "keyup", eventHandler );
+        // Init `roams.keys` with `""`, which means no key's pressed down.
+        roams.keys = "";
+        Array.from( roamKeys ).forEach( ( key ) => {
+            roams[ key ] = {
+                start: undefined
+            };
+        } );
+
+        // Make the keys controlling.
+        gc.addEventListener( document, "keydown", eventHandler );
+        gc.addEventListener( document, "keyup", eventHandler );
+
+        impressActive = true;
+
+        // Request to be called before next frame renders.
+        // And every single frame after is going to be called in the `roamAnimationFrame()` function.
+        window.requestAnimationFrame( roamAnimationFrame );
+    } );
 } )( document, window );