mirror of https://github.com/xwiki-labs/cryptpad
clean up realtime-input.js, break API
use an object for configuration, so as to be more extensible. modify applications which use the API to match.
This commit is contained in:
parent
e43b9715e8
commit
d96124229b
|
@ -64,8 +64,11 @@ define([
|
|||
|
||||
var bindAllEvents = function (textarea, docBody, onEvent, unbind)
|
||||
{
|
||||
// FIXME why docBody?
|
||||
|
||||
/*
|
||||
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
|
||||
*/
|
||||
docBody && bindEvents(docBody,
|
||||
['textInput', 'keydown', 'keyup', 'select', 'cut', 'paste'],
|
||||
onEvent,
|
||||
|
@ -133,17 +136,20 @@ define([
|
|||
};
|
||||
|
||||
var start = module.exports.start =
|
||||
function (textarea, websocketUrl, userName, channel, cryptKey, doc, onRemote)
|
||||
function (textarea, websocketUrl, userName, channel, cryptKey, config)
|
||||
{
|
||||
|
||||
var passwd = 'y';
|
||||
|
||||
console.log({
|
||||
textarea: textarea,
|
||||
websocketUrl: websocketUrl,
|
||||
userName: userName,
|
||||
channel: channel,
|
||||
cryptKey: cryptKey
|
||||
});
|
||||
// make sure configuration is defined
|
||||
config = config || {};
|
||||
|
||||
var doc = config.doc || null;
|
||||
|
||||
// trying to deprecate onRemote, prefer loading it via the conf
|
||||
onRemote = config.onRemote || onRemote;
|
||||
|
||||
transformFunction = config.transformFunction || null;
|
||||
|
||||
var socket = makeWebsocket(websocketUrl);
|
||||
// define this in case it gets called before the rest of our stuff is ready.
|
||||
|
@ -156,12 +162,6 @@ define([
|
|||
|
||||
var $textarea = $(textarea);
|
||||
|
||||
var inputDisabled = function (cond) {
|
||||
$textarea.attr("disabled", cond||false);
|
||||
};
|
||||
|
||||
inputDisabled(false);
|
||||
|
||||
var bump = function () {};
|
||||
|
||||
socket.onOpen.push(function (evt) {
|
||||
|
@ -176,24 +176,11 @@ define([
|
|||
channel,
|
||||
$(textarea).val(),
|
||||
{
|
||||
transformFunction: function (text, toTransform, transformBy) {
|
||||
console.log({
|
||||
text: text,
|
||||
toTransform: toTransform,
|
||||
transformBy: transformBy
|
||||
});
|
||||
|
||||
// returning **null** breaks out of the loop
|
||||
// which transforms conflicting operations
|
||||
// in theory this should prevent us from producing bad JSON
|
||||
return null;
|
||||
}
|
||||
transformFunction: config.transformFunction
|
||||
});
|
||||
|
||||
onEvent = function () {
|
||||
if (isErrorState || initializing) { return; }
|
||||
/* var currentDoc = $textarea.val();
|
||||
if (currentDoc !== realtime.getUserDoc()) { warn("currentDoc !== realtime.getUserDoc()"); } */
|
||||
};
|
||||
|
||||
realtime.onUserListChange(function (userList) {
|
||||
|
@ -202,14 +189,13 @@ define([
|
|||
}
|
||||
// if we spot ourselves being added to the document, we'll switch
|
||||
// 'initializing' off because it means we're fully synced.
|
||||
|
||||
// we should only see this happen once
|
||||
initializing = false;
|
||||
debug("Done initializing:");
|
||||
debug("Userlist: ["+userList.join(",")+"]");
|
||||
/* TODO execute a callback here */
|
||||
|
||||
inputDisabled(true);
|
||||
// execute an onReady callback if one was supplied
|
||||
// pass an object so we can extend this later
|
||||
config.onReady && config.onReady({
|
||||
userList: userList
|
||||
});
|
||||
});
|
||||
|
||||
var whoami = new RegExp(userName.replace(/\/\+/g, function (c) {
|
||||
|
@ -274,7 +260,6 @@ define([
|
|||
var socketChecker = setInterval(function () {
|
||||
if (checkSocket(socket)) {
|
||||
warn("Socket disconnected!");
|
||||
inputDisabled(true);
|
||||
|
||||
recoverableErrorCount += 1;
|
||||
|
||||
|
@ -284,7 +269,7 @@ define([
|
|||
socketChecker && clearInterval(socketChecker);
|
||||
}
|
||||
} else {
|
||||
inputDisabled(false);
|
||||
// TODO
|
||||
}
|
||||
},200);
|
||||
|
||||
|
@ -296,7 +281,6 @@ define([
|
|||
realtime.start();
|
||||
debug('started');
|
||||
|
||||
// this has three names :|
|
||||
bump = realtime.bumpSharejs;
|
||||
});
|
||||
return {
|
||||
|
|
|
@ -34,9 +34,18 @@
|
|||
code {
|
||||
font-family: monospace;
|
||||
}
|
||||
/* TODO
|
||||
bump up text size on mobile
|
||||
*/
|
||||
|
||||
/* bigger text size for difficult to read elements */
|
||||
blockquote, p, pre, code, li {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* tables */
|
||||
table, thead, tbody, th, tr, td{
|
||||
border: 1pt solid #586e75;
|
||||
background-color: #002b36;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -46,4 +55,3 @@
|
|||
<textarea></textarea>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
@ -28,7 +28,7 @@ define([
|
|||
|
||||
var key = Crypto.parseKey(window.location.hash.substring(1));
|
||||
|
||||
var $textarea = $('textarea'),
|
||||
var $textarea = $('textarea').first(),
|
||||
$target = $('#target');
|
||||
|
||||
window.$textarea = $textarea;
|
||||
|
@ -107,18 +107,23 @@ define([
|
|||
}, 450);
|
||||
};
|
||||
|
||||
var rts = $textarea.toArray().map(function (e, i) {
|
||||
var rt = Realtime.start(e, // window
|
||||
var rts = Realtime.start($textarea[0], // window
|
||||
Config.websocketURL, // websocketUrl
|
||||
Crypto.rand64(8), // userName
|
||||
key.channel, // channel
|
||||
key.cryptKey, // cryptkey
|
||||
null, // docBody
|
||||
function (){ // onChange received
|
||||
lazyDraw($textarea.val());
|
||||
{
|
||||
// when remote editors do things...
|
||||
onRemote: function () {
|
||||
lazyDraw($textarea.val());
|
||||
},
|
||||
// when your editor is ready
|
||||
onReady: function (info) {
|
||||
info.userList && console.log("Userlist: [%s]", info.userList.join(','));
|
||||
console.log("Realtime is ready!");
|
||||
$textarea.trigger('keyup');
|
||||
}
|
||||
});
|
||||
return rt;
|
||||
})[0];
|
||||
|
||||
$textarea.on('change keyup keydown', function () {
|
||||
redrawTimeout && clearTimeout(redrawTimeout);
|
||||
|
|
|
@ -49,7 +49,14 @@ define([
|
|||
|
||||
var vdom1 = Convert.dom.to.vdom(inner);
|
||||
|
||||
var onChange = function (shjson) {
|
||||
var applyHjson = function (shjson) {
|
||||
// where is your cursor?
|
||||
// TODO optimize this if it works
|
||||
/*
|
||||
var sel = editor.getSelection(); // { rev, document, root, isLocked, _ }
|
||||
var element = sel.getStartElement();
|
||||
var ranges = sel.getRanges(); // [0] // {startContainer, startOffset, endContainer, endOffset, collapsed, document, root}
|
||||
*/
|
||||
var authDoc = JSON.parse(shjson);
|
||||
var vdom2 = Convert.hjson.to.vdom(authDoc);
|
||||
var patches = Vdom.diff(vdom1, vdom2);
|
||||
|
@ -57,15 +64,57 @@ define([
|
|||
// try resyncing the dom?
|
||||
vdom1 = Convert.dom.to.vdom(inner);
|
||||
// vdom1 = vdom2;
|
||||
|
||||
/*
|
||||
// correct the cursor after doing dom stuff
|
||||
sel.selectElement(element);
|
||||
ranges[0].setStart(element.getFirst(), ranges[0].startOffset); //
|
||||
ranges[0].setEnd(element.getFirst(), ranges[0].endOffset);
|
||||
sel.selectRanges([ranges[0]]);
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
window.rti = realtimeInput.start($textarea[0],
|
||||
Config.websocketURL,
|
||||
Crypto.rand64(8),
|
||||
key.channel,
|
||||
key.cryptKey,
|
||||
inner,
|
||||
onChange);
|
||||
window.rti = realtimeInput.start($textarea[0], // synced element
|
||||
Config.websocketURL, // websocketURL, ofc
|
||||
Crypto.rand64(8), // userName
|
||||
key.channel, // channelName
|
||||
key.cryptKey, // key
|
||||
{ // configuration :D
|
||||
doc: inner,
|
||||
|
||||
onReady: function (info) {
|
||||
applyHjson($textarea.val());
|
||||
$textarea.trigger('keyup');
|
||||
},
|
||||
|
||||
onRemote: applyHjson,
|
||||
|
||||
transformFunction : function (text, toTransform, transformBy) {
|
||||
/* FIXME
|
||||
operational transform on json shouldn't be in all editors
|
||||
just those transmitting/expecting JSON
|
||||
*/
|
||||
false && console.log({
|
||||
text: text,
|
||||
toTransform: toTransform,
|
||||
transformBy: transformBy
|
||||
});
|
||||
|
||||
// returning **null** breaks out of the loop
|
||||
// which transforms conflicting operations
|
||||
// in theory this should prevent us from producing bad JSON
|
||||
return null;
|
||||
}
|
||||
/*
|
||||
FIXME NOT A REAL FUNCTION WONT WORK
|
||||
transformFunction: function (state0str, toTransform, transformBy) {
|
||||
var state1A = JSON.parse(Operation.apply(state0str, transformBy));
|
||||
var state1B = JSON.parse(Operation.apply(state0str, toTransform));
|
||||
var state0 = JSON.parse(state0str);
|
||||
}
|
||||
*/
|
||||
});
|
||||
|
||||
$textarea.val(JSON.stringify(Convert.dom.to.hjson(inner)));
|
||||
|
||||
|
|
Loading…
Reference in New Issue