Skip to content

Commit afc848b

Browse files
author
Henrik jJaven
committed
improved appendData
1 parent 2053199 commit afc848b

File tree

1 file changed

+27
-185
lines changed

1 file changed

+27
-185
lines changed

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

Lines changed: 27 additions & 185 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
4141
Doo.define(
4242
class Main extends Doo {
4343
constructor() {
44-
super()
44+
super(100)
4545
this.scrollTarget = '.table'
4646
this.defaultDataSet = 'rows'
4747
this.ID = 1
@@ -56,6 +56,7 @@ Doo.define(
5656
this.swaprows = this.swapRows.bind(this)
5757
this.addEventListeners()
5858
this.selectedRow = undefined
59+
this.tableRows = undefined
5960
document.querySelector(".ver").innerHTML += ` ${Doo.version} (keyed)`
6061
document.title += ` ${Doo.version} (keyed)`
6162
}
@@ -98,22 +99,22 @@ Doo.define(
9899

99100
run() {
100101
this.data.rows = this.buildData()
101-
this.tbody.textContent = ''
102+
// this.tbody.textContent = ''
102103
this.renderTable()
103104
}
104105

105106
add() {
106-
let len = this.data.rows.length
107+
let startRow = this.data.rows.length
107108
this.data.rows = this.data.rows.concat(this.buildData())
108-
this.appendData(this.data.rows, len, 1000)
109+
this.appendData(this.tbody, startRow)
109110
}
110111

111112
run(e) {
112113
start('buildData')
113114
this.data.rows = this.buildData()
114115
stop('buildData')
115116
start('run')
116-
this.tbody.textContent = ''
117+
// this.tbody.textContent = ''
117118
this.renderTable()
118119
e.target.blur()
119120

@@ -122,216 +123,58 @@ Doo.define(
122123

123124
add(e) {
124125
start('append')
125-
let len = this.data.rows.length
126+
let startRow = this.data.rows.length
126127
this.data.rows = this.data.rows.concat(this.buildData())
127128
stop('append')
128129
start('runAppend')
129-
this.appendData(this.data.rows, len, 1000)
130+
this.appendData(this.tbody, startRow, 1000)
130131
e.target.blur()
131132
stop('runAppend')
132133
}
133134

135+
appendData(containerElem, start) {
136+
let elem = document.createElement('tbody')
137+
elem.id = 'tbody'
138+
let len = this.data[this.defaultDataSet].length // TODO read dataset name from an attribute on place[n]
139+
elem.innerHTML = this.renderNode(this.place[0], this.data.rows, start , len)
140+
this.tableRows = elem.querySelectorAll('tr')
134141

135-
appendData(dataSet=this.data[this.defaultDataSet], start, stop) {
136-
let tableRef = this.place[0].parentElement
137-
138-
let rowList = []
139-
let rowList2 = []
140-
for (let i=0;i<stop;i++) {
141-
let newRow = tableRef.insertRow(-1)
142-
rowList.push(newRow)
143-
rowList2.push(this.renderNode(this.place[0], this.data.rows, i+start , 1 ))
144-
}
145-
for (let i=0;i<stop;i++) {
146-
rowList[i].innerHTML = rowList2[i]
147-
}
148-
rowList = undefined
149-
rowList2 = undefined
150-
return
151-
152-
153-
154-
142+
for (let i=start;i<len;i++) {
143+
containerElem.appendChild(this.tableRows[i-start])
144+
}
155145
}
156-
157-
// static get observedAttributes() {
158-
// // return ['doo-refresh','key','doo-foreach','orientation','doo-dao', 'data-src','implements','doo-db-update','doo-db','doo-theme', Doo.$Config.DATA_BIND,'index','page-size','debug']
159-
// return ['key']
160-
// }
161-
162146

163-
async attributeChangedCallback(name, oldVal, newVal) {
147+
async attributeChangedCallback(name, oldVal, i) {
164148
if (name === 'key') {
165-
this.tbody.replaceChild(this.tr[newVal], this.tbody.childNodes[newVal])
149+
this.tbody.replaceChild(this.tableRows[i], this.tbody.childNodes[i])
166150
}
167151
}
168-
169-
170152

171-
async renderTable(dataSet=this.data[this.defaultDataSet],e) {
172-
153+
async renderTable(dataSet=this.data[this.defaultDataSet],start=0) {
173154

174155
let tableRef = this.place[0].parentElement
175156

176157
let elem = document.createElement('tbody')
177158
elem.id = 'tbody'
178159
let len = dataSet.length
179-
elem.innerHTML = this.renderNode(this.place[0], this.data.rows, 0 , len)
180-
this.tr = elem.querySelectorAll('tr')
160+
elem.innerHTML = this.renderNode(this.place[0], this.data.rows, start , len)
161+
this.tableRows = elem.querySelectorAll('tr')
181162

182-
// for (let i=0;i<len;i++) {
183-
// //let newRow = tableRef.insertRow(-1)
184-
// //newRow.innerHTML = appendChild()
185-
// this.setAttribute('key', i)
186-
187-
// // this.tbody.append(tr[i])
188-
// }
189-
for (let i=0;i<100;i++) {
190-
//let newRow = tableRef.insertRow(-1)
191-
//newRow.innerHTML = appendChild()
192-
//this.setAttribute('key', i)
193-
194-
this.tbody.append(this.tr[i])
163+
for (let i=start;i<this.PAGE_SIZE;i++) {
164+
this.tbody.appendChild(this.tableRows[i])
195165
}
196-
for (let i=100;i<len;i++) {
166+
for (let i=this.PAGE_SIZE;i<len;i++) {
197167
let newRow = tableRef.insertRow(-1)
198-
newRow.innerHTML = this.tr[i].childNodes[0].outerHTML
199-
// this.tbody.append(this.tr[i])
168+
newRow.innerHTML = this.tableRows[i].childNodes[0].outerHTML
200169
}
201170

202-
203-
// this.tbody.childNodes[len-1].scrollIntoView()
204171
setTimeout(() => {
205172
for (let i=100;i<len;i++) {
206-
//let newRow = tableRef.insertRow(-1)
207-
//newRow.innerHTML = appendChild()
208173
this.setAttribute('key', i)
209-
210-
// this.tbody.append(tr[i])
211174
}
212175
}, 1)
213-
214-
215-
216-
// this.tbody = this.shadow.querySelector('#tbody')
217-
// elem.textContent = ''
218-
// this.lastRun = elem
219-
// this.tbody.childNodes[len-1].scrollIntoView()
220-
return
221-
222-
223-
224-
225-
//observer.observe(this, { attributes: true });
226-
/*
227-
228-
let rowList = []
229-
this.rowList2 = []
230-
let len = dataSet.length
231-
232-
this.renderNode(this.place[0], this.data.rows, i , 1)
233-
234-
235-
//let elem
236-
let newRow
237-
for (let i=0;i<100;i++) {
238-
newRow = tableRef.insertRow(-1)
239-
newRow.innerHTML = `<td class="col-md-1">${i+1}</td><td class="col-md-4"><a></a></td><td class="col-md-1"><a class="remove"><span xclass="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr>`
240-
//newRow.childNodes[1].childNodes[0].innerHTML = this.data.rows[i].label
241-
this.setAttribute('key', i)
242-
243-
// newRow.outerHTML = this.renderNode(this.place[0], this.data.rows, i , 1)
244-
//rowList.push(newRow)
245-
// this.data.rows[i]['html'] = this.renderNode(this.place[0], this.data.rows, i , 1)
246-
//this.rowList2.push(this.renderNode(this.place[0], this.data.rows, i , 1 ))
247-
248-
}
249-
for (let i=100;i<len;i++) {
250-
newRow = tableRef.insertRow(-1)
251-
newRow.innerHTML = `<td class="col-md-1">${i+1}</td><td class="col-md-4"><a></a></td><td class="col-md-1"><a class="remove"><span xclass="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr>`
252-
//newRow.childNodes[1].childNodes[0].innerHTML = this.data.rows[i].label
253-
this.setAttribute('key', i)
254-
255-
// newRow.outerHTML = this.renderNode(this.place[0], this.data.rows, i , 1)
256-
//rowList.push(newRow)
257-
// this.data.rows[i]['html'] = this.renderNode(this.place[0], this.data.rows, i , 1)
258-
//this.rowList2.push(this.renderNode(this.place[0], this.data.rows, i , 1 ))
259-
260-
}
261-
*/
262-
/*
263-
for (let i=0;i<len;i++) {
264-
let newRow = tableRef.insertRow(-1)
265-
elem = document.createElement('tr')
266-
267-
elem.innerHTML = this.renderNode(this.place[0], this.data.rows, i , 1)
268-
this.tbody.replaceChild(elem, newRow)
269-
//this.tbody.appendChild(elem)
270-
//this.data.rows[i]['html'] = this.renderNode(this.place[0], this.data.rows, i , 1)
271-
//this.rowList2.push(this.renderNode(this.place[0], this.data.rows, i , 1 ))
272-
273-
}
274-
*/
275-
276-
// for (let i=0;i<100;i++) {
277-
// rowList[i].innerHTML = this.data.rows[i]['html']
278-
279-
// }
280-
281-
// for (let i=100;i<len;i++) {
282-
// rowList[i].innerHTML = `<td class="col-md-1">${i+1}</td>` //<td class="col-md-4"></a></td><td class="col-md-1"><a class="remove"><span xaria-hidden="true"></span></a></td><td class="col-md-6"></td></tr>`
283-
// }
284-
285-
// this.tbody.childNodes[len-1].scrollIntoView()
286-
287-
// let promise = new Promise((resolve) => {
288-
// let x = 0
289-
this.tbody.childNodes[9999].scrollIntoView()
290-
e.target.blur()
291-
stop('runLots')
292-
293-
// let clearID = setInterval(() => {
294-
// // this.tbody.childNodes[x].scrollIntoView()
295-
296-
// for (let i=x;i<x+1000;i++) {
297-
// this.place[0].childNodes[i].innerHTML = this.renderNode(this.place[0], this.data.rows, i , 1)
298-
299-
// //this.setAttribute('key', i)
300-
// }
301-
// x=x+1000
302-
// if (x>len-1) {
303-
// clearInterval(clearID)
304-
// e.target.blur()
305-
// stop('runLots')
306-
307-
// }
308-
// }, 200);
309-
// for (let i=100;i<len;i++) {
310-
// this.setAttribute('key', i)
311-
// }
312-
313-
// setTimeout(()=>resolve(), 200)
314-
// })
315-
// await promise
316-
317-
318-
319-
// for (let i=9000;i<10000;i++) {
320-
// this.setAttribute('key', i)
321-
// }
322-
323-
324-
325-
326-
// rowList = undefined
327-
// rowList2 = undefined
328176
return
329177
}
330-
331-
332-
333-
334-
335178

336179
runLots() {
337180
this.data.rows = this.buildData(10000)
@@ -346,9 +189,8 @@ Doo.define(
346189
stop('buildLots')
347190
start('runLots')
348191
this.tbody.textContent = ''
349-
this.renderTable(this.data.rows,e)
192+
this.renderTable()
350193
e.target.blur()
351-
352194
stop('runLots')
353195
}
354196

0 commit comments

Comments
 (0)