openmedialibrary/static/js/oml.update.js

'use strict';

(function() {

    var animationInterval,
        enableDebugMode = getLocalStorage('oml.enableDebugMode'),
        oxjsPath = '/static/oxjs/' + (enableDebugMode ? 'dev' : 'min'),
        theme = getLocalStorage('Ox.theme')
            && JSON.parse(localStorage['Ox.theme'])
            || 'oxlight';

    loadImages(function(images) {
        loadScreen(images);
        initUpdate();
    });

    function connectSocket() {
        update.socket = new WebSocket('ws://' + document.location.host + '/ws');
        update.socket.onopen = function(event) {
            if (update.reload) {
                reload();
            }
        };
        update.socket.onmessage = function(event) {
            var name, data = JSON.parse(event.data);
            name = data[0];
            data = data[1];
            if (name == 'updatestatus') {
                update.status.innerHTML = data.status;
                update.reload = data.reload;
            } else if (name == 'status') {
                reload(); // oml is running
            } else {
                console.log(name, data);
            }
        };
        update.socket.onerror = function(event) {
            update.socket.close();
        };
        update.socket.onclose = function(event) {
            setTimeout(connectSocket, 1000);
        };
    }

    function getLocalStorage(key) {
        try {
            return localStorage[key];
        } catch(e) {}
    }

    function initUpdate(browserSupported) {
        window.update = {};
        update.status = document.createElement('div');
        update.status.className = 'OxElement';
        update.status.style.position = 'absolute';
        update.status.style.left = '16px';
        update.status.style.top = '336px';
        update.status.style.right = 0;
        update.status.style.bottom = 0;
        update.status.style.width = '512px';
        update.status.style.height = '16px';
        update.status.style.margin = 'auto';
        update.status.style.textAlign = 'center';
        update.status.style.color = 'rgb(16, 16, 16)';
        update.status.style.fontFamily = 'Lucida Grande, Segoe UI, DejaVu Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif';
        update.status.style.fontSize = '11px';
        document.querySelector('#loadingScreen').appendChild(update.status);
        connectSocket();
    }

    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 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 reload() {
        document.location.href = document.location.protocol + '//' + document.location.host;
    }

    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);
    }

}());