loading.js

// bg #e7e7e7
// blue #0087FF
// text #3F4141
define([
    '/customize/messages.js',
    'less!/customize/src/less2/include/loading.less'
], function (Messages) {
    var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; });
    var elem = document.createElement('div');
    elem.setAttribute('id', 'cp-loading');
    elem.innerHTML = [
        '<div class="cp-loading-logo">',
            '<img class="cp-loading-cryptofist" src="/customize/CryptPad_logo.svg?' + urlArgs + '">',
        '</div>',
        '<div class="cp-loading-container">',
            '<div class="cp-loading-spinner-container">',
                '<span class="cp-spinner"></span>',
            '</div>',
            '<div class="cp-loading-progress">',
                '<div class="cp-loading-progress-list"></div>',
                '<div class="cp-loading-progress-container"></div>',
            '</div>',
            '<p id="cp-loading-message"></p>',
        '</div>'
    ].join('');
    var built = false;

    var types = ['less', 'drive', 'migrate', 'sf', 'team', 'pad', 'end']; // Msg.loading_state_0, loading_state_1, loading_state_2, loading_state_3, loading_state_4, loading_state_5
    var current, progress;
    var makeList = function (data) {
        var c = types.indexOf(data.type);
        current = c;
        var getLi = function (i) {
            var check = (i < c || (i === c && data.progress >= 100)) ? 'fa-check-square-o'
                                                                      : 'fa-square-o';
            var percentStr = '';
            if (i === c) {
                var p = Math.min(Math.floor(data.progress), 100);
                percentStr = '<span class="percent">('+p+'%)</span>';
            }
            return '<li><i class="fa '+check+'"></i><span>'+Messages['loading_state_'+i]+'</span>' + percentStr;
        };
        var list = '<ul>';
        types.forEach(function (el, i) {
            if (el === "end") { return; }
            list += getLi(i);
        });
        list += '</ul>';
        return list;
    };
    var makeBar = function (data) {
        var c = types.indexOf(data.type);
        var l = types.length - 1; // don't count "end" as a type
        var progress = Math.min(data.progress, 100);
        var p = (progress / l) + (100 * c / l);
        var bar = '<div class="cp-loading-progress-bar">'+
                    '<div class="cp-loading-progress-bar-value" style="width:'+p+'%"></div>'+
                  '</div>';
        return bar;
    };

    var hasErrored = false;
    var isOffline = false;
    var updateLoadingProgress = function (data) {
        if (!built || !data) { return; }

        // If we receive a "offline" event, show the warning text
        if (data.type === "offline") {
            try {
                isOffline = true;
                document.querySelector('#cp-loading-message').setAttribute('style', 'display:block;');
                document.querySelector('#cp-loading-message').innerText = Messages.offlineError;
            } catch (e) { console.error(e); }
            return;
        }

        // If we receive a new event and we were offline, remove
        // the offline warning text
        if (isOffline) {
            try {
                isOffline = false;
                document.querySelector('#cp-loading-message').setAttribute('style', 'display:none;');
            } catch (e) { console.error(e); }
        }

        // Make sure progress doesn't go backward
        var c = types.indexOf(data.type);
        if (c < current) { return console.debug(data); }
        if (c === current && progress > data.progress) { return console.debug(data); }
        progress = data.progress;

        try {
            var el1 = document.querySelector('.cp-loading-spinner-container');
            if (el1) { el1.style.display = 'none'; }
            var el2 = document.querySelector('.cp-loading-progress-list');
            if (el2) { el2.innerHTML = makeList(data); }
            var el3 = document.querySelector('.cp-loading-progress-container');
            if (el3) { el3.innerHTML = makeBar(data); }
        } catch (e) {
            //if (!hasErrored) { console.error(e); }
        }
    };
    window.CryptPad_updateLoadingProgress = updateLoadingProgress;

    window.CryptPad_loadingError = function (err) {
        if (!built) { return; }

        if (err === 'Error: XDR encoding failure') {
            console.warn(err);
            return;
        }

        hasErrored = true;
        var err2;
        if (err === 'Script error.') {
            err2 = Messages.error_unhelpfulScriptError;
        }

        try {
            var node = document.querySelector('.cp-loading-progress');
            if (!node) { return; }
            if (node.parentNode) { node.parentNode.removeChild(node); }
            document.querySelector('.cp-loading-spinner-container').setAttribute('style', 'display:none;');
            document.querySelector('#cp-loading-message').setAttribute('style', 'display:block;');
            document.querySelector('#cp-loading-message').innerText = err2 || err;
        } catch (e) { console.error(e); }
    };
    return function () {
        built = true;
        var intr;
        var append = function () {
            if (!document.body) { return; }
            clearInterval(intr);
            document.body.appendChild(elem);
        };
        intr = setInterval(append, 100);
        append();
    };
});