Create optional animation and select my show frame #44

.gitignore

@@ -1,3 +1,5 @@
 coverage/
 .DS_Store
 node_modules
+*.html
+*.png

dist/origami.js

@@ -17,8 +17,7 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
- *
- * Date: 2016-10-08T20:47Z
+ * Date: 2016-10-23T15:49Z
  */
 
 (function( window ) {
@@ -716,55 +715,55 @@ Origami.border = function() {
   return this;
 }
 
-function CSSShape(style) {
-  var self = this,
-    style = config.virtualStyles[style];
-
-  if (!style)
-    return self;
-
-  // TODO: Draw in all canvas
-  var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' +
-    self.paper.width + 'px" height="' + self.paper.height + 'px">' +
-    '<foreignObject width="100%" height="100%">' +
-    '<div xmlns="http://www.w3.org/1999/xhtml">' +
-    '<div style="' + style.cssText + '"></div>' +
-    '</div></foreignObject>' +
-    '</svg>';
-
-  var DOMURL = window.URL || window.webkitURL || window,
-    img = new Image(),
-    svg = new Blob([data], {
-      type: 'image/svg+xml;charset=utf-8'
-    });
-
-  var url = DOMURL.createObjectURL(svg);
-  img.src = url;
-
-  img.addEventListener('load', function() {
-    self.paper.ctx.beginPath();
-    self.paper.ctx.drawImage(img, 0, 0);
-    DOMURL.revokeObjectURL(url);
-    self.paper.ctx.closePath();
-  });
-
-  return self;
-}
-
-Screen.prototype.CSSShape = CSSShape;
-
-Origami.shape = function(style) {
-  queue('CSSShape', style);
-  return this;
-};
+function CSSShape(style) {
+  var self = this,
+    style = config.virtualStyles[style];
+
+  if (!style)
+    return self;
+
+  // TODO: Draw in all canvas
+  var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' +
+    self.paper.width + 'px" height="' + self.paper.height + 'px">' +
+    '<foreignObject width="100%" height="100%">' +
+    '<div xmlns="http://www.w3.org/1999/xhtml">' +
+    '<div style="' + style.cssText + '"></div>' +
+    '</div></foreignObject>' +
+    '</svg>';
+
+  var DOMURL = window.URL || window.webkitURL || window,
+    img = new Image(),
+    svg = new Blob([data], {
+      type: 'image/svg+xml;charset=utf-8'
+    });
+
+  var url = DOMURL.createObjectURL(svg);
+  img.src = url;
+
+  img.addEventListener('load', function() {
+    self.paper.ctx.beginPath();
+    self.paper.ctx.drawImage(img, 0, 0);
+    DOMURL.revokeObjectURL(url);
+    self.paper.ctx.closePath();
+  });
+
+  return self;
+}
+
+Screen.prototype.CSSShape = CSSShape;
+
+Origami.shape = function(style) {
+  queue('CSSShape', style);
+  return this;
+};
 
 function SpriteShape(params) {
   var properties = params.properties,
     dw = params.width / properties.frames;
 
   drawSprite.call(this, {
     image: params.image,
-    posX: 0,
+    posX: (properties.frame > 0 && properties.frame <= properties.frames ? (dw *(properties.frame -1)) : 0),
     posY: 0,
     frame: properties.frames,
     loop: properties.loop,
@@ -774,7 +773,9 @@ function SpriteShape(params) {
     dx: params.x,
     dy: params.y,
     speed: properties.speed,
-    animation: null
+    update: null,
+    animation: properties.animation === true ? true : false,
+    loop: properties.loop === true ? true : false
   });
 }
 
@@ -783,7 +784,7 @@ function drawSprite(sprite) {
 
   if (sprite.posX === sprite.widthTotal) {
     if (sprite.loop === false) {
-      window.cancelAnimationFrame(sprite.animation);
+      window.cancelAnimationFrame(sprite.update);
       return;
     }
     sprite.posX = 0;
@@ -797,11 +798,13 @@ function drawSprite(sprite) {
     sprite.width, sprite.height);
   self.paper.ctx.closePath();
 
-  sprite.posX = sprite.posX + sprite.width;
+  if (sprite.animation) {
+    sprite.posX = sprite.posX + sprite.width;
+  }
 
   setTimeout(function() {
-    sprite.animation = window.requestAnimationFrame(drawSprite.bind(self, sprite));
-  }, sprite.speed);
+      sprite.update = window.requestAnimationFrame(drawSprite.bind(self, sprite));
+    }, sprite.speed);
 }
 
 Screen.prototype.sprite = SpriteShape;