From 3632834500fcc346e0873be3e936549abebf0a95 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 30 Nov 2016 18:39:19 +0100 Subject: [PATCH] Lock inputs when the user is not editing them --- customize.dist/main.css | 2 +- customize.dist/src/cryptpad.less | 2 +- www/poll/test/main.js | 87 ++++++++++++++++++++++++++++---- www/poll/test/render.js | 24 ++++++--- 4 files changed, 98 insertions(+), 17 deletions(-) diff --git a/customize.dist/main.css b/customize.dist/main.css index 9eb23b1e2..32e538c68 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -399,7 +399,7 @@ form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbo } form.realtime table input[type="text"] { height: 100%; - width: 80%; + width: 70%; border: 3px solid #302B28; } form.realtime table .edit { diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less index 5f95cd553..e123f8722 100644 --- a/customize.dist/src/cryptpad.less +++ b/customize.dist/src/cryptpad.less @@ -465,7 +465,7 @@ form.realtime { input { &[type="text"] { height: 100%; - width: 80%; + width: 70%; border: 3px solid @base; } } diff --git a/www/poll/test/main.js b/www/poll/test/main.js index 513999a73..ce0a2f4d9 100644 --- a/www/poll/test/main.js +++ b/www/poll/test/main.js @@ -24,6 +24,10 @@ define([ Hyperjson: Hyperjson, Render: Render, $bar: $('#toolbar').css({ border: '1px solid white', background: 'grey', 'margin-bottom': '1vh', }), + editable: { + row: [], + col: [] + } }; var sortColumns = function (order, firstcol) { @@ -69,16 +73,42 @@ define([ return newObj; }; + var setColumnDisabled = function (id, state) { + if (!state) { + $('input[data-rt-id^="' + id + '"]').removeAttr('disabled'); + return; + } + $('input[data-rt-id^="' + id + '"]').attr('disabled', 'disabled'); + }; + var styleUncommittedColumn = function () { var id = APP.userid; + + // Enable the checkboxes for the user's column (committed or not) + $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled'); + $('input[type="checkbox"][data-rt-id^="' + id + '"]').addClass('enabled'); + if (isOwnColumnCommitted()) { return; } $('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted"); - $('td.uncommitted .remove').remove(); + $('td.uncommitted .remove, td.uncommitted .edit').css('visibility', 'hidden'); $('td.uncommitted .cover').addClass("uncommitted"); $('.uncommitted input[type="text"]').attr("placeholder", "New column here"); //TODO }; + var unlockElements = function () { + APP.editable.row.forEach(function (id) { + $('input[type="text"][disabled="disabled"][data-rt-id="' + id + '"]').removeAttr('disabled'); + $('span.edit[data-rt-id="' + id + '"]').css('visibility', 'hidden'); + }); + APP.editable.col.forEach(function (id) { + $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled'); + $('input[type="checkbox"][data-rt-id^="' + id + '"]').addClass('enabled'); + $('span.edit[data-rt-id="' + id + '"]').css('visibility', 'hidden'); + }); + }; + var updateTableButtons = function () { + unlockElements(); if ($('.checkbox-cell').length && !isOwnColumnCommitted()) { $('#commit').show(); $('#commit').css('width', $($('.checkbox-cell')[0]).width()); @@ -91,6 +121,23 @@ define([ } }; + var unlockColumn = function (id, cb) { + if (APP.editable.col.indexOf(id) === -1) { + APP.editable.col.push(id); + } + if (typeof(cb) === "function") { + cb(); + } + }; + var unlockRow = function (id, cb) { + if (APP.editable.row.indexOf(id) === -1) { + APP.editable.row.push(id); + } + if (typeof(cb) === "function") { + cb(); + } + }; + /* Any time the realtime object changes, call this function */ var change = function (o, n, path) { if (path && path.join) { @@ -146,10 +193,16 @@ define([ console.log("text[rt-id='%s'] [%s]", id, input.value); if (!input.value) { return void console.log("Hit enter?"); } Render.setValue(object, id, input.value); + change(); break; case 'checkbox': console.log("checkbox[tr-id='%s'] %s", id, input.checked); - Render.setValue(object, id, input.checked); + if ($(input).hasClass('enabled')) { + Render.setValue(object, id, input.checked); + change(); + } else { + console.log('checkbox locked'); + } break; default: console.log("Input[type='%s']", type); @@ -162,13 +215,29 @@ define([ var id = span.getAttribute('data-rt-id'); var type = Render.typeofId(id); if (type === 'row') { - Render.removeRow(APP.proxy, id, function () { - change(); - }); + var isRemove = span.className && span.className.split(' ').indexOf('remove') !== -1; + var isEdit = span.className && span.className.split(' ').indexOf('edit') !== -1; + if (isRemove) { + Render.removeRow(APP.proxy, id, function () { + change(); + }); + } else if (isEdit) { + unlockRow(id, function () { + change(); + }); + } } else if (type === 'col') { - Render.removeColumn(APP.proxy, id, function () { - change(); - }); + var isRemove = span.className && span.className.split(' ').indexOf('remove') !== -1; + var isEdit = span.className && span.className.split(' ').indexOf('edit') !== -1; + if (isRemove) { + Render.removeColumn(APP.proxy, id, function () { + change(); + }); + } else if (isEdit) { + unlockColumn(id, function () { + change(); + }); + } } else if (type === 'cell') { change(); } else { @@ -193,7 +262,7 @@ define([ handleInput(target); break; case 'SPAN': - case 'LABEL': + //case 'LABEL': handleSpan(target); break; case undefined: diff --git a/www/poll/test/render.js b/www/poll/test/render.js index 950da7342..a817bc19f 100644 --- a/www/poll/test/render.js +++ b/www/poll/test/render.js @@ -203,7 +203,8 @@ by maintaining indexes in rowsOrder and colsOrder 'data-rt-id': col, type: 'text', value: getColumnValue(obj, col) || "", - placeholder: 'User' //TODO translate + placeholder: 'User', //TODO translate + disabled: 'disabled' }; return result; })); @@ -213,14 +214,15 @@ by maintaining indexes in rowsOrder and colsOrder 'data-rt-id': row, value: getRowValue(obj, row), type: 'text', - placeholder: 'Option' //TODO translate + placeholder: 'Option', //TODO translate + disabled: 'disabled' }].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' + autocomplete: 'nope', }; if (val) { result.checked = true; } return result; @@ -235,13 +237,22 @@ by maintaining indexes in rowsOrder and colsOrder }, ['✖']]; }; + var makeEditElement = Render.makeEditElement = function (id) { + return ['SPAN', { + 'data-rt-id': id, + class: 'edit', + }, ['']]; + }; + var makeHeadingCell = Render.makeHeadingCell = function (cell) { if (!cell) { return ['TD', {}, []]; } if (cell.type === 'text') { - var removeElement = cell['class'] !== "uncommitted" ? makeRemoveElement(cell['data-rt-id']) : ''; + var removeElement = makeRemoveElement(cell['data-rt-id']); + var editElement = makeEditElement(cell['data-rt-id']); return ['TD', {}, [ ['INPUT', cell, []], - removeElement + removeElement, + editElement ]]; } return ['TD', cell, []]; @@ -279,7 +290,8 @@ by maintaining indexes in rowsOrder and colsOrder return ['TD', {}, [ ['DIV', {class: 'text-cell'}, [ ['INPUT', cell, []], - makeRemoveElement(cell['data-rt-id']) + makeRemoveElement(cell['data-rt-id']), + makeEditElement(cell['data-rt-id']) ]] ]]; }