dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'loading' into staging

This commit is contained in:
yflory 2020-10-29 17:18:27 +01:00
parent fe30d5243c d754ae96e5
commit 9d73e3db5f
13 changed files with 242 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
customize.dist/loading.js
View File

@ -1,7 +1,18 @@
// dark #326599
// light #4591c4
define([], function () {
define(['/customize/messages.js'], function (Messages) {
var loadingStyle = (function(){/*
@font-face {
font-family: 'Open Sans';
src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot');
src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.woff') format('woff'),
url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.ttf') format('truetype'),
url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#cp-loading {
visibility: visible;
position: fixed;
@ -19,6 +30,7 @@ define([], function () {
flex-flow: column;
justify-content: center;
align-items: center;
font: 20px 'Open Sans', 'Helvetica Neue', sans-serif !important;
}
#cp-loading.cp-loading-hidden {
opacity: 0;
@ -163,35 +175,10 @@ p.cp-password-info{
#cp-loading .cp-loading-spinner-container > div {
height: 100px;
}
#cp-loading-tip {
position: fixed;
z-index: 10000000;
top: 80%;
left: 0;
right: 0;
text-align: center;
transition: opacity 750ms;
transition-delay: 3000ms;
}
@media screen and (max-height: 600px) {
#cp-loading-tip {
display: none;
}
}
#cp-loading-tip span {
background: #222;
color: #fafafa;
text-align: center;
font-size: 1.3em;
opacity: 0.7;
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 15px;
max-width: 60%;
display: inline-block;
}
.cp-loading-progress {
width: 100%;
margin: 20px;
text-align: center;
}
.cp-loading-progress p {
margin: 5px;
@ -199,6 +186,31 @@ p.cp-password-info{
white-space: nowrap;
text-overflow: ellipsis;
}
.cp-loading-progress-list {
text-align: left;
display: inline-block;
}
.cp-loading-progress-list ul {
list-style: none;
padding-left: 0;
}
.cp-loading-progress-list li {
padding: 0px 5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cp-loading-progress-list li i {
width: 22px;
}
.cp-loading-progress-list li span{
margin-left: 10px;
}
.cp-loading-progress-list li span.percent {
position: absolute;
}
.cp-loading-progress-bar {
height: 24px;
background: white;
@ -257,10 +269,77 @@ button.primary:hover{
'<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;
// XXX
var types = ['less', 'drive', 'migrate', 'sf', 'team', 'pad', 'end'];
Messages.loading_state_0 = "Less";
Messages.loading_state_1 = "Drive";
Messages.loading_state_2 = "Migrate";
Messages.loading_state_3 = "SF";
Messages.loading_state_4 = "Team";
Messages.loading_state_5 = "Pad";
var current;
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 (i >= 6) { return; }
list += getLi(i);
});
list += '</ul>';
return list;
};
var makeBar = function (data) {
var c = types.indexOf(data.type);
var l = types.length;
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 updateLoadingProgress = function (data) {
if (!built) { return; }
var c = types.indexOf(data.type);
if (c < current) { return console.error(data); }
try {
document.querySelector('.cp-loading-spinner-container').style.display = 'none';
document.querySelector('.cp-loading-progress-list').innerHTML = makeList(data);
document.querySelector('.cp-loading-progress-container').innerHTML = makeBar(data);
} catch (e) { console.error(e); }
};
window.CryptPad_updateLoadingProgress = updateLoadingProgress;
window.CryptPad_loadingError = function (err) {
if (!built) { return; }
try {
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 = err;
} catch (e) { console.error(e); }
};
return function () {
built = true;
var intr;
var append = function () {
if (!document.body) { return; }

13
customize.dist/messages.js
View File

@ -52,13 +52,12 @@ require.config({
});
var req = [
'/common/common-util.js',
'/customize/application_config.js',
'/customize/translations/messages.js'
];
if (language && map[language]) { req.push('/customize/translations/messages.' + language + '.js'); }
define(req, function(Util, AppConfig, Default, Language) {
define(req, function(AppConfig, Default, Language) {
map.en = 'English';
var defaultLanguage = 'en';
@ -78,15 +77,15 @@ define(req, function(Util, AppConfig, Default, Language) {
var extend = function (a, b) {
for (var k in b) {
if (Util.isObject(b[k])) {
a[k] = Util.isObject(a[k]) ? a[k] : {};
extend(a[k], b[k]);
continue;
}
if (Array.isArray(b[k])) {
a[k] = b[k].slice();
continue;
}
if (b[k] && typeof(b[k]) === "object") {
a[k] = (a[k] && typeof(a[k]) === "object" && !Array.isArray(a[k])) ? a[k] : {};
extend(a[k], b[k]);
continue;
}
a[k] = b[k] || a[k];
}
};

14
www/common/LessLoader.js
View File

@ -150,6 +150,7 @@ define([
}).nThen(function () { cb(); });
};
var idx = 0;
module.exports.load = function (url /*:string*/, cb /*:()=>void*/, stack /*:?Array<string>*/) {
var btime = stack ? null : +new Date();
stack = stack || [];
@ -163,11 +164,22 @@ define([
cb();
};
stack.push(url);
if (window.CryptPad_updateLoadingProgress) {
window.CryptPad_updateLoadingProgress({
type: 'less',
progress: 4*idx++
});
}
cacheGet(url, function (css) {
if (css) { return void loadSubmodulesAndInject(css, url, done, stack); }
console.debug('CACHE MISS ' + url);
((/\.less([\?\#].*)?$/.test(url)) ? loadLess : loadCSS)(url, function (err, css) {
if (!css) { return void console.error(err); }
if (!css) {
if (window.CryptPad_loadingError) {
window.CryptPad_loadingError('LESS: ' + (err && err.message));
}
return void console.error(err);
}
var output = fixAllURLs(css, url);
cachePut(url, output);
loadSubmodulesAndInject(output, url, done, stack);

105
www/common/common-interface.js
View File

@ -932,35 +932,33 @@ define([
var LOADING = 'cp-loading';
var loading = {
error: false,
driveState: 0,
padState: 0
};
UI.addLoadingScreen = function (config) {
config = config || {};
var loadingText = config.loadingText;
var todo = function () {
var $loading = $('#' + LOADING);
// Show the loading screen
$loading.css('display', '');
$loading.removeClass('cp-loading-hidden');
$('.cp-loading-spinner-container').show();
if (!config.noProgress && !$loading.find('.cp-loading-progress').length) {
if (config.newProgress) {
// XXX re-add progress bar for step 6 after password prompt for PPP
// XXX also burn after reading
var progress = h('div.cp-loading-progress', [
h('p.cp-loading-progress-drive'),
h('p.cp-loading-progress-pad')
h('p.cp-loading-progress-list'),
h('p.cp-loading-progress-container')
]);
$(progress).hide();
$loading.find('.cp-loading-container').append(progress);
} else if (config.noProgress) {
$loading.find('.cp-loading-progress').remove();
$loading.find('.cp-loading-spinner-container').after(progress);
}
if (!$loading.find('.cp-loading-progress').length) {
// Add spinner
$('.cp-loading-spinner-container').show();
}
// Add loading text
if (loadingText) {
$('#' + LOADING).find('#cp-loading-message').show().text(loadingText);
} else {
$('#' + LOADING).find('#cp-loading-message').hide().text('');
}
loading.error = false;
};
if ($('#' + LOADING).length) {
todo();
@ -969,57 +967,9 @@ define([
todo();
}
};
UI.updateLoadingProgress = function (data, isDrive) {
var $loading = $('#' + LOADING);
if (!$loading.length || loading.error) { return; }
$loading.find('.cp-loading-progress').show();
var $progress;
if (isDrive) {
// Drive state
if (loading.driveState === -1) { return; } // Already loaded
$progress = $loading.find('.cp-loading-progress-drive');
if (!$progress.length) { return; } // Can't find the box to display data
// If state is -1, remove the box, drive is loaded
if (data.state === -1) {
loading.driveState = -1;
$progress.remove();
} else {
if (data.state < loading.driveState) { return; } // We should not display old data
// Update the current state
loading.driveState = data.state;
data.progress = data.progress || 100;
data.msg = Messages['loading_drive_'+ Math.floor(data.state)] || '';
$progress.html(data.msg);
if (data.progress) {
$progress.append(h('div.cp-loading-progress-bar', [
h('div.cp-loading-progress-bar-value', {style: 'width:'+data.progress+'%;'})
]));
}
}
} else {
// Pad state
if (loading.padState === -1) { return; } // Already loaded
$progress = $loading.find('.cp-loading-progress-pad');
if (!$progress.length) { return; } // Can't find the box to display data
// If state is -1, remove the box, pad is loaded
if (data.state === -1) {
loading.padState = -1;
$progress.remove();
} else {
if (data.state < loading.padState) { return; } // We should not display old data
// Update the current state
loading.padState = data.state;
data.progress = data.progress || 100;
data.msg = Messages['loading_pad_'+data.state] || '';
$progress.html(data.msg);
if (data.progress) {
$progress.append(h('div.cp-loading-progress-bar', [
h('div.cp-loading-progress-bar-value', {style: 'width:'+data.progress+'%;'})
]));
}
}
UI.updateLoadingProgress = function (data) {
if (window.CryptPad_updateLoadingProgress) {
window.CryptPad_updateLoadingProgress(data);
}
};
UI.removeLoadingScreen = function (cb) {
@ -1028,31 +978,23 @@ define([
cb = cb || function () {};
if (Test.__ASYNC_BLOCKER__) { Test.__ASYNC_BLOCKER__.pass(); }
$('#' + LOADING).addClass("cp-loading-hidden");
var $loading = $('#' + LOADING);
$loading.addClass("cp-loading-hidden"); // Hide the loading screen
$loading.find('.cp-loading-progress').remove(); // Remove the progress list
setTimeout(cb, 750);
loading.error = false;
var $tip = $('#cp-loading-tip').css('top', '')
// loading.less sets transition-delay: $wait-time
// and transition: opacity $fadeout-time
.css({
'opacity': 0,
'pointer-events': 'none',
});
window.setTimeout(function () {
$tip.remove();
}, 3750);
// jquery.fadeout can get stuck
};
UI.errorLoadingScreen = function (error, transparent, exitable) {
var $loading = $('#' + LOADING);
if (!$loading.is(':visible') || $loading.hasClass('cp-loading-hidden')) {
UI.addLoadingScreen({hideTips: true});
UI.addLoadingScreen();
}
loading.error = true;
// Remove the progress list
$loading.find('.cp-loading-progress').remove();
// Hide the spinner
$('.cp-loading-spinner-container').hide();
$('#cp-loading-tip').remove();
if (transparent) { $loading.css('opacity', 0.9); }
// Add the error message
var $error = $loading.find('#cp-loading-message').show();
if (error instanceof Element) {
$error.html('').append(error);
@ -1064,7 +1006,6 @@ define([
$(window).keydown(function (e) {
if (e.which === 27) {
$loading.hide();
loading.error = false;
if (typeof(exitable) === "function") { exitable(); }
}
});

10
www/common/common-ui-elements.js
View File

@ -2531,10 +2531,16 @@ define([
var submit = function () {
var value = $password.find('.cp-password-input').val();
UI.addLoadingScreen();
UI.addLoadingScreen({newProgress: true});
if (window.CryptPad_updateLoadingProgress) {
window.CryptPad_updateLoadingProgress({
type: 'pad',
progress: 0
});
}
common.getSframeChannel().query('Q_PAD_PASSWORD_VALUE', value, function (err, data) {
if (!data) {
UIElements.displayPasswordPrompt(common, cfg, true);
return void UIElements.displayPasswordPrompt(common, cfg, true);
}
});
};

36
www/common/outer/async-store.js
View File

@ -1378,11 +1378,15 @@ define([
}
}
};
var loadUniversal = function (Module, type, waitFor) {
var loadUniversal = function (Module, type, waitFor, clientId) {
if (store.modules[type]) { return; }
store.modules[type] = Module.init({
Store: Store,
store: store,
updateLoadingProgress: function (data) {
data.type = "team";
postMessage(clientId, 'LOADING_DRIVE', data);
},
updateMetadata: function () {
broadcast([], "UPDATE_METADATA");
},
@ -2485,32 +2489,40 @@ define([
addSharedFolderHandler();
nThen(function (waitFor) {
postMessage(clientId, 'LOADING_DRIVE', {
state: 2
});
userObject.migrate(waitFor());
}).nThen(function (waitFor) {
initAnonRpc(null, null, waitFor());
initRpc(null, null, waitFor());
postMessage(clientId, 'LOADING_DRIVE', {
type: 'migrate',
progress: 0
});
}).nThen(function (waitFor) {
Migrate(proxy, waitFor(), function (version, progress) {
postMessage(clientId, 'LOADING_DRIVE', {
state: (2 + (version / 10)),
type: 'migrate',
progress: progress
});
}, store);
}).nThen(function (waitFor) {
postMessage(clientId, 'LOADING_DRIVE', {
state: 3
type: 'sf',
progress: 0
});
userObject.fixFiles();
SF.loadSharedFolders(Store, store.network, store, userObject, waitFor);
SF.loadSharedFolders(Store, store.network, store, userObject, waitFor, function (obj) {
var data = {
type: 'sf',
progress: 100*obj.progress/obj.max
};
postMessage(clientId, 'LOADING_DRIVE', data);
});
loadCursor();
loadOnlyOffice();
loadUniversal(Messenger, 'messenger', waitFor);
store.messenger = store.modules['messenger'];
loadUniversal(Profile, 'profile', waitFor);
loadUniversal(Team, 'team', waitFor);
loadUniversal(Team, 'team', waitFor, clientId);
loadUniversal(History, 'history', waitFor);
cleanFriendRequests();
}).nThen(function () {
@ -2612,6 +2624,12 @@ define([
if (!hash) {
return void cb({error: '[Store.init] Unable to find or create a drive hash. Aborting...'});
}
var updateProgress = function (data) {
data.type = 'drive';
postMessage(clientId, 'LOADING_DRIVE', data);
};
// No password for drive
var secret = Hash.getSecrets('drive', hash);
store.driveChannel = secret.channel;
@ -2625,6 +2643,7 @@ define([
userName: 'fs',
logLevel: 1,
ChainPad: ChainPad,
updateProgress: updateProgress,
classic: true,
};
var rt = window.rt = Listmap.create(listmapConfig);
@ -2648,7 +2667,6 @@ define([
&& !drive['filesData']) {
drive[Constants.oldStorageKey] = [];
}
postMessage(clientId, 'LOADING_DRIVE', { state: 1 });
// Drive already exist: return the existing drive, don't load data from legacy store
onReady(clientId, returned, cb);
})

13
www/common/outer/sharedfolder.js
View File

@ -320,9 +320,12 @@ define([
- userObject: userObject associated to the main drive
- handler: a function (sfid, rt) called for each shared folder loaded
*/
SF.loadSharedFolders = function (Store, network, store, userObject, waitFor) {
SF.loadSharedFolders = function (Store, network, store, userObject, waitFor, progress) {
var shared = Util.find(store.proxy, ['drive', UserObject.SHARED_FOLDERS]) || {};
var steps = Object.keys(shared).length;
var i = 1;
var w = waitFor();
progress = progress || function () {};
nThen(function (waitFor) {
Object.keys(shared).forEach(function (id) {
var sf = shared[id];
@ -330,7 +333,13 @@ define([
network: network,
store: store,
isNewChannel: Store.isNewChannel
}, id, sf, waitFor());
}, id, sf, waitFor(function () {
progress({
progress: i,
max: steps
});
i++;
}));
});
}).nThen(function () {
setTimeout(w);

20
www/common/outer/team.js
View File

@ -328,7 +328,13 @@ define([
ctx.teams[id] = team;
registerChangeEvents(ctx, team, proxy);
SF.checkMigration(team.secondaryKey, proxy, team.userObject, waitFor());
SF.loadSharedFolders(ctx.Store, ctx.store.network, team, team.userObject, waitFor);
SF.loadSharedFolders(ctx.Store, ctx.store.network, team,
team.userObject, waitFor, function (data) {
ctx.progress += 70/(ctx.numberOfTeams * data.max);
ctx.updateProgress({
progress: ctx.progress
});
});
}).nThen(function () {
if (!team.rpc) { return; }
var list = getTeamChannelList(ctx, id);
@ -361,6 +367,9 @@ define([
};
// Progress:
// One team = (30/(#teams))%
// One shared folder = (70/(#teams * #folders))%
var openChannel = function (ctx, teamData, id, _cb) {
var cb = Util.once(Util.mkAsync(_cb));
@ -526,6 +535,10 @@ define([
Feedback.send("TEAM_RIGHTS_OWNER");
}
}).nThen(function () {
ctx.progress += 30/ctx.numberOfTeams;
ctx.updateProgress({
progress: ctx.progress
});
onReady(ctx, id, lm, roster, keys, null, cb);
});
};
@ -1686,10 +1699,13 @@ define([
emit: emit,
onReadyHandlers: {},
teams: {},
updateMetadata: cfg.updateMetadata
updateMetadata: cfg.updateMetadata,
updateProgress: cfg.updateLoadingProgress,
progress: 0
};
var teams = store.proxy.teams = store.proxy.teams || {};
ctx.numberOfTeams = Object.keys(teams).length;
// Listen for changes in our access rights (if another worker receives edit access)
ctx.store.proxy.on('change', ['teams'], function (o, n, p) {

9
www/common/sframe-app-framework.js
View File

@ -441,9 +441,9 @@ define([
var versionHashEl;
var onInit = function () {
UI.updateLoadingProgress({
state: 2,
type: 'pad',
progress: 0.1
}, false);
});
stateChange(STATE.INITIALIZING);
if ($('.cp-help-container').length) {
var privateDat = cpNfInner.metadataMgr.getPrivateData();
@ -471,8 +471,6 @@ define([
var newContentStr = cpNfInner.chainpad.getUserDoc();
if (state === STATE.DELETED) { return; }
UI.updateLoadingProgress({ state: -1 }, false);
if (toolbar) {
// Check if we have a new chainpad instance
toolbar.resetChainpad(cpNfInner.chainpad);
@ -708,9 +706,6 @@ define([
nThen(function (waitFor) {
UI.addLoadingScreen();
SFCommon.create(waitFor(function (c) { common = c; }));
UI.updateLoadingProgress({
state: 1
}, false);
}).nThen(function (waitFor) {
common.getSframeChannel().onReady(waitFor());
}).nThen(function (waitFor) {

3
www/common/sframe-boot2.js
View File

@ -42,6 +42,9 @@ define([
console.error("Require.js threw a Script Error. This probably means you're missing a dependency for CryptPad.\nIt is recommended that the admin of this server runs `bower install && bower update` to get the latest code, then modify their cache version.\nBest of luck,\nThe CryptPad Developers");
return void console.log();
}
if (window.CryptPad_loadingError) {
window.CryptPad_loadingError(e);
}
throw e;
};

9
www/common/sframe-chainpad-netflux-inner.js
View File

@ -140,7 +140,7 @@ define([
chainpad.message(content);
if (isHistory && updateLoadingProgress) {
updateLoadingProgress({
state: 2,
type: 'pad',
progress: isHistory
}, false);
isHistory++;
@ -149,6 +149,13 @@ define([
});
sframeChan.on('EV_RT_READY', function () {
if (isReady) { return; }
if (updateLoadingProgress) {
updateLoadingProgress({
type: 'end',
progress: 0
}, false);
isHistory++;
}
isReady = true;
isHistory = false;
chainpad.start();

8
www/common/sframe-common-outer.js
View File

@ -131,13 +131,7 @@ define([
if (sframeChan) { sframeChan.event('EV_LOADING_INFO', data); }
});
Cryptpad.ready(waitFor(function () {
if (sframeChan) {
sframeChan.event('EV_LOADING_INFO', {
state: -1
});
}
}), {
Cryptpad.ready(waitFor(), {
driveEvents: cfg.driveEvents,
currentPad: currentPad
});

18
www/common/sframe-common.js
View File

@ -345,7 +345,13 @@ define([
}
if (priv.burnAfterReading) {
UIElements.displayBurnAfterReadingPage(funcs, waitFor(function () {
UI.addLoadingScreen();
UI.addLoadingScreen({newProgress: true});
if (window.CryptPad_updateLoadingProgress) {
window.CryptPad_updateLoadingProgress({
type: 'pad',
progress: 0
});
}
ctx.sframeChan.event('EV_BURN_AFTER_READING');
}));
}
@ -619,6 +625,13 @@ define([
}
window.CryptPad_sframe_common = true;
if (window.CryptPad_updateLoadingProgress) {
window.CryptPad_updateLoadingProgress({
type: 'drive',
progress: 0
});
}
nThen(function (waitFor) {
var msgEv = Util.mkEvent();
var iframe = window.parent;
@ -686,7 +699,8 @@ define([
});
ctx.sframeChan.on('EV_LOADING_INFO', function (data) {
UI.updateLoadingProgress(data, 'drive');
//UI.updateLoadingProgress(data, 'drive');
UI.updateLoadingProgress(data);
});
ctx.sframeChan.on('EV_NEW_VERSION', function () {