From 4b35a145e31bf375d7889a309e3e97e416ac9656 Mon Sep 17 00:00:00 2001 From: ansuz Date: Fri, 25 Mar 2016 11:04:27 +0100 Subject: [PATCH] Push WIP --- www/_socket/index.html | 41 +++ www/_socket/inner.html | 12 + www/_socket/main.js | 311 ++++++++++++++++ www/_socket/realtime-input.js | 346 ++++++++++++++++++ .../sharejs_textarea-transport-only.js | 74 ++++ www/_socket/toolbar.js | 233 ++++++++++++ 6 files changed, 1017 insertions(+) create mode 100644 www/_socket/index.html create mode 100644 www/_socket/inner.html create mode 100644 www/_socket/main.js create mode 100644 www/_socket/realtime-input.js create mode 100644 www/_socket/sharejs_textarea-transport-only.js create mode 100644 www/_socket/toolbar.js diff --git a/www/_socket/index.html b/www/_socket/index.html new file mode 100644 index 000000000..6ee2a8596 --- /dev/null +++ b/www/_socket/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + + diff --git a/www/_socket/inner.html b/www/_socket/inner.html new file mode 100644 index 000000000..bf79dcd0d --- /dev/null +++ b/www/_socket/inner.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/www/_socket/main.js b/www/_socket/main.js new file mode 100644 index 000000000..56f03cc1e --- /dev/null +++ b/www/_socket/main.js @@ -0,0 +1,311 @@ +define([ + '/api/config?cb=' + Math.random().toString(16).substring(2), + '/common/messages.js', + '/common/crypto.js', + '/_socket/realtime-input.js', + '/common/convert.js', + '/_socket/toolbar.js', + '/common/cursor.js', + '/common/json-ot.js', + '/bower_components/diff-dom/diffDOM.js', + '/bower_components/jquery/dist/jquery.min.js', + '/customize/pad.js' +], function (Config, Messages, Crypto, realtimeInput, Convert, Toolbar, Cursor, JsonOT) { + var $ = window.jQuery; + var ifrw = $('#pad-iframe')[0].contentWindow; + var Ckeditor; // to be initialized later... + var DiffDom = window.diffDOM; + + window.Convert = Convert; + + window.Toolbar = Toolbar; + + var userName = Crypto.rand64(8), + toolbar; + + var module = {}; + + var isNotMagicLine = function (el) { + // factor as: + // return !(el.tagName === 'SPAN' && el.contentEditable === 'false'); + var filter = (el.tagName === 'SPAN' && el.contentEditable === 'false'); + if (filter) { + console.log("[hyperjson.serializer] prevented an element" + + "from being serialized:", el); + return false; + } + return true; + }; + + var andThen = function (Ckeditor) { + $(window).on('hashchange', function() { + window.location.reload(); + }); + if (window.location.href.indexOf('#') === -1) { + window.location.href = window.location.href + '#' + Crypto.genKey(); + return; + } + + var fixThings = false; + var key = Crypto.parseKey(window.location.hash.substring(1)); + var editor = window.editor = Ckeditor.replace('editor1', { + // https://dev.ckeditor.com/ticket/10907 + needsBrFiller: fixThings, + needsNbspFiller: fixThings, + removeButtons: 'Source,Maximize', + // magicline plugin inserts html crap into the document which is not part of the + // document itself and causes problems when it's sent across the wire and reflected back + // but we filter it now, so that's ok. + removePlugins: 'resize' + }); + + editor.on('instanceReady', function (Ckeditor) { + editor.execCommand('maximize'); + var documentBody = ifrw.$('iframe')[0].contentDocument.body; + + documentBody.innerHTML = Messages.initialState; + + var inner = window.inner = documentBody; + var cursor = window.cursor = Cursor(inner); + + var $textarea = $('#feedback'); + + var setEditable = function (bool) { + // inner.style.backgroundColor = bool? 'unset': 'grey'; + inner.setAttribute('contenteditable', bool); + }; + + // don't let the user edit until the pad is ready + setEditable(false); + + var diffOptions = { + preDiffApply: function (info) { + /* TODO DiffDOM will filter out magicline plugin elements + in practice this will make it impossible to use it + while someone else is typing, which could be annoying + + we should check when such an element is going to be + removed, and prevent that from happening. */ + + // no use trying to recover the cursor if it doesn't exist + if (!cursor.exists()) { return; } + + /* frame is either 0, 1, 2, or 3, depending on which + cursor frames were affected: none, first, last, or both + */ + var frame = info.frame = cursor.inNode(info.node); + + if (!frame) { return; } + + if (typeof info.diff.oldValue === 'string' && typeof info.diff.newValue === 'string') { + var pushes = cursor.pushDelta(info.diff.oldValue, info.diff.newValue); + + if (frame & 1) { + // push cursor start if necessary + if (pushes.commonStart < cursor.Range.start.offset) { + cursor.Range.start.offset += pushes.delta; + } + } + if (frame & 2) { + // push cursor end if necessary + if (pushes.commonStart < cursor.Range.end.offset) { + cursor.Range.end.offset += pushes.delta; + } + } + } + }, + postDiffApply: function (info) { + if (info.frame) { + if (info.node) { + if (info.frame & 1) { cursor.fixStart(info.node); } + if (info.frame & 2) { cursor.fixEnd(info.node); } + } else { console.error("info.node did not exist"); } + + var sel = cursor.makeSelection(); + var range = cursor.makeRange(); + + cursor.fixSelection(sel, range); + } + } + }; + + var initializing = true; + + var assertStateMatches = function () { + var userDocState = module.realtimeInput.realtime.getUserDoc(); + var currentState = $textarea.val(); + if (currentState !== userDocState) { + console.log({ + userDocState: userDocState, + currentState: currentState + }); + throw new Error("currentState !== userDocState"); + } + }; + + var updateDebugTextarea = function (shjson) { + window.setTimeout(function () { + $textarea.val(shjson); + }, 0); + }; + + // apply patches, and try not to lose the cursor in the process! + var applyHjson = function (shjson) { + setEditable(false); + var userDocStateDom = Convert.hjson.to.dom(JSON.parse(shjson)); + userDocStateDom.setAttribute("contenteditable", "true"); // lol wtf + var DD = new DiffDom(diffOptions); + + //assertStateMatches(); + + var patch = (DD).diff(inner, userDocStateDom); + (DD).apply(inner, patch); + + // push back to the textarea so we get a userDocState + setEditable(true); + }; + + var onRemote = function (info) { + if (initializing) { return; } + + var shjson = info.realtime.getUserDoc(); + + // remember where the cursor is + cursor.update(); + + // build a dom from HJSON, diff, and patch the editor + applyHjson(shjson); + //updateDebugTextarea(shjson); + }; + + var onInit = function (info) { + var $bar = $('#pad-iframe')[0].contentWindow.$('#cke_1_toolbox'); + toolbar = info.realtime.toolbar = Toolbar.create($bar, userName, info.realtime); + /* TODO handle disconnects and such*/ + }; + + var onReady = function (info) { + console.log("Unlocking editor"); + initializing = false; + setEditable(true); + + var shjson = info.realtime.getUserDoc(); + + applyHjson(shjson); + }; + + var onAbort = function (info) { + console.log("Aborting the session!"); + // stop the user from continuing to edit + setEditable(false); + // TODO inform them that the session was torn down + toolbar.failed(); + }; + + var realtimeOptions = { + // configuration :D + doc: inner, + // first thing called + onInit: onInit, + + onReady: onReady, + + // when remote changes occur + onRemote: onRemote, + + // handle aborts + onAbort: onAbort, + + // provide initialstate... + initialState: JSON.stringify(Convert.core.hyperjson.fromDOM(inner, isNotMagicLine)), + + // really basic operational transform + // reject patch if it results in invalid JSON + transformFunction : JsonOT.validate, + + // websocketURL, ofc + websocketURL: Config.websocketURL, + + // username + userName: userName, + + // communication channel name + channel: key.channel, + + // encryption key + cryptKey: key.cryptKey + }; + + var rti = module.realtimeInput = window.rti = realtimeInput.start(realtimeOptions); + + var propogate = function () { + var hjson = Convert.core.hyperjson.fromDOM(inner, isNotMagicLine); + var shjson = JSON.stringify(hjson); + + rti.propogate(shjson); + rti.onEvent(shjson); + }; + + var testInput = window.testInput = function (el, offset) { + var i = 0, + j = offset, + input = "The quick red fox jumped over the lazy brown dog. ", + l = input.length, + errors = 0, + max_errors = 15, + interval; + var cancel = function () { + if (interval) { window.clearInterval(interval); } + }; + + interval = window.setInterval(function () { + propogate(); + try { + el.replaceData(j, 0, input.charAt(i)); + } catch (err) { + errors++; + if (errors >= max_errors) { + console.log("Max error number exceeded"); + cancel(); + } + + console.error(err); + var next = document.createTextNode(""); + el.parentNode.appendChild(next); + el = next; + j = 0; + } + i = (i + 1) % l; + j++; + }, 200); + + return { + cancel: cancel + }; + }; + + var easyTest = window.easyTest = function () { + cursor.update(); + var start = cursor.Range.start; + var test = testInput(start.el, start.offset); + propogate(); + return test; + }; + + editor.on('change', propogate); + }); + }; + + var interval = 100; + var first = function () { + Ckeditor = ifrw.CKEDITOR; + if (Ckeditor) { + andThen(Ckeditor); + } else { + console.log("Ckeditor was not defined. Trying again in %sms",interval); + setTimeout(first, interval); + } + }; + + $(first); +}); diff --git a/www/_socket/realtime-input.js b/www/_socket/realtime-input.js new file mode 100644 index 000000000..4cc66227b --- /dev/null +++ b/www/_socket/realtime-input.js @@ -0,0 +1,346 @@ +/* + * Copyright 2014 XWiki SAS + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ +define([ + '/common/messages.js', + '/bower_components/reconnectingWebsocket/reconnecting-websocket.js', + '/common/crypto.js', + '/_socket/toolbar.js', + '/_socket/sharejs_textarea-transport-only.js', + '/common/chainpad.js', + '/bower_components/jquery/dist/jquery.min.js', +], function (Messages,/*FIXME*/ ReconnectingWebSocket, Crypto, Toolbar, sharejs) { + var $ = window.jQuery; + var ChainPad = window.ChainPad; + var PARANOIA = true; + var module = { exports: {} }; + + /** + * If an error is encountered but it is recoverable, do not immediately fail + * but if it keeps firing errors over and over, do fail. + */ + var MAX_RECOVERABLE_ERRORS = 15; + + var recoverableErrors = 0; + + /** Maximum number of milliseconds of lag before we fail the connection. */ + var MAX_LAG_BEFORE_DISCONNECT = 20000; + + var debug = function (x) { console.log(x); }; + var warn = function (x) { console.error(x); }; + var verbose = function (x) { /*console.log(x);*/ }; + var error = function (x) { + console.error(x); + recoverableErrors++; + if (recoverableErrors >= MAX_RECOVERABLE_ERRORS) { + alert("FAIL"); + } + }; + + // ------------------ Trapping Keyboard Events ---------------------- // + + var bindEvents = function (element, events, callback, unbind) { + for (var i = 0; i < events.length; i++) { + var e = events[i]; + if (element.addEventListener) { + if (unbind) { + element.removeEventListener(e, callback, false); + } else { + element.addEventListener(e, callback, false); + } + } else { + if (unbind) { + element.detachEvent('on' + e, callback); + } else { + element.attachEvent('on' + e, callback); + } + } + } + }; + + var bindAllEvents = function (textarea, docBody, onEvent, unbind) + { + /* + we use docBody for the purposes of CKEditor. + because otherwise special keybindings like ctrl-b and ctrl-i + would open bookmarks and info instead of applying bold/italic styles + */ + if (docBody) { + bindEvents(docBody, + ['textInput', 'keydown', 'keyup', 'select', 'cut', 'paste'], + onEvent, + unbind); + } + if (textarea) { + bindEvents(textarea, + ['mousedown','mouseup','click','change'], + onEvent, + unbind); + } + }; + + /* websocket stuff */ + var isSocketDisconnected = function (socket, realtime) { + var sock = socket._socket; + return sock.readyState === sock.CLOSING + || sock.readyState === sock.CLOSED + || (realtime.getLag().waiting && realtime.getLag().lag > MAX_LAG_BEFORE_DISCONNECT); + }; + + // this differs from other functions with similar names in that + // you are expected to pass a socket into it. + var checkSocket = function (socket) { + if (isSocketDisconnected(socket, socket.realtime) && + !socket.intentionallyClosing) { + return true; + } else { + return false; + } + }; + + // TODO before removing websocket implementation + // bind abort to onLeaving + var abort = function (socket, realtime) { + realtime.abort(); + try { socket._socket.close(); } catch (e) { warn(e); } + }; + + var handleError = function (socket, realtime, err, docHTML, allMessages) { + // var internalError = createDebugInfo(err, realtime, docHTML, allMessages); + abort(socket, realtime); + }; + + var makeWebsocket = function (url) { + var socket = new ReconnectingWebSocket(url); + /* create a set of handlers to use instead of the native socket handler + these handlers will iterate over all of the functions pushed to the + arrays bearing their name. + + The first such function to return `false` will prevent subsequent + functions from being executed. */ + var out = { + onOpen: [], // takes care of launching the post-open logic + onClose: [], // takes care of cleanup + onError: [], // in case of error, socket will close, and fire this + onMessage: [], // used for the bulk of our logic + send: function (msg) { socket.send(msg); }, + close: function () { socket.close(); }, + _socket: socket + }; + var mkHandler = function (name) { + return function (evt) { + for (var i = 0; i < out[name].length; i++) { + if (out[name][i](evt) === false) { + console.log(name +"Handler"); + return; + } + } + }; + }; + + // bind your new handlers to the important listeners on the socket + socket.onopen = mkHandler('onOpen'); + socket.onclose = mkHandler('onClose'); + socket.onerror = mkHandler('onError'); + socket.onmessage = mkHandler('onMessage'); + return out; + }; + /* end websocket stuff */ + + var start = module.exports.start = function (config) { + //var textarea = config.textarea; + var websocketUrl = config.websocketURL; + var userName = config.userName; + var channel = config.channel; + var cryptKey = config.cryptKey; + var passwd = 'y'; + var doc = config.doc || null; + + // wrap up the reconnecting websocket with our additional stack logic + var socket = makeWebsocket(websocketUrl); + + var allMessages = []; + var isErrorState = false; + var initializing = true; + var recoverableErrorCount = 0; + + var toReturn = { socket: socket }; + + socket.onOpen.push(function (evt) { + if (!initializing) { + console.log("Starting"); + // realtime is passed around as an attribute of the socket + // FIXME?? + socket.realtime.start(); + return; + } + + var realtime = toReturn.realtime = socket.realtime = + // everybody has a username, and we assume they don't collide + // usernames are used to determine whether a message is remote + // or local in origin. This could mess with expected behaviour + // if someone spoofed. + ChainPad.create(userName, + passwd, // password, to be deprecated (maybe) + channel, // the channel we're to connect to + + // initialState argument. (optional) + config.initialState || '', + + // transform function (optional), which handles conflicts + { transformFunction: config.transformFunction }); + + var onEvent = toReturn.onEvent = function (newText) { + if (isErrorState || initializing) { return; } + // assert things here... + if (realtime.getUserDoc() !== newText) { + // this is a problem +// warn("realtime.getUserDoc() !== newText"); + } + }; + + // pass your shiny new realtime into initialization functions + if (config.onInit) { + // extend as you wish + config.onInit({ + realtime: realtime + }); + } + + /* UI hints on userList changes are handled within the toolbar + so we don't actually need to do anything here except confirm + whether we've successfully joined the session, and call our + 'onReady' function */ + realtime.onUserListChange(function (userList) { + if (!initializing || userList.indexOf(userName) === -1) { + return; + } + // if we spot ourselves being added to the document, we'll switch + // 'initializing' off because it means we're fully synced. + initializing = false; + + // execute an onReady callback if one was supplied + // pass an object so we can extend this later + if (config.onReady) { + // extend as you wish + config.onReady({ + userList: userList, + realtime: realtime + }); + } + }); + + // when a message is ready to send + // Don't confuse this onMessage with socket.onMessage + realtime.onMessage(function (message) { + if (isErrorState) { return; } + message = Crypto.encrypt(message, cryptKey); + try { + socket.send(message); + } catch (e) { + warn(e); + } + }); + + // TODO improve this RegExp such that it allows for more names + // right now it only handles names generated by rand64() + var whoami = new RegExp(userName.replace(/[\/\+]/g, function (c) { + return '\\' +c; + })); + + // when you receive a message... + socket.onMessage.push(function (evt) { + verbose(evt.data); + if (isErrorState) { return; } + + var message = Crypto.decrypt(evt.data, cryptKey); + verbose(message); + allMessages.push(message); + if (!initializing) { + if (PARANOIA) { + // FIXME this is out of sync with the application logic + onEvent(); + } + } + realtime.message(message); + if (/\[5,/.test(message)) { verbose("pong"); } + + if (!initializing) { + if (/\[2,/.test(message)) { + //verbose("Got a patch"); + if (whoami.test(message)) { + //verbose("Received own message"); + } else { + //verbose("Received remote message"); + // obviously this is only going to get called if... XXX wat + if (config.onRemote) { config.onRemote({ + realtime: realtime + //realtime.getUserDoc() + }); } + } + } + } + }); + + // actual socket bindings + socket.onmessage = function (evt) { + for (var i = 0; i < socket.onMessage.length; i++) { + if (socket.onMessage[i](evt) === false) { return; } + } + }; + socket.onclose = function (evt) { + for (var i = 0; i < socket.onMessage.length; i++) { + if (socket.onClose[i](evt) === false) { return; } + } + }; + + socket.onerror = warn; + + var socketChecker = setInterval(function () { + if (checkSocket(socket)) { + warn("Socket disconnected!"); + + recoverableErrorCount += 1; + + if (recoverableErrorCount >= MAX_RECOVERABLE_ERRORS) { + warn("Giving up!"); + abort(socket, realtime); + if (config.onAbort) { + config.onAbort({ + socket: socket + }); + } + if (socketChecker) { clearInterval(socketChecker); } + } + } // it's working as expected, continue + }, 200); + + // TODO maybe push this out to the application layer. + bindAllEvents(null, doc, onEvent, false); + + // TODO rename 'sharejs.attach' to imply what we want to do + var genOp = toReturn.propogate = sharejs.attach({ + realtime: realtime + }); + + realtime.start(); + debug('started'); + }); + + return toReturn; + }; + return module.exports; +}); diff --git a/www/_socket/sharejs_textarea-transport-only.js b/www/_socket/sharejs_textarea-transport-only.js new file mode 100644 index 000000000..64d220051 --- /dev/null +++ b/www/_socket/sharejs_textarea-transport-only.js @@ -0,0 +1,74 @@ +define(function () { + +/* applyChange takes: + ctx: the context (aka the realtime) + oldval: the old value + newval: the new value + + it performs a diff on the two values, and generates patches + which are then passed into `ctx.remove` and `ctx.insert` + + + +*/ +var applyChange = function(ctx, oldval, newval) { + // Strings are immutable and have reference equality. I think this test is O(1), so its worth doing. + if (oldval === newval) { + return; + } + + var commonStart = 0; + while (oldval.charAt(commonStart) === newval.charAt(commonStart)) { + commonStart++; + } + + var commonEnd = 0; + while (oldval.charAt(oldval.length - 1 - commonEnd) === newval.charAt(newval.length - 1 - commonEnd) && + commonEnd + commonStart < oldval.length && commonEnd + commonStart < newval.length) { + commonEnd++; + } + + if (oldval.length !== commonStart + commonEnd) { + if (ctx.localChange) { ctx.localChange(true); } + ctx.remove(commonStart, oldval.length - commonStart - commonEnd); + } + if (newval.length !== commonStart + commonEnd) { + if (ctx.localChange) { ctx.localChange(true); } + ctx.insert(commonStart, newval.slice(commonStart, newval.length - commonEnd)); + } +}; + +var attachTextarea = function(config) { + var ctx = config.realtime; + + // initial state will always fail the !== check in genop. + // because nothing will equal this object + var content = {}; + + // FIXME this is only necessary because we need to be able to update the + // textarea. This is being deprecated, however. Instead + var replaceText = function(newText) { + content = newText; + }; + + // *** remote -> local changes + ctx.onRemove(function(pos, length) { + replaceText(ctx.getUserDoc()); + }); + + ctx.onInsert(function(pos, text) { + replaceText(ctx.getUserDoc()); + }); + + return function (newContent) { + if (newContent !== content) { + applyChange(ctx, ctx.getUserDoc(), newContent); + if (ctx.getUserDoc() !== newContent) { + console.log("Expected that: `ctx.getUserDoc() === newContent`!"); + } + } + }; +}; + +return { attach: attachTextarea }; +}); diff --git a/www/_socket/toolbar.js b/www/_socket/toolbar.js new file mode 100644 index 000000000..4159ea0ac --- /dev/null +++ b/www/_socket/toolbar.js @@ -0,0 +1,233 @@ +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( + '
' + + '
' + + '
' + + '
' + ); + var toolbar = $container.find('#'+id); + toolbar.append([ + '' + ].join('\n')); + return toolbar; + }; + + var createEscape = function ($container) { + var id = uid(); + $container.append('
⇐ Back
'); + var $ret = $container.find('#'+id); + $ret.on('click', function () { + window.location.href = '/'; + }); + return $ret[0]; + }; + + var createSpinner = function ($container) { + var id = uid(); + $container.append(''); + 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('
'); + 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('
'); + 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 }; +});