Skip to content

Commit b5464fe

Browse files
author
Henrik jJaven
committed
DooHTML-v0.91.7-non-keyed
1 parent 50fcb25 commit b5464fe

File tree

4 files changed

+52
-34
lines changed

4 files changed

+52
-34
lines changed

‎frameworks/non-keyed/doohtml/index.html

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,18 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>DooHTML</title>
5+
<title>DooHTML - (non-keyed)</title>
66
<link href="/css/currentStyle.css" rel="preload" as="style"/>
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>
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 - non-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+
data-key="id"
53+
data-has-html="false"
54+
data-hydrate="true"
55+
template="#table"
4956
></doo-main>
5057
</div>
5158
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>

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

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@ 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 CHILD_1 = 1
13+
const CHILD_998 = 998
1114
Doo.define(
1215
class Main extends Doo {
1316
constructor() {
1417
super(100)
15-
this.scrollTarget = '.table'
1618
this.defaultDataSet = 'rows'
1719
this.ID = 1
1820
this.data = {
@@ -32,7 +34,7 @@ Doo.define(
3234

3335
async dooAfterRender() {
3436
this.tbody = this.shadow.querySelector('#tbody')
35-
this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
37+
this.tbody.addEventListener('click', e => {
3638
e.preventDefault()
3739
if (e.target.parentElement.matches('.remove')) {
3840
this.delete(e.target.parentElement)
@@ -50,8 +52,8 @@ Doo.define(
5052
return undefined
5153
}
5254

53-
buildData(count = 1000) {
54-
const data = [];
55+
buildData(count = DEFAULT_SIZE) {
56+
const data = []
5557
for (let i = 0; i < count; i++) {
5658
data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
5759
}
@@ -62,7 +64,7 @@ Doo.define(
6264
let row = this.getParentRow(elem)
6365
if (row) {
6466
this.tbody.removeChild(row)
65-
this.data.rows[row.getAttribute('key')] = undefined
67+
this.data.rows.splice(row.rowIndex,1)
6668
}
6769
}
6870

@@ -114,27 +116,16 @@ Doo.define(
114116
return elem.classList.contains('danger')
115117
}
116118
swapRows() {
117-
const A=1,B=998
118-
if (this.data.rows.length > B) {
119+
if (this.data.rows.length > CHILD_998) {
120+
let node1 = this.tbody.childNodes[CHILD_1],
121+
swapRow = this.tbody.childNodes[CHILD_998],
122+
node999 = swapRow.nextSibling,
123+
row1 = this.data.rows[CHILD_1]
119124

120-
let a = this.tbody.childNodes[A],
121-
b = this.tbody.childNodes[B],
122-
row1 = this.data.rows[1]
123-
124-
this.data.rows[A] = this.data.rows[B];
125-
this.data.rows[B] = row1
126-
127-
const selected1 = this.isRowSelected(a)
128-
const selected2 = this.isRowSelected(b)
129-
this.updateRow(A, this.data.rows, this.tbody)
130-
this.updateRow(B, this.data.rows, this.tbody)
131-
132-
if (selected1) {
133-
this.select(this.tbody.childNodes[B])
134-
}
135-
if (selected2) {
136-
this.select(this.tbody.childNodes[A])
137-
}
125+
this.data.rows[CHILD_1] = this.data.rows[CHILD_998];
126+
this.data.rows[CHILD_998] = row1
127+
this.tbody.insertBefore(swapRow, node1)
128+
this.tbody.insertBefore(node1, node999)
138129
}
139130
}
140131

@@ -157,5 +148,7 @@ Doo.define(
157148
}
158149
})
159150
}
160-
}
161-
)
151+
async connectedCallback() {
152+
super.connectedCallback()
153+
}
154+
})

‎frameworks/non-keyed/doohtml/js/doo.html.min.js

Lines changed: 20 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/non-keyed/doohtml/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-framework-benchmark-doohtml",
3-
"version": "0.60.13",
3+
"version": "0.91.7",
44
"description": "DooHTML JS-Benchmark",
55
"main": "Main.class.js",
66
"js-framework-benchmark": {

0 commit comments

Comments
 (0)