infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Lock inputs when the user is not editing them

Browse Source
pull/1/head
yflory 8 years ago
parent eaeaf4df40
commit 3632834500
4 changed files with 98 additions and 17 deletions
Show Stats Download Patch File Download Diff File

2
customize.dist/main.css
Unescape Escape View File

@ -399,7 +399,7 @@ form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbo
} }
form.realtime table input[type="text"] { form.realtime table input[type="text"] {
height: 100%; height: 100%;
width: 80%; width: 70%;
border: 3px solid #302B28; border: 3px solid #302B28;
} }
form.realtime table .edit { form.realtime table .edit {

2
customize.dist/src/cryptpad.less
Unescape Escape View File

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

87
www/poll/test/main.js
Unescape Escape View File

@ -24,6 +24,10 @@ define([
Hyperjson: Hyperjson, Hyperjson: Hyperjson,
Render: Render, 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', }),
editable: {
row: [],
col: []
}
}; };
var sortColumns = function (order, firstcol) { var sortColumns = function (order, firstcol) {
@ -69,16 +73,42 @@ define([
return newObj; 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 styleUncommittedColumn = function () {
var id = APP.userid; 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; } if (isOwnColumnCommitted()) { return; }
$('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted"); $('[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"); $('td.uncommitted .cover').addClass("uncommitted");
$('.uncommitted input[type="text"]').attr("placeholder", "New column here"); //TODO $('.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 () { var updateTableButtons = function () {
unlockElements();
if ($('.checkbox-cell').length && !isOwnColumnCommitted()) { if ($('.checkbox-cell').length && !isOwnColumnCommitted()) {
$('#commit').show(); $('#commit').show();
$('#commit').css('width', $($('.checkbox-cell')[0]).width()); $('#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 */ /* Any time the realtime object changes, call this function */
var change = function (o, n, path) { var change = function (o, n, path) {
if (path && path.join) { if (path && path.join) {
@ -146,10 +193,16 @@ define([
console.log("text[rt-id='%s'] [%s]", id, input.value); console.log("text[rt-id='%s'] [%s]", id, input.value);
if (!input.value) { return void console.log("Hit enter?"); } if (!input.value) { return void console.log("Hit enter?"); }
Render.setValue(object, id, input.value); Render.setValue(object, id, input.value);
change();
break; break;
case 'checkbox': case 'checkbox':
console.log("checkbox[tr-id='%s'] %s", id, input.checked); 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; break;
default: default:
console.log("Input[type='%s']", type); console.log("Input[type='%s']", type);
@ -162,13 +215,29 @@ define([
var id = span.getAttribute('data-rt-id'); var id = span.getAttribute('data-rt-id');
var type = Render.typeofId(id); var type = Render.typeofId(id);
if (type === 'row') { if (type === 'row') {
Render.removeRow(APP.proxy, id, function () { var isRemove = span.className && span.className.split(' ').indexOf('remove') !== -1;
change(); 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') { } else if (type === 'col') {
Render.removeColumn(APP.proxy, id, function () { var isRemove = span.className && span.className.split(' ').indexOf('remove') !== -1;
change(); 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') { } else if (type === 'cell') {
change(); change();
} else { } else {
@ -193,7 +262,7 @@ define([
handleInput(target); handleInput(target);
break; break;
case 'SPAN': case 'SPAN':
case 'LABEL': //case 'LABEL':
handleSpan(target); handleSpan(target);
break; break;
case undefined: case undefined:

24
www/poll/test/render.js
Unescape Escape View File

@ -203,7 +203,8 @@ by maintaining indexes in rowsOrder and colsOrder
'data-rt-id': col, 'data-rt-id': col,
type: 'text', type: 'text',
value: getColumnValue(obj, col) || "", value: getColumnValue(obj, col) || "",
placeholder: 'User' //TODO translate placeholder: 'User', //TODO translate
disabled: 'disabled'
}; };
return result; return result;
})); }));
@ -213,14 +214,15 @@ by maintaining indexes in rowsOrder and colsOrder
'data-rt-id': row, 'data-rt-id': row,
value: getRowValue(obj, row), value: getRowValue(obj, row),
type: 'text', type: 'text',
placeholder: 'Option' //TODO translate placeholder: 'Option', //TODO translate
disabled: 'disabled'
}].concat(cols.map(function (col) { }].concat(cols.map(function (col) {
var id = [col, rows[i-1]].join('_'); var id = [col, rows[i-1]].join('_');
var val = cells[id] || false; var val = cells[id] || false;
var result = { var result = {
'data-rt-id': id, 'data-rt-id': id,
type: 'checkbox', type: 'checkbox',
autocomplete: 'nope' autocomplete: 'nope',
}; };
if (val) { result.checked = true; } if (val) { result.checked = true; }
return result; 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) { var makeHeadingCell = Render.makeHeadingCell = function (cell) {
if (!cell) { return ['TD', {}, []]; } if (!cell) { return ['TD', {}, []]; }
if (cell.type === 'text') { 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', {}, [ return ['TD', {}, [
['INPUT', cell, []], ['INPUT', cell, []],
removeElement removeElement,
editElement
]]; ]];
} }
return ['TD', cell, []]; return ['TD', cell, []];
@ -279,7 +290,8 @@ by maintaining indexes in rowsOrder and colsOrder
return ['TD', {}, [ return ['TD', {}, [
['DIV', {class: 'text-cell'}, [ ['DIV', {class: 'text-cell'}, [
['INPUT', cell, []], ['INPUT', cell, []],
makeRemoveElement(cell['data-rt-id']) makeRemoveElement(cell['data-rt-id']),
makeEditElement(cell['data-rt-id'])
]] ]]
]]; ]];
} }

Write Preview
Loading…
Cancel
Save