Skip to content

Commit c25da37

Browse files
krausestkrausest
committed
Merge branch 'DooHTML-v0.91.1-beta-keyed' of https://github.com/hman61/js-framework-benchmark into hman61-DooHTML-v0.91.1-beta-keyed
2 parents 254b895 + 37b240a commit c25da37

File tree

4 files changed

+51
-34
lines changed

4 files changed

+51
-34
lines changed

‎frameworks/keyed/doohtml/index.html

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@
88
<link href="./js/doo.html.min.js" rel="preload" as="script"/>
99
<script src="./js/doo.html.min.js"></script>
1010
<script type="module" src="./js/Main.class.js" defer ></script>
11+
<template id="table">
12+
<table class="table table-hover table-striped test-data">
13+
<tbody id="tbody"><tr bind="rows"><td class="col-md-1">{{id}}</td><td class="col-md-4"><a>{{label}}</a></td><td class="col-md-1"><a class="remove"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr></tbody>
14+
</table>
15+
<link href="/css/currentStyle.css" rel="stylesheet">
16+
</template>
1117
</head>
1218
<body>
1319
<div id="main">
@@ -43,9 +49,10 @@ <h1>DooHTML - keyed</h1><span class="ver"></span>
4349
</div>
4450
<doo-main
4551
context="shadow"
46-
link="/css/currentStyle.css"
47-
bind="rows"
48-
template="./templates/main.html"
52+
bind="data"
53+
data-key="id"
54+
data-has-html="false"
55+
template="#table"
4956
></doo-main>
5057
</div>
5158
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>

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

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie"
88

99
const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
1010

11+
const DEFAULT_SIZE = 1000
12+
const SWAP_ROW = 998
1113
Doo.define(
1214
class Main extends Doo {
1315
constructor() {
1416
super(100)
15-
this.scrollTarget = '.table'
1617
this.defaultDataSet = 'rows'
1718
this.ID = 1
1819
this.data = {
@@ -32,7 +33,7 @@ Doo.define(
3233

3334
async dooAfterRender() {
3435
this.tbody = this.shadow.querySelector('#tbody')
35-
this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
36+
this.tbody.addEventListener('click', e => {
3637
e.preventDefault()
3738
if (e.target.parentElement.matches('.remove')) {
3839
this.delete(e.target.parentElement)
@@ -50,23 +51,13 @@ Doo.define(
5051
return undefined
5152
}
5253

53-
buildData(count = 1000) {
54+
buildData(count = DEFAULT_SIZE) {
5455
const data = []
5556
for (let i = 0; i < count; i++) {
5657
data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
5758
}
5859
return data
5960
}
60-
61-
getIndex(row) {
62-
let idx = this.data.rows.findIndex((item, i) => {
63-
if (item.id === row.key) {
64-
return i
65-
}
66-
})
67-
return idx
68-
}
69-
7061
getIndex(row) {
7162
let idx = this.data.rows.findIndex((item, i) => {
7263
if (item.id === row.key) {
@@ -116,37 +107,36 @@ Doo.define(
116107
this.selectedRow.classList.remove('danger')
117108
this.selectedRow = undefined
118109
}
119-
this.toggleSelect(this.getParentRow(elem))
110+
if (elem) {
111+
this.toggleSelect(this.getParentRow(elem))
112+
}
120113
}
121114

122-
toggleSelect(elem) {
123-
let row = this.getParentRow(elem)
115+
toggleSelect(row) {
124116
if (row) {
125117
row.classList.toggle('danger')
126118
if (row.classList.contains('danger')) {
127119
this.selectedRow = row
128120
}
129121
}
130-
}
122+
}
131123

132124
clear() {
125+
this.tbody.textContent = null
133126
this.data.rows = []
134-
this.tbody.textContent = ''
135127
}
136128

137129
swapRows() {
138-
if (this.data.rows.length > 998) {
130+
if (this.data.rows.length > SWAP_ROW) {
139131
let node1 = this.tbody.firstChild.nextSibling,
140-
node2 = node1.nextSibling,
141-
node998 = this.tbody.childNodes[998],
142-
node999 = node998.nextSibling,
132+
swapRow = this.tbody.childNodes[SWAP_ROW],
133+
node999 = swapRow.nextSibling,
143134
row1 = this.data.rows[1]
144135

145-
this.data.rows[1] = this.data.rows[998];
146-
this.data.rows[998] = row1
136+
this.data.rows[1] = this.data.rows[SWAP_ROW];
137+
this.data.rows[SWAP_ROW] = row1
147138

148-
this.tbody.insertBefore(node998, node2)
149-
this.tbody.insertBefore(node1, node999)
139+
this.tbody.insertBefore(node1.parentNode.replaceChild(swapRow, node1), node999)
150140
}
151141
}
152142

@@ -168,5 +158,7 @@ Doo.define(
168158
}
169159
})
170160
}
171-
}
172-
)
161+
async connectedCallback() {
162+
super.connectedCallback()
163+
}
164+
})

0 commit comments

Comments
 (0)