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:
ansuz 2016-02-03 12:45:45 +01:00
parent e43b9715e8
commit d96124229b
4 changed files with 105 additions and 59 deletions

View File

@ -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 {

View File

@ -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>

View File

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

View File

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