Skip to content

Commit ffbf07a

Browse files
author
Henrik jJaven
committed
dooHTML non keyed
1 parent 32ffb05 commit ffbf07a

File tree

7 files changed

+331
-2
lines changed

7 files changed

+331
-2
lines changed

‎frameworks/keyed/doohtml/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717
"keywords": [],
1818
"author": "Henrik Javen",
1919
"license": "Apache-2.0",
20-
"homepage": "https://github.com/hman61/doodads",
20+
"homepage": "https://doohtml.com",
2121
"repository": {
2222
"type": "git",
23-
"url": "https://github.com/krausest/doodads"
23+
"url": "https://github.com/hman61/js-framework-benchmark"
2424
}
2525
}
2626

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>DooHTML</title>
6+
<link href="/css/currentStyle.css" rel="preload" as="style"/>
7+
<link href="/css/currentStyle.css" rel="stylesheet"/>
8+
<script src="./js/doo.html.min.js"></script>
9+
<script type="module" src="./js/Main.class.js"></script>
10+
</head>
11+
<template id="t1">
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+
</template>
16+
17+
<body>
18+
19+
<div id="main">
20+
<div class="container">
21+
<div class="jumbotron">
22+
<div class="row">
23+
<div class="col-md-6">
24+
<h1>DooHTML - keyed</h1><span class="ver"></span>
25+
</div>
26+
<div class="col-md-6">
27+
<div class="row">
28+
<div class="col-sm-6 smallpad">
29+
<button type="button" class="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
30+
</div>
31+
<div class="col-sm-6 smallpad">
32+
<button type="button" class="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
33+
</div>
34+
<div class="col-sm-6 smallpad">
35+
<button type="button" class="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
36+
</div>
37+
<div class="col-sm-6 smallpad">
38+
<button type="button" class="btn btn-primary btn-block" id="update">Update every 10th row</button>
39+
</div>
40+
<div class="col-sm-6 smallpad">
41+
<button type="button" class="btn btn-primary btn-block" id="clear">Clear</button>
42+
</div>
43+
<div class="col-sm-6 smallpad">
44+
<button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
<doo-main
51+
context="document"
52+
bind="rows"
53+
template="#t1"
54+
></doo-main>
55+
</div>
56+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
57+
58+
</div>
59+
</body>
60+
</html>

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

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
'use strict';
2+
3+
4+
const startTime = {}
5+
let tot= []
6+
const start = function(name) {
7+
// document.querySelector('#time').blur()
8+
9+
tot.push(new Date().getTime())
10+
if (!startTime[name]) {
11+
startTime[name] = [ new Date().getTime()]
12+
}
13+
};
14+
const stop = function(name) {
15+
if (startTime[name]) {
16+
startTime[name].push(new Date().getTime())
17+
console.log('DooHTML', name, 'took:', startTime[name][1] - startTime[name][0]);
18+
if (tot.length === 2) {
19+
console.log('DooHTML Tot:', startTime[name][1] - tot[0])
20+
tot = []
21+
}
22+
startTime[name] = undefined
23+
}
24+
};
25+
26+
27+
const _random = ((max) => {
28+
return Math.round(Math.random()*1000)%max;
29+
})
30+
31+
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"];
32+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
33+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
34+
35+
const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
36+
37+
Doo.define(
38+
class Main extends Doo {
39+
constructor() {
40+
super(100)
41+
this.scrollTarget = '.table'
42+
this.defaultDataSet = 'rows'
43+
this.ID = 1
44+
this.data = {
45+
[this.defaultDataSet]: []
46+
}
47+
this.add = this.add.bind(this)
48+
this.run = this.run.bind(this)
49+
this.runLots = this.runLots.bind(this)
50+
this.update = this.update.bind(this)
51+
this.clear = this.clear.bind(this)
52+
this.swaprows = this.swapRows.bind(this)
53+
this.addEventListeners()
54+
this.selectedRow = undefined
55+
document.querySelector(".ver").innerHTML += ` ${Doo.version} (non-keyed)`
56+
document.title += ` ${Doo.version} (non-keyed)`
57+
}
58+
59+
async dooAfterRender() {
60+
this.tbody = this.shadow.querySelector('#tbody')
61+
this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
62+
e.preventDefault();
63+
if (e.target.parentElement.matches('.remove')) {
64+
this.delete(e.target.parentElement);
65+
} else if (e.target.tagName === 'A') {
66+
this.select(e.target);
67+
}
68+
});
69+
}
70+
71+
getParentRow(elem) {
72+
while (elem) {
73+
if (elem.tagName === "TR") {return elem}
74+
elem = elem.parentNode;
75+
}
76+
return undefined;
77+
}
78+
79+
buildData(count = 1000) {
80+
const data = [];
81+
for (let i = 0; i < count; i++) {
82+
data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
83+
}
84+
return data
85+
}
86+
87+
delete(elem) {
88+
let row = this.getParentRow(elem)
89+
if (row) {
90+
this.tbody.removeChild(row)
91+
this.data.rows[row.getAttribute('key')] = undefined
92+
}
93+
}
94+
95+
run() {
96+
this.data.rows = this.buildData()
97+
this.tbody.textContent = ''
98+
this.renderTable()
99+
}
100+
101+
run(e) {
102+
start('buildData')
103+
this.data.rows = this.buildData()
104+
stop('buildData')
105+
start('run')
106+
this.tbody.textContent = ''
107+
this.renderTable()
108+
e.target.blur()
109+
110+
stop('run')
111+
}
112+
113+
114+
115+
add() {
116+
let startRow = this.data.rows.length
117+
this.data.rows = this.data.rows.concat(this.buildData())
118+
this.appendData(this.tbody, startRow)
119+
}
120+
121+
runLots() {
122+
this.data.rows = this.buildData(10000)
123+
this.tbody.textContent = ''
124+
this.renderTable()
125+
}
126+
runLots(e) {
127+
start('buildData')
128+
this.data.rows = this.buildData(10000)
129+
stop('buildData')
130+
start('runLots')
131+
this.tbody.textContent = ''
132+
this.renderTable()
133+
e.target.blur()
134+
135+
stop('runLots')
136+
}
137+
138+
run(e) {
139+
start('buildData')
140+
this.data.rows = this.buildData()
141+
stop('buildData')
142+
start('run')
143+
this.tbody.textContent = ''
144+
this.renderTable()
145+
e.target.blur()
146+
147+
stop('run')
148+
}
149+
150+
add(e) {
151+
start('append')
152+
let startRow = this.data.rows.length
153+
this.data.rows = this.data.rows.concat(this.buildData())
154+
stop('append')
155+
start('runAppend')
156+
this.appendData(this.tbody, startRow, 1000)
157+
e.target.blur()
158+
stop('runAppend')
159+
}
160+
161+
update() {
162+
let tr = this.tbody.querySelectorAll('tr')
163+
for (let i=0, len = this.data.rows.length;i<len;i+=10) {
164+
this.data.rows[i].label += ' !!!';
165+
tr[i].childNodes[1].childNodes[0].innerHTML = this.data.rows[i].label
166+
}
167+
}
168+
169+
select(elem) {
170+
if (this.selectedRow) {
171+
this.selectedRow.classList.remove('danger')
172+
this.selectedRow = undefined
173+
// return should toggle IMO
174+
}
175+
let row = this.getParentRow(elem)
176+
if (row) {
177+
row.classList.toggle('danger')
178+
this.selectedRow = row
179+
}
180+
}
181+
182+
clear() {
183+
this.data.rows = []
184+
this.tbody.innerHTML = ''
185+
}
186+
187+
swapRows() {
188+
if (this.data.rows.length>10) {
189+
let node1 = this.tbody.childNodes[1]
190+
let node2 = this.tbody.childNodes[998]
191+
192+
let row1 = this.data.rows[1];
193+
this.data.rows[1] = this.data.rows[998];
194+
this.data.rows[998] = row1
195+
196+
this.tbody.insertBefore(node2, node1)
197+
this.tbody.insertBefore(node1, this.tbody.childNodes[999])
198+
199+
}
200+
}
201+
202+
addEventListeners() {
203+
document.getElementById("main").addEventListener('click', e => {
204+
e.preventDefault();
205+
if (e.target.matches('#runlots')) {
206+
this.runLots(e);
207+
} else if (e.target.matches('#run')) {
208+
this.run(e);
209+
} else if (e.target.matches('#add')) {
210+
this.add(e);
211+
} else if (e.target.matches('#update')) {
212+
this.update();
213+
} else if (e.target.matches('#clear')) {
214+
this.clear();
215+
} else if (e.target.matches('#swaprows')) {
216+
this.swapRows();
217+
}
218+
})
219+
}
220+
}
221+
)

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

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

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

Lines changed: 5 additions & 0 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: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "js-framework-benchmark-doohtml",
3+
"version": "0.30.7",
4+
"description": "DooHTML JS-Benchmark",
5+
"main": "Main.class.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersion": "doohtml",
8+
"useShadowRoot": false,
9+
"buttonsInShadowRoot": false,
10+
"issues": [772]
11+
},
12+
"scripts": {
13+
"build-dev": "exit 0",
14+
"build-prod": "exit 0"
15+
},
16+
"keywords": [],
17+
"author": "Henrik Javen",
18+
"license": "Apache-2.0",
19+
"homepage": "https://doohtml.com",
20+
"repository": {
21+
"type": "git",
22+
"url": "https://github.com/hman61/js-framework-benchmark"
23+
}
24+
}
25+

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<template>
3+
<table class="table table-hover table-striped test-data">
4+
<link href="${link}" rel="preload" as="style">
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>
6+
</table>
7+
</template>

0 commit comments

Comments
 (0)