Merge branch 'syduki-master'

Author: krausest

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

@@ -2,62 +2,56 @@ 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 label = (() =>`${pick(adjectives)} ${pick(colours)} ${pick(nouns)}`);
+const pick = dict => dict[Math.round(Math.random() * 1000) % dict.length];
+const label = () =>`${pick(adjectives)} ${pick(colours)} ${pick(nouns)}`;
+const labelOf = r => r.firstChild.nextSibling.firstChild.firstChild;
 
-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 {children: rows} = tbody;
 
-const build = (TRow => () => {
-    const tr = TRow();
-    const td1 = tr.firstChild, td2 = td1.nextSibling, td3 = td2.nextSibling;
-    const a1 = td2.firstChild, a2 = td3.firstChild;
-    td1.firstChild.nodeValue = ID++;
-    (tr.label = a1.firstChild).nodeValue = label();
-    a1[ACTION] = select, a2[ACTION] = remove;
-    return a1[ROW] = a2[ROW] = tr;
-})(cloneNode.bind(trow.content.firstChild, true));
-
-const insert = (insertBefore.bind(tbody));
-
-const create = (count, old) => {
-    !old && clear();
-    const data = [];
-    for (let i = 0; i < count; i++)
-        data[i] = insert(build(), null);
-    rows = [...(old ?? []), ...data];
+const {cloneNode, insertBefore} = Node.prototype;
+const clone = n => cloneNode.call(n, true);
+const insert = insertBefore.bind(tbody);
+
+let ID = 1, SEL, TMPL, SIZE;
+
+const create = (count, add) => {
+    if (SIZE !== count)
+        TMPL = clone(trow.content), [...Array((SIZE = count) / 50 - 1)]
+            .forEach(() => TMPL.appendChild(clone(TMPL.firstChild)));
+    !add && (clear(), tbody.remove());
+    while (count) {
+        for (let r of TMPL.children)
+            (r.$id ??= r.firstChild.firstChild).nodeValue = ID++,
+            (r.$label ??= labelOf(r)).nodeValue = label(), count--;
+        insert(clone(TMPL), null);
+    }
+    !add && table.appendChild(tbody);
 };
 
-const select = row => (selection && (selection.className = ''),
-    (selection = row).className = 'danger');
-
-const remove = row =>
-    (row.remove(), (rows = new Set(rows)).delete(row), rows = [...rows]);
-
-const clear = () => (rows.length && (tbody.textContent = ''),
-    rows = [], selection = null);
+const clear = () => (tbody.textContent = '', SEL = null);
 
 buttons.forEach(function (b) { b.onclick = this[b.id]; }, {
     run () { create(1000); },
     runlots () { create(10000); },
-    add () { create(1000, rows); },
+    add () { create(1000, true); },
     clear,
     update () {
         for (let i = 0; i < rows.length; i += 10)
-            rows[i].label.nodeValue += ' !!!';
+            labelOf(rows[i]).nodeValue += ' !!!';
     },
     swaprows () {
-        if (rows.length > 998)
-            insert(rows[1], rows[998]), insert(rows[998], rows[2]),
-            [rows[1], rows[998]] = [rows[998], rows[1]];
+        const [, r1, r2] = rows, r998 = rows[998];
+        r998 && (insert(r1, r998), insert(r998, r2));
     }
 });
 
-table.onclick = e => {
-    let {target: t} = e;
-    e.stopPropagation(), (t[ACTION] ?? (t = t.parentNode)[ACTION])?.(t[ROW]);
+tbody.onclick = e => {
+    const t = e.target, r = t.closest('tr');
+    const td2 = r?.firstChild.nextSibling, td3 = td2?.nextSibling;
+    e.stopPropagation();
+    t === td2?.firstChild ?
+        (SEL && (SEL.className = ''), (SEL = r).className = 'danger') :
+    (t === td3?.firstChild || t === td3?.firstChild.firstChild) && r.remove();
 };