show a little spinner which spins when loading and when people type
This commit is contained in:
parent
87aa1aaf91
commit
2a1f3f9027
3 changed files with 33 additions and 2 deletions
|
@ -2,5 +2,6 @@ module.exports = {
|
||||||
httpPort: 3000,
|
httpPort: 3000,
|
||||||
websocketPort: 3001,
|
websocketPort: 3001,
|
||||||
mongoUri: "mongodb://demo_user:demo_password@ds027769.mongolab.com:27769/demo_database",
|
mongoUri: "mongodb://demo_user:demo_password@ds027769.mongolab.com:27769/demo_database",
|
||||||
|
// mongoUri: "mongodb://localhost:27017/cryptpad",
|
||||||
mongoCollectionName: 'cryptpad'
|
mongoCollectionName: 'cryptpad'
|
||||||
};
|
};
|
||||||
|
|
|
@ -12,6 +12,7 @@ define(function () {
|
||||||
out.editingWith = 'Editing with';
|
out.editingWith = 'Editing with';
|
||||||
out.otherPeople = 'other people';
|
out.otherPeople = 'other people';
|
||||||
out.disconnected = 'Disconnected';
|
out.disconnected = 'Disconnected';
|
||||||
|
out.synchronizing = 'Synchronizing';
|
||||||
out.lag = 'Lag';
|
out.lag = 'Lag';
|
||||||
|
|
||||||
out.initialState = [
|
out.initialState = [
|
||||||
|
|
|
@ -62,6 +62,8 @@ window.ErrorBox = ErrorBox;
|
||||||
/** Key in the localStore which indicates realtime activity should be disallowed. */
|
/** Key in the localStore which indicates realtime activity should be disallowed. */
|
||||||
var LOCALSTORAGE_DISALLOW = 'rtwysiwyg-disallow';
|
var LOCALSTORAGE_DISALLOW = 'rtwysiwyg-disallow';
|
||||||
|
|
||||||
|
var SPINNER_DISAPPEAR_TIME = 3000;
|
||||||
|
|
||||||
// ------------------ Trapping Keyboard Events ---------------------- //
|
// ------------------ Trapping Keyboard Events ---------------------- //
|
||||||
|
|
||||||
var bindEvents = function (element, events, callback, unbind) {
|
var bindEvents = function (element, events, callback, unbind) {
|
||||||
|
@ -95,6 +97,20 @@ window.ErrorBox = ErrorBox;
|
||||||
unbind);
|
unbind);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var SPINNER = [ '-', '\\', '|', '/' ];
|
||||||
|
var kickSpinner = function (spinnerElement, reversed) {
|
||||||
|
var now = (new Date()).getTime();
|
||||||
|
if (spinnerElement.time && (now - spinnerElement.time) < 50) { return; }
|
||||||
|
spinnerElement.time = now;
|
||||||
|
var txt = spinnerElement.textContent || '-';
|
||||||
|
var inc = (reversed) ? -1 : 1;
|
||||||
|
spinnerElement.textContent = SPINNER[(SPINNER.indexOf(txt) + inc) % SPINNER.length];
|
||||||
|
spinnerElement.timeout && clearTimeout(spinnerElement.timeout);
|
||||||
|
spinnerElement.timeout = setTimeout(function () {
|
||||||
|
spinnerElement.textContent = '';
|
||||||
|
}, SPINNER_DISAPPEAR_TIME);
|
||||||
|
};
|
||||||
|
|
||||||
var checkLag = function (realtime, lagElement) {
|
var checkLag = function (realtime, lagElement) {
|
||||||
var lag = realtime.getLag();
|
var lag = realtime.getLag();
|
||||||
var lagSec = lag.lag/1000;
|
var lagSec = lag.lag/1000;
|
||||||
|
@ -116,7 +132,7 @@ window.ErrorBox = ErrorBox;
|
||||||
var updateUserList = function (myUserName, listElement, userList) {
|
var updateUserList = function (myUserName, listElement, userList) {
|
||||||
var meIdx = userList.indexOf(myUserName);
|
var meIdx = userList.indexOf(myUserName);
|
||||||
if (meIdx === -1) {
|
if (meIdx === -1) {
|
||||||
listElement.text(Messages.disconnected);
|
listElement.text(Messages.synchronizing);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (userList.length === 1) {
|
if (userList.length === 1) {
|
||||||
|
@ -301,6 +317,12 @@ window.ErrorBox = ErrorBox;
|
||||||
return lagElement;
|
return lagElement;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var createSpinner = function (container) {
|
||||||
|
var id = uid();
|
||||||
|
$(container).append('<div class="rtwysiwyg-spinner" id="'+id+'"></div>');
|
||||||
|
return $('#'+id)[0];
|
||||||
|
};
|
||||||
|
|
||||||
var createRealtimeToolbar = function (container) {
|
var createRealtimeToolbar = function (container) {
|
||||||
var id = uid();
|
var id = uid();
|
||||||
$(container).prepend(
|
$(container).prepend(
|
||||||
|
@ -341,6 +363,9 @@ window.ErrorBox = ErrorBox;
|
||||||
'.rtwysiwyg-lag {',
|
'.rtwysiwyg-lag {',
|
||||||
' float: right;',
|
' float: right;',
|
||||||
'}',
|
'}',
|
||||||
|
'.rtwysiwyg-spinner {',
|
||||||
|
' float: left;',
|
||||||
|
'}',
|
||||||
'.gwt-TabBar {',
|
'.gwt-TabBar {',
|
||||||
' display:none;',
|
' display:none;',
|
||||||
'}',
|
'}',
|
||||||
|
@ -490,6 +515,8 @@ window.ErrorBox = ErrorBox;
|
||||||
userName,
|
userName,
|
||||||
toolbar.find('.rtwysiwyg-toolbar-leftside'));
|
toolbar.find('.rtwysiwyg-toolbar-leftside'));
|
||||||
|
|
||||||
|
var spinner = createSpinner(toolbar.find('.rtwysiwyg-toolbar-rightside'));
|
||||||
|
|
||||||
onEvent = function () {
|
onEvent = function () {
|
||||||
if (isErrorState) { return; }
|
if (isErrorState) { return; }
|
||||||
if (initializing) { return; }
|
if (initializing) { return; }
|
||||||
|
@ -514,7 +541,9 @@ window.ErrorBox = ErrorBox;
|
||||||
|
|
||||||
var userDocBeforePatch;
|
var userDocBeforePatch;
|
||||||
var incomingPatch = function () {
|
var incomingPatch = function () {
|
||||||
if (isErrorState || initializing) { return; }
|
if (isErrorState) { return; }
|
||||||
|
kickSpinner(spinner);
|
||||||
|
if (initializing) { return; }
|
||||||
userDocBeforePatch = userDocBeforePatch || getFixedDocText(doc, ifr.contentWindow);
|
userDocBeforePatch = userDocBeforePatch || getFixedDocText(doc, ifr.contentWindow);
|
||||||
if (PARANOIA && userDocBeforePatch != getFixedDocText(doc, ifr.contentWindow)) {
|
if (PARANOIA && userDocBeforePatch != getFixedDocText(doc, ifr.contentWindow)) {
|
||||||
error(false, "userDocBeforePatch != getFixedDocText(doc, ifr.contentWindow)");
|
error(false, "userDocBeforePatch != getFixedDocText(doc, ifr.contentWindow)");
|
||||||
|
|
Loading…
Reference in a new issue