0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

loading icon: stop animation before beginning new animation, add callback functions to start and stop, rotate back to 0 deg when stopped

Browse source
This commit is contained in:
rlx 2013-07-29 09:46:52 +00:00
parent 7a20c4ca05
commit 77319eb44f
1 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
source/Ox.UI/js/Core/LoadingIcon.js
View file

@ -29,11 +29,13 @@ Ox.LoadingIcon = function(options, self) {
? that.css({width: self.options.size, height: self.options.size}) ? that.css({width: self.options.size, height: self.options.size})
: that.addClass('Ox' + Ox.toTitleCase(self.options.size)); : that.addClass('Ox' + Ox.toTitleCase(self.options.size));
that.stopAnimation = that.stop;
/*@ /*@
start <f> Start loading animation start <f> Start loading animation
() -> <f> Loading Icon Element () -> <f> Loading Icon Element
@*/ @*/
that.start = function() { that.start = function(callback) {
var css, deg = 0, previousTime = +new Date(); var css, deg = 0, previousTime = +new Date();
if (!self.loadingInterval) { if (!self.loadingInterval) {
self.loadingInterval = setInterval(function() { self.loadingInterval = setInterval(function() {
@ -49,7 +51,9 @@ Ox.LoadingIcon = function(options, self) {
WebkitTransform: css WebkitTransform: css
}); });
}, 83); }, 83);
that.animate({opacity: 1}, 250); that.stopAnimation().animate({opacity: 1}, 250, function() {
callback && callback();
});
} }
return that; return that;
}; };
@ -58,12 +62,20 @@ Ox.LoadingIcon = function(options, self) {
stop <f> Stop loading animation stop <f> Stop loading animation
() -> <f> Loading Icon Element () -> <f> Loading Icon Element
@*/ @*/
that.stop = function() { that.stop = function(callback) {
var loadingInterval = self.loadingInterval; var loadingInterval = self.loadingInterval;
if (self.loadingInterval) { if (self.loadingInterval) {
self.loadingInterval = void 0; self.loadingInterval = void 0;
that.animate({opacity: 0}, 250, function() { that.stopAnimation().animate({opacity: 0}, 250, function() {
var css = 'rotate(0deg)';
clearInterval(loadingInterval); clearInterval(loadingInterval);
that.css({
MozTransform: css,
MsTransform: css,
OTransform: css,
WebkitTransform: css
});
callback && callback();
}); });
} }
return that; return that;