oxjs/source/Ox.UI/js/Core/LoadingIcon.js

69 lines
1.9 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
2011-05-16 08:24:46 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.LoadingIcon <f> Loading Icon Element
([options[, self]]) -> <o:Ox.Element> Loading Icon Element
2011-05-16 08:24:46 +00:00
options <o> Options object
size <s|medium> size of icon
self <o> Shared private variable
@*/
2011-04-22 22:03:10 +00:00
Ox.LoadingIcon = function(options, self) {
2012-01-27 14:29:11 +00:00
self = self || {};
var that = Ox.Element('<img>', self)
2012-01-17 17:34:33 +00:00
.defaults({
size: 'medium'
})
.options(options || {})
.attr({
src: Ox.UI.getImageURL('symbolLoading')
})
.addClass(
'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size)
);
2012-01-27 14:29:11 +00:00
2011-05-16 08:24:46 +00:00
/*@
start <f> Start loading animation
() -> <f> Loading Icon Element
@*/
2011-04-22 22:03:10 +00:00
that.start = function() {
2012-05-24 13:43:46 +00:00
var css, deg = 0, previousTime = +new Date();
if (!self.loadingInterval) {
self.loadingInterval = setInterval(function() {
2012-05-24 13:43:46 +00:00
var currentTime = +new Date(),
delta = (currentTime - previousTime) / 1000;
previousTime = currentTime;
deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
css = 'rotate(' + deg + 'deg)';
that.css({
2012-05-24 13:43:46 +00:00
MozTransform: css,
2012-05-25 16:28:05 +00:00
MsTransform: css,
2012-05-24 17:12:02 +00:00
OTransform: css,
2012-05-24 13:43:46 +00:00
WebkitTransform: css
});
2012-05-24 13:43:46 +00:00
}, 83);
that.animate({opacity: 1}, 250);
}
2011-04-22 22:03:10 +00:00
return that;
};
2012-01-27 14:29:11 +00:00
2011-05-16 08:24:46 +00:00
/*@
stop <f> Stop loading animation
() -> <f> Loading Icon Element
@*/
2011-04-22 22:03:10 +00:00
that.stop = function() {
var loadingInterval = self.loadingInterval;
if (self.loadingInterval) {
self.loadingInterval = void 0;
that.animate({opacity: 0}, 250, function() {
clearInterval(loadingInterval);
2012-01-17 17:34:33 +00:00
});
}
2011-04-22 22:03:10 +00:00
return that;
};
2012-01-27 14:29:11 +00:00
2011-04-22 22:03:10 +00:00
return that;
2012-01-27 14:29:11 +00:00
};