From bca746bbb5186f790e199f62189855da8b3eeffb Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 28 Nov 2016 18:38:06 +0100 Subject: [PATCH] Fix uncommitted column, add toolbar --- www/poll/test/index.html | 4 +- www/poll/test/main.js | 139 ++++++++++++++++++++++++++++++++++----- www/poll/test/render.js | 17 ++--- 3 files changed, 133 insertions(+), 27 deletions(-) diff --git a/www/poll/test/index.html b/www/poll/test/index.html index 52149bc1c..3aef58e04 100644 --- a/www/poll/test/index.html +++ b/www/poll/test/index.html @@ -47,15 +47,17 @@ +
+


-
+
diff --git a/www/poll/test/main.js b/www/poll/test/main.js index 22b3d06db..bfff6fe11 100644 --- a/www/poll/test/main.js +++ b/www/poll/test/main.js @@ -1,5 +1,6 @@ define([ '/api/config?cb=' + Math.random().toString(16).substring(2), + '/customize/messages.js?app=poll', '/bower_components/textpatcher/TextPatcher.js', '/bower_components/chainpad-listmap/chainpad-listmap.js', '/bower_components/chainpad-crypto/crypto.js', @@ -12,13 +13,13 @@ define([ '/bower_components/file-saver/FileSaver.min.js', '/bower_components/jquery/dist/jquery.min.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 APP = window.APP = { Toolbar: Toolbar, Hyperjson: Hyperjson, 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) { @@ -27,12 +28,39 @@ define([ return (a === firstcol) ? -1 : ((b === firstcol) ? 1 : 0); }); - if (colsOrder.indexOf(firstcol) === -1) { - colsOrder.unshift(firstcol); - } 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 */ var change = function (o, n, path) { if (path && path.join) { @@ -42,12 +70,14 @@ define([ 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 = { cols: colsOrder }; - Render.updateTable(table, APP.proxy, conf); + Render.updateTable(table, displayedObj, conf); /* FIXME browser autocomplete fills in new fields sometimes 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 */ 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); - 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) { case 'text': console.log("text[rt-id='%s'] [%s]", id, input.value); - if (!input.value) { return void console.log("Hit enter?"); } - Render.setValue(APP.proxy, id, input.value); + Render.setValue(object, id, input.value); break; case 'checkbox': console.log("checkbox[tr-id='%s'] %s", id, input.checked); - Render.setValue(APP.proxy, id, input.checked); + Render.setValue(object, id, input.checked); break; default: 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) { console.log("READY"); console.log('userid: %s', userid); 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 () { // 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); $table @@ -195,7 +271,30 @@ define([ .on('keyup', function (e) { handleClick(e, true); }); 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); if (!proxy.published) { @@ -221,6 +320,14 @@ define([ 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); }; diff --git a/www/poll/test/render.js b/www/poll/test/render.js index b27fd3db1..91acc266b 100644 --- a/www/poll/test/render.js +++ b/www/poll/test/render.js @@ -8,8 +8,8 @@ define([ var Example = { info: { - title: 'my title', - description: 'my description', + title: '', + description: '', }, table: { /* TODO @@ -54,6 +54,10 @@ by maintaining indexes in rowsOrder and colsOrder return null; }; + var getCoordinates = Render.getCoordinates = function (id) { + return id.split('_'); + }; + var getColumnValue = Render.getColumnValue = function (obj, 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 type = typeofId(id); + switch (type) { case 'row': return setRowValue(obj, id, value); case 'col': return setColumnValue(obj, id, value); @@ -199,10 +204,6 @@ by maintaining indexes in rowsOrder and colsOrder type: 'text', value: getColumnValue(obj, col) || "" }; - if (getColumnValue(obj, col) === false) { - result.placeholder = 'new column here'; //TODO translate - result['class'] = 'uncommitted'; - } return result; })); } @@ -214,15 +215,11 @@ by maintaining indexes in rowsOrder and colsOrder }].concat(cols.map(function (col) { var id = [col, rows[i-1]].join('_'); var val = cells[id] || false; - var result = { 'data-rt-id': id, type: 'checkbox', autocomplete: 'nope' }; - if (getColumnValue(obj, col) === false) { - result['class'] = 'uncommitted-cell'; - } if (val) { result.checked = true; } return result; }));