Lock inputs when the user is not editing them

pull/1/head
yflory 8 years ago
parent eaeaf4df40
commit 3632834500

@ -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 {

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

@ -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:

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

Loading…
Cancel
Save