Skip to content

Commit 0a5c439

Browse files
author
Henrik jJaven
committed
DooHTML-keyed-v0.60.3
1 parent 77b7742 commit 0a5c439

File tree

5 files changed

+52
-38
lines changed

5 files changed

+52
-38
lines changed

‎frameworks/keyed/doohtml/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
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="./js/Main.class.js" defer ></script>
11+
1112
</head>
1213

1314
<body>

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

Lines changed: 45 additions & 32 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,51 +57,66 @@ 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) {
92-
this.data.rows[i].label += ' !!!';
93-
tr[i].childNodes[1].childNodes[0].textContent = this.data.rows[i].label
102+
this.tbody.childNodes[i].childNodes[1].childNodes[0].innerText = this.data.rows[i].label += ' !!!'
94103
}
95104
}
96105

97106
select(elem) {
98107
if (this.selectedRow) {
99108
this.selectedRow.classList.remove('danger')
100109
this.selectedRow = undefined
101-
// return should toggle IMO
102110
}
103-
let row = this.getParentRow(elem)
111+
this.toggleSelect(this.getParentRow(elem))
112+
}
113+
114+
toggleSelect(row) {
104115
if (row) {
105116
row.classList.toggle('danger')
106-
this.selectedRow = row
117+
if (row.classList.contains('danger')) {
118+
this.selectedRow = row
119+
}
107120
}
108121
}
109122

@@ -129,21 +142,21 @@ Doo.define(
129142

130143
addEventListeners() {
131144
document.getElementById("main").addEventListener('click', e => {
132-
e.preventDefault();
145+
e.preventDefault()
133146
if (e.target.matches('#runlots')) {
134-
this.runLots(e);
147+
this.runLots()
135148
} else if (e.target.matches('#run')) {
136-
this.run(e);
149+
this.run()
137150
} else if (e.target.matches('#add')) {
138-
this.add(e);
151+
this.add()
139152
} else if (e.target.matches('#update')) {
140-
this.update();
153+
this.update()
141154
} else if (e.target.matches('#clear')) {
142-
this.clear();
155+
this.clear()
143156
} else if (e.target.matches('#swaprows')) {
144-
this.swapRows();
157+
this.swapRows()
145158
}
146159
})
147-
}
160+
}
148161
}
149162
)

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

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

‎frameworks/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.30.8",
3+
"version": "0.60.3",
44
"description": "DooHTML JS-Benchmark",
55
"main": "Main.class.js",
66
"js-framework-benchmark": {

‎frameworks/keyed/doohtml/templates/main.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
<template>
33
<table class="table table-hover table-striped test-data">
44
<link href="${link}" rel="stylesheet">
5-
<tbody id="tbody"><tr bind="rows" key="{{i()}}"><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>
5+
<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>
66
</table>
77
</template>

0 commit comments

Comments
 (0)