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

Move 'vdom' to the main 'pad'.

Browse Source 
Hide the right-hand panel (can de bisplayed with a 'debug' button)
Hide the IDs of users if they don't change their name
This commit is contained in:
Yann Flory 2016-03-16 17:09:08 +01:00
parent c7d190f1c0
commit 7237c751d5
12 changed files with 352 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/index.html
View File

@ -127,7 +127,7 @@
document.getElementById('buttons').setAttribute('style', '');
document.getElementById('create-pad').setAttribute('href', '/pad/#' + Crypto.genKey());
if(Config.webrtcURL !== '') {
document.getElementById('create-rtcpad').setAttribute('href', '/vdom/?webrtc=1#' + Crypto.genKey());
document.getElementById('create-rtcpad').setAttribute('href', '/pad/?webrtc=1#' + Crypto.genKey());
}
document.getElementById('create-sheet').setAttribute('href', '/sheet/#' + Crypto.genKey());
document.getElementById('create-code').setAttribute('href', '/code/#' + Crypto.genKey());

0
www/pad/errorbox.js → www/_pad/errorbox.js
View File

0
www/pad/html-patcher.js → www/_pad/html-patcher.js
View File

17
www/vdom/index.html → www/_pad/index.html
View File

@ -4,38 +4,23 @@
<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%;
width:100%;
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>

0
www/vdom/inner.html → www/_pad/inner.html
View File

58
www/_pad/main.js Normal file
View File

@ -0,0 +1,58 @@
define([
'/api/config?cb=' + Math.random().toString(16).substring(2),
'/pad/realtime-wysiwyg.js',
'/common/messages.js',
'/common/crypto.js',
'/bower_components/jquery/dist/jquery.min.js',
'/customize/pad.js'
], function (Config, RTWysiwyg, Messages, Crypto) {
var $ = window.jQuery;
var ifrw = $('#pad-iframe')[0].contentWindow;
var Ckeditor = ifrw.CKEDITOR;
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 key = Crypto.parseKey(window.location.hash.substring(1));
var editor = Ckeditor.replace('editor1', {
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
removePlugins: 'magicline,resize'
});
editor.on('instanceReady', function () {
editor.execCommand('maximize');
// (contenteditable) iframe in an iframe
ifrw.$('iframe')[0].contentDocument.body.innerHTML = Messages.initialState;
var rtw =
RTWysiwyg.start(ifrw, // window
Config.websocketURL, // websocketUrl
Crypto.rand64(8), // userName
key.channel, // channel
key.cryptKey); // cryptKey
editor.on('change', function () { rtw.onEvent(); });
});
window.editor = editor;
window.RTWysiwyg = RTWysiwyg;
};
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);
});

0
www/pad/rangy.js → www/_pad/rangy.js
View File

0
www/pad/realtime-wysiwyg.js → www/_pad/realtime-wysiwyg.js
View File

14
www/common/toolbar.js
View File

@ -127,16 +127,20 @@ define([
};
var getOtherUsers = function(myUserName, userList, userData) {
var length = userList.length;
var list = (length > 1) ? ' : ' : '';
var i = 0;
var list = '';
userList.forEach(function(user) {
if(user !== myUserName) {
var data = (userData) ? (userData[user] || null) : null;
var userName = (data) ? data.name : user;
list += userName + ', ';
var userName = (data) ? data.name : null;
if(userName) {
if(i === 0) list = ' : ';
list += userName + ', ';
i++;
}
}
});
return (length > 1) ? list.slice(0, -2) : list;
return (i > 0) ? list.slice(0, -2) : list;
}
var createChangeName = function($container, userList, buttonID) {

47
www/pad/index.html
View File

@ -4,6 +4,10 @@
<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;
@ -17,10 +21,53 @@
padding:0;
overflow:hidden;
}
#feedback {
display: none;
position: fixed;
top: 0px;
right: 0px;
border: 0px;
height: 100vh;
width: 30vw;
background-color: #222;
color: #ccc;
}
#debug {
height: 20px;
position: absolute;
right: 0px;
top: 70px;
}
</style>
</head>
<body>
<iframe id="pad-iframe" src="inner.html"></iframe>
<div id="debug"><button>DEBUG</button></div>
<textarea id="feedback"></textarea>
<script>
require(['/bower_components/jquery/dist/jquery.min.js'], function() {
var $ = window.$;
$('#debug').on('click', function() {
if($('#feedback').is(':visible')) {
$('#pad-iframe').css({
'width' : '100%'
});
$('#debug').css({
'right' : '0%'
});
}
else {
$('#pad-iframe').css({
'width' : '70%'
});
$('#debug').css({
'right' : '30%'
});
}
$('#feedback').toggle();
});
});
</script>
</body>
</html>

252
www/pad/main.js
View File

@ -1,14 +1,25 @@
define([
'/api/config?cb=' + Math.random().toString(16).substring(2),
'/pad/realtime-wysiwyg.js',
'/common/messages.js',
'/common/crypto.js',
'/common/realtime-input.js',
'/common/convert.js',
'/common/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, RTWysiwyg, Messages, Crypto) {
], function (Config, Messages, Crypto, realtimeInput, Convert, Toolbar, Cursor, JsonOT) {
var $ = window.jQuery;
var ifrw = $('#pad-iframe')[0].contentWindow;
var Ckeditor = ifrw.CKEDITOR;
var Ckeditor; // to be initialized later...
var DiffDom = window.diffDOM;
window.Toolbar = Toolbar;
var userName = Crypto.rand64(8),
toolbar;
var andThen = function (Ckeditor) {
$(window).on('hashchange', function() {
@ -18,29 +29,238 @@ define([
window.location.href = window.location.href + '#' + Crypto.genKey();
return;
}
var fixThings = false;
var key = Crypto.parseKey(window.location.hash.substring(1));
var editor = Ckeditor.replace('editor1', {
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
removePlugins: 'magicline,resize'
});
editor.on('instanceReady', function () {
editor.on('instanceReady', function (Ckeditor) {
editor.execCommand('maximize');
var documentBody = ifrw.$('iframe')[0].contentDocument.body;
// (contenteditable) iframe in an iframe
ifrw.$('iframe')[0].contentDocument.body.innerHTML = Messages.initialState;
documentBody.innerHTML = Messages.initialState;
var rtw =
RTWysiwyg.start(ifrw, // window
Config.websocketURL, // websocketUrl
Crypto.rand64(8), // userName
key.channel, // channel
key.cryptKey); // cryptKey
editor.on('change', function () { rtw.onEvent(); });
var inner = window.inner = documentBody;
var cursor = window.cursor = Cursor(inner);
var $textarea = $('#feedback');
var setEditable = function (bool) {
inner.setAttribute('contenteditable',
(typeof (bool) !== 'undefined'? bool : true));
};
// don't let the user edit until the pad is ready
setEditable(false);
var diffOptions = {
preDiffApply: function (info) {
// 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; }
var debug = info.debug = {
frame: frame,
action: info.diff.action,
cursorLength: cursor.getLength(),
node: info.node
};
if (info.diff.oldValue) { debug.oldValue = info.diff.oldValue; }
if (info.diff.newValue) { debug.newValue = info.diff.newValue; }
if (typeof info.diff.oldValue === 'string' && typeof info.diff.newValue === 'string') {
var pushes = cursor.pushDelta(info.diff.oldValue, info.diff.newValue);
debug.commonStart = pushes.commonStart;
debug.commonEnd = pushes.commonEnd;
debug.insert = pushes.insert;
debug.remove = pushes.remove;
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;
}
}
}
console.log("###################################");
console.log(debug);
},
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 userList = {}; // List of pretty name of all users (mapped with their server ID)
var toolbarList; // List of users still connected to the channel (server IDs)
var addToUserList = function(data) {
for (var attrname in data) { userList[attrname] = data[attrname]; }
if(toolbarList && typeof toolbarList.onChange === "function") {
toolbarList.onChange(userList);
}
};
var myData = {};
var myUserName = ''; // My "pretty name"
var myID; // My server ID
var setMyID = function(info) {
myID = info.myID || null;
myUserName = myID;
};
var createChangeName = function(id, $container) {
var buttonElmt = $container.find('#'+id)[0];
buttonElmt.addEventListener("click", function() {
var newName = prompt("Change your name :", myUserName)
if (newName && newName.trim()) {
myUserName = newName.trim();
myData[myID] = {
name: myUserName
};
addToUserList(myData);
editor.fire( 'change' );
}
});
};
// apply patches, and try not to lose the cursor in the process!
var applyHjson = function (shjson) {
var hjson = JSON.parse(shjson);
var peerUserList = hjson[hjson.length-1];
if(peerUserList.metadata) {
var userData = peerUserList.metadata;
addToUserList(userData);
delete hjson[hjson.length-1];
}
var userDocStateDom = Convert.hjson.to.dom(hjson);
userDocStateDom.setAttribute("contenteditable", "true"); // lol wtf
var DD = new DiffDom(diffOptions);
var patch = (DD).diff(inner, userDocStateDom);
(DD).apply(inner, patch);
};
var onRemote = function (shjson) {
if (initializing) { return; }
// remember where the cursor is
cursor.update();
// build a dom from HJSON, diff, and patch the editor
applyHjson(shjson);
};
var onInit = function (info) {
var $bar = $('#pad-iframe')[0].contentWindow.$('#cke_1_toolbox');
toolbarList = info.userList;
var config = {
userData: userList,
changeNameID: 'cryptpad-changeName'
};
toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.webChannel, info.userList, config);
createChangeName('cryptpad-changeName', $bar);
/* TODO handle disconnects and such*/
};
var onReady = function (info) {
console.log("Unlocking editor");
initializing = false;
setEditable(true);
applyHjson($textarea.val());
$textarea.trigger('keyup');
};
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 = {
// the textarea that we will sync
textarea: $textarea[0],
// the websocket URL (deprecated?)
websocketURL: Config.websocketURL,
webrtcURL: Config.webrtcURL,
// our username
userName: userName,
// the channel we will communicate over
channel: key.channel,
// our encryption key
cryptKey: key.cryptKey,
// configuration :D
doc: inner,
// first thing called
onInit: onInit,
onReady: onReady,
setMyID: setMyID,
// when remote changes occur
onRemote: onRemote,
// handle aborts
onAbort: onAbort,
// really basic operational transform
transformFunction : JsonOT.validate
// pass in websocket/netflux object TODO
};
var rti = window.rti = realtimeInput.start(realtimeOptions);
$textarea.val(JSON.stringify(Convert.dom.to.hjson(inner)));
editor.on('change', function () {
var hjson = Convert.core.hyperjson.fromDOM(inner);
if(myData !== {}) {
hjson[hjson.length] = {metadata: userList};
}
$textarea.val(JSON.stringify(hjson));
rti.bumpSharejs();
});
});
window.editor = editor;
window.RTWysiwyg = RTWysiwyg;
};
var interval = 100;

279
www/vdom/main.js
View File

@ -1,279 +0,0 @@
define([
'/api/config?cb=' + Math.random().toString(16).substring(2),
'/common/messages.js',
'/common/crypto.js',
'/common/realtime-input.js',
'/common/convert.js',
'/common/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.Toolbar = Toolbar;
var userName = Crypto.rand64(8),
toolbar;
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
removePlugins: 'magicline,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.setAttribute('contenteditable',
(typeof (bool) !== 'undefined'? bool : true));
};
// don't let the user edit until the pad is ready
setEditable(false);
var diffOptions = {
preDiffApply: function (info) {
// 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; }
var debug = info.debug = {
frame: frame,
action: info.diff.action,
cursorLength: cursor.getLength(),
node: info.node
};
if (info.diff.oldValue) { debug.oldValue = info.diff.oldValue; }
if (info.diff.newValue) { debug.newValue = info.diff.newValue; }
if (typeof info.diff.oldValue === 'string' && typeof info.diff.newValue === 'string') {
var pushes = cursor.pushDelta(info.diff.oldValue, info.diff.newValue);
debug.commonStart = pushes.commonStart;
debug.commonEnd = pushes.commonEnd;
debug.insert = pushes.insert;
debug.remove = pushes.remove;
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;
}
}
}
console.log("###################################");
console.log(debug);
},
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 userList = []; // List of pretty name of all users (mapped with their server ID)
var toolbarList; // List of users still connected to the channel (server IDs)
var addToUserList = function(data) {
for (var attrname in data) { userList[attrname] = data[attrname]; }
if(toolbarList && typeof toolbarList.onChange === "function") {
toolbarList.onChange(userList);
}
};
var myData = {};
var myUserName = ''; // My "pretty name"
var myID; // My server ID
var setMyID = function(info) {
myID = info.myID || null;
myUserName = myID;
};
var createChangeName = function(id, $container) {
var buttonElmt = $container.find('#'+id)[0];
buttonElmt.addEventListener("click", function() {
var newName = prompt("Change your name :", myUserName)
if (newName && newName.trim()) {
myUserName = newName.trim();
myData[myID] = {
name: myUserName
};
addToUserList(myData);
editor.fire( 'change' );
}
});
};
// apply patches, and try not to lose the cursor in the process!
var applyHjson = function (shjson) {
var hjson = JSON.parse(shjson);
var peerUserList = hjson[hjson.length-1];
if(peerUserList.mydata) {
var userData = peerUserList.mydata;
addToUserList(userData);
delete hjson[hjson.length-1];
}
var userDocStateDom = Convert.hjson.to.dom(hjson);
userDocStateDom.setAttribute("contenteditable", "true"); // lol wtf
var DD = new DiffDom(diffOptions);
var patch = (DD).diff(inner, userDocStateDom);
(DD).apply(inner, patch);
};
var onRemote = function (shjson) {
if (initializing) { return; }
// remember where the cursor is
cursor.update();
// build a dom from HJSON, diff, and patch the editor
applyHjson(shjson);
};
var onInit = function (info) {
var $bar = $('#pad-iframe')[0].contentWindow.$('#cke_1_toolbox');
toolbarList = info.userList;
var config = {
userList: userList,
changeNameID: 'cryptpad-changeName'
};
toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.webChannel, info.userList, config);
createChangeName('cryptpad-changeName', $bar);
/* TODO handle disconnects and such*/
};
var onReady = function (info) {
console.log("Unlocking editor");
initializing = false;
setEditable(true);
applyHjson($textarea.val());
$textarea.trigger('keyup');
};
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 = {
// the textarea that we will sync
textarea: $textarea[0],
// the websocket URL (deprecated?)
websocketURL: Config.websocketURL,
webrtcURL: Config.webrtcURL,
// our username
userName: userName,
// the channel we will communicate over
channel: key.channel,
// our encryption key
cryptKey: key.cryptKey,
// configuration :D
doc: inner,
// first thing called
onInit: onInit,
onReady: onReady,
setMyID: setMyID,
// when remote changes occur
onRemote: onRemote,
// handle aborts
onAbort: onAbort,
// really basic operational transform
transformFunction : JsonOT.validate
// pass in websocket/netflux object TODO
};
var rti = window.rti = realtimeInput.start(realtimeOptions);
$textarea.val(JSON.stringify(Convert.dom.to.hjson(inner)));
editor.on('change', function () {
var hjson = Convert.core.hyperjson.fromDOM(inner);
if(myData !== {}) {
hjson[hjson.length] = {mydata: myData};
myData = {};
}
$textarea.val(JSON.stringify(hjson));
rti.bumpSharejs();
});
});
};
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);
});