web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix Flash Of Unstyled Content (fouc)

Browse Source
This commit is contained in:
yflory
2016-12-21 18:33:21 +01:00
parent 046220f239
commit 87abfff66b
14 changed files with 149 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
www/code/main.js
View File

@@ -21,12 +21,10 @@ define([
var module = window.APP = {
Cryptpad: Cryptpad,
spinner: Cryptpad.spinner(document.body),
};
Cryptpad.styleAlerts();
module.spinner.show();
Cryptpad.addLoadingScreen();
var ifrw = module.ifrw = $('#pad-iframe')[0].contentWindow;
var stringify = function (obj) {
@@ -43,8 +41,7 @@ define([
}
var onConnectError = function (info) {
module.spinner.hide();
Cryptpad.alert(Messages.websocketError);
Cryptpad.errorLoadingScreen(Messages.websocketError);
};
var andThen = function (CMeditor) {
@@ -565,7 +562,7 @@ define([
});
}
$(module.spinner.get().el).fadeOut(750);
Cryptpad.removeLoadingScreen();
setEditable(true);
initializing = false;
//Cryptpad.log("Your document is ready");

35
www/common/cryptpad-common.js
View File

@@ -735,6 +735,26 @@ define([
});
};
var LOADING = 'loading';
common.addLoadingScreen = function () {
var $loading = $('<div>', {id: LOADING});
var $container = $('<div>', {'class': 'loadingContainer'});
$container.append('<img class="cryptofist" src="/customize/cryptofist_small.png" />');
var $spinner = $('<div>', {'class': 'spinnerContainer'});
loadingSpinner = common.spinner($spinner).show();
var $text = $('<p>').text(Messages.loading);
$container.append($spinner).append($text);
$loading.append($container);
$('body').append($loading);
};
common.removeLoadingScreen = function () {
$('#' + LOADING).fadeOut(750);
};
common.errorLoadingScreen = function (error) {
$('.spinnerContainer').hide();
$('#' + LOADING).find('p').text(error || Messages.error);
};
/*
* Saving files
*/
@@ -1066,17 +1086,17 @@ define([
$(parent).append($target);
var opts = {
lines: 9, // The number of lines to draw
length: 12, // The length of each line
width: 11, // The line thickness
radius: 20, // The radius of the inner circle
lines: 20, // The number of lines to draw
length: 5, // The length of each line
width: 2, // The line thickness
radius: 15, // The radius of the inner circle
scale: 2, // Scales overall size of the spinner
corners: 1, // Corner roundness (0..1)
color: '#777', // #rgb or #rrggbb or array of colors
color: '#ddd', // #rgb or #rrggbb or array of colors
opacity: 0.3, // Opacity of the lines
rotate: 31, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
speed: 0.9, // Rounds per second
speed: 1, // Rounds per second
trail: 49, // Afterglow percentage
fps: 20, // Frames per second when using setTimeout() as a fallback for CSS
zIndex: 2e9, // The z-index (defaults to 2000000000)
@@ -1085,7 +1105,8 @@ define([
left: '50%', // Left position relative to parent
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
position: 'absolute', // Element positioning
position: 'relative', // Element positioning
height: '100px'
};
var spinner = new Spinner(opts).spin($target[0]);

19
www/file/fileObject.js
View File

@@ -254,7 +254,7 @@ define([
var parentEl = exp.findElement(files, parentPath);
if (path.length === 4 && path[0] === TRASH) {
files[TRASH][path[1]].splice(path[2], 1);
} else if (path[0] === UNSORTED) {
} else if (path[0] === UNSORTED) { //TODO || === TEMPLATE
parentEl.splice(key, 1);
} else {
parentEl[key] = undefined;
@@ -264,6 +264,7 @@ define([
};
// Find an element in a object following a path, resursively
// NOTE: it is always used with an absolute path and root === files in our code
var findElement = exp.findElement = function (root, pathInput) {
if (!pathInput) {
error("Invalid path:\n", pathInput, "\nin root\n", root);
@@ -279,6 +280,7 @@ define([
return findElement(root[key], path);
};
// Get the object {element: element, path: [path]} from a trash root path
var getTrashElementData = exp.getTrashElementData = function (trashPath) {
if (!isInTrashRoot) {
debug("Called getTrashElementData on a element not in trash root: ", trashPath);
@@ -289,6 +291,7 @@ define([
return findElement(files, parentPath);
};
// Get data from AllFiles (Cryptpad_RECENTPADS)
var getFileData = exp.getFileData = function (file) {
if (!file) { return; }
var res;
@@ -328,6 +331,7 @@ define([
};
// Move to trash
// TODO: rename the function
var removeElement = exp.removeElement = function (path, cb, keepOld) {
if (!path || path.length < 2 || path[0] === TRASH) {
debug("Calling removeElement from a wrong path: ", path);
@@ -343,6 +347,7 @@ define([
if (cb) { cb(); }
};
//TODO add suport for TEMPLATE here
var moveElement = exp.moveElement = function (elementPath, newParentPath, cb, keepOld) {
if (comparePath(elementPath, newParentPath)) { return; } // Nothing to do...
if (isPathInTrash(newParentPath)) {
@@ -353,12 +358,13 @@ define([
var newParent = findElement(files, newParentPath);
// Never move a folder in one of its children
if (isFolder(element) && isSubpath(newParentPath, elementPath)) {
log(Messages.fo_moveFolderToChildError);
return;
}
if (isPathInUnsorted(newParentPath)) {
if (isPathInUnsorted(newParentPath)) { //TODO || TEMPLATE
if (isFolder(element)) {
log(Messages.fo_moveUnsortedError);
return;
@@ -386,7 +392,7 @@ define([
var newName = !isPathInRoot(elementPath) ? getAvailableName(newParent, name) : name;
if (typeof(newParent[newName]) !== "undefined") {
log("A file with the same name already exist at the new location. Rename the file and try again.");
log(Messages.fo_unavailableName);
return;
}
newParent[newName] = element;
@@ -523,6 +529,7 @@ define([
var emptyTrash = exp.emptyTrash = function (cb) {
files[TRASH] = {};
checkDeletedFiles();
if(cb) { cb(); }
};
@@ -592,7 +599,7 @@ define([
var fixFiles = exp.fixFiles = function () {
// Explore the tree and check that everything is correct:
// * 'root', 'trash' and 'filesData' exist and are objects
// * 'root', 'trash', 'unsorted' and 'filesData' exist and are objects
// * ROOT: Folders are objects, files are href
// * TRASH: Trash root contains only arrays, each element of the array is an object {element:.., path:..}
// * FILES_DATA: - Data (title, cdate, adte) are stored in filesData. filesData contains only href keys linking to object with title, cdate, adate.
@@ -601,10 +608,6 @@ define([
// * UNSORTED: Contains only files (href), and does not contains files that are in ROOT
debug("Cleaning file system...");
// Create a backup
if (typeof(localStorage.oldFileSystem) === "undefined") {
localStorage.oldFileSystem = '[]';
}
var before = JSON.stringify(files);
if (typeof(files[ROOT]) !== "object") { debug("ROOT was not an object"); files[ROOT] = {}; }

22
www/file/main.js
View File

@@ -18,6 +18,11 @@ define([
var $iframe = $('#pad-iframe').contents();
var ifrw = $('#pad-iframe')[0].contentWindow;
Cryptpad.addLoadingScreen();
var onConnectError = function (info) {
Cryptpad.errorLoadingScreen(Messages.websocketError);
};
var APP = window.APP = {
$bar: $iframe.find('#toolbar'),
editable: false
@@ -48,12 +53,6 @@ define([
console.error.apply(console, arguments);
};
var log = config.log = Cryptpad.log;
var DEBUG_LS = APP.DEBUG_LS = {
resetLocalStorage : function () {
delete localStorage[LOCALSTORAGE_OPENED];
delete localStorage[LOCALSTORAGE_LAST];
}
};
var getLastOpenedFolder = function () {
var path;
@@ -459,6 +458,7 @@ define([
var andThen = function () {
filesOp.moveElements(paths, newPath, cb);
};
// "force" is currently unused but may be configurable by user
if (newPath[0] !== TRASH || force) {
andThen();
return;
@@ -1405,6 +1405,7 @@ define([
pressKey(e.which, false);
});
$(ifrw).on('keydown', function (e) {
// "Del"
if (e.which === 46) {
var $selected = $iframe.find('.selected');
if (!$selected.length) { return; }
@@ -1552,6 +1553,7 @@ define([
var $backupButton = Cryptpad.createButton('', true);
$backupButton.on('click', function() {
var url = window.location.origin + window.location.pathname + '#' + editHash;
//TODO change text & transalte
Cryptpad.alert("Backup URL for this pad. It is highly recommended that you do not share it with other people.<br>Anybody with that URL can remove all the files in your file manager.<br>" + url);
});
$userBlock.append($backupButton);
@@ -1566,12 +1568,15 @@ define([
proxy[FILES_DATA] = s;
initLocalStorage();
init(proxy);
APP.userList.onChange();
Cryptpad.removeLoadingScreen();
});
return;
}
initLocalStorage();
init(proxy);
APP.userList.onChange();
Cryptpad.removeLoadingScreen();
};
var onDisconnect = function (info) {
setEditable(false);
@@ -1593,6 +1598,11 @@ define([
onDisconnect();
});
});
Cryptpad.onError(function (info) {
if (info) {
onConnectError();
}
});
});

9
www/pad/main.js
View File

@@ -27,6 +27,7 @@ define([
var DiffDom = window.diffDOM;
Cryptpad.styleAlerts();
Cryptpad.addLoadingScreen();
var stringify = function (obj) {
return JSONSortify(obj);
@@ -60,7 +61,6 @@ define([
logFights: true,
fights: [],
Cryptpad: Cryptpad,
spinner: Cryptpad.spinner(document.body),
};
var toolbar;
@@ -78,8 +78,7 @@ define([
};
var onConnectError = function (info) {
module.spinner.hide();
Cryptpad.alert(Messages.websocketError);
Cryptpad.errorLoadingScreen(Messages.websocketError);
};
var andThen = function (Ckeditor) {
@@ -140,9 +139,6 @@ define([
$(inner).css({
color: '#333',
});
$(module.spinner.get().el).fadeOut(750);
} else {
module.spinner.show();
}
if (!readOnly || !bool) {
inner.setAttribute('contenteditable', bool);
@@ -657,6 +653,7 @@ define([
console.log("Unlocking editor");
setEditable(true);
initializing = false;
Cryptpad.removeLoadingScreen();
// Update the toolbar list:
// Add the current user in the metadata if he has edit rights
if (readOnly) { return; }

17
www/poll/test/main.js
View File

@@ -22,6 +22,11 @@ define([
var secret = Cryptpad.getSecrets();
var readOnly = secret.keys && !secret.keys.editKeyStr;
Cryptpad.addLoadingScreen();
var onConnectError = function (info) {
Cryptpad.errorLoadingScreen(Messages.websocketError);
};
var APP = window.APP = {
Toolbar: Toolbar,
Hyperjson: Hyperjson,
@@ -566,6 +571,7 @@ define([
} else {
publish(true);
}
Cryptpad.removeLoadingScreen();
// Update the toolbar list:
// Add the current user in the metadata if he has edit rights
@@ -662,11 +668,7 @@ define([
var disconnect = function (info) {
//setEditable(false); // TODO
if (info.error) {
Cryptpad.alert(Messages.websocketError);
return;
}
//Cryptpad.alert(Messages.common_connectionLost); // TODO
Cryptpad.alert(Messages.common_connectionLost);
};
var config = {
@@ -715,5 +717,10 @@ define([
}
});
});
Cryptpad.onError(function (info) {
if (info) {
onConnectError();
}
});
});

8
www/slide/main.js
View File

@@ -22,7 +22,6 @@ define([
var module = window.APP = {
Cryptpad: Cryptpad,
spinner: Cryptpad.spinner(document.body),
TextPatcher: TextPatcher,
Slide: Slide,
};
@@ -32,7 +31,7 @@ define([
var SLIDE_COLOR_ID = "cryptpad-color";
Cryptpad.styleAlerts();
module.spinner.show();
Cryptpad.addLoadingScreen();
var stringify = function (obj) {
return JSONSortify(obj);
@@ -60,8 +59,7 @@ define([
var presentMode = Slide.isPresentURL();
var onConnectError = function (info) {
module.spinner.hide();
Cryptpad.alert(Messages.websocketError);
Cryptpad.errorLoadingScreen(Messages.websocketError);
};
var andThen = function (CMeditor) {
@@ -663,7 +661,7 @@ define([
document.title = APP.title;
});
$(module.spinner.get().el).fadeOut(750);
Cryptpad.removeLoadingScreen();
setEditable(true);
initializing = false;
//Cryptpad.log("Your document is ready");