define([ '/common/messages.js' ], function (Messages) { /** Id of the element for getting debug info. */ var DEBUG_LINK_CLS = 'rtwysiwyg-debug-link'; /** Id of the div containing the user list. */ var USER_LIST_CLS = 'rtwysiwyg-user-list'; /** Id of the div containing the lag info. */ var LAG_ELEM_CLS = 'rtwysiwyg-lag'; /** The toolbar class which contains the user list, debug link and lag. */ var TOOLBAR_CLS = 'rtwysiwyg-toolbar'; /** Key in the localStore which indicates realtime activity should be disallowed. */ var LOCALSTORAGE_DISALLOW = 'rtwysiwyg-disallow'; var SPINNER_DISAPPEAR_TIME = 3000; var SPINNER = [ '-', '\\', '|', '/' ]; var uid = function () { return 'rtwysiwyg-uid-' + String(Math.random()).substring(2); }; var createRealtimeToolbar = function ($container) { var id = uid(); $container.prepend( '<div class="' + TOOLBAR_CLS + '" id="' + id + '">' + '<div class="rtwysiwyg-toolbar-leftside"></div>' + '<div class="rtwysiwyg-toolbar-rightside"></div>' + '</div>' ); var toolbar = $container.find('#'+id); toolbar.append([ '<style>', '.' + TOOLBAR_CLS + ' {', ' color: #666;', ' font-weight: bold;', // ' background-color: #f0f0ee;', // ' border-bottom: 1px solid #DDD;', // ' border-top: 3px solid #CCC;', // ' border-right: 2px solid #CCC;', // ' border-left: 2px solid #CCC;', ' height: 26px;', ' margin-bottom: -3px;', ' display: inline-block;', ' width: 100%;', '}', '.' + TOOLBAR_CLS + ' a {', ' float: right;', '}', '.' + TOOLBAR_CLS + ' div {', ' padding: 0 10px;', ' height: 1.5em;', // ' background: #f0f0ee;', ' line-height: 25px;', ' height: 22px;', '}', '.' + TOOLBAR_CLS + ' div.rtwysiwyg-back {', ' padding: 0;', ' font-weight: bold;', ' cursor: pointer;', ' color: #000;', '}', '.rtwysiwyg-toolbar-leftside div {', ' float: left;', '}', '.rtwysiwyg-toolbar-leftside {', ' float: left;', '}', '.rtwysiwyg-toolbar-rightside {', ' float: right;', '}', '.rtwysiwyg-lag {', ' float: right;', '}', '.rtwysiwyg-spinner {', ' float: left;', '}', '.gwt-TabBar {', ' display:none;', '}', '.' + DEBUG_LINK_CLS + ':link { color:transparent; }', '.' + DEBUG_LINK_CLS + ':link:hover { color:blue; }', '.gwt-TabPanelBottom { border-top: 0 none; }', '</style>' ].join('\n')); return toolbar; }; var createEscape = function ($container) { var id = uid(); $container.append('<div class="rtwysiwyg-back" id="' + id + '">⇐ Back</div>'); var $ret = $container.find('#'+id); $ret.on('click', function () { window.location.href = '/'; }); return $ret[0]; }; var createSpinner = function ($container) { var id = uid(); $container.append('<div class="rtwysiwyg-spinner" id="'+id+'"></div>'); return $container.find('#'+id)[0]; }; var kickSpinner = function (spinnerElement, reversed) { var txt = spinnerElement.textContent || '-'; var inc = (reversed) ? -1 : 1; spinnerElement.textContent = SPINNER[(SPINNER.indexOf(txt) + inc) % SPINNER.length]; if (spinnerElement.timeout) { clearTimeout(spinnerElement.timeout); } spinnerElement.timeout = setTimeout(function () { spinnerElement.textContent = ''; }, SPINNER_DISAPPEAR_TIME); }; var createUserList = function ($container) { var id = uid(); $container.append('<div class="' + USER_LIST_CLS + '" id="'+id+'"></div>'); return $container.find('#'+id)[0]; }; var updateUserList = function (myUserName, listElement, userList) { var meIdx = userList.indexOf(myUserName); if (meIdx === -1) { listElement.textContent = Messages.synchronizing; return; } if (userList.length === 1) { listElement.textContent = Messages.editingAlone; } else if (userList.length === 2) { listElement.textContent = Messages.editingWithOneOtherPerson; } else { listElement.textContent = Messages.editingWith + ' ' + (userList.length - 1) + ' ' + Messages.otherPeople; } }; var createLagElement = function ($container) { var id = uid(); $container.append('<div class="' + LAG_ELEM_CLS + '" id="'+id+'"></div>'); return $container.find('#'+id)[0]; }; var checkLag = function (realtime, lagElement) { var lag = realtime.getLag(); var lagSec = lag.lag/1000; var lagMsg = Messages.lag + ' '; if (lag.waiting && lagSec > 1) { lagMsg += "?? " + Math.floor(lagSec); } else { lagMsg += lagSec; } lagElement.textContent = lagMsg; }; // this is a little hack, it should go in it's own file. // FIXME ok, so let's put it in its own file then // TODO there should also be a 'clear recent pads' button var rememberPad = function () { // FIXME, this is overly complicated, use array methods var recentPadsStr = localStorage['CryptPad_RECENTPADS']; var recentPads = []; if (recentPadsStr) { recentPads = JSON.parse(recentPadsStr); } // TODO use window.location.hash or something like that if (window.location.href.indexOf('#') === -1) { return; } var now = new Date(); var out = []; for (var i = recentPads.length; i >= 0; i--) { if (recentPads[i] && // TODO precompute this time value, maybe make it configurable? // FIXME precompute the date too, why getTime every time? now.getTime() - recentPads[i][1] < (1000*60*60*24*30) && recentPads[i][0] !== window.location.href) { out.push(recentPads[i]); } } out.push([window.location.href, now.getTime()]); localStorage['CryptPad_RECENTPADS'] = JSON.stringify(out); }; var create = function ($container, myUserName, realtime) { var toolbar = createRealtimeToolbar($container); createEscape(toolbar.find('.rtwysiwyg-toolbar-leftside')); var userListElement = createUserList(toolbar.find('.rtwysiwyg-toolbar-leftside')); var spinner = createSpinner(toolbar.find('.rtwysiwyg-toolbar-rightside')); var lagElement = createLagElement(toolbar.find('.rtwysiwyg-toolbar-rightside')); rememberPad(); var connected = false; realtime.onUserListChange(function (userList) { if (userList.indexOf(myUserName) !== -1) { connected = true; } if (!connected) { return; } updateUserList(myUserName, userListElement, userList); }); var ks = function () { if (connected) { kickSpinner(spinner, false); } }; realtime.onPatch(ks); // Try to filter out non-patch messages, doesn't have to be perfect this is just the spinner realtime.onMessage(function (msg) { if (msg.indexOf(':[2,') > -1) { ks(); } }); setInterval(function () { if (!connected) { return; } checkLag(realtime, lagElement); }, 3000); return { failed: function () { connected = false; userListElement.textContent = ''; lagElement.textContent = ''; }, reconnecting: function () { connected = false; userListElement.textContent = Messages.reconnecting; lagElement.textContent = ''; }, connected: function () { connected = true; } }; }; return { create: create }; });