web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

up to date

Browse Source
This commit is contained in:
ansuz 2016-02-03 16:48:49 +01:00
parent d2f6c63d8a
commit aa3880f442
2 changed files with 95 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
www/vdom/index.html
View File

@ -26,16 +26,28 @@
top: 0px;
right: 0px;
border: 0px;
height: 100vh;
height: 50vh;
width: 50vw;
background-color: #222;
color: #ccc;
}
#problemo {
position: fixed;
top: 50vh;
right: 0px;
height: 50vh;
width: 50vw;
background: #999;
color: #111;
border: none;
overflow-y: auto;
}
</style>
</head>
<body>
<iframe id="pad-iframe" src="inner.html"></iframe>
<textarea id="feedback"></textarea>
<pre id="problemo"></pre>
</body>
</html>

100
www/vdom/main.js
View File

@ -45,34 +45,93 @@ define([
var inner = ifrw.$('iframe')[0].contentDocument.body;
window.inner = inner;
var $textarea = $('#feedback');
var $textarea = $('#feedback'),
$problem = $('#problemo');
var debug = function (info) {
$problem.text(JSON.stringify(info,null,2));
};
var vdom1 = Convert.dom.to.vdom(inner);
var applyHjson = function (shjson) {
var cursor = {
startEl: null,
startOffset: 0,
endEl: null,
endOffset: 0
};
var getCursor = function () {
// 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);
Vdom.patch(inner, patches);
// try resyncing the dom?
var ranges = sel.getRanges();
if (!ranges.length) { return; }
var range = ranges[0]; // {startContainer, startOffset, endContainer, endOffset, collapsed, document, root}
cursor.startEl = range.startContainer;
cursor.startOffset = range.startOffset;
cursor.endEl = range.endContainer;
cursor.endOffset = range.endOffset;
debug(cursor);
};
window.rangeElements = {};
var setCursor = function () {
try {
var sel = editor.getSelection(); // { rev, document, root, isLocked, _ }
// correct the cursor after doing dom stuff
// sel.selectElement(element);
var ranges = sel.getRanges();
if (!ranges.length) { return; }
var range = ranges[0]; // {startContainer, startOffset, endContainer, endOffset, collapsed, document, root}
range.setStart(cursor.startEl, cursor.startOffset);
range.setEnd(cursor.endEl, cursor.endOffset);
sel.selectRanges([range]);
/* FIXME TODO
This fails because the element that we're operating on
can stop existing because vdom determines that we should
get rid of it. if it doesn't exist anymore, we should
walk up the tree or something. Or just not try to
relocate the cursor. Default behaviour might be ok.
DONT FIGHT THE DOM
*/
} catch (err) {
console.log("junk cursor:");
console.log(cursor);
debug(cursor);
console.error(err);
console.error(err.stack);
}
};
var applyHjson = function (shjson) {
// before integrating external changes, check in your own
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]]);
*/
// remember where the cursor is
getCursor()
// the authoritative document is hyperjson, parse it
var authDoc = JSON.parse(shjson);
// use the authdoc to construct a second vdom
var vdom2 = Convert.hjson.to.vdom(authDoc);
// diff it against your version
var patches = Vdom.diff(vdom1, vdom2);
// apply the resulting patches
Vdom.patch(inner, patches);
// put the cursor back where you left it
setCursor();
};
window.rti = realtimeInput.start($textarea[0], // synced element
@ -116,6 +175,10 @@ define([
*/
});
$(inner).on('keyup', function () {
getCursor();
});
$textarea.val(JSON.stringify(Convert.dom.to.hjson(inner)));
editor.on('change', function () {
@ -132,6 +195,7 @@ define([
$textarea.val(JSON.stringify(hjson));
rti.bumpSharejs();
getCursor()
});
});
};