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() {
var css, deg = 0,
previousTime = +new Date(),
interval = setInterval(function() {
interval;
function step() {
var currentTime = +new Date(),
delta = (currentTime - previousTime) / 1000,
loadingIcon = document.getElementById('loadingIcon');
loadingIcon = document.getElementById('loadingIcon'),
next = Math.round((deg + delta * 360) % 360 / 30) * 30;
if (loadingIcon) {
if (deg != next) {
previousTime = currentTime;
deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
deg = next;
css = 'rotate(' + deg + 'deg)';
loadingIcon.style.MozTransform = css;
loadingIcon.style.MSTransform = css;
loadingIcon.style.OTransform = css;
loadingIcon.style.WebkitTransform = 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) {
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.addClass('Ox' + Ox.toTitleCase(self.options.size));
that.stopAnimation = that.stop;
/*@
start <f> Start loading animation
() -> <f> Loading Icon Element
@*/
that.start = function(callback) {
var css, deg = 0, previousTime = +new Date();
if (!self.loadingInterval) {
self.loadingInterval = setInterval(function() {
function step() {
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;
deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
deg = next;
css = 'rotate(' + deg + 'deg)';
that.css({
MozTransform: css,
@ -51,8 +50,18 @@ Ox.LoadingIcon = function(options, self) {
WebkitTransform: 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();
});
}
@ -66,9 +75,13 @@ Ox.LoadingIcon = function(options, self) {
that.stop = function(callback) {
if (self.loadingInterval && !self.stopping) {
self.stopping = true;
that.stopAnimation().animate({opacity: 0}, 250, function() {
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({