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

102 lines
3.1 KiB
JavaScript

'use strict';
/*@
Ox.LoadingIcon <f> Loading Icon Element
options <o> Options object
size <n|s|16> size of icon
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> Loading Icon Element
@*/
Ox.LoadingIcon = function(options, self) {
self = self || {};
var that = Ox.Element('<img>', self)
.defaults({
size: 16,
video: false
})
.options(options || {})
.addClass('OxLoadingIcon')
.attr({
src: Ox.UI.getImageURL(
'symbolLoading',
self.options.video ? 'videoIcon' : null
)
});
Ox.isNumber(self.options.size)
? that.css({width: self.options.size, height: self.options.size})
: that.addClass('Ox' + Ox.toTitleCase(self.options.size));
/*@
start <f> Start loading animation
() -> <f> Loading Icon Element
@*/
that.start = function(callback) {
var css, deg = 0, previousTime = +new Date();
function step() {
var currentTime = +new Date(),
delta = (currentTime - previousTime) / 1000,
next = Math.round((deg + delta * 360) % 360 / 30) * 30;
if (deg != next) {
previousTime = currentTime;
deg = next;
css = 'rotate(' + deg + 'deg)';
that.css({
MozTransform: css,
MsTransform: css,
OTransform: css,
WebkitTransform: css,
transform: css
});
}
if (!self.stopping && !Ox.isUndefined(window.requestAnimationFrame)) {
self.loadingInterval = window.requestAnimationFrame(step);
}
}
if (!self.loadingInterval) {
if (Ox.isUndefined(window.requestAnimationFrame)) {
self.loadingInterval = setInterval(step, 83);
} else {
self.loadingInterval = window.requestAnimationFrame(step);
}
that.animate({opacity: 1}, 250, function() {
callback && callback();
});
}
return that;
};
/*@
stop <f> Stop loading animation
() -> <f> Loading Icon Element
@*/
that.stop = function(callback) {
if (self.loadingInterval && !self.stopping) {
self.stopping = true;
that.animate({opacity: 0}, 250, function() {
var css = 'rotate(0deg)';
if (Ox.isUndefined(window.cancelAnimationFrame)) {
clearInterval(self.loadingInterval);
} else {
window.cancelAnimationFrame(self.loadingInterval);
}
self.loadingInterval = null;
self.stopping = false;
that.css({
MozTransform: css,
MsTransform: css,
OTransform: css,
WebkitTransform: css,
transform: css
});
callback && callback();
});
}
return that;
};
return that;
};