584 lines
20 KiB
JavaScript
584 lines
20 KiB
JavaScript
define([
|
||
'jquery',
|
||
'/bower_components/hyperjson/hyperjson.js',
|
||
'/common/text-cursor.js',
|
||
'/bower_components/chainpad/chainpad.dist.js',
|
||
'/common/common-util.js',
|
||
'/customize/messages.js',
|
||
|
||
'/bower_components/diff-dom/diffDOM.js'
|
||
], function ($, Hyperjson, TextCursor, ChainPad, Util, Messages) {
|
||
var DiffDOM = window.diffDOM;
|
||
|
||
var Example = {
|
||
metadata: {
|
||
title: '',
|
||
userData: {}
|
||
},
|
||
description: '',
|
||
comments: {},
|
||
content: {
|
||
/* TODO
|
||
|
||
deprecate the practice of storing cells, cols, and rows separately.
|
||
|
||
Instead, keep everything in one map, and iterate over columns and rows
|
||
by maintaining indexes in rowsOrder and colsOrder
|
||
|
||
*/
|
||
cells: {},
|
||
cols: {},
|
||
colsOrder: [],
|
||
rows: {},
|
||
rowsOrder: []
|
||
}
|
||
};
|
||
|
||
var Renderer = function (APP) {
|
||
|
||
var Render = {
|
||
Example: Example
|
||
};
|
||
|
||
var Uid = Render.Uid = function (prefix, f) {
|
||
f = f || function () {
|
||
return Number(Math.random() * Number.MAX_SAFE_INTEGER)
|
||
.toString(32).replace(/\./g, '');
|
||
};
|
||
return function () { return prefix + '-' + f(); };
|
||
};
|
||
|
||
var coluid = Render.coluid = Uid('x');
|
||
var rowuid = Render.rowuid = Uid('y');
|
||
|
||
var isRow = Render.isRow = function (id) { return /^y\-[^_]*$/.test(id); };
|
||
var isColumn = Render.isColumn = function (id) { return /^x\-[^_]*$/.test(id); };
|
||
var isCell = Render.isCell = function (id) { return /^x\-[^_]*_y\-.*$/.test(id); };
|
||
|
||
var typeofId = Render.typeofId = function (id) {
|
||
if (isRow(id)) { return 'row'; }
|
||
if (isColumn(id)) { return 'col'; }
|
||
if (isCell(id)) { return 'cell'; }
|
||
return null;
|
||
};
|
||
|
||
Render.getCoordinates = function (id) {
|
||
return id.split('_');
|
||
};
|
||
|
||
var getColumnValue = Render.getColumnValue = function (obj, colId) {
|
||
return Util.find(obj, ['content', 'cols'].concat([colId]));
|
||
};
|
||
|
||
var getRowValue = Render.getRowValue = function (obj, rowId) {
|
||
return Util.find(obj, ['content', 'rows'].concat([rowId]));
|
||
};
|
||
|
||
var getCellValue = Render.getCellValue = function (obj, cellId) {
|
||
var value = Util.find(obj, ['content', 'cells'].concat([cellId]));
|
||
if (typeof value === 'boolean') {
|
||
return (value === true ? 1 : 0);
|
||
} else {
|
||
return value;
|
||
}
|
||
};
|
||
|
||
var setRowValue = Render.setRowValue = function (obj, rowId, value) {
|
||
var parent = Util.find(obj, ['content', 'rows']);
|
||
if (typeof(parent) === 'object') { return (parent[rowId] = value); }
|
||
return null;
|
||
};
|
||
|
||
var setColumnValue = Render.setColumnValue = function (obj, colId, value) {
|
||
var parent = Util.find(obj, ['content', 'cols']);
|
||
if (typeof(parent) === 'object') { return (parent[colId] = value); }
|
||
return null;
|
||
};
|
||
|
||
var setCellValue = Render.setCellValue = function (obj, cellId, value) {
|
||
var parent = Util.find(obj, ['content', 'cells']);
|
||
if (typeof(parent) === 'object') { return (parent[cellId] = value); }
|
||
return null;
|
||
};
|
||
|
||
Render.createColumn = function (obj, cb, id, value) {
|
||
var order = Util.find(obj, ['content', 'colsOrder']);
|
||
if (!order) { throw new Error("Uninitialized realtime object!"); }
|
||
id = id || coluid();
|
||
value = value || "";
|
||
setColumnValue(obj, id, value);
|
||
order.push(id);
|
||
if (typeof(cb) === 'function') { cb(void 0, id); }
|
||
};
|
||
|
||
Render.removeColumn = function (obj, id, cb) {
|
||
var order = Util.find(obj, ['content', 'colsOrder']);
|
||
var parent = Util.find(obj, ['content', 'cols']);
|
||
|
||
if (!(order && parent)) { throw new Error("Uninitialized realtime object!"); }
|
||
|
||
var idx = order.indexOf(id);
|
||
if (idx === -1) {
|
||
return void console
|
||
.error(new Error("Attempted to remove id which does not exist"));
|
||
}
|
||
|
||
Object.keys(obj.content.cells).forEach(function (key) {
|
||
if (key.indexOf(id) === 0) {
|
||
delete obj.content.cells[key];
|
||
}
|
||
});
|
||
|
||
order.splice(idx, 1);
|
||
if (parent[id]) { delete parent[id]; }
|
||
if (typeof(cb) === 'function') {
|
||
cb();
|
||
}
|
||
};
|
||
|
||
Render.createRow = function (obj, cb, id, value) {
|
||
var order = Util.find(obj, ['content', 'rowsOrder']);
|
||
if (!order) { throw new Error("Uninitialized realtime object!"); }
|
||
id = id || rowuid();
|
||
value = value || "";
|
||
setRowValue(obj, id, value);
|
||
order.push(id);
|
||
if (typeof(cb) === 'function') { cb(void 0, id); }
|
||
};
|
||
|
||
Render.removeRow = function (obj, id, cb) {
|
||
var order = Util.find(obj, ['content', 'rowsOrder']);
|
||
var parent = Util.find(obj, ['content', 'rows']);
|
||
|
||
if (!(order && parent)) { throw new Error("Uninitialized realtime object!"); }
|
||
|
||
var idx = order.indexOf(id);
|
||
if (idx === -1) {
|
||
return void console
|
||
.error(new Error("Attempted to remove id which does not exist"));
|
||
}
|
||
|
||
order.splice(idx, 1);
|
||
if (parent[id]) { delete parent[id]; }
|
||
if (typeof(cb) === 'function') { cb(); }
|
||
};
|
||
|
||
Render.setValue = function (obj, id, value) {
|
||
var type = typeofId(id);
|
||
|
||
switch (type) {
|
||
case 'row': return setRowValue(obj, id, value);
|
||
case 'col': return setColumnValue(obj, id, value);
|
||
case 'cell': return setCellValue(obj, id, value);
|
||
case null: break;
|
||
default:
|
||
console.log("[%s] has type [%s]", id, type);
|
||
throw new Error("Unexpected type!");
|
||
}
|
||
};
|
||
|
||
Render.getValue = function (obj, id) {
|
||
switch (typeofId(id)) {
|
||
case 'row': return getRowValue(obj, id);
|
||
case 'col': return getColumnValue(obj, id);
|
||
case 'cell': return getCellValue(obj, id);
|
||
case null: break;
|
||
default: throw new Error("Unexpected type!");
|
||
}
|
||
};
|
||
|
||
var getRowIds = Render.getRowIds = function (obj) {
|
||
return Util.find(obj, ['content', 'rowsOrder']);
|
||
};
|
||
|
||
var getColIds = Render.getColIds = function (obj) {
|
||
return Util.find(obj, ['content', 'colsOrder']);
|
||
};
|
||
|
||
var getCells = Render.getCells = function (obj) {
|
||
return Util.find(obj, ['content', 'cells']);
|
||
};
|
||
|
||
/* cellMatrix takes a proxy object, and optionally an alternate ordering
|
||
of row/column keys (as an array).
|
||
|
||
it returns an array of arrays containing the relevant data for each
|
||
cell in table we wish to construct.
|
||
*/
|
||
var cellMatrix = Render.cellMatrix = function (obj, rows, cols, readOnly) {
|
||
if (typeof(obj) !== 'object') {
|
||
throw new Error('expected realtime-proxy object');
|
||
}
|
||
|
||
var cells = getCells(obj);
|
||
rows = rows || getRowIds(obj);
|
||
rows.push('');
|
||
cols = cols || getColIds(obj);
|
||
|
||
return [null].concat(rows).map(function (row, i) {
|
||
if (i === 0) {
|
||
return [null].concat(cols.map(function (col) {
|
||
var result = {
|
||
'data-rt-id': col,
|
||
type: 'text',
|
||
value: getColumnValue(obj, col) || "",
|
||
title: getColumnValue(obj, col) || Messages.anonymous,
|
||
placeholder: Messages.anonymous,
|
||
disabled: 'disabled'
|
||
};
|
||
return result;
|
||
})).concat([{
|
||
content: Messages.poll_total
|
||
}]);
|
||
}
|
||
if (i === rows.length) {
|
||
return [null].concat(cols.map(function () {
|
||
return {
|
||
'class': 'cp-app-poll-table-lastrow',
|
||
};
|
||
}));
|
||
}
|
||
|
||
return [{
|
||
'data-rt-id': row,
|
||
value: getRowValue(obj, row) || '',
|
||
title: getRowValue(obj, row) || Messages.poll_optionPlaceholder,
|
||
type: 'text',
|
||
placeholder: Messages.poll_optionPlaceholder,
|
||
disabled: 'disabled',
|
||
}].concat(cols.map(function (col) {
|
||
var id = [col, rows[i-1]].join('_');
|
||
var val = cells[id];
|
||
var result = {
|
||
'data-rt-id': id,
|
||
type: 'number',
|
||
autocomplete: 'nope',
|
||
value: '3',
|
||
};
|
||
if (readOnly) {
|
||
result.disabled = "disabled";
|
||
}
|
||
if (typeof val !== 'undefined') {
|
||
if (typeof val === 'boolean') { val = (val ? '1' : '0'); }
|
||
result.value = val;
|
||
}
|
||
return result;
|
||
})).concat([{
|
||
'data-rt-count-id': row
|
||
}]);
|
||
});
|
||
};
|
||
|
||
var makeRemoveElement = Render.makeRemoveElement = function (id) {
|
||
return ['SPAN', {
|
||
'data-rt-id': id,
|
||
'title': Messages.poll_remove,
|
||
class: 'cp-app-poll-table-remove',
|
||
}, ['✖']];
|
||
};
|
||
|
||
var makeEditElement = Render.makeEditElement = function (id) {
|
||
return ['SPAN', {
|
||
'data-rt-id': id,
|
||
'title': Messages.poll_edit,
|
||
class: 'cp-app-poll-table-edit',
|
||
}, ['✐']];
|
||
};
|
||
|
||
var makeLockElement = Render.makeLockElement = function (id) {
|
||
return ['SPAN', {
|
||
'data-rt-id': id,
|
||
'title': Messages.poll_locked,
|
||
class: 'cp-app-poll-table-lock fa fa-lock',
|
||
}, []];
|
||
};
|
||
|
||
var makeBookmarkElement = Render.makeBookmarkElement = function (id) {
|
||
return ['SPAN', {
|
||
'data-rt-id': id,
|
||
'title': Messages.poll_bookmark_col,
|
||
'style': 'visibility: hidden;',
|
||
class: 'cp-app-poll-table-bookmark fa fa-thumb-tack',
|
||
}, []];
|
||
};
|
||
|
||
var makeHeadingCell = Render.makeHeadingCell = function (cell, readOnly) {
|
||
if (!cell) { return ['TD', {}, []]; }
|
||
if (cell.type === 'text') {
|
||
var elements = [['INPUT', cell, []]];
|
||
if (!readOnly) {
|
||
var buttons = [];
|
||
buttons.unshift(makeRemoveElement(cell['data-rt-id']));
|
||
buttons.unshift(makeLockElement(cell['data-rt-id']));
|
||
buttons.unshift(makeBookmarkElement(cell['data-rt-id']));
|
||
elements.unshift(['DIV', {'class': 'cp-app-poll-table-buttons'}, buttons]);
|
||
}
|
||
return ['TD', {}, elements];
|
||
}
|
||
return ['TD', cell, [cell.content]];
|
||
};
|
||
|
||
var clone = function (o) {
|
||
return JSON.parse(JSON.stringify(o));
|
||
};
|
||
|
||
var makeCheckbox = Render.makeCheckbox = function (cell) {
|
||
var attrs = clone(cell);
|
||
|
||
// FIXME
|
||
attrs.id = cell['data-rt-id'];
|
||
|
||
var labelClass = 'cp-app-poll-table-cover';
|
||
|
||
// TODO implement Yes/No/Maybe/Undecided
|
||
return ['TD', {class:"cp-app-poll-table-checkbox-cell"}, [
|
||
['DIV', {class: 'cp-app-poll-table-checkbox-contain'}, [
|
||
['INPUT', attrs, []],
|
||
['SPAN', {class: labelClass}, []],
|
||
['LABEL', {
|
||
for: attrs.id,
|
||
'data-rt-id': attrs.id,
|
||
}, []]
|
||
]]
|
||
]];
|
||
};
|
||
|
||
var makeBodyCell = Render.makeBodyCell = function (cell, readOnly) {
|
||
if (cell && cell.type === 'text') {
|
||
var elements = [['INPUT', cell, []]];
|
||
if (!readOnly) {
|
||
elements.push(makeRemoveElement(cell['data-rt-id']));
|
||
elements.push(makeEditElement(cell['data-rt-id']));
|
||
}
|
||
return ['TD', {}, [
|
||
['DIV', {class: 'cp-app-poll-table-text-cell'}, elements]
|
||
]];
|
||
}
|
||
|
||
if (cell && cell.type === 'number') {
|
||
return makeCheckbox(cell);
|
||
}
|
||
return ['TD', cell, []];
|
||
};
|
||
|
||
var makeBodyRow = Render.makeBodyRow = function (row, readOnly) {
|
||
return ['TR', {}, row.map(function (cell) {
|
||
return makeBodyCell(cell, readOnly);
|
||
})];
|
||
};
|
||
|
||
var toHyperjson = Render.toHyperjson = function (matrix, readOnly) {
|
||
if (!matrix || !matrix.length) { return; }
|
||
var head = ['THEAD', {}, [ ['TR', {}, matrix[0].map(function (cell) {
|
||
return makeHeadingCell(cell, readOnly);
|
||
})] ]];
|
||
var foot = ['TFOOT', {}, matrix.slice(-1).map(function (row) {
|
||
return makeBodyRow(row, readOnly);
|
||
})];
|
||
var body = ['TBODY', {}, matrix.slice(1, -1).map(function (row) {
|
||
return makeBodyRow(row, readOnly);
|
||
})];
|
||
return ['TABLE', {id:'cp-app-poll-table'}, [head, foot, body]];
|
||
};
|
||
|
||
Render.asHTML = function (obj, rows, cols, readOnly) {
|
||
return Hyperjson.toDOM(toHyperjson(cellMatrix(obj, rows, cols, readOnly), readOnly));
|
||
};
|
||
|
||
var diffIsInput = Render.diffIsInput = function (info) {
|
||
var nodeName = Util.find(info, ['node', 'nodeName']);
|
||
if (nodeName !== 'INPUT') { return; }
|
||
return true;
|
||
};
|
||
|
||
var getInputType = Render.getInputType = function (info) {
|
||
return Util.find(info, ['node', 'type']);
|
||
};
|
||
|
||
var preserveCursor = Render.preserveCursor = function (info) {
|
||
if (['modifyValue', 'modifyAttribute'].indexOf(info.diff.action) !== -1) {
|
||
var element = info.node;
|
||
|
||
if (typeof(element.selectionStart) !== 'number') { return; }
|
||
|
||
var o = info.oldValue || '';
|
||
var n = info.newValue || '';
|
||
var ops = ChainPad.Diff.diff(o, n);
|
||
|
||
info.selection = ['selectionStart', 'selectionEnd'].map(function (attr) {
|
||
return TextCursor.transformCursor(element[attr], ops);
|
||
});
|
||
}
|
||
};
|
||
|
||
var recoverCursor = Render.recoverCursor = function (info) {
|
||
try {
|
||
if (info.selection && info.node) {
|
||
info.node.selectionStart = info.selection[0];
|
||
info.node.selectionEnd = info.selection[1];
|
||
}
|
||
} catch (err) {
|
||
// FIXME LOL empty try-catch?
|
||
//console.log(info.node);
|
||
//console.error(err);
|
||
}
|
||
};
|
||
|
||
var diffOptions = {
|
||
preDiffApply: function (info) {
|
||
if (!diffIsInput(info)) { return; }
|
||
if (info.diff.action === "removeAttribute" &&
|
||
(info.diff.name === "aria-describedby" || info.diff.name === "data-original-title")) {
|
||
return;
|
||
}
|
||
switch (getInputType(info)) {
|
||
case 'number':
|
||
//console.log('checkbox');
|
||
//console.log("[preDiffApply]", info);
|
||
break;
|
||
case 'text':
|
||
preserveCursor(info);
|
||
break;
|
||
default: break;
|
||
}
|
||
},
|
||
postDiffApply: function (info) {
|
||
if (info.selection) { recoverCursor(info); }
|
||
/*
|
||
if (!diffIsInput(info)) { return; }
|
||
switch (getInputType(info)) {
|
||
case 'checkbox':
|
||
console.log("[postDiffApply]", info);
|
||
break;
|
||
case 'text': break;
|
||
default: break;
|
||
}*/
|
||
}
|
||
};
|
||
|
||
var styleUserColumn = function (table) {
|
||
var userid = APP.userid;
|
||
if (!userid) { return; }
|
||
|
||
|
||
// Enable input for the userid column
|
||
APP.enableColumn(userid, table);
|
||
$(table).find('input[disabled="disabled"][data-rt-id^="' + userid + '"]')
|
||
.attr('placeholder', Messages.poll_userPlaceholder);
|
||
$(table).find('.cp-app-poll-table-lock[data-rt-id="' + userid + '"]').remove();
|
||
$(table).find('[data-rt-id^="' + userid + '"]').closest('td')
|
||
.addClass("cp-app-poll-table-own");
|
||
$(table).find('.cp-app-poll-table-bookmark[data-rt-id="' + userid + '"]')
|
||
.css('visibility', '')
|
||
.addClass('cp-app-poll-table-bookmark-full')
|
||
.attr('title', Messages.poll_bookmarked_col);
|
||
};
|
||
var styleUncommittedColumn = function (table) {
|
||
APP.uncommitted.content.colsOrder.forEach(function(id) {
|
||
// Enable the checkboxes for the uncommitted column
|
||
APP.enableColumn(id, table);
|
||
$(table).find('.cp-app-poll-table-lock[data-rt-id="' + id + '"]').remove();
|
||
$(table).find('.cp-app-poll-table-remove[data-rt-id="' + id + '"]').remove();
|
||
$(table).find('.cp-app-poll-table-bookmark[data-rt-id="' + id + '"]').remove();
|
||
|
||
$(table).find('td.cp-app-poll-table-uncommitted .cover')
|
||
.addClass("cp-app-poll-table-uncommitted");
|
||
var $uncommittedCol = $(table).find('[data-rt-id^="' + id + '"]').closest('td');
|
||
$uncommittedCol.addClass("cp-app-poll-table-uncommitted");
|
||
});
|
||
APP.uncommitted.content.rowsOrder.forEach(function(id) {
|
||
// Enable the checkboxes for the uncommitted column
|
||
APP.enableRow(id, table);
|
||
$(table).find('.cp-app-poll-table-edit[data-rt-id="' + id + '"]').remove();
|
||
$(table).find('.cp-app-poll-table-remove[data-rt-id="' + id + '"]').remove();
|
||
|
||
$(table).find('[data-rt-id="' + id + '"]').closest('tr')
|
||
.addClass("cp-app-poll-table-uncommitted");
|
||
});
|
||
};
|
||
var unlockElements = function (table) {
|
||
APP.unlocked.row.forEach(function (id) { APP.enableRow(id, table); });
|
||
APP.unlocked.col.forEach(function (id) { APP.enableColumn(id, table); });
|
||
};
|
||
var updateTableButtons = function (table) {
|
||
var uncomColId = APP.uncommitted.content.colsOrder[0];
|
||
var uncomRowId = APP.uncommitted.content.rowsOrder[0];
|
||
var $createOption = $(table).find('tbody input[data-rt-id="' + uncomRowId+'"]')
|
||
.closest('td').find('> div');
|
||
$createOption.append(APP.$createRow);
|
||
var $createUser = $(table).find('thead input[data-rt-id="' + uncomColId + '"]')
|
||
.closest('td');
|
||
$createUser.prepend(APP.$createCol);
|
||
|
||
if (APP.proxy.content.colsOrder.indexOf(APP.userid) === -1) {
|
||
$(table).find('.cp-app-poll-table-bookmark').css('visibility', '');
|
||
}
|
||
};
|
||
var addCount = function (table) {
|
||
var $tr = $(table).find('tbody tr').first();
|
||
var winner = {
|
||
v: 0,
|
||
ids: []
|
||
};
|
||
APP.count = {};
|
||
APP.proxy.content.rowsOrder.forEach(function (rId) {
|
||
var count = Object.keys(APP.proxy.content.cells)
|
||
.filter(function (k) {
|
||
return k.indexOf(rId) !== -1 && APP.proxy.content.cells[k] === 1;
|
||
}).length;
|
||
if (count > winner.v) {
|
||
winner.v = count;
|
||
winner.ids = [rId];
|
||
} else if (count && count === winner.v) {
|
||
winner.ids.push(rId);
|
||
}
|
||
APP.count[rId] = count;
|
||
var h = $tr.height() || 28;
|
||
$(table).find('[data-rt-count-id="' + rId + '"]')
|
||
.text(count)
|
||
.css({
|
||
'height': h+'px',
|
||
'line-height': h+'px'
|
||
});
|
||
});
|
||
winner.ids.forEach(function (rId) {
|
||
$(table).find('[data-rt-id="' + rId + '"]').closest('td')
|
||
.addClass('cp-app-poll-table-winner');
|
||
$(table).find('[data-rt-count-id="' + rId + '"]')
|
||
.addClass('cp-app-poll-table-winner');
|
||
});
|
||
};
|
||
|
||
var styleTable = function (table) {
|
||
styleUserColumn(table);
|
||
styleUncommittedColumn(table);
|
||
unlockElements(table);
|
||
updateTableButtons(table);
|
||
addCount(table);
|
||
};
|
||
|
||
Render.updateTable = function (table, obj, conf) {
|
||
var DD = new DiffDOM(diffOptions);
|
||
|
||
var rows = conf ? conf.rows : null;
|
||
var cols = conf ? conf.cols : null;
|
||
var readOnly = conf ? conf.readOnly : false;
|
||
var matrix = cellMatrix(obj, rows, cols, readOnly);
|
||
|
||
var hj = toHyperjson(matrix, readOnly);
|
||
|
||
if (!hj) { throw new Error("Expected Hyperjson!"); }
|
||
|
||
var table2 = Hyperjson.toDOM(hj);
|
||
|
||
styleTable(table2);
|
||
|
||
var patch = DD.diff(table, table2);
|
||
DD.apply(table, patch);
|
||
};
|
||
|
||
return Render;
|
||
};
|
||
|
||
return Renderer;
|
||
});
|