diff --git a/customize.dist/loading.js b/customize.dist/loading.js index 32841f253..56e9a4cab 100644 --- a/customize.dist/loading.js +++ b/customize.dist/loading.js @@ -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{ '
', '', '
', + '
', + '
', + '
', + '
', '

', '' ].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 = '('+p+'%)'; + } + return '
  • '+Messages['loading_state_'+i]+'' + percentStr; + }; + var list = ''; + 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 = '
    '+ + '
    '+ + '
    '; + 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; } diff --git a/customize.dist/messages.js b/customize.dist/messages.js index 11d814540..40dbbfb95 100755 --- a/customize.dist/messages.js +++ b/customize.dist/messages.js @@ -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]; } }; diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index b463a126c..5b52b3d2c 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -150,6 +150,7 @@ define([ }).nThen(function () { cb(); }); }; + var idx = 0; module.exports.load = function (url /*:string*/, cb /*:()=>void*/, stack /*:?Array*/) { 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); diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 118931148..d423b48ee 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -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(); } } }); diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 8b9415220..a77aa1568 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -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); } }); }; diff --git a/www/common/outer/async-store.js b/www/common/outer/async-store.js index d87bb955e..bfbc08b77 100644 --- a/www/common/outer/async-store.js +++ b/www/common/outer/async-store.js @@ -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); }) diff --git a/www/common/outer/sharedfolder.js b/www/common/outer/sharedfolder.js index f02ea9c5a..e34cd64df 100644 --- a/www/common/outer/sharedfolder.js +++ b/www/common/outer/sharedfolder.js @@ -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); diff --git a/www/common/outer/team.js b/www/common/outer/team.js index e5a40505e..de9206511 100644 --- a/www/common/outer/team.js +++ b/www/common/outer/team.js @@ -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) { diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js index beaf20b10..3097cf6d2 100644 --- a/www/common/sframe-app-framework.js +++ b/www/common/sframe-app-framework.js @@ -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) { diff --git a/www/common/sframe-boot2.js b/www/common/sframe-boot2.js index 0d0eaa90c..5a68237ad 100644 --- a/www/common/sframe-boot2.js +++ b/www/common/sframe-boot2.js @@ -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; }; diff --git a/www/common/sframe-chainpad-netflux-inner.js b/www/common/sframe-chainpad-netflux-inner.js index b6f4c6aaf..abb1cebdf 100644 --- a/www/common/sframe-chainpad-netflux-inner.js +++ b/www/common/sframe-chainpad-netflux-inner.js @@ -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(); diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js index a03be3f64..086841f73 100644 --- a/www/common/sframe-common-outer.js +++ b/www/common/sframe-common-outer.js @@ -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 }); diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js index 8d4898911..f7a2c41c3 100644 --- a/www/common/sframe-common.js +++ b/www/common/sframe-common.js @@ -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 () {