blitzwing/cryptpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Push WIP

Browse source
This commit is contained in:
ansuz 2016-03-25 11:04:27 +01:00
parent 0d33af773f
commit 4b35a145e3
6 changed files with 1017 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
www/_socket/index.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
<style>
html, body {
margin: 0px;
padding: 0px;
}
#pad-iframe {
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
width:70%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
}
#feedback {
position: fixed;
top: 0px;
right: 0px;
border: 0px;
height: 100vh;
width: 30vw;
background-color: #222;
color: #ccc;
}
</style>
</head>
<body>
<iframe id="pad-iframe" src="inner.html"></iframe>
<textarea id="feedback"></textarea>
</body>
</html>

12
www/_socket/inner.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea style="display:none" id="editor1" name="editor1"></textarea>
</body>
</html>

311
www/_socket/main.js Normal file
View file

@ -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);
});

346
www/_socket/realtime-input.js Normal file
View file

@ -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 <http://www.gnu.org/licenses/>.
*/
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;
});

74
www/_socket/sharejs_textarea-transport-only.js Normal file
View file

@ -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 };
});

233
www/_socket/toolbar.js Normal file
View file

@ -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(
'<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 + '">&#8656; 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 };
});