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

Fix uncommitted column, add toolbar

Browse Source
This commit is contained in:
yflory 2016-11-28 18:38:06 +01:00
parent ffedcb63f7
commit bca746bbb5
3 changed files with 133 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
www/poll/test/index.html
View File

@ -47,15 +47,17 @@
</head> </head>
<body> <body>
<div id="toolbar"></div>
<button id="create-option">create option</button> <button id="create-option">create option</button>
<button id="create-user">create user</button> <button id="create-user">create user</button>
<button id="publish" style="display: none;">publish poll</button> <button id="publish" style="display: none;">publish poll</button>
<button id="commit">commit</button>
<form class="realtime"> <form class="realtime">
<br /> <br />
<input type="text" id="title"><br /> <input type="text" id="title"><br />
<textarea rows=5 cols=50></textarea><br /> <textarea rows=5 cols=50 id="description"></textarea><br />
</form> </form>

139
www/poll/test/main.js
View File

@ -1,5 +1,6 @@
define([ define([
'/api/config?cb=' + Math.random().toString(16).substring(2), '/api/config?cb=' + Math.random().toString(16).substring(2),
'/customize/messages.js?app=poll',
'/bower_components/textpatcher/TextPatcher.js', '/bower_components/textpatcher/TextPatcher.js',
'/bower_components/chainpad-listmap/chainpad-listmap.js', '/bower_components/chainpad-listmap/chainpad-listmap.js',
'/bower_components/chainpad-crypto/crypto.js', '/bower_components/chainpad-crypto/crypto.js',
@ -12,13 +13,13 @@ define([
'/bower_components/file-saver/FileSaver.min.js', '/bower_components/file-saver/FileSaver.min.js',
'/bower_components/jquery/dist/jquery.min.js', '/bower_components/jquery/dist/jquery.min.js',
//'/customize/pad.js' //'/customize/pad.js'
], function (Config, TextPatcher, Listmap, Crypto, Cryptpad, Hyperjson, Render, Toolbar) { ], function (Config, Messages, TextPatcher, Listmap, Crypto, Cryptpad, Hyperjson, Render, Toolbar) {
var $ = window.jQuery; var $ = window.jQuery;
var APP = window.APP = { var APP = window.APP = {
Toolbar: Toolbar, Toolbar: Toolbar,
Hyperjson: Hyperjson, Hyperjson: Hyperjson,
Render: Render, Render: Render,
//$bar: $('#toolbar').css({ border: '1px solid white', background: 'grey', 'margin-bottom': '1vh', }), $bar: $('#toolbar').css({ border: '1px solid white', background: 'grey', 'margin-bottom': '1vh', }),
}; };
var sortColumns = function (order, firstcol) { var sortColumns = function (order, firstcol) {
@ -27,12 +28,39 @@ define([
return (a === firstcol) ? -1 : return (a === firstcol) ? -1 :
((b === firstcol) ? 1 : 0); ((b === firstcol) ? 1 : 0);
}); });
if (colsOrder.indexOf(firstcol) === -1) {
colsOrder.unshift(firstcol);
}
return colsOrder; return colsOrder;
}; };
var mergeUncommitted = function (proxy, uncommitted, commit) {
var newObj;
if (commit) {
newObj = proxy;
} else {
newObj = $.extend(true, {}, proxy);
}
// We have uncommitted data only if the user's column is not in the proxy
// If it is already is the proxy, nothing to merge
if (proxy.table.colsOrder.indexOf(APP.userid) !== -1) {
return newObj;
}
// Merge uncommitted into the proxy
uncommitted.table.colsOrder.forEach(function (x) {
if (newObj.table.colsOrder.indexOf(x) !== -1) { return; }
newObj.table.colsOrder.push(x);
});
for (var k in uncommitted.table.cols) {
if (!newObj.table.cols[k]) {
newObj.table.cols[k] = uncommitted.table.cols[k];
}
}
for (var k in uncommitted.table.cells) {
if (!newObj.table.cells[k]) {
newObj.table.cells[k] = uncommitted.table.cells[k];
}
}
return newObj;
};
/* Any time the realtime object changes, call this function */ /* Any time the realtime object changes, call this function */
var change = function (o, n, path) { var change = function (o, n, path) {
if (path && path.join) { if (path && path.join) {
@ -42,12 +70,14 @@ define([
var table = APP.$table[0]; var table = APP.$table[0];
var colsOrder = sortColumns(APP.proxy.table.colsOrder, APP.userid); var displayedObj = mergeUncommitted(APP.proxy, APP.uncommitted);
var colsOrder = sortColumns(displayedObj.table.colsOrder, APP.userid);
var conf = { var conf = {
cols: colsOrder cols: colsOrder
}; };
Render.updateTable(table, APP.proxy, conf); Render.updateTable(table, displayedObj, conf);
/* FIXME browser autocomplete fills in new fields sometimes /* FIXME browser autocomplete fills in new fields sometimes
calling updateTable twice removes the autofilled in values calling updateTable twice removes the autofilled in values
@ -56,7 +86,8 @@ define([
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
*/ */
window.setTimeout(function () { window.setTimeout(function () {
Render.updateTable(table, APP.proxy, conf); var displayedObj2 = mergeUncommitted(APP.proxy, APP.uncommitted);
Render.updateTable(table, displayedObj2, conf);
}); });
}; };
@ -71,18 +102,22 @@ define([
console.log(input); console.log(input);
if ($(input).hasClass("uncommitted-cell")) { console.log('do nothing'); return; } var object = APP.proxy;
var x = Render.getCoordinates(id)[0];
if (type !== "row" && x === APP.userid && APP.proxy.table.colsOrder.indexOf(x) === -1) {
object = APP.uncommitted;
}
switch (type) { switch (type) {
case 'text': case 'text':
console.log("text[rt-id='%s'] [%s]", id, input.value); console.log("text[rt-id='%s'] [%s]", id, input.value);
if (!input.value) { return void console.log("Hit enter?"); } if (!input.value) { return void console.log("Hit enter?"); }
Render.setValue(APP.proxy, id, input.value); Render.setValue(object, id, input.value);
break; break;
case 'checkbox': case 'checkbox':
console.log("checkbox[tr-id='%s'] %s", id, input.checked); console.log("checkbox[tr-id='%s'] %s", id, input.checked);
Render.setValue(APP.proxy, id, input.checked); Render.setValue(object, id, input.checked);
break; break;
default: default:
console.log("Input[type='%s']", type); console.log("Input[type='%s']", type);
@ -163,17 +198,36 @@ define([
}); });
}; };
var copyObject = function (obj) {
return JSON.parse(JSON.stringify(obj));
};
// special UI elements
var $title = $('#title').attr('placeholder', Messages.poll_titleHint || 'title');
var $description = $('#description').attr('placeholder', Messages.poll_descriptionHint || 'description');
var items = [$title, $description];
var ready = function (info, userid) { var ready = function (info, userid) {
console.log("READY"); console.log("READY");
console.log('userid: %s', userid); console.log('userid: %s', userid);
var proxy = APP.proxy; var proxy = APP.proxy;
var uncommitted = APP.uncommitted = {};
prepareProxy(proxy, copyObject(Render.Example));
prepareProxy(uncommitted, copyObject(Render.Example));
if (proxy.table.colsOrder.indexOf(userid) === -1 &&
uncommitted.table.colsOrder.indexOf(userid) === -1) {
uncommitted.table.colsOrder.unshift(userid);
}
prepareProxy(proxy, Render.Example); var displayedObj = mergeUncommitted(proxy, uncommitted, false);
var colsOrder = sortColumns(proxy.table.colsOrder, userid); var colsOrder = sortColumns(displayedObj.table.colsOrder, userid);
var $table = APP.$table = $(Render.asHTML(proxy, null, colsOrder));
var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder));
var $createRow = APP.$createRow = $('#create-option').click(function () { var $createRow = APP.$createRow = $('#create-option').click(function () {
// //
console.error("BUTTON CLICKED! LOL"); console.error("BUTTON CLICKED! LOL");
@ -188,6 +242,28 @@ define([
}); });
}); });
//TODO
var $commit = APP.$commit = $('#commit').click(function () {
var uncommittedCopy = JSON.parse(JSON.stringify(APP.uncommitted));
APP.uncommitted = {};
prepareProxy(APP.uncommitted, copyObject(Render.Example));
mergeUncommitted(proxy, uncommittedCopy, true);
change();
});
items.forEach(function ($item) {
var id = $item.attr('id');
$item.on('change keyup', function () {
var val = $item.val();
proxy.info[id] = val;
});
if (typeof(proxy.info[id]) !== 'undefined') {
$item.val(proxy.info[id]);
}
});
$('.realtime').append($table); $('.realtime').append($table);
$table $table
@ -195,7 +271,30 @@ define([
.on('keyup', function (e) { handleClick(e, true); }); .on('keyup', function (e) { handleClick(e, true); });
proxy proxy
.on('change', [], change) .on('change', ['info'], function (o, n, p) {
var $target = $('#' + p[1]);
var el = $target[0];
var selects;
var op;
if (el && ['textarea', 'text'].indexOf(el.type) !== -1) {
op = TextPatcher.diff(o, n);
selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
var before = el[attr];
var after = TextPatcher.transformCursor(el[attr], op);
return after;
});
$target.val(n);
if (op) {
el.selectionStart = selects[0];
el.selectionEnd = selects[1];
}
}
console.log("change: (%s, %s, [%s])", o, n, p.join(', '));
})
.on('change', ['table'], change)
.on('remove', [], change); .on('remove', [], change);
if (!proxy.published) { if (!proxy.published) {
@ -221,6 +320,14 @@ define([
logging: true, logging: true,
}); });
var userList = info.userList;
var config = {
userData: {},
readOnly: false,
common: Cryptpad
};
toolbar = info.realtime.toolbar = Toolbar.create(APP.$bar, info.myID, info.realtime, info.getLag, userList, config);
Cryptpad.replaceHash(editHash); Cryptpad.replaceHash(editHash);
}; };

17
www/poll/test/render.js
View File

@ -8,8 +8,8 @@ define([
var Example = { var Example = {
info: { info: {
title: 'my title', title: '',
description: 'my description', description: '',
}, },
table: { table: {
/* TODO /* TODO
@ -54,6 +54,10 @@ by maintaining indexes in rowsOrder and colsOrder
return null; return null;
}; };
var getCoordinates = Render.getCoordinates = function (id) {
return id.split('_');
};
var getColumnValue = Render.getColumnValue = function (obj, colId) { var getColumnValue = Render.getColumnValue = function (obj, colId) {
return Cryptpad.find(obj, ['table', 'cols'].concat([colId])); return Cryptpad.find(obj, ['table', 'cols'].concat([colId]));
}; };
@ -143,6 +147,7 @@ by maintaining indexes in rowsOrder and colsOrder
var setValue = Render.setValue = function (obj, id, value) { var setValue = Render.setValue = function (obj, id, value) {
var type = typeofId(id); var type = typeofId(id);
switch (type) { switch (type) {
case 'row': return setRowValue(obj, id, value); case 'row': return setRowValue(obj, id, value);
case 'col': return setColumnValue(obj, id, value); case 'col': return setColumnValue(obj, id, value);
@ -199,10 +204,6 @@ by maintaining indexes in rowsOrder and colsOrder
type: 'text', type: 'text',
value: getColumnValue(obj, col) || "" value: getColumnValue(obj, col) || ""
}; };
if (getColumnValue(obj, col) === false) {
result.placeholder = 'new column here'; //TODO translate
result['class'] = 'uncommitted';
}
return result; return result;
})); }));
} }
@ -214,15 +215,11 @@ by maintaining indexes in rowsOrder and colsOrder
}].concat(cols.map(function (col) { }].concat(cols.map(function (col) {
var id = [col, rows[i-1]].join('_'); var id = [col, rows[i-1]].join('_');
var val = cells[id] || false; var val = cells[id] || false;
var result = { var result = {
'data-rt-id': id, 'data-rt-id': id,
type: 'checkbox', type: 'checkbox',
autocomplete: 'nope' autocomplete: 'nope'
}; };
if (getColumnValue(obj, col) === false) {
result['class'] = 'uncommitted-cell';
}
if (val) { result.checked = true; } if (val) { result.checked = true; }
return result; return result;
})); }));