Inluded pull-request from @KyleBanks to support multiple sprites with…

… multiple rows. Also some general code refactoring and enhancements.
umairda · Jul 9, 2015 · 02d61bc · 02d61bc
1 parent 8479cb1
commit 02d61bc
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 89 deletions.
diff --git a/GruntFile.js b/GruntFile.js
@@ -6,9 +6,10 @@ module.exports = function(grunt) {
   grunt.registerTask('buildApp', 
     [
       'clean',
+      'jsbeautifier',
       'jshint:pre',
-      'uglify',
-      'jshint:post'
+      'uglify'
+      // 'jshint:post'
     ]
   );
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-simple-sprite",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "authors": [
     "Tushar Ghate <[email protected]>"
   ],

diff --git a/dist/angular-simple-sprite.js b/dist/angular-simple-sprite.js
@@ -1,102 +1,125 @@
 (function() {
-	angular
-		.module('simple-sprite', [])
-		.directive('simpleSprite', simpleSprite);
-
-	simpleSprite.$inject = ['$interval'];
-
-  	function simpleSprite($interval) {
-		return {
-			restrict: 'AE',
-			replace: false,
-			scope: {
-				src: "@",
-				frameWidth: "=",
-				frameHeight: "=",
-				frames: "=",
+    angular
+        .module('simple-sprite', [])
+        .directive('simpleSprite', simpleSprite);
+
+    simpleSprite.$inject = ['$interval'];
+
+    function simpleSprite($interval) {
+        return {
+            restrict: 'AE',
+            replace: false,
+            scope: {
+                src: "@",
+                frameWidth: "=",
+                frameHeight: "=",
+                frames: "=",
                 framesPerRow: "@",
-				repeat: "@",
-				speed: "@"
-			},
+                repeat: "@",
+                speed: "@"
+            },
 
-			link: function($scope, element, attributes) {
+            link: function($scope, element, attributes) {
 
-				var src,
-					frameWidth,
-					frameHeight,
-					frames,
+                var src,
+                    frameWidth,
+                    frameHeight,
+                    frames,
                     framesPerRow = 0,
-					repeat = true,
-					speed = 100;
-
-                var currentPosX = 0,
-                    currentPosY = 0;
-
-				function init() {
-					src = $scope.src;
-					frameWidth = parseInt($scope.frameWidth, 10);
-					frameHeight = parseInt($scope.frameHeight, 10);
-					frames = parseInt($scope.frames, 10);
-					repeat = $scope.repeat == 'true';
-					speed = $scope.speed
+                    repeat = true,
+                    speed = 100;
+
+                // Keeps track of the current x and y positions of the sprite.
+                var spritePosition = {
+                    'x': 0,
+                    'y': 0
+                };
+
+                /**
+                 * Initializes the sprite with default CSS styles and options passed in by 
+                 * the user. Starts the sprite animation. 
+                 */
+                function init() {
+                    src = $scope.src;
+                    frameWidth = parseInt($scope.frameWidth, 10);
+                    frameHeight = parseInt($scope.frameHeight, 10);
+                    frames = parseInt($scope.frames, 10);
+                    repeat = $scope.repeat == 'true';
+                    speed = $scope.speed
                     framesPerRow = $scope.framesPerRow;
 
-					element.css({
-						"display": "block",
-						"width": frameWidth + "px",
-						"height": frameHeight + "px",
-						"background": "url(" + src + ") repeat",
-						"backgroundPosition": "0px 0px"
-					});
-
-					animate();
-				}
-
-				var animationInterval = null;
-				function animate() {
-					 animationInterval = $interval(function() {
-                         // Check if the animation has completed
-                         var animationComplete = false;
-                         if (framesPerRow) {
-                             if ((currentPosY / frameHeight * framesPerRow) + (currentPosX / frameWidth) >= frames) {
-                                animationComplete = true;
-                             }
-                         } else {
-                             if (currentPosX / frameWidth >= frames) {
-                                animationComplete = true;   
-                             }
-                         }
-
+                    element.css({
+                        "display": "block",
+                        "width": frameWidth + "px",
+                        "height": frameHeight + "px",
+                        "background": "url(" + src + ") repeat",
+                        "backgroundPosition": "0px 0px"
+                    });
+
+                    animate();
+                }
+
+                var animationInterval = null;
+
+                /**
+                 * Animates the sprite.
+                 */
+                function animate() {
+
+                    /**
+                     * Returns whether the sprite animation has completed or not. 
+                     */
+                    function isAnimationComplete() {
+                        var toReturn = false;
+
+                        if (framesPerRow) {
+                            var numRows = frames / framesPerRow
+
+                            if (spritePosition.x >= framesPerRow * frameWidth &&
+                                spritePosition.y >= numRows * frameHeight) {
+                                toReturn = true;
+                            }
+
+                        } else {
+                            if (spritePosition.x >= frameWidth * frames) {
+                                toReturn = true;
+                            }
+                        }
+
+                        return toReturn;
+                    }
+
+                    animationInterval = $interval(function() {
                         // Update the sprite frame
-                        element.css("background-position", currentPosX  + "px" + " " + currentPosY + "px");
-					 
+                        element.css("background-position", spritePosition.x + "px" + " " + spritePosition.y + "px");
+
                         // Determine if we should loop the animation, or stop, if the animation is complete
-                        if (animationComplete) {
+                        if (isAnimationComplete()) {
                             if (repeat) {
-                                currentPosX = 0;
-                                currentPosY = 0;
+                                spritePosition.x = 0;
+                                spritePosition.y = 0;
                             } else {
                                 $interval.cancel(animationInterval);
                             }
-                         } else {
+                        } else {
                             // Increment the X position
-                            currentPosX += frameWidth;
+                            spritePosition.x += frameWidth;
 
                             // Check if we should move to the next row
-                            if (framesPerRow != null && currentPosX + frameWidth > frameWidth * framesPerRow) {
-                                currentPosX = 0;
-                                currentPosY += frameHeight;
+                            if (framesPerRow != null && spritePosition.x + frameWidth > frameWidth * framesPerRow) {
+                                spritePosition.x = 0;
+                                spritePosition.y += frameHeight;
                             }
-                         }
-                     }, speed);
-				}
-
-				$scope.$on("$destroy", function() {
-					$interval.cancel(animationInterval);
-				});
-
-				init();
-			}
-		};
-	}
-})(angular);
+                        }
+                    }, speed);
+                }
+
+                $scope.$on("$destroy", function() {
+                    $interval.cancel(animationInterval);
+                });
+
+                init();
+            }
+        };
+    }
+})(angular);
diff --git a/dist/angular-simple-sprite.min.js b/dist/angular-simple-sprite.min.js
diff --git a/grunt/config.js b/grunt/config.js
@@ -7,6 +7,13 @@ module.exports = {
         }
 	},
 
+    jsbeautifier: {
+        files : ['dist/**/*.js'],
+        options : {
+
+        }
+    },
+
     // Validate JS files with JSHint.
     jshint: {
         options: {

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-jshint": "^0.11.2",
     "grunt-contrib-uglify": "^0.9.1",
+    "grunt-jsbeautifier": "^0.2.10",
     "load-grunt-tasks": "^3.2.0"
   },
   "scripts": {