diff --git a/www/poll/index.html b/www/poll/index.html index 778e6d511..36995bd81 100644 --- a/www/poll/index.html +++ b/www/poll/index.html @@ -24,6 +24,7 @@ #adduser, #addoption { font-weight: bold; } + @@ -67,5 +68,36 @@ - + + + diff --git a/www/poll/main.js b/www/poll/main.js index 081e982bc..15da3ad31 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -2,6 +2,7 @@ define([ '/api/config?cb=' + Math.random().toString(16).substring(2), '/customize/messages.js', '/poll/table.js', + '/poll/wizard.js', '/bower_components/textpatcher/TextPatcher.js', '/bower_components/chainpad-listmap/chainpad-listmap.js', '/bower_components/chainpad-crypto/crypto.js', @@ -10,7 +11,7 @@ define([ '/common/notify.js', '/bower_components/jquery/dist/jquery.min.js', '/customize/pad.js' -], function (Config, Messages, Table, TextPatcher, Listmap, Crypto, Cryptpad, Visible, Notify) { +], function (Config, Messages, Table, Wizard, TextPatcher, Listmap, Crypto, Cryptpad, Visible, Notify) { var $ = window.jQuery; Cryptpad.styleAlerts(); @@ -39,6 +40,8 @@ define([ var module = window.APP = {}; + module.Wizard = Wizard; + // special UI elements var $title = $('#title').attr('placeholder', Messages.dateTitleHint || 'title'); var $location = $('#location').attr('placeholder', Messages.dateLocationHint || 'location'); @@ -87,7 +90,8 @@ define([ }; var Text = function () { return Input({type:'text'}); }; - var table = module.table = Table($('table'), xy); + var table = module.table = Table($('#table'), xy); + var setEditable = function (bool) { module.isEditable = bool; items.forEach(function ($item) { @@ -103,6 +107,49 @@ define([ A.push(e); }; + var removeRow = function (proxy, uid) { + // remove proxy.table.rows[uid] + + proxy.table.rows[uid] = undefined; + delete proxy.table.rows[uid]; + + // remove proxy.table.rowsOrder + + var order = proxy.table.rowsOrder; + order.splice(order.indexOf(uid), 1); + + // remove all cells including uid + // proxy.table.cells + Object.keys(proxy.table.cells).forEach(function (cellUid) { + if (cellUid.indexOf(uid) === -1) { return; } + proxy.table.cells[cellUid] = undefined; + delete proxy.table.cells[cellUid]; + }); + + // remove elements from DOM + table.removeRow(uid); + }; + + var removeColumn = function (proxy, uid) { + // remove proxy.table.cols[uid] + proxy.table.cols[uid] = undefined; + delete proxy.table.rows[uid]; + + // remove proxy.table.colsOrder + var order = proxy.table.colsOrder; + order.splice(order.indexOf(uid), 1); + + // remove all cells including uid + Object.keys(proxy.table.cells).forEach(function (cellUid) { + if (cellUid.indexOf(uid) === -1) { return; } + proxy.table.cells[cellUid] = undefined; + delete proxy.table.cells[cellUid]; + }); + + // remove elements from DOM + table.removeColumn(uid); + }; + var makeUser = function (proxy, id, value) { var $user = Input({ id: id, @@ -118,12 +165,6 @@ define([ return $user; }; - $('#adduser').click(function () { - if (!module.isEditable) { return; } - var id = coluid(); - makeUser(module.rt.proxy, id).focus(); - }); - var makeOption = function (proxy, id, value) { var $option = Input({ type: 'text', @@ -137,15 +178,42 @@ define([ addIfAbsent(proxy.table.rowsOrder, id); table.addRow($option, Checkbox, id); + + + console.log(table.$[0]); + return $option; }; + $('#adduser').click(function () { + if (!module.isEditable) { return; } + var id = coluid(); + makeUser(module.rt.proxy, id).focus(); + }); + $('#addoption').click(function () { if (!module.isEditable) { return; } var id = rowuid(); makeOption(module.rt.proxy, id).focus(); }); + Wizard.$getOptions.click(function () { + Cryptpad.confirm("Are you really ready to add these options to your poll?", function (yes) { + if (!yes) { return; } + var options = Wizard.computeSlots(function (a, b) { + return a + ' ('+ b + ')' + }); + + var proxy = module.rt.proxy; + + options.forEach(function (text) { + var id = rowuid(); + makeOption(proxy, id).val(text); + }); + console.log(options); + }); + }); + // notifications var unnotify = function () { if (!(module.tabNotification && @@ -357,6 +425,17 @@ define([ }); })); + $toolbar.append(Button({ + id: 'wizard', + 'class': 'wizard button action', + title: 'wizard!', + }).text('WIZARD').click(function () { + Wizard.show(); + if (Wizard.hasBeenDisplayed) { return; } + Cryptpad.log("click the button in the top left to return to your poll"); + Wizard.hasBeenDisplayed = true; + })); + setEditable(true); }; diff --git a/www/poll/table.js b/www/poll/table.js index bff2a6db0..d2c3c940d 100644 --- a/www/poll/table.js +++ b/www/poll/table.js @@ -45,7 +45,7 @@ define([ var removeColumn = function (uid) { //var I/ - var $col = $('th[data-rt-uid="' + uid + '"]'); + var $col = $head.find('th[data-rt-uid="' + uid + '"]'); if (!$col.length) { return; } /* removing a column is difficult because the elements diff --git a/www/poll/wizard.js b/www/poll/wizard.js new file mode 100644 index 000000000..69103a0aa --- /dev/null +++ b/www/poll/wizard.js @@ -0,0 +1,144 @@ +define([ + '/poll/table.js', + '/bower_components/jquery/dist/jquery.min.js', +], function (Table) { + var $ = window.jQuery; + var W = {}; + + var xy = function (x, y) { + return x + '_' + y; + }; + + var Checkbox = W.Checkbox = function (id) { + return $('', { + id: id, + type: 'checkbox', + checked: true, + }); + }; + + console.log("Creating wizard"); + + var $modal = W.$modal = $('#wizard-modal'); + var $table = $modal.find('table'); + console.log("wizard table ->", $table[0]); + var table = W.table = Table($table, xy); + + W.cleanup = function () { + // TODO reset table to fresh state + }; + + W.show = function () { + $modal.addClass('shown'); + W.isShown = true; + }; + + W.hide = function () { + $modal.removeClass('shown'); + W.isShown = false; + }; + + $(window).on('keyup', function (e) { + if (!W.isShown) { return; } + if (e.which !== 27) { return; } + W.hide(); + }); + + var $closeme = W.$closeme = ($('#close-wizard').click(function () { + W.hide(); + })); + + var Input = function (opt) { return $('', opt); }; + + W.width = 0; + W.height = 0; + + W.times = []; + W.dates = []; + + var coluid = function () { + return 'x-' + W.width++; + }; + + var rowuid = function () { + return 'y-' + W.height++; + }; + + var makeTime = function (id) { + var $time = Input({ + id: id, + type: 'text', + placeholder: 'your time', + }).on('keyup', function () { + // do something + }); + + // add row + + table.addRow($time, Checkbox, id); + + return $time; + }; + + var makeDate = function (id) { + var $date = Input({ + id: id, + type: 'text', + placeholder: 'your date', + }).on('keyup', function () { + // do something + }); + + // add column + table.addColumn($date, Checkbox, id); + + return $date; + }; + + var $addtime = $('#addtime').click(function () { + if (!W.isShown) { return; } + var id = rowuid(); + + var $time = makeTime(id).focus(); + + W.times.push(id); + }); + + var $addDate = $('#adddate').click(function () { + if (!W.isShown) { return; } + + var id = coluid(); + var $date = makeDate(id).focus(); + + W.dates.push(id); + }); + + var fix1 = function (f,a) { return function (b) { return f(a,b); }; }; + var carte = function (f,A,B){ return A.map(function(a){ return B.map(fix1(f,a)); }); }; + var flatten = function (A) { + return A.reduce(function (a, b) { + return a.concat(b); + }, []); + }; + + var computeSlots = W.computeSlots = function (f) { + f = f || function (a, b) { return a + ', ' + b; }; + return flatten(carte(function (date, time) { + var $check = $table.find('#' + date + '_' + time); + var checked = $check[0].checked; + + if (!$check[0].checked) { return; } + + var dateValue = $table.find('#' + date).val(); + var timeValue = $table.find('#' + time).val(); + + return f(dateValue, timeValue); + }, W.dates, W.times)).filter(function (x) { return x; }); + }; + + var $toolbar = $('#modal-toolbar'); + + var $getOptions = W.$getOptions = $('#get-options'); + + return W; +});