web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

poll: Implement multiple choices

Browse Source
This commit is contained in:
Pierre Bondoerffer 2017-06-12 18:01:51 +02:00
parent 685b352db8
commit b8e394db67
No known key found for this signature in database
GPG Key ID: C0C7C0C5063F2236
4 changed files with 101 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
www/poll/main.js
View File

@ -98,7 +98,7 @@ define([
// Enable the checkboxes for the user's column (committed or not) // Enable the checkboxes for the user's column (committed or not)
$('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled'); $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
$('input[type="checkbox"][data-rt-id^="' + id + '"]').addClass('enabled'); $('input[type="number"][data-rt-id^="' + id + '"]').addClass('enabled');
$('.lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked); $('.lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
if (isOwnColumnCommitted()) { return; } if (isOwnColumnCommitted()) { return; }
@ -117,7 +117,7 @@ define([
APP.editable.col.forEach(function (id) { APP.editable.col.forEach(function (id) {
$input = $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled'); $input = $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
$input.parent().addClass('editing'); $input.parent().addClass('editing');
$('input[type="checkbox"][data-rt-id^="' + id + '"]').addClass('enabled'); $('input[type="number"][data-rt-id^="' + id + '"]').addClass('enabled');
$('.lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked); $('.lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
}); });
}; };
@ -276,10 +276,10 @@ define([
Render.setValue(object, id, input.value); Render.setValue(object, id, input.value);
change(null, null, null, 50); change(null, null, null, 50);
break; break;
case 'checkbox': case 'number':
debug("checkbox[tr-id='%s'] %s", id, input.checked); debug("checkbox[tr-id='%s'] %s", id, input.value);
if (APP.editable.col.indexOf(x) >= 0 || x === APP.userid) { if (APP.editable.col.indexOf(x) >= 0 || x === APP.userid) {
Render.setValue(object, id, input.checked); Render.setValue(object, id, parseInt(input.value));
change(); change();
} else { } else {
debug('checkbox locked'); debug('checkbox locked');
@ -378,10 +378,18 @@ define([
hideInputs(target, isKeyup); hideInputs(target, isKeyup);
break; break;
} }
if ($(target).is('input[type="number"]')) { break; }
handleInput(target); handleInput(target);
break; break;
case 'LABEL':
var input = $('input[type="number"][id=' + $(target).attr('for') + ']');
var value = parseInt(input.val());
input.val((value + 1) % 4);
handleInput(input[0]);
break;
case 'SPAN': case 'SPAN':
//case 'LABEL':
if (shouldLock) { if (shouldLock) {
break; break;
} }

65
www/poll/poll.css
View File

@ -229,41 +229,64 @@ div.realtime table tr td.checkbox-cell div.checkbox-contain label {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable), form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable),
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) { div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable) {
display: none; display: none;
} }
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover, form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable) ~ .cover,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover { div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable) ~ .cover {
font-weight: bold; font-weight: bold;
background-color: #FA5858;
color: #000; color: #000;
display: block; display: block;
} }
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable) ~ .cover:after,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable) ~ .cover:after {
height: 100%; height: 100%;
} }
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable) ~ .cover.yes,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable) ~ .cover.yes {
content: "✖";
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes {
background-color: #46E981; background-color: #46E981;
} }
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after, form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable) ~ .cover.uncommitted,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after { div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable) ~ .cover.uncommitted {
content: "✔";
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted {
background: #ddd; background: #ddd;
} }
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine, form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable) ~ .cover.mine,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine { div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"]:not(.editable) ~ .cover.mine {
display: none; display: none;
} }
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="0"] ~ .cover,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="0"] ~ .cover {
background-color: #FA5858;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="0"] ~ .cover:after,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="0"] ~ .cover:after {
content: "✖";
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="1"] ~ .cover,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="1"] ~ .cover {
background-color: #46E981;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="1"] ~ .cover:after,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="1"] ~ .cover:after {
content: "✔";
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="2"] ~ .cover,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="2"] ~ .cover {
background-color: #ff5;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="2"] ~ .cover:after,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="2"] ~ .cover:after {
content: "~";
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="3"] ~ .cover,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="3"] ~ .cover {
background-color: #ccc;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="3"] ~ .cover:after,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="number"][value="3"] ~ .cover:after {
content: "?";
}
form.realtime table input[type="text"], form.realtime table input[type="text"],
div.realtime table input[type="text"] { div.realtime table input[type="text"] {
height: auto; height: auto;

34
www/poll/poll.less
View File

@ -9,6 +9,8 @@
@poll-border-color: #555; @poll-border-color: #555;
@poll-cover-color: #000; @poll-cover-color: #000;
@poll-fg: #000; @poll-fg: #000;
@poll-option-yellow: #ff5;
@poll-option-gray: #ccc;
html, body { html, body {
width: 100%; width: 100%;
@ -251,7 +253,7 @@ form.realtime, div.realtime {
} }
input { input {
&[type="checkbox"] { &[type="number"] {
&:not(.editable) { &:not(.editable) {
display: none; display: none;
@ -259,26 +261,21 @@ form.realtime, div.realtime {
display: block; display: block;
font-weight: bold; font-weight: bold;
background-color: @cp-red;
color: @poll-cover-color; color: @poll-cover-color;
&:after { &:after {
height: 100%; height: 100%;
} }
&:after { content: "✖"; }
display: block; display: block;
&.yes { &.yes {
background-color: @cp-green; background-color: @cp-green;
&:after { content: "✔"; }
} }
&.uncommitted { &.uncommitted {
background: #ddd; background: #ddd;
} }
&.mine { &.mine {
display: none; display: none;
} }
@ -286,6 +283,31 @@ form.realtime, div.realtime {
} }
} }
} }
input[type="number"][value="0"] {
~ .cover {
background-color: @cp-red;
&:after { content: "✖"; }
}
}
input[type="number"][value="1"] {
~ .cover {
background-color: @cp-green;
&:after { content: "✔"; }
}
}
input[type="number"][value="2"] {
~ .cover {
background-color: @poll-option-yellow;
&:after { content: "~"; }
}
}
input[type="number"][value="3"] {
~ .cover {
background-color: @poll-option-gray;
&:after { content: "?"; }
}
}
} }
} }
} }

24
www/poll/render.js
View File

@ -70,7 +70,12 @@ var Renderer = function (Cryptpad) {
}; };
var getCellValue = Render.getCellValue = function (obj, cellId) { var getCellValue = Render.getCellValue = function (obj, cellId) {
return Cryptpad.find(obj, ['table', 'cells'].concat([cellId])); var value = Cryptpad.find(obj, ['table', 'cells'].concat([cellId]));
if (typeof value === 'boolean') {
return (value === true ? '1' : '0');
} else {
return value;
}
}; };
var setRowValue = Render.setRowValue = function (obj, rowId, value) { var setRowValue = Render.setRowValue = function (obj, rowId, value) {
@ -234,16 +239,20 @@ var Renderer = function (Cryptpad) {
disabled: 'disabled' 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];
var result = { var result = {
'data-rt-id': id, 'data-rt-id': id,
type: 'checkbox', type: 'number',
autocomplete: 'nope', autocomplete: 'nope',
value: '3',
}; };
if (readOnly) { if (readOnly) {
result.disabled = "disabled"; result.disabled = "disabled";
} }
if (val) { result.checked = true; } if (typeof val !== 'undefined') {
if (typeof val === 'boolean') { val = (val ? '1' : '0'); }
result.value = val;
}
return result; return result;
})); }));
}); });
@ -297,9 +306,6 @@ var Renderer = function (Cryptpad) {
attrs.id = cell['data-rt-id']; attrs.id = cell['data-rt-id'];
var labelClass = 'cover'; var labelClass = 'cover';
if (cell.checked) {
labelClass += ' yes';
}
// TODO implement Yes/No/Maybe/Undecided // TODO implement Yes/No/Maybe/Undecided
return ['TD', {class:"checkbox-cell"}, [ return ['TD', {class:"checkbox-cell"}, [
@ -326,7 +332,7 @@ var Renderer = function (Cryptpad) {
]]; ]];
} }
if (cell && cell.type === 'checkbox') { if (cell && cell.type === 'number') {
return makeCheckbox(cell); return makeCheckbox(cell);
} }
return ['TD', cell, []]; return ['TD', cell, []];
@ -399,7 +405,7 @@ var Renderer = function (Cryptpad) {
preDiffApply: function (info) { preDiffApply: function (info) {
if (!diffIsInput(info)) { return; } if (!diffIsInput(info)) { return; }
switch (getInputType(info)) { switch (getInputType(info)) {
case 'checkbox': case 'number':
//console.log('checkbox'); //console.log('checkbox');
//console.log("[preDiffApply]", info); //console.log("[preDiffApply]", info);
break; break;