From e5ff7020fbb1c363f31c1f88d076ced21497f077 Mon Sep 17 00:00:00 2001 From: ansuz Date: Fri, 25 Nov 2016 12:02:37 +0100 Subject: [PATCH] move buttons out of form --- www/poll/test/index.html | 41 +++++++++++++++++----------- www/poll/test/main.js | 45 +++++++++++++++++++++++++++++-- www/poll/test/render.js | 58 +++++++++++++++++++++++++++++++++------- 3 files changed, 118 insertions(+), 26 deletions(-) diff --git a/www/poll/test/index.html b/www/poll/test/index.html index a053052d4..52149bc1c 100644 --- a/www/poll/test/index.html +++ b/www/poll/test/index.html @@ -4,6 +4,7 @@ Zero Knowledge Date Picker + -
- - -
+ + + + + + +
+
+
+
+ +
diff --git a/www/poll/test/main.js b/www/poll/test/main.js index 654dd8a00..615d19e72 100644 --- a/www/poll/test/main.js +++ b/www/poll/test/main.js @@ -21,6 +21,7 @@ define([ //$bar: $('#toolbar').css({ border: '1px solid white', background: 'grey', 'margin-bottom': '1vh', }), }; + /* Any time the realtime object changes, call this function */ var change = function (o, n, path) { if (path && path.join) { console.log("Change from [%s] to [%s] at [%s]", @@ -45,6 +46,7 @@ define([ return input.getAttribute && input.getAttribute('data-rt-id'); }; + /* Called whenever an event is fired on an input element */ var handleInput = function (input) { var type = input.type.toLowerCase(); var id = getRealtimeId(input); @@ -64,6 +66,7 @@ define([ } }; + /* Called whenever an event is fired on a span */ var handleSpan = function (span) { var id = span.getAttribute('data-rt-id'); var type = Render.typeofId(id); @@ -75,6 +78,10 @@ define([ Render.removeColumn(APP.proxy, id, function () { change(); }); + } else if (type === 'cell') { + change(); + } else { + console.log("UNHANDLED"); } }; @@ -91,6 +98,7 @@ define([ handleInput(target); break; case 'SPAN': + case 'LABEL': handleSpan(target); break; case undefined: @@ -102,6 +110,9 @@ define([ } }; + /* + Make sure that the realtime data structure has all the required fields + */ var prepareProxy = function (proxy, schema) { if (proxy && proxy.version === 1) { return; } console.log("Configuring proxy schema..."); @@ -111,8 +122,22 @@ define([ proxy.version = 1; }; - var ready = function (info) { + /* + + */ + var publish = APP.publish = function (bool) { + if (!APP.ready || APP.proxy.published) { return; } + APP.proxy.published = true; + APP.$publish.hide(); + + ['textarea', '#title'].forEach(function (sel) { + $(sel).attr('disabled', bool); + }); + }; + + var ready = function (info, userid) { console.log("READY"); + console.log('userid: %s', userid); var proxy = APP.proxy; @@ -141,6 +166,14 @@ define([ .on('change', [], change) .on('remove', [], change); + if (!proxy.published) { + var $publish = APP.$publish = $('#publish') + .show() + .click(function () { + publish(true); + }); + } + APP.ready = true; }; @@ -180,7 +213,15 @@ define([ APP.proxy = rt.proxy; rt.proxy .on('create', create) - .on('ready', ready) + .on('ready', function (info) { + Cryptpad.getPadAttribute('userid', function (e, userid) { + if (e) { console.error(e); } + if (userid === null) { userid = Render.coluid(); } + Cryptpad.setPadAttribute('userid', userid, function (e) { + ready(info, userid); + }); + }); + }) .on('disconnect', disconnect); }); }); diff --git a/www/poll/test/render.js b/www/poll/test/render.js index cf547da50..53c2589a9 100644 --- a/www/poll/test/render.js +++ b/www/poll/test/render.js @@ -222,7 +222,10 @@ by maintaining indexes in rowsOrder and colsOrder }; var makeRemoveElement = Render.makeRemoveElement = function (id) { - return ['SPAN', { 'data-rt-id': id, }, ['x']]; + return ['SPAN', { + 'data-rt-id': id, + class: 'remove', + }, ['✖']]; }; var makeHeadingCell = Render.makeHeadingCell = function (cell) { @@ -236,16 +239,45 @@ by maintaining indexes in rowsOrder and colsOrder return ['TD', cell, []]; }; + var clone = function (o) { + return JSON.parse(JSON.stringify(o)); + }; + + var makeCheckbox = Render.makeCheckbox = function (cell) { + var attrs = clone(cell); + + // FIXME + attrs.id = cell['data-rt-id']; + + var labelClass = 'cover'; + if (cell.checked) { + labelClass += ' yes'; + } + + return ['TD', {class:"checkbox-cell"}, [ + ['DIV', {class: 'checkbox-contain'}, [ + ['INPUT', attrs, []], + ['SPAN', {class: labelClass}, []], + ['LABEL', { + for: attrs.id, + 'data-rt-id': attrs.id, + }, []] + ]] + ]]; + }; + var makeBodyCell = Render.makeBodyCell = function (cell) { if (cell.type === 'text') { return ['TD', {}, [ - ['INPUT', cell, []], - makeRemoveElement(cell['data-rt-id']) + ['DIV', {class: 'text-cell'}, [ + ['INPUT', cell, []], + makeRemoveElement(cell['data-rt-id']) + ]] ]]; } if (cell.type === 'checkbox') { - return ['TD', {}, [ ['INPUT', cell, []] ]]; + return makeCheckbox(cell); } return ['TD', cell, []]; }; @@ -258,7 +290,7 @@ by maintaining indexes in rowsOrder and colsOrder if (!matrix || !matrix.length) { return; } var head = ['THEAD', {}, [ ['TR', {}, matrix[0].map(makeHeadingCell)] ]]; var body = ['TBODY', {}, matrix.slice(1).map(makeBodyRow)]; - return ['TABLE', {}, [head, body]]; + return ['TABLE', {id:'table'}, [head, body]]; }; var asHTML = Render.asHTML = function (obj) { @@ -278,12 +310,15 @@ by maintaining indexes in rowsOrder and colsOrder var preserveCursor = Render.preserveCursor = function (info) { if (['modifyValue', 'modifyAttribute'].indexOf(info.diff.action) !== -1) { var element = info.node; + + if (typeof(element.selectionStart) !== 'number') { return; } + var o = info.oldValue || ''; var n = info.newValue || ''; var op = TextPatcher.diff(o, n); info.selection = ['selectionStart', 'selectionEnd'].map(function (attr) { - var before = info.node[attr]; + var before = element[attr]; var after = TextPatcher.transformCursor(element[attr], op); return after; }); @@ -291,9 +326,14 @@ by maintaining indexes in rowsOrder and colsOrder }; var recoverCursor = Render.recoverCursor = function (info) { - if (info.selection && info.node) { - info.node.selectionStart = info.selection[0]; - info.node.selectionEnd = info.selection[1]; + try { + if (info.selection && info.node) { + info.node.selectionStart = info.selection[0]; + info.node.selectionEnd = info.selection[1]; + } + } catch (err) { + //console.log(info.node); + //console.error(err); } };