Merge branch 'syduki-master'

Author: krausest

frameworks/keyed/vanillajs-lite/src/Main.js

@@ -2,57 +2,50 @@ const adjectives = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long',
 const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
 const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
 
-const pick = dict => dict[Math.round(Math.random() * 1000) % dict.length];
+const pick = (dict => dict[Math.round(Math.random() * 1000) % dict.length]);
+const label = (() =>`${pick(adjectives)} ${pick(colours)} ${pick(nouns)}`);
+
+const {cloneNode, insertBefore} = Node.prototype;
 
 let ID = 1, rows = [], selection;
 const ROW = Symbol(), ACTION = Symbol();
+const [[table], [tbody], [trow], buttons] = 'table,tbody,#trow,button'
+    .split(',').map(s => document.querySelectorAll(s));
 
-const table = document.querySelector('table');
-let tbody = document.querySelector('tbody');
-const trow = document.querySelector('#trow');
-
-const {cloneNode, insertBefore} = Node.prototype;
-const TBody = (cloneNode.bind(tbody, false));
-const TRow = (cloneNode.bind(trow.content.firstChild, true));
-const insert = ((row, before = null) => insertBefore.call(tbody, row, before));
-
-const build = (() => {
+const build = (TRow => () => {
     const tr = TRow();
     const td1 = tr.firstChild, td2 = td1.nextSibling, td3 = td2.nextSibling;
     const a1 = td2.firstChild, a2 = td3.firstChild;
-    const label = `${pick(adjectives)} ${pick(colours)} ${pick(nouns)}`;
     td1.firstChild.nodeValue = ID++;
-    (tr.label = a1.firstChild).nodeValue = label;
+    (tr.label = a1.firstChild).nodeValue = label();
     a1[ACTION] = select, a2[ACTION] = remove;
-    return insert(a1[ROW] = a2[ROW] = tr);
-});
+    return a1[ROW] = a2[ROW] = tr;
+})(cloneNode.bind(trow.content.firstChild, true));
 
-const create = count => [...Array(count)].map(build);
+const insert = (insertBefore.bind(tbody));
 
-const select = (set => row => {
-    set('remove'), selection = row, set('add');
-})(setter => selection?.classList[setter]('danger'));
+const create = (count, old) => {
+    !old && clear();
+    const data = [];
+    for (let i = 0; i < count; i++)
+        data[i] = insert(build(), null);
+    rows = [...(old ?? []), ...data];
+};
 
-const remove = (match => row => {
-    rows = rows.filter(match, row), row.remove();
-})(function (row) { return row !== this; });
+const select = row => (selection && (selection.className = ''),
+    (selection = row).className = 'danger');
 
-const clear = patch => {
-    rows = [], selection = null;
-    const empty = !tbody.firstChild;
-    if (!empty || patch)
-        !empty && patch ? (tbody.textContent = '', patch()) :
-            (tbody.remove(), tbody = TBody(), patch?.(),
-            insertBefore.call(table, tbody, null));
-};
+const remove = row =>
+    (row.remove(), (rows = new Set(rows)).delete(row), rows = [...rows]);
+
+const clear = () => (rows.length && (tbody.textContent = ''),
+    rows = [], selection = null);
 
-document.querySelectorAll('button').forEach(function (button) {
-    button.addEventListener('click', this[button.id]);
-}, {
-    run () { clear(() => rows = create(1000)); },
-    runlots () { clear(() => rows = create(10000)); },
-    add () { rows = [...rows, ...create(1000)]; },
-    clear () { clear(); },
+buttons.forEach(function (b) { b.onclick = this[b.id]; }, {
+    run () { create(1000); },
+    runlots () { create(10000); },
+    add () { create(1000, rows); },
+    clear,
     update () {
         for (let i = 0; i < rows.length; i += 10)
             rows[i].label.nodeValue += ' !!!';
@@ -64,7 +57,7 @@ document.querySelectorAll('button').forEach(function (button) {
     }
 });
 
-table.addEventListener('click', e => {
+table.onclick = e => {
     let {target: t} = e;
     e.stopPropagation(), (t[ACTION] ?? (t = t.parentNode)[ACTION])?.(t[ROW]);
-});
+};