0x2620/openmedialibrary
1
0
Fork 0
Code Issues 131 Pull requests Releases Wiki Activity

visual feedback during updates

Browse source
This commit is contained in:
j 2016-01-12 20:30:51 +05:30
commit 516397ae44
9 changed files with 274 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

178
static/js/oml.update.js Normal file
View file

@ -0,0 +1,178 @@
'use strict';
(function() {
var animationInterval,
enableDebugMode = getLocalStorage('oml.enableDebugMode'),
omlVersion = getOMLVersion(),
oxjsPath = '/static/oxjs/' + (enableDebugMode ? 'dev' : 'min'),
terminal,
theme = getLocalStorage('Ox.theme')
&& JSON.parse(localStorage['Ox.theme'])
|| 'oxlight';
loadImages(function(images) {
loadScreen(images);
loadOxJS(loadOML);
});
function getLocalStorage(key) {
try {
return localStorage[key];
} catch(e) {}
}
function getOMLVersion() {
var i, path, scripts = document.getElementsByTagName('script');
for (i = 0; i < scripts.length; i++) {
if(/oml.update.js/.test(scripts[i].src)) {
return scripts[i].src.replace(/.*\?/, '');
}
}
}
function loadImages(callback) {
var images = {};
images.logo = document.createElement('img');
images.logo.onload = function() {
images.logo.style.position = 'absolute';
images.logo.style.left = 0;
images.logo.style.top = 0;
images.logo.style.right = 0;
images.logo.style.bottom = '96px';
images.logo.style.width = '256px';
images.logo.style.height = '256px';
images.logo.style.margin = 'auto';
images.logo.style.MozUserSelect = 'none';
images.logo.style.MSUserSelect = 'none';
images.logo.style.OUserSelect = 'none';
images.logo.style.WebkitUserSelect = 'none';
images.loadingIcon = document.createElement('img');
images.loadingIcon.setAttribute('id', 'loadingIcon');
images.loadingIcon.style.position = 'absolute';
images.loadingIcon.style.left = '16px';
images.loadingIcon.style.top = '256px'
images.loadingIcon.style.right = 0;
images.loadingIcon.style.bottom = 0;
images.loadingIcon.style.width = '32px';
images.loadingIcon.style.height = '32px';
images.loadingIcon.style.margin = 'auto';
images.loadingIcon.style.MozUserSelect = 'none';
images.loadingIcon.style.MSUserSelect = 'none';
images.loadingIcon.style.OUserSelect = 'none';
images.loadingIcon.style.WebkitUserSelect = 'none';
images.loadingIcon.src = oxjsPath
+ '/UI/themes/' + theme + '/svg/symbolLoading.svg';
callback(images);
};
images.logo.src = '/static/png/oml.png';
}
function loadOML(browserSupported) {
window.oml = Ox.App({
name: 'oml',
socket: 'ws://' + document.location.host + '/ws',
url: '/api/'
}).bindEvent({
load: function(data) {
data.browserSupported = browserSupported;
oml.ui = {};
oml.ui.status = Ox.Element()
.css({
position: 'absolute',
left: 0,
right: 0,
bottom: '50px',
textAlign: 'center',
paddingLeft: '16px',
color: '#999999'
}).appendTo(Ox.$('#loadingScreen'));
oml.ui.status.html('Updating Open Media Library...');
},
updatestatus: function(data) {
oml.ui.status.html(data.status);
oml.reload = data.reload;
},
close: function(data) {
},
open: function(data) {
Ox.print('socket open');
if (oml.reload) {
document.location.href = document.location.protocol + '//' + document.location.host;
}
}
});
}
function loadOxJS(callback) {
var head = document.head
|| document.getElementsByTagName('head')[0]
|| document.documentElement,
script = document.createElement('script');
script.onload = function() {
Ox.load({UI: {theme: theme}}, function() {
Ox.formatUpper = function(string) {
return string.toUpperCase();
};
callback();
});
};
script.src = oxjsPath + '/Ox.js?' + omlVersion;
script.type = 'text/javascript';
head.appendChild(script);
}
function loadScreen(images) {
var loadingScreen = document.createElement('div');
loadingScreen.setAttribute('id', 'loadingScreen');
loadingScreen.className = 'OxScreen';
loadingScreen.style.position = 'absolute';
loadingScreen.style.width = '100%';
loadingScreen.style.height = '100%';
loadingScreen.style.backgroundColor = theme == 'oxlight' ? 'rgb(224, 224, 224)'
: theme == 'oxmedium' ? 'rgb(144, 144, 144)' : 'rgb(32, 32, 32)';
loadingScreen.style.zIndex = '1002';
loadingScreen.appendChild(images.logo);
loadingScreen.appendChild(images.loadingIcon);
// FF3.6 document.body can be undefined here
window.onload = function() {
document.body.style.margin = 0;
document.body.appendChild(loadingScreen);
startAnimation();
};
// IE8 does not call onload if already loaded before set
document.body && window.onload();
}
function removeScreen() {
var $loadingScreen = $('#loadingScreen');
$loadingScreen.animate({
opacity: 0
}, 1000, function() {
$loadingScreen.remove();
});
}
function startAnimation() {
var css, deg = 0, loadingIcon = document.getElementById('loadingIcon'),
previousTime = +new Date();
animationInterval = setInterval(function() {
var currentTime = +new Date(),
delta = (currentTime - previousTime) / 1000;
previousTime = currentTime;
deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
css = 'rotate(' + deg + 'deg)';
loadingIcon.style.MozTransform = css;
loadingIcon.style.MSTransform = css;
loadingIcon.style.OTransform = css;
loadingIcon.style.WebkitTransform = css;
loadingIcon.style.transform = css;
}, 83);
}
function stopAnimation() {
clearInterval(animationInterval);
}
}());