new prototype poll
This commit is contained in:
ansuz
325
www/poll/test/render.js
Normal file
325
www/poll/test/render.js
Normal file
@@ -0,0 +1,325 @@
|
||||
define([
|
||||
'/common/cryptpad-common.js',
|
||||
'/bower_components/hyperjson/hyperjson.js',
|
||||
'/bower_components/diff-dom/diffDOM.js',
|
||||
], function (Cryptpad, Hyperjson) {
|
||||
var DiffDOM = window.diffDOM;
|
||||
|
||||
var Example = {
|
||||
info: {
|
||||
title: 'my title',
|
||||
description: 'my description',
|
||||
},
|
||||
table: {
|
||||
/* 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 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;
|
||||
};
|
||||
|
||||
var getColumnValue = Render.getColumnValue = function (obj, colId) {
|
||||
return Cryptpad.find(obj, ['table', 'cols'].concat([colId]));
|
||||
};
|
||||
|
||||
var getRowValue = Render.getRowValue = function (obj, rowId) {
|
||||
return Cryptpad.find(obj, ['table', 'rows'].concat([rowId]));
|
||||
};
|
||||
|
||||
var getCellValue = Render.getCellValue = function (obj, cellId) {
|
||||
return Cryptpad.find(obj, ['table', 'cells'].concat([cellId]));
|
||||
};
|
||||
|
||||
var setRowValue = Render.setRowValue = function (obj, rowId, value) {
|
||||
var parent = Cryptpad.find(obj, ['table', 'rows']);
|
||||
if (typeof(parent) === 'object') { return (parent[rowId] = value); }
|
||||
return null;
|
||||
};
|
||||
|
||||
var setColumnValue = Render.setColumnValue = function (obj, colId, value) {
|
||||
var parent = Cryptpad.find(obj, ['table', 'cols']);
|
||||
if (typeof(parent) === 'object') { return (parent[colId] = value); }
|
||||
return null;
|
||||
};
|
||||
|
||||
var setCellValue = Render.setCellValue = function (obj, cellId, value) {
|
||||
var parent = Cryptpad.find(obj, ['table', 'cells']);
|
||||
if (typeof(parent) === 'object') { return (parent[cellId] = value); }
|
||||
return null;
|
||||
};
|
||||
|
||||
var createColumn = Render.createColumn = function (obj, cb, id, value) {
|
||||
var order = Cryptpad.find(obj, ['table', '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); }
|
||||
};
|
||||
|
||||
var removeColumn = Render.removeColumn = function (obj, id, cb) {
|
||||
var order = Cryptpad.find(obj, ['table', 'colsOrder']);
|
||||
var parent = Cryptpad.find(obj, ['table', '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"));
|
||||
}
|
||||
|
||||
order.splice(idx, 1);
|
||||
if (parent[id]) { delete parent[id]; }
|
||||
if (typeof(cb) === 'function') {
|
||||
cb();
|
||||
}
|
||||
};
|
||||
|
||||
var createRow = Render.createRow = function (obj, cb, id, value) {
|
||||
var order = Cryptpad.find(obj, ['table', '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); }
|
||||
};
|
||||
|
||||
var removeRow = Render.removeRow = function (obj, id, cb) {
|
||||
var order = Cryptpad.find(obj, ['table', 'rowsOrder']);
|
||||
var parent = Cryptpad.find(obj, ['table', '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(); }
|
||||
};
|
||||
|
||||
var setValue = 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!");
|
||||
}
|
||||
};
|
||||
|
||||
var getValue = 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 Cryptpad.find(obj, ['table', 'rowsOrder']);
|
||||
};
|
||||
|
||||
var getColIds = Render.getColIds = function (obj) {
|
||||
return Cryptpad.find(obj, ['table', 'colsOrder']);
|
||||
};
|
||||
|
||||
var getCells = Render.getCells = function (obj) {
|
||||
return Cryptpad.find(obj, ['table', '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) {
|
||||
if (typeof(obj) !== 'object') {
|
||||
throw new Error('expected realtime-proxy object');
|
||||
}
|
||||
|
||||
var cells = getCells(obj);
|
||||
rows = rows || getRowIds(obj);
|
||||
cols = cols || getColIds(obj);
|
||||
|
||||
return [null].concat(rows).map(function (row, i) {
|
||||
if (i === 0) {
|
||||
return [null].concat(cols.map(function (col) {
|
||||
return {
|
||||
'data-rt-id': col,
|
||||
type: 'text',
|
||||
value: getColumnValue(obj, col) || "",
|
||||
};
|
||||
}));
|
||||
}
|
||||
|
||||
return [{
|
||||
'data-rt-id': row,
|
||||
value: getRowValue(obj, row),
|
||||
type: 'text',
|
||||
}].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'
|
||||
};
|
||||
|
||||
if (val) { result.checked = true; }
|
||||
return result;
|
||||
}));
|
||||
});
|
||||
};
|
||||
|
||||
var makeRemoveElement = Render.makeRemoveElement = function (id) {
|
||||
return ['SPAN', { 'data-rt-id': id, }, ['x']];
|
||||
};
|
||||
|
||||
var makeHeadingCell = Render.makeHeadingCell = function (cell) {
|
||||
if (!cell) { return ['TD', {}, []]; }
|
||||
if (cell.type === 'text') {
|
||||
return ['TD', {}, [
|
||||
['INPUT', cell, []],
|
||||
makeRemoveElement(cell['data-rt-id'])
|
||||
]];
|
||||
}
|
||||
return ['TD', cell, []];
|
||||
};
|
||||
|
||||
var makeBodyCell = Render.makeBodyCell = function (cell) {
|
||||
if (cell.type === 'text') {
|
||||
return ['TD', {}, [
|
||||
['INPUT', cell, []],
|
||||
makeRemoveElement(cell['data-rt-id'])
|
||||
]];
|
||||
}
|
||||
|
||||
if (cell.type === 'checkbox') {
|
||||
return ['TD', {}, [ ['INPUT', cell, []] ]];
|
||||
}
|
||||
return ['TD', cell, []];
|
||||
};
|
||||
|
||||
var makeBodyRow = Render.makeBodyRow = function (row) {
|
||||
return ['TR', {}, row.map(makeBodyCell)];
|
||||
};
|
||||
|
||||
var toHyperjson = Render.toHyperjson = function (matrix) {
|
||||
if (!matrix || !matrix.length) { return; }
|
||||
var head = ['THEAD', {}, [ ['TR', {}, matrix[0].map(makeHeadingCell)] ]];
|
||||
var body = ['TBODY', {}, matrix.slice(1).map(makeBodyRow)];
|
||||
return ['TABLE', {}, [head, body]];
|
||||
};
|
||||
|
||||
var asHTML = Render.asHTML = function (obj) {
|
||||
return Hyperjson.toDOM(toHyperjson(cellMatrix(obj)));
|
||||
};
|
||||
|
||||
var diffIsInput = Render.diffIsInput = function (info) {
|
||||
var nodeName = Cryptpad.find(info, ['node', 'nodeName']);
|
||||
if (nodeName !== 'INPUT') { return; }
|
||||
return true;
|
||||
};
|
||||
|
||||
var getInputType = Render.getInputType = function (info) {
|
||||
return Cryptpad.find(info, ['node', 'type']);
|
||||
};
|
||||
|
||||
var diffOptions = {
|
||||
preDiffApply: function (info) {
|
||||
if (!diffIsInput(info)) { return; }
|
||||
switch (getInputType(info)) {
|
||||
case 'checkbox':
|
||||
//console.log('checkbox');
|
||||
//console.log("[preDiffApply]", info);
|
||||
/*
|
||||
['modifyAttribute',
|
||||
'addAttribute',
|
||||
'removeAttribute'
|
||||
].some(function (x) {
|
||||
//if (x === info.diff.action) { }
|
||||
});*/
|
||||
break;
|
||||
case 'text':
|
||||
break;
|
||||
default: break;
|
||||
}
|
||||
},
|
||||
postDiffApply: function (info) {
|
||||
/*
|
||||
if (!diffIsInput(info)) { return; }
|
||||
switch (getInputType(info)) {
|
||||
case 'checkbox':
|
||||
console.log("[postDiffApply]", info);
|
||||
break;
|
||||
case 'text': break;
|
||||
default: break;
|
||||
}*/
|
||||
}
|
||||
};
|
||||
|
||||
var updateTable = Render.updateTable = function (table, obj, conf) {
|
||||
var DD = new DiffDOM(diffOptions);
|
||||
|
||||
var matrix = cellMatrix(obj);
|
||||
|
||||
var hj = toHyperjson(matrix);
|
||||
|
||||
if (!hj) { throw new Error("Expected Hyperjson!"); }
|
||||
|
||||
var table2 = Hyperjson.toDOM(hj);
|
||||
var patch = DD.diff(table, table2);
|
||||
DD.apply(table, patch);
|
||||
};
|
||||
|
||||
return Render;
|
||||
});
|
||||
Reference in New Issue
Block a user