Lock inputs when the user is not editing them

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 {

customize.dist/src/cryptpad.less

@@ -465,7 +465,7 @@ form.realtime {
         input {
             &[type="text"] {
                 height: 100%;
-                width: 80%;
+                width: 70%;
                 border: 3px solid @base;
             }
         }

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);
+                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') {
+            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') {
+            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:

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'])
                     ]]
             ]];
         }