Skip to content

Commit 994a9bd

Browse files
author
Henrik jJaven
committed
DooHTML-non-keyed-v0.40.2
1 parent f08358b commit 994a9bd

File tree

6 files changed

+248
-0
lines changed

6 files changed

+248
-0
lines changed

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

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

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

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
'use strict';
2+
3+
const _random = max => Math.random() * max | 0;
4+
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"];
8+
9+
const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
10+
11+
Doo.define(
12+
class Main extends Doo {
13+
constructor() {
14+
super(100)
15+
this.scrollTarget = '.table'
16+
this.defaultDataSet = 'rows'
17+
this.ID = 1
18+
this.data = {
19+
[this.defaultDataSet]: []
20+
}
21+
this.add = this.add.bind(this)
22+
this.run = this.run.bind(this)
23+
this.runLots = this.runLots.bind(this)
24+
this.update = this.update.bind(this)
25+
this.clear = this.clear.bind(this)
26+
this.swaprows = this.swapRows.bind(this)
27+
this.addEventListeners()
28+
this.selectedRow = undefined
29+
document.querySelector(".ver").innerHTML += ` ${Doo.version} (non-keyed)`
30+
document.title += ` ${Doo.version} (non-keyed)`
31+
}
32+
33+
async dooAfterRender() {
34+
this.tbody = this.shadow.querySelector('#tbody')
35+
this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
36+
e.preventDefault();
37+
if (e.target.parentElement.matches('.remove')) {
38+
this.delete(e.target.parentElement);
39+
} else if (e.target.tagName === 'A') {
40+
this.select(e.target);
41+
}
42+
});
43+
}
44+
45+
getParentRow(elem) {
46+
while (elem) {
47+
if (elem.tagName === "TR") {return elem}
48+
elem = elem.parentNode;
49+
}
50+
return undefined;
51+
}
52+
53+
buildData(count = 1000) {
54+
const data = [];
55+
for (let i = 0; i < count; i++) {
56+
data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
57+
}
58+
return data
59+
}
60+
61+
delete(elem) {
62+
let row = this.getParentRow(elem)
63+
if (row) {
64+
this.tbody.removeChild(row)
65+
this.data.rows[row.getAttribute('key')] = undefined
66+
}
67+
}
68+
69+
run() {
70+
this.data.rows = this.buildData()
71+
this.renderTable()
72+
}
73+
74+
add() {
75+
let startRow = this.data.rows.length
76+
this.data.rows = this.data.rows.concat(this.buildData())
77+
this.renderTable(this.data.rows, startRow)
78+
}
79+
80+
runLots() {
81+
this.data.rows = this.buildData(10000)
82+
this.renderTable()
83+
}
84+
85+
update() {
86+
let tr = this.tbody.querySelectorAll('tr')
87+
for (let i=0, len = this.data.rows.length;i<len;i+=10) {
88+
this.data.rows[i].label += ' !!!';
89+
tr[i].childNodes[1].childNodes[0].textContent = this.data.rows[i].label
90+
}
91+
}
92+
93+
select(elem) {
94+
if (this.selectedRow) {
95+
this.selectedRow.classList.remove('danger')
96+
this.selectedRow = undefined
97+
}
98+
let row = this.getParentRow(elem)
99+
if (row) {
100+
row.classList.toggle('danger')
101+
this.selectedRow = row
102+
}
103+
}
104+
105+
clear() {
106+
this.data.rows = []
107+
this.tbody.textContent = ''
108+
}
109+
110+
swapRows() {
111+
if (this.data.rows.length>10) {
112+
let node1 = this.tbody.childNodes[1]
113+
let node2 = this.tbody.childNodes[998]
114+
115+
let row1 = this.data.rows[1];
116+
this.data.rows[1] = this.data.rows[998];
117+
this.data.rows[998] = row1
118+
119+
this.tbody.insertBefore(node2, node1)
120+
this.tbody.insertBefore(node1, this.tbody.childNodes[999])
121+
122+
}
123+
}
124+
125+
addEventListeners() {
126+
document.getElementById("main").addEventListener('click', e => {
127+
e.preventDefault();
128+
if (e.target.matches('#runlots')) {
129+
this.runLots();
130+
} else if (e.target.matches('#run')) {
131+
this.run();
132+
} else if (e.target.matches('#add')) {
133+
this.add();
134+
} else if (e.target.matches('#update')) {
135+
this.update();
136+
} else if (e.target.matches('#clear')) {
137+
this.clear();
138+
} else if (e.target.matches('#swaprows')) {
139+
this.swapRows();
140+
}
141+
})
142+
}
143+
}
144+
)

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

‎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="stylesheet">
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>
6+
</table>
7+
</template>

0 commit comments

Comments
 (0)