Skip to content

Commit 8ef94eb

Browse files
author
Henrik jJaven
committed
more timers
1 parent 2dc3d96 commit 8ef94eb

File tree

4 files changed

+213
-184
lines changed

4 files changed

+213
-184
lines changed

‎frameworks/keyed/doohtml/js/Main.class copy.js

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
'use strict';
2+
3+
const _random = ((max) => {
4+
return Math.round(Math.random()*1000)%max;
5+
})
6+
7+
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"];
8+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
9+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
10+
11+
const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
12+
13+
Doo.define(
14+
class Main extends Doo {
15+
constructor() {
16+
super(100)
17+
this.scrollTarget = '.table'
18+
this.defaultDataSet = 'rows'
19+
this.ID = 1
20+
this.data = {
21+
[this.defaultDataSet]: []
22+
}
23+
this.add = this.add.bind(this)
24+
this.run = this.run.bind(this)
25+
this.runLots = this.runLots.bind(this)
26+
this.update = this.update.bind(this)
27+
this.clear = this.clear.bind(this)
28+
this.swaprows = this.swapRows.bind(this)
29+
this.addEventListeners()
30+
this.selectedRow = undefined
31+
document.querySelector(".ver").innerHTML += ` ${Doo.version} (keyed)`
32+
document.title += ` ${Doo.version} (keyed)`
33+
}
34+
35+
async dooAfterRender() {
36+
this.tbody = this.shadow.querySelector('#tbody')
37+
this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
38+
e.preventDefault();
39+
if (e.target.parentElement.matches('.remove')) {
40+
this.delete(e.target.parentElement);
41+
} else if (e.target.tagName === 'A') {
42+
this.select(e.target);
43+
}
44+
});
45+
}
46+
47+
getParentRow(elem) {
48+
while (elem) {
49+
if (elem.tagName === "TR") {return elem}
50+
elem = elem.parentNode;
51+
}
52+
return undefined;
53+
}
54+
55+
buildData(count = 1000) {
56+
const data = [];
57+
for (let i = 0; i < count; i++) {
58+
data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
59+
}
60+
return data
61+
}
62+
63+
delete(elem) {
64+
let row = this.getParentRow(elem)
65+
if (row) {
66+
this.tbody.removeChild(row)
67+
this.data.rows[row.getAttribute('key')] = undefined
68+
}
69+
}
70+
71+
run() {
72+
this.clear()
73+
this.data.rows = this.buildData()
74+
this.tbody.textContent = ''
75+
this.renderTable()
76+
}
77+
78+
add() {
79+
let startRow = this.data.rows.length
80+
this.data.rows = this.data.rows.concat(this.buildData())
81+
this.appendData(this.tbody, startRow)
82+
}
83+
84+
runLots() {
85+
this.data.rows = this.buildData(10000)
86+
this.tbody.textContent = ''
87+
this.renderTable()
88+
}
89+
90+
update() {
91+
let tr = this.tbody.querySelectorAll('tr')
92+
for (let i=0, len = this.data.rows.length;i<len;i+=10) {
93+
this.tbody.childNodes[i].childNodes[1].childNodes[0].innerText = this.data.rows[i].label += ' !!!'
94+
}
95+
}
96+
97+
select(elem) {
98+
if (this.selectedRow) {
99+
this.selectedRow.classList.remove('danger')
100+
this.selectedRow = undefined
101+
// return should toggle IMO
102+
}
103+
let row = this.getParentRow(elem)
104+
if (row) {
105+
row.classList.toggle('danger')
106+
this.selectedRow = row
107+
}
108+
}
109+
110+
clear() {
111+
this.data.rows = []
112+
this.tbody.textContent = ''
113+
}
114+
115+
swapRows() {
116+
if (this.data.rows.length>10) {
117+
let node1 = this.tbody.childNodes[1]
118+
let node2 = this.tbody.childNodes[998]
119+
120+
let row1 = this.data.rows[1]
121+
this.data.rows[1] = this.data.rows[998]
122+
this.data.rows[998] = row1
123+
124+
this.tbody.insertBefore(node2, node1)
125+
this.tbody.insertBefore(node1, this.tbody.childNodes[999])
126+
127+
}
128+
}
129+
130+
addEventListeners() {
131+
document.getElementById("main").addEventListener('click', e => {
132+
e.preventDefault()
133+
if (e.target.matches('#runlots')) {
134+
this.runLots(e)
135+
} else if (e.target.matches('#run')) {
136+
this.run(e)
137+
} else if (e.target.matches('#add')) {
138+
this.add(e)
139+
} else if (e.target.matches('#update')) {
140+
this.update()
141+
} else if (e.target.matches('#clear')) {
142+
this.clear()
143+
} else if (e.target.matches('#swaprows')) {
144+
this.swapRows()
145+
}
146+
})
147+
}
148+
}
149+
)

‎frameworks/keyed/doohtml/js/Main.class.js

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
'use strict';
1+
'use strict'
22

3-
const _random = ((max) => {
4-
return Math.round(Math.random()*1000)%max;
5-
})
3+
const _random = max => Math.random() * max | 0
64

7-
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"];
8-
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
9-
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
5+
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"]
6+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"]
7+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]
108

119
const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
1210

@@ -35,21 +33,21 @@ Doo.define(
3533
async dooAfterRender() {
3634
this.tbody = this.shadow.querySelector('#tbody')
3735
this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
38-
e.preventDefault();
36+
e.preventDefault()
3937
if (e.target.parentElement.matches('.remove')) {
40-
this.delete(e.target.parentElement);
38+
this.delete(e.target.parentElement)
4139
} else if (e.target.tagName === 'A') {
42-
this.select(e.target);
40+
this.select(e.target)
4341
}
44-
});
42+
})
4543
}
4644

4745
getParentRow(elem) {
4846
while (elem) {
4947
if (elem.tagName === "TR") {return elem}
50-
elem = elem.parentNode;
48+
elem = elem.parentNode
5149
}
52-
return undefined;
50+
return undefined
5351
}
5452

5553
buildData(count = 1000) {
@@ -59,35 +57,47 @@ Doo.define(
5957
}
6058
return data
6159
}
60+
getIndex(row) {
61+
let idx = this.data.rows.findIndex((item, i) => {
62+
if (item.id === row.key) {
63+
return i
64+
}
65+
})
66+
return idx
67+
}
6268

6369
delete(elem) {
6470
let row = this.getParentRow(elem)
6571
if (row) {
6672
this.tbody.removeChild(row)
67-
this.data.rows[row.getAttribute('key')] = undefined
73+
let idx = this.getIndex(row)
74+
if (idx !== undefined) {
75+
this.data.rows.splice(idx,1)
76+
}
77+
6878
}
6979
}
7080

7181
run() {
82+
this.clear()
7283
this.data.rows = this.buildData()
73-
this.tbody.textContent = ''
7484
this.renderTable()
85+
7586
}
7687

7788
add() {
78-
let startRow = this.data.rows.length
7989
this.data.rows = this.data.rows.concat(this.buildData())
80-
this.appendData(this.tbody, startRow)
90+
this.renderTable(this.data.rows)
8191
}
8292

8393
runLots() {
94+
95+
this.clear()
8496
this.data.rows = this.buildData(10000)
85-
this.tbody.textContent = ''
8697
this.renderTable()
8798
}
8899

89100
update() {
90-
let tr = this.tbody.querySelectorAll('tr')
91101
for (let i=0, len = this.data.rows.length;i<len;i+=10) {
92102
this.tbody.childNodes[i].childNodes[1].childNodes[0].innerText = this.data.rows[i].label += ' !!!'
93103
}
@@ -97,12 +107,16 @@ Doo.define(
97107
if (this.selectedRow) {
98108
this.selectedRow.classList.remove('danger')
99109
this.selectedRow = undefined
100-
// return should toggle IMO
101110
}
102-
let row = this.getParentRow(elem)
111+
this.toggleSelect(this.getParentRow(elem))
112+
}
113+
114+
toggleSelect(row) {
103115
if (row) {
104116
row.classList.toggle('danger')
105-
this.selectedRow = row
117+
if (row.classList.contains('danger')) {
118+
this.selectedRow = row
119+
}
106120
}
107121
}
108122

@@ -128,21 +142,21 @@ Doo.define(
128142

129143
addEventListeners() {
130144
document.getElementById("main").addEventListener('click', e => {
131-
e.preventDefault();
145+
e.preventDefault()
132146
if (e.target.matches('#runlots')) {
133-
this.runLots(e);
147+
this.runLots()
134148
} else if (e.target.matches('#run')) {
135-
this.run(e);
149+
this.run()
136150
} else if (e.target.matches('#add')) {
137-
this.add(e);
151+
this.add()
138152
} else if (e.target.matches('#update')) {
139-
this.update();
153+
this.update()
140154
} else if (e.target.matches('#clear')) {
141-
this.clear();
155+
this.clear()
142156
} else if (e.target.matches('#swaprows')) {
143-
this.swapRows();
157+
this.swapRows()
144158
}
145159
})
146-
}
160+
}
147161
}
148162
)

0 commit comments

Comments
 (0)