cryptpad/customize.dist/loading.js

142 lines
5.4 KiB
JavaScript

// SPDX-FileCopyrightText: 2023 XWiki CryptPad Team <contact@cryptpad.org> and contributors
//
// SPDX-License-Identifier: AGPL-3.0-or-later
// 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="/api/logo?' + urlArgs + '" alt="' + Messages.label_logo + '">',
'</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 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) {
}
};
window.CryptPad_updateLoadingProgress = updateLoadingProgress;
window.CryptPad_loadingError = function (err) {
if (!built) { return; }
if (err === 'Error: XDR encoding failure') {
console.warn(err);
return;
}
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();
};
});