Added DOM compatibility. v.0.2.0.

jeremyckahn · Nov 20, 2011 · 2e4ef19 · 2e4ef19
1 parent 212faf4
commit 2e4ef19
Show file tree

Hide file tree

Showing 7 changed files with 448 additions and 66 deletions.
diff --git a/build.sh b/build.sh
@@ -15,6 +15,7 @@ echo \
 cat /tmp/rekapi.header.js \
   src/rekapi.core.js \
   src/rekapi.actor.js \
+  src/rekapi.dom.js \
   src/rekapi.canvas.js \
   src/rekapi.interpolate.js \
   > dist/rekapi.js

diff --git a/demo/catimate.html b/demo/catimate.html
@@ -5,45 +5,20 @@
   <script src="../dist/underscore.js"></script>
   <script src="../dist/shifty.js"></script>
   <script src="../dist/rekapi.min.js"></script>
-  <!--<script src="../src/rekapi.core.js"></script>-->
-  <!--<script src="../src/rekapi.actor.js"></script>-->
-  <!--<script src="../src/rekapi.canvas.js"></script>-->
-  <!--<script src="../src/rekapi.interpolate.js"></script>-->
+  <!--<script src="../src/rekapi.core.js"></script>
+  <script src="../src/rekapi.actor.js"></script>
+  <script src="../src/rekapi.canvas.js"></script>
+  <script src="../src/rekapi.interpolate.js"></script>
+  <script src="../src/rekapi.dom.js"></script>-->
 </head>
 <body>
-  <canvas></canvas>
-  <!-- This is the laziest image preload known to man. -->
-  <img src="img/octocat.png" style="position: absolute; left: -10000em;" />
+  <div id="canvas">
+    <img src="img/octocat.png">
+  </div>
   <script>
   (function (global) {
 
-    var catUrl = document.getElementsByTagName('img')[0].src,
-        catImg = new Image();
-
-    catImg.src = catUrl;
-
-    function degToRad (deg) {
-      return (deg / 180) * Math.PI;
-    }
-
-
-    function makeCatActor () {
-      return new Kapi.Actor({
-        'draw': function (context, state) {
-          context.rotate(degToRad(state.rotate || 0));
-          context.drawImage(
-            catImg, 
-            state.x, 
-            state.y, 
-            256, 
-            256);
-          context.rotate(-degToRad(state.rotate || 0));
-        }
-      });
-    }
-
-
-    var canvas = document.getElementsByTagName('canvas')[0]
+    var canvas = document.getElementById('canvas')
         ,kapi = new Kapi(canvas, {
           'fps': 60
           ,'height': 500
@@ -53,37 +28,41 @@
         ,time = 0;
 
     kapi.canvas_style('background', '#eee');
-    cat = makeCatActor();
+    kapi.canvas_style('overflow', 'hidden');
+    cat = new Kapi.DOMActor(document.getElementsByTagName('img')[0]);
     kapi.addActor(cat);
 
     cat
       .keyframe(time, {
-        'x': -240
-        ,'y': -160
+        'left': '-240px'
+        ,'top': '-160px'
+        ,'rotate': 0
       }).keyframe(time += 1200, {
-        'x': 300
-        ,'y': 250
+        'left': '300px'
+        ,'top': '250px'
       }, 'bouncePast')
       .liveCopy(time += 400)
       .keyframe(time += 700, {
-        'x': 50
+        'left': '50px'
         ,'rotate': 0
       }, 'easeInOutBack')
       .liveCopy(time += 150)
       .keyframe(time += 850, {
-        'x': -256
-        ,'y': 344
+        'left': '344px'
+        ,'top': '0px'
         ,'rotate': -90
-      }, 'easeFromTo')
+      }, {
+        'left': 'easeFromTo'
+        ,'top': 'easeInOutCubic'
+        ,'rotate': 'bouncePast'
+      })
       .keyframe(time += 700, {
-        'x': -800
+        'top': '800px'
       }, 'easeFrom')
       .liveCopy(time += 500);
 
-    catImg.onload = function () {
-      kapi.play();
-    }
-
+    kapi.play();
+
   } (this));
   </script>
 </body>

diff --git a/dist/rekapi.js b/dist/rekapi.js
@@ -1,5 +1,5 @@
 /**
- * Rekapi - Rewritten Kapi. v0.1.16
+ * Rekapi - Rewritten Kapi. v0.2.0
  *   By Jeremy Kahn - jeremyckahn@gmail.com
  *   https://github.com/jeremyckahn/rekapi
  *
@@ -316,6 +316,10 @@
    * @returns {Kapi}
    */
   gk.prototype.pause = function () {
+    if (this._playState === playState.PAUSED) {
+      return this;
+    }
+
     this._playState = playState.PAUSED;
     clearTimeout(this._loopId);
     this._pausedAtTime = now();
@@ -346,6 +350,10 @@
     // also kill any shifty tweens that are running.
     _.each(this._actors, function (actor) {
       actor.stop();
+
+      if (alsoClear === true) {
+        actor.hide();
+      }
     });
 
     return this;
@@ -884,6 +892,88 @@
    */
 
 } (this));
+;(function rekapiDOM (global) {
+  var gk
+      ,getStyle
+      ,transforms;
+
+  gk = global.Kapi;
+  transforms = [
+    'transform'
+    ,'webkitTransform'
+    ,'MozTransform'
+    ,'oTransform'
+    ,'msTransform'];
+
+  if (!global.getComputedStyle) {
+    return;
+  }
+
+  function getStyle (forElement, styleName) {
+    return global.getComputedStyle(forElement).getPropertyValue(styleName);
+  }
+
+  function setStyle (forElement, styleName, styleValue) {
+    forElement.style[styleName] = styleValue;
+  }
+
+  function hideElement (element) {
+    setStyle(element, 'display', 'none');
+  }
+
+  function showElement (element) {
+    setStyle(element, 'display', 'block');
+  }
+
+  gk.DOMActor = function (element) {
+    var actor;
+
+    actor = new gk.Actor ({
+      'setup': function () {
+        if (getStyle(this.kapi.canvas_getContext(), 'position') === 'static') {
+          setStyle(this.kapi.canvas_getContext(), 'position', 'relative');
+        }
+
+        if (getStyle(element, 'position') === 'static') {
+          setStyle(element, 'position', 'absolute');
+        }
+      }
+
+      ,'draw': function (canvas_context, state) {
+        var isShowing;
+
+        isShowing = false;
+
+        _.each(state, function (styleValue, styleName) {
+          isShowing = true;
+
+          if (styleName === 'rotate') {
+            _.each(transforms, function (transform) {
+              setStyle(element, transform, 'rotate(' + styleValue + 'deg)')
+            });
+          } else {
+            setStyle(element, styleName, styleValue);
+          }
+        });
+
+        isShowing ? showElement(element) : hideElement(element);
+      }
+    });
+
+    actor.show = function (alsoPersist) {
+      gk.Actor.prototype.show.call(this, alsoPersist);
+      showElement(element);
+    };
+
+    actor.hide = function (alsoUnpersist) {
+      gk.Actor.prototype.hide.call(this, alsoUnpersist);
+      hideElement(element);
+    };
+
+    return actor;
+  };
+
+}(this));
 ;(function rekapiCanvas (global) {
 
   var gk,