Skip to content

Commit 15da226

Browse files
mksunny1mksunny1
committed
Fixed non-keyed and improved keyed.
1 parent 9035ae8 commit 15da226

File tree

4 files changed

+78
-62
lines changed

4 files changed

+78
-62
lines changed

‎frameworks/keyed/vanillajs-3/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,7 @@ <h1>Vanillajs-3-"keyed"</h1>
7373
</div>
7474
</div>
7575
<table class="table table-hover table-striped test-data">
76-
<tbody id="tbody">
77-
</tbody>
76+
<tbody id="tbody"></tbody>
7877
</table>
7978
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
8079
</div>

‎frameworks/keyed/vanillajs-3/src/Main.js

Lines changed: 67 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,73 @@
1-
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
2-
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
3-
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
4-
const [l1, l2, l3] = [adjectives.length, colours.length, nouns.length];
1+
"use strict";
52

6-
const nTemplates = (n) => Math.round(n / 100), tbody = document.getElementsByTagName('tbody')[0];
7-
let data = [], index = 1, i, lbl, selected;
8-
9-
function create(n = 1000) { if (tbody.children.length) clear(); append(n); }
10-
function append(n = 1000) {
11-
const nt = nTemplates(n); let j = 0, r1, r2, r3;
12-
const itemTemplate = document.getElementById('itemTemplate').content.cloneNode(true);
13-
while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
14-
while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));
3+
class App {
4+
index = 1; data = [];
5+
tbody = document.getElementsByTagName('tbody')[0];
6+
run(n = 1000) { if (this.data.length) this.clear(); this.add(n); };
7+
runlots() { this.run(10000) };
8+
add(n = 1000) {
9+
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
10+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
11+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
12+
const l1 = adjectives.length, l2 = colours.length,l3 = nouns.length;
1513

16-
const ids = Array.prototype.map.call(itemTemplate.querySelectorAll('td:first-child'), i => i.firstChild)
17-
const labels = Array.prototype.map.call(itemTemplate.querySelectorAll('a.lbl'), i => i.firstChild);
14+
const nt = Math.round(n / 100);
15+
const itemTemplate = document.getElementById('itemTemplate').content.cloneNode(true);
1816

19-
while ((n -= nt) >= 0) {
20-
for (i = 0; i < nt; i++, j++) {
21-
r1 = Math.round(Math.random() * 1000) % l1;
22-
r2 = Math.round(Math.random() * 1000) % l2;
23-
r3 = Math.round(Math.random() * 1000) % l3;
24-
(ids[i].nodeValue = index++) && data.push(labels[i].nodeValue = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`)
25-
}
26-
tbody.appendChild(itemTemplate.cloneNode(true));
27-
}
28-
}
29-
function update() {
30-
const labels = tbody.querySelectorAll('a.lbl'), length = labels.length;
31-
for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] = `${data[i]} !!!`
32-
}
33-
function clear() { data = []; tbody.textContent = '' }
34-
35-
function swap() {
36-
if (tbody.children.length < 999) return;
37-
const first = tbody.firstElementChild, c998 = tbody.children[998];
38-
[data[1], data[998]] = [data[998], data[1]];
39-
tbody.insertBefore(tbody.insertBefore(first.nextElementSibling, c998) && c998,
40-
first.nextElementSibling);
41-
}
42-
tbody.onclick = (e) => {
43-
e.preventDefault; e.stopPropagation;
44-
if (e.target.matches('a.lbl')) {
45-
const element = e.target.parentNode.parentNode;
46-
if (element === selected) selected.className = selected.className ? "" : "danger";
47-
else {
48-
if (selected) selected.className = "";
49-
element.className = "danger"; selected = element;
17+
while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
18+
while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));
19+
20+
const ids = Array.prototype.map.call(itemTemplate.querySelectorAll('td:first-child'), i => i.firstChild)
21+
const labels = Array.prototype.map.call(itemTemplate.querySelectorAll('a.lbl'), i => i.firstChild);
22+
23+
let i, j = 0, r1, r2, r3;;
24+
while ((n -= nt) >= 0) {
25+
for (i = 0; i < nt; i++, j++) {
26+
r1 = Math.round(Math.random() * 1000) % l1;
27+
r2 = Math.round(Math.random() * 1000) % l2;
28+
r3 = Math.round(Math.random() * 1000) % l3;
29+
ids[i].nodeValue = this.index++;
30+
this.data.push(labels[i].nodeValue = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`);
31+
}
32+
this.tbody.appendChild(itemTemplate.cloneNode(true));
33+
}
34+
};
35+
update() {
36+
const children = this.tbody.children, data = this.data;
37+
for (let i = 0; i < this.data.length; i+=10) children[i].querySelector('a.lbl').firstChild.nodeValue = this.data[i] = `${this.data[i]} !!!`
38+
};
39+
clear() { this.tbody.textContent = ''; this.data = [] };
40+
41+
swaprows() {
42+
if (this.data.length < 999) return; // nb: swap does not affect labels
43+
const first = this.tbody.firstChild, sec = first.nextSibling,
44+
third = sec.nextSibling, c998 = this.tbody.children[998];
45+
this.tbody.insertBefore(this.tbody.insertBefore(sec, c998) && c998, third);
46+
const temp = this.data[1]; this.data[1] = this.data[998]; this.data[998] = temp;
47+
};
48+
onclick() {
49+
let selected;
50+
return (e) => {
51+
e.stopPropagation;
52+
if (e.target.matches('a.lbl')) {
53+
e.preventDefault;
54+
const element = e.target.parentNode.parentNode;
55+
if (element === selected) selected.className = selected.className ? "" : "danger";
56+
else {
57+
if (selected) selected.className = "";
58+
element.className = "danger"; selected = element;
59+
}
60+
} else if (e.target.matches('span.remove')) {
61+
const element = e.target.parentNode.parentNode.parentNode;
62+
const index = Array.prototype.indexOf.call(this.tbody.children, element);
63+
element.remove();
64+
this.data.splice(index, 1);
65+
}
5066
}
51-
} else if (e.target.matches('span.remove')) {
52-
const element = e.target.parentNode.parentNode.parentNode;
53-
data.splice(Array.prototype.indexOf.call(tbody.children, element), 1);
54-
tbody.removeChild(element);
5567
}
5668
}
57-
for (let [key, fn] of Object.entries({
58-
run: create, runlots: () => create(10000),
59-
add: append, update, clear, swaprows: swap
60-
})) document.getElementById(key).onclick = (e) => { e.stopPropagation(), fn() }
69+
const app = new App();
70+
tbody.onclick = app.onclick();
71+
for (let key of ['run', 'runlots', 'add', 'update', 'clear', 'swaprows']) {
72+
document.getElementById(key).onclick = (e) => { e.stopPropagation(); app[key](); }
73+
}

‎frameworks/non-keyed/vanillajs-3/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,7 @@ <h1>Vanillajs-3-"non-keyed"</h1>
7373
</div>
7474
</div>
7575
<table class="table table-hover table-striped test-data">
76-
<tbody id="tbody">
77-
</tbody>
76+
<tbody id="tbody"></tbody>
7877
</table>
7978
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
8079
</div>

‎frameworks/non-keyed/vanillajs-3/src/Main.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use strict";
2+
13
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
24
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
35
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
@@ -21,10 +23,13 @@ function create(n = 1000) {
2123
function set(n) {
2224
const indices = tbody.querySelectorAll('td:first-child');
2325
const labels = tbody.querySelectorAll('a.lbl');
24-
const [r1, r2, r3] = _random(n);
26+
let r1, r2, r3;
2527
for (i = 0; i < n; i++) {
28+
r1 = Math.round(Math.random() * 1000) % l1;
29+
r2 = Math.round(Math.random() * 1000) % l2;
30+
r3 = Math.round(Math.random() * 1000) % l3;
2631
indices[i].firstChild.nodeValue = index++;
27-
labels[i].firstChild.nodeValue = data[i] = `${adjectives[r1[i]]} ${colours[r2[i]]} ${nouns[r3[i]]}`;
32+
labels[i].firstChild.nodeValue = data[i] = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`;
2833
}
2934
}
3035
function append(n = 1000) {
@@ -42,7 +47,7 @@ function append(n = 1000) {
4247
r2 = Math.round(Math.random() * 1000) % l2;
4348
r3 = Math.round(Math.random() * 1000) % l3;
4449
ids[i].nodeValue = index++;
45-
data.push(labels[i].nodeValue = `${adjectives[r1[j]]} ${colours[r2[j]]} ${nouns[r3[j]]}`)
50+
data.push(labels[i].nodeValue = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`)
4651
}
4752
tbody.appendChild(itemTemplate.cloneNode(true));
4853
}
@@ -73,7 +78,7 @@ tbody.onclick = (e) => {
7378
} else if (e.target.matches('span.remove')) { let temp;
7479
const element = e.target.parentNode.parentNode.parentNode;
7580
data.splice(Array.prototype.indexOf.call(tbody.children, element), 1);
76-
tbody.removeChild(element);
81+
element.remove();
7782
}
7883
}
7984
for (let [key, fn] of Object.entries({

0 commit comments

Comments
 (0)