Skip to content

Commit 8575713

Browse files
author
Henrik jJaven
committed
v0.60.3-with-timers
1 parent f08358b commit 8575713

File tree

8 files changed

+719
-8
lines changed

8 files changed

+719
-8
lines changed

‎frameworks/keyed/doohtml/index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
<link href="/css/currentStyle.css" rel="stylesheet"/>
88
<link href="./js/doo.html.min.js" rel="preload" as="script"/>
99
<script src="./js/doo.html.min.js"></script>
10-
<script type="module" src="./js/Main.class.js"></script>
10+
<!-- <script type="module" src="http://localhost:8001/src/js/doo.html.js"></script> -->
11+
<script type="module" src="./js/Main.class.timer.js" defer ></script>
12+
1113
</head>
1214

1315
<body>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,7 @@ Doo.define(
8989
update() {
9090
let tr = this.tbody.querySelectorAll('tr')
9191
for (let i=0, len = this.data.rows.length;i<len;i+=10) {
92-
this.data.rows[i].label += ' !!!';
93-
tr[i].childNodes[1].childNodes[0].textContent = this.data.rows[i].label
92+
this.tbody.childNodes[i].childNodes[1].childNodes[0].innerText = this.data.rows[i].label += ' !!!'
9493
}
9594
}
9695

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

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
'use strict'
2+
3+
const _random = max => Math.random() * max | 0
4+
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"]
8+
9+
const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
10+
11+
import Timer from './doo.timer.js'
12+
13+
const rowTemplate = document.createElement("tr");
14+
rowTemplate.innerHTML = "<td class='col-md-1'></td><td class='col-md-4'><a class='lbl'></a></td><td class='col-md-1'><a class='remove'><span class='remove glyphicon glyphicon-remove' aria-hidden='true'></span></a></td><td class='col-md-6'></td>";
15+
16+
17+
Doo.define(
18+
class Main extends Doo {
19+
constructor() {
20+
super(100)
21+
this.scrollTarget = '.table'
22+
this.defaultDataSet = 'rows'
23+
this.ID = 1
24+
this.data = {
25+
[this.defaultDataSet]: []
26+
}
27+
this.add = this.add.bind(this)
28+
this.run = this.run.bind(this)
29+
this.runLots = this.runLots.bind(this)
30+
this.update = this.update.bind(this)
31+
this.clear = this.clear.bind(this)
32+
this.swaprows = this.swapRows.bind(this)
33+
this.addEventListeners()
34+
this.selectedRow = undefined
35+
document.querySelector(".ver").innerHTML += ` ${Doo.version} (keyed)`
36+
document.title += ` ${Doo.version} (keyed)`
37+
38+
}
39+
40+
41+
42+
async dooAfterRender() {
43+
this.tbody = this.shadow.querySelector('#tbody')
44+
this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
45+
e.preventDefault()
46+
if (e.target.parentElement.matches('.remove')) {
47+
this.delete(e.target.parentElement)
48+
} else if (e.target.tagName === 'A') {
49+
this.select(e.target)
50+
}
51+
})
52+
}
53+
54+
getParentRow(elem) {
55+
while (elem) {
56+
if (elem.tagName === "TR") {return elem}
57+
elem = elem.parentNode
58+
}
59+
return undefined
60+
}
61+
62+
buildData(count = 1000) {
63+
Timer.start('build')
64+
let label, labelStr
65+
66+
67+
const data = []
68+
for (let i = 0; i < count; i++)
69+
// data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
70+
71+
{
72+
label = [adjectives[_random(lenA)],colours[_random(lenB)],nouns[_random(lenC)]]
73+
labelStr = label.join(' ')
74+
//id = this.ID++
75+
data.push({id:this.ID++, label:labelStr})
76+
}
77+
/*
78+
const data = new Map()
79+
Object.defineProperty(data, 'length', {
80+
get() { return data.size },
81+
})
82+
let id = this.ID
83+
for (let i = 0; i < count; i++) {
84+
label = [adjectives[_random(lenA)],colours[_random(lenB)],nouns[_random(lenC)]]
85+
labelStr = label.join(' ')
86+
87+
data.set(id + i,{id: id+i,label: labelStr})
88+
//data.set(id + i,{id: id+i,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
89+
90+
}
91+
this.ID = id + count
92+
*/
93+
Timer.stop('build')
94+
95+
96+
return data
97+
}
98+
99+
getIndex() {
100+
return this.data.rows.some((item, i) => {
101+
if (item.id === item.key) {
102+
return i
103+
}
104+
})
105+
}
106+
107+
delete(elem) {
108+
let row = this.getParentRow(elem)
109+
if (row) {
110+
this.tbody.removeChild(row)
111+
let idx = this.getIndex(row)
112+
this.data.rows.splice(idx,1)
113+
}
114+
}
115+
116+
run(e) {
117+
118+
Timer.start('tot')
119+
this.clear(e)
120+
this.data.rows = this.buildData()
121+
this.renderTable()
122+
// e.target.blur()
123+
Timer.start('add')
124+
Timer.stop('add')
125+
126+
Timer.stop('tot')
127+
}
128+
129+
add(e) {
130+
Timer.start('tot')
131+
this.data.rows = this.data.rows.concat(this.buildData())
132+
this.renderTable(this.data.rows)
133+
Timer.stop('tot')
134+
}
135+
136+
/*
137+
async renderTable(dataSet=this.data[this.defaultDataSet]) {
138+
let tableRef = this.place[0].parentElement
139+
140+
let rowList = []
141+
let rowList2 = []
142+
let len = dataSet.length
143+
for (let i=0;i<len;i++) {
144+
let newRow = tableRef.insertRow(-1)
145+
rowList.push(newRow)
146+
rowList2.push(this.renderNode(this.place[0], this.data.rows, i , 1 ))
147+
148+
}
149+
for (let i=0;i<len;i++) {
150+
rowList[i].innerHTML = rowList2[i]
151+
152+
}
153+
rowList = undefined
154+
rowList2 = undefined
155+
return
156+
}
157+
*/
158+
159+
runLots(e) {
160+
Timer.start('tot')
161+
this.clear(e)
162+
this.data.rows = this.buildData(10000)
163+
this.renderTable()
164+
//e.target.blur()
165+
Timer.start('add')
166+
Timer.stop('add')
167+
168+
Timer.stop('tot')
169+
}
170+
171+
update(e) {
172+
for (let i=0, len = this.data.rows.length;i<len;i+=10) {
173+
this.tbody.childNodes[i].childNodes[1].childNodes[0].innerText = this.data.rows[i].label += ' !!!'
174+
}
175+
}
176+
177+
select(elem) {
178+
if (this.selectedRow) {
179+
this.selectedRow.classList.remove('danger')
180+
this.selectedRow = undefined
181+
}
182+
this.toggleSelect(this.getParentRow(elem))
183+
// console.log('coolio', this.getParentRow(elem).rowIndex, this?.selectedRow?.rowIndex, this.getParentRow(elem).key)
184+
185+
// if (row) {
186+
// row.classList.toggle('danger')
187+
// this.selectedRow = row
188+
// }
189+
}
190+
/*
191+
select(elem) {
192+
if (this.selectedRow) {
193+
let selectedKey = this.selectedRow.key
194+
let selectedRow = this.data.some((item => item.id === selectedKey))
195+
selectedRow.selected = ''
196+
//this.selectedRow.classList.remove('danger')
197+
this.update(this.selectedRow, selectedRow )
198+
this.selectedRow = undefined
199+
}
200+
201+
this.update(this.getParentRow(elem), selectedRow )
202+
203+
// this.toggleSelect(this.getParentRow(elem))
204+
// if (row) {
205+
// row.classList.toggle('danger')
206+
// this.selectedRow = row
207+
// }
208+
}
209+
*/
210+
211+
212+
213+
toggleSelect(row) {
214+
if (row) {
215+
row.classList.toggle('danger')
216+
if (row.classList.contains('danger')) {
217+
this.selectedRow = row
218+
}
219+
}
220+
}
221+
222+
clear(e) {
223+
Timer.start('clear')
224+
this.data.rows = []
225+
this.tbody.textContent = ''
226+
Timer.stop('clear')
227+
228+
}
229+
/*
230+
swapRows(e) {
231+
Timer.start('tot')
232+
if (this.data.rows.length>10) {
233+
let node1 = this.tbody.childNodes[1]
234+
let node2 = this.tbody.childNodes[998]
235+
236+
let row1 = this.data.rows[1]
237+
let isSelected = false
238+
if (this?.selectedRow?.rowIndex === 1 ) {
239+
// this.toggleSelect(this.tbody.childNodes[998])
240+
this.selectedRow = this.tbody.childNodes[998]
241+
this.toggleSelect(this.tbody.childNodes[1])
242+
243+
isSelected === true
244+
}
245+
this.data.rows[1] = this.data.rows[998]
246+
this.data.rows[998] = row1
247+
this.update(this.tbody.childNodes[1], this.data.rows[1])
248+
this.update(this.tbody.childNodes[998], this.data.rows[998])
249+
250+
// if (this.selectedRow) {
251+
252+
if (isSelected) {
253+
// this.toggleSelect(this.tbody.childNodes[1])
254+
this.toggleSelect(this.tbody.childNodes[998])
255+
256+
// this.selectedRow = this.tbody.childNodes[998]
257+
// } else if (this.selectedRow.rowIndex === 998) {
258+
// this.toggleSelect(this.tbody.childNodes[998])
259+
// this.toggleSelect(this.tbody.childNodes[1])
260+
// this.selectedRow = this.tbody.childNodes[1]
261+
// }
262+
}
263+
264+
}
265+
Timer.stop('tot')
266+
}
267+
*/
268+
swapRows(e) {
269+
Timer.start('SWAP')
270+
if (this.data.rows.length>998) {
271+
let node1 = this.tbody.childNodes[1]
272+
let node2 = this.tbody.childNodes[998]
273+
274+
let row1 = this.data.rows[1];
275+
this.data.rows[1] = this.data.rows[998];
276+
this.data.rows[998] = row1
277+
278+
this.tbody.insertBefore(node2, node1)
279+
this.tbody.insertBefore(node1, this.tbody.childNodes[999])
280+
281+
}
282+
Timer.stop('SWAP')
283+
284+
}
285+
286+
287+
addEventListeners() {
288+
document.getElementById("main").addEventListener('click', e => {
289+
e.preventDefault()
290+
if (e.target.matches('#runlots')) {
291+
this.runLots(e)
292+
} else if (e.target.matches('#run')) {
293+
this.run(e)
294+
} else if (e.target.matches('#add')) {
295+
this.add(e)
296+
} else if (e.target.matches('#update')) {
297+
this.update(e)
298+
} else if (e.target.matches('#clear')) {
299+
this.clear(e)
300+
} else if (e.target.matches('#swaprows')) {
301+
this.swapRows(e)
302+
}
303+
})
304+
}
305+
}
306+
)

0 commit comments

Comments
 (0)