Skip to content

fix background-position-y and support non-integral last row #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
panlina wants to merge 9 commits into
base: master
Choose a base branch
from
Open

fix background-position-y and support non-integral last row #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
44ffa9f
fix background-position-y
panlina Jan 14, 2017
652b925
support non-integral last row
panlina Jan 14, 2017
130cb75
support scaling
panlina Jan 15, 2017
eed3e0e
-angular-simple-sprite.min.js
panlina Jan 16, 2017
1e6d709
+Sprite
panlina Jan 16, 2017
37742b0
+Sprite.pause
panlina Jan 16, 2017
e2188d8
+simpleSpriteDelegate
panlina Jan 17, 2017
c072b19
+index
panlina Jan 18, 2017
dc2a2cb
-display:block
panlina Aug 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 104 additions & 98 deletions dist/angular-simple-sprite.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
(function() {
angular
.module('simple-sprite', [])
.directive('simpleSprite', simpleSprite);
.directive('simpleSprite', simpleSprite)
.service('simpleSpriteDelegate', simpleSpriteDelegate);

simpleSprite.$inject = ['$window'];
simpleSprite.$inject = ['$window', 'simpleSpriteDelegate'];

function simpleSprite($window) {
function simpleSprite($window, simpleSpriteDelegate) {
return {
restrict: 'AE',
replace: false,
Expand All @@ -16,112 +17,117 @@
frames: "@",
framesPerRow: "@",
repeat: "@",
speed: "@"
speed: "@",
onstep: "&"
},

link: function($scope, element, attributes) {
var sprite = new Sprite($scope, element);
if (attributes.delegateHandle)
simpleSpriteDelegate.instance[attributes.delegateHandle] = sprite;
sprite.play();
}
};
function Sprite($scope, element) {

var src,
frameWidth,
frameHeight,
frames,
framesPerRow = 0,
repeat = true,
speed = 100;

var index = 0;
// Keeps track of the current x and y positions of the sprite.
var spritePosition = {
'x': 0,
'y': 0
};

var scale;

/**
* 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;

var width = element.width();
scale = width / frameWidth;

element.css({
"background": "url(" + src + ") repeat",
"background-size": framesPerRow * 100 + '%',
"backgroundPosition": "0px 0px"
});
}

var src,
frameWidth,
frameHeight,
frames,
framesPerRow = 0,
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;

/**
* 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 - 1) * frameWidth &&
spritePosition.y >= numRows * frameHeight) {
toReturn = true;
}
var animationInterval = null;

} else {
if (spritePosition.x >= frameWidth * frames) {
toReturn = true;
}
}
/**
* Animates the sprite.
*/
function animate() {

animationInterval = $window.setInterval(function() {
// Update the sprite frame
element.css("background-position", -spritePosition.x * scale + "px" + " " + -spritePosition.y * scale + "px");

$scope.onstep({index:index});

return toReturn;
// Determine if we should loop the animation, or stop, if the animation is complete
index++;
// Increment the X position
spritePosition.x += frameWidth;

// Check if we should move to the next row
if (framesPerRow != null && spritePosition.x + frameWidth > frameWidth * framesPerRow) {
spritePosition.x = 0;
spritePosition.y += frameHeight;
}

animationInterval = $window.setInterval(function() {
// Update the sprite frame
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 (isAnimationComplete()) {
if (repeat) {
spritePosition.x = 0;
spritePosition.y = 0;
} else {
$window.clearInterval(animationInterval);
// $interval.cancel(animationInterval);
}
if (index >= frames) {
index = 0;
if (repeat) {
spritePosition.x = 0;
spritePosition.y = 0;
} else {
// Increment the X position
spritePosition.x += frameWidth;

// Check if we should move to the next row
if (framesPerRow != null && spritePosition.x + frameWidth > frameWidth * framesPerRow) {
spritePosition.x = 0;
spritePosition.y += frameHeight;
}
$window.clearInterval(animationInterval);
// $interval.cancel(animationInterval);
}
}, speed);
}

$scope.$on("$destroy", function() {
$window.clearInterval(animationInterval);
// $interval.cancel(animationInterval);
});
}
}, speed);
}

init();
function pause() {
$window.clearInterval(animationInterval);
}
};

$scope.$on("$destroy", function() {
$window.clearInterval(animationInterval);
// $interval.cancel(animationInterval);
});

init();

return {
play: animate,
pause: pause
};
}
}

function simpleSpriteDelegate() {
return {
instance: {}
};
}
})(angular);
1 change: 0 additions & 1 deletion dist/angular-simple-sprite.min.js
View file
Open in desktop

This file was deleted.