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

use requestAnimationFrame for loading icon if available

Browse source
This commit is contained in:
j 2016-08-09 14:11:43 +02:00
parent f043242640
commit 4c54a294f6
2 changed files with 46 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
index.js
View file

@ -353,23 +353,36 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
rotate: function() { rotate: function() {
var css, deg = 0, var css, deg = 0,
previousTime = +new Date(), previousTime = +new Date(),
interval = setInterval(function() { interval;
function step() {
var currentTime = +new Date(), var currentTime = +new Date(),
delta = (currentTime - previousTime) / 1000, delta = (currentTime - previousTime) / 1000,
loadingIcon = document.getElementById('loadingIcon'); loadingIcon = document.getElementById('loadingIcon'),
next = Math.round((deg + delta * 360) % 360 / 30) * 30;
if (loadingIcon) { if (loadingIcon) {
if (deg != next) {
previousTime = currentTime; previousTime = currentTime;
deg = Math.round((deg + delta * 360) % 360 / 30) * 30; deg = next;
css = 'rotate(' + deg + 'deg)'; css = 'rotate(' + deg + 'deg)';
loadingIcon.style.MozTransform = css; loadingIcon.style.MozTransform = css;
loadingIcon.style.MSTransform = css; loadingIcon.style.MSTransform = css;
loadingIcon.style.OTransform = css; loadingIcon.style.OTransform = css;
loadingIcon.style.WebkitTransform = css; loadingIcon.style.WebkitTransform = css;
loadingIcon.style.transform = css; loadingIcon.style.transform = css;
} else {
clearInterval(interval);
} }
}, 83); if (window.requestAnimationFrame !== undefined) {
window.requestAnimationFrame(step);
}
} else if (window.requestAnimationFrame === undefined) {
clearInterval(interval);
}
};
if (window.requestAnimationFrame !== undefined) {
window.requestAnimationFrame(step);
} else {
interval = setInterval(step, 83);
}
}, },
setTheme: function(theme) { setTheme: function(theme) {
app.user.theme = theme; app.user.theme = theme;

31
source/UI/js/Core/LoadingIcon.js
View file

@ -29,20 +29,19 @@ 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(callback) { that.start = function(callback) {
var css, deg = 0, previousTime = +new Date(); var css, deg = 0, previousTime = +new Date();
if (!self.loadingInterval) { function step() {
self.loadingInterval = setInterval(function() {
var currentTime = +new Date(), var currentTime = +new Date(),
delta = (currentTime - previousTime) / 1000; delta = (currentTime - previousTime) / 1000,
next = Math.round((deg + delta * 360) % 360 / 30) * 30;
if (deg != next) {
previousTime = currentTime; previousTime = currentTime;
deg = Math.round((deg + delta * 360) % 360 / 30) * 30; deg = next;
css = 'rotate(' + deg + 'deg)'; css = 'rotate(' + deg + 'deg)';
that.css({ that.css({
MozTransform: css, MozTransform: css,
@ -51,8 +50,18 @@ Ox.LoadingIcon = function(options, self) {
WebkitTransform: css, WebkitTransform: css,
transform: css transform: css
}); });
}, 83); }
that.stopAnimation().animate({opacity: 1}, 250, function() { 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(); callback && callback();
}); });
} }
@ -66,9 +75,13 @@ Ox.LoadingIcon = function(options, self) {
that.stop = function(callback) { that.stop = function(callback) {
if (self.loadingInterval && !self.stopping) { if (self.loadingInterval && !self.stopping) {
self.stopping = true; self.stopping = true;
that.stopAnimation().animate({opacity: 0}, 250, function() { that.animate({opacity: 0}, 250, function() {
var css = 'rotate(0deg)'; var css = 'rotate(0deg)';
if (Ox.isUndefined(window.cancelAnimationFrame)) {
clearInterval(self.loadingInterval); clearInterval(self.loadingInterval);
} else {
window.cancelAnimationFrame(self.loadingInterval);
}
self.loadingInterval = null; self.loadingInterval = null;
self.stopping = false; self.stopping = false;
that.css({ that.css({