diff --git a/config.js.dist b/config.js.dist index 0f7caeea3..1447f4898 100644 --- a/config.js.dist +++ b/config.js.dist @@ -2,5 +2,6 @@ module.exports = { httpPort: 3000, websocketPort: 3001, mongoUri: "mongodb://demo_user:demo_password@ds027769.mongolab.com:27769/demo_database", + // mongoUri: "mongodb://localhost:27017/cryptpad", mongoCollectionName: 'cryptpad' }; diff --git a/www/messages.js b/www/messages.js index f56ee82a3..d19124098 100644 --- a/www/messages.js +++ b/www/messages.js @@ -12,6 +12,7 @@ define(function () { out.editingWith = 'Editing with'; out.otherPeople = 'other people'; out.disconnected = 'Disconnected'; + out.synchronizing = 'Synchronizing'; out.lag = 'Lag'; out.initialState = [ diff --git a/www/realtime-wysiwyg.js b/www/realtime-wysiwyg.js index 8a18ff07d..0a15799aa 100644 --- a/www/realtime-wysiwyg.js +++ b/www/realtime-wysiwyg.js @@ -62,6 +62,8 @@ window.ErrorBox = ErrorBox; /** Key in the localStore which indicates realtime activity should be disallowed. */ var LOCALSTORAGE_DISALLOW = 'rtwysiwyg-disallow'; + var SPINNER_DISAPPEAR_TIME = 3000; + // ------------------ Trapping Keyboard Events ---------------------- // var bindEvents = function (element, events, callback, unbind) { @@ -95,6 +97,20 @@ window.ErrorBox = ErrorBox; 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 lag = realtime.getLag(); var lagSec = lag.lag/1000; @@ -116,7 +132,7 @@ window.ErrorBox = ErrorBox; var updateUserList = function (myUserName, listElement, userList) { var meIdx = userList.indexOf(myUserName); if (meIdx === -1) { - listElement.text(Messages.disconnected); + listElement.text(Messages.synchronizing); return; } if (userList.length === 1) { @@ -301,6 +317,12 @@ window.ErrorBox = ErrorBox; return lagElement; }; + var createSpinner = function (container) { + var id = uid(); + $(container).append('
'); + return $('#'+id)[0]; + }; + var createRealtimeToolbar = function (container) { var id = uid(); $(container).prepend( @@ -341,6 +363,9 @@ window.ErrorBox = ErrorBox; '.rtwysiwyg-lag {', ' float: right;', '}', + '.rtwysiwyg-spinner {', + ' float: left;', + '}', '.gwt-TabBar {', ' display:none;', '}', @@ -490,6 +515,8 @@ window.ErrorBox = ErrorBox; userName, toolbar.find('.rtwysiwyg-toolbar-leftside')); + var spinner = createSpinner(toolbar.find('.rtwysiwyg-toolbar-rightside')); + onEvent = function () { if (isErrorState) { return; } if (initializing) { return; } @@ -514,7 +541,9 @@ window.ErrorBox = ErrorBox; var userDocBeforePatch; var incomingPatch = function () { - if (isErrorState || initializing) { return; } + if (isErrorState) { return; } + kickSpinner(spinner); + if (initializing) { return; } userDocBeforePatch = userDocBeforePatch || getFixedDocText(doc, ifr.contentWindow); if (PARANOIA && userDocBeforePatch != getFixedDocText(doc, ifr.contentWindow)) { error(false, "userDocBeforePatch != getFixedDocText(doc, ifr.contentWindow)");