Skip to content

Commit 62b799e

Browse files
fabioricalifabioricali
committed
add colon
1 parent 6514b8a commit 62b799e

File tree

3 files changed

+181
-0
lines changed

3 files changed

+181
-0
lines changed

‎frameworks/keyed/doz/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8" />
3+
<title>Doz</title>
4+
<link href="/css/currentStyle.css" rel="stylesheet" />
5+
<div id="container"></div>
6+
<script src='dist/main.js'></script>

‎frameworks/keyed/doz/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "js-framework-benchmark-doz",
3+
"version": "1.0.0",
4+
"description": "Doz demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "doz"
8+
},
9+
"scripts": {
10+
"build-dev": "webpack --watch --mode=development",
11+
"build-prod": "webpack --mode=production"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "git+https://github.com/krausest/js-framework-benchmark.git"
16+
},
17+
"keywords": [
18+
"doz"
19+
],
20+
"author": "Fabio Ricali",
21+
"license": "MIT",
22+
"bugs": {
23+
"url": "https://github.com/krausest/js-framework-benchmark/issues"
24+
},
25+
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
26+
"dependencies": {
27+
"doz": "2.4.7"
28+
},
29+
"devDependencies": {
30+
"webpack": "4.41.4",
31+
"webpack-cli": "3.3.10"
32+
}
33+
}

‎frameworks/keyed/doz/src/index.js

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import Doz from 'doz'
2+
3+
const adjectives = [
4+
'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'];
5+
const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
6+
const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
7+
8+
let did = 1;
9+
let selected = -1;
10+
11+
const actions = {
12+
add() {
13+
this.getStore('records').data = this.getStore('records').data.concat(buildData(1000));
14+
},
15+
16+
run() {
17+
this.getStore('records').data = buildData(1000);
18+
},
19+
20+
runLots() {
21+
this.getStore('records').data = buildData(10000);
22+
},
23+
24+
clear() {
25+
this.getStore('records').data = [];
26+
},
27+
28+
del(id) {
29+
const data = this.getStore('records').data;
30+
const idx = data.findIndex(d => d.id === id);
31+
data.splice(idx, 1);
32+
},
33+
34+
select(id) {
35+
const data = this.getStore('records').data;
36+
if (selected > -1) {
37+
data[selected].selected = false;
38+
}
39+
selected = data.findIndex(d => d.id === id);
40+
data[selected].selected = true;
41+
},
42+
43+
swapRows() {
44+
this.mainComponent.prepareCommit();
45+
const data = this.getStore('records').data;
46+
if (data.length > 998) {
47+
const tmp = data[1];
48+
data[1] = data[998];
49+
data[998] = tmp;
50+
}
51+
this.mainComponent.commit();
52+
},
53+
54+
update() {
55+
this.mainComponent.prepareCommit();
56+
const data = this.getStore('records').data;
57+
for (let i = 0; i < data.length; i += 10) {
58+
data[i].label += ' !!!';
59+
}
60+
this.mainComponent.commit();
61+
}
62+
};
63+
64+
const buildData = count => {
65+
const data = [];
66+
for (let i = 0; i < count; i++) {
67+
data.push({
68+
id: did++,
69+
label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`,
70+
selected: false,
71+
});
72+
}
73+
return data;
74+
};
75+
76+
const _random = max => {
77+
return Math.round(Math.random() * 1000) % max;
78+
};
79+
80+
new Doz({
81+
store: 'records',
82+
actions,
83+
root: '#container',
84+
props: {
85+
data: []
86+
},
87+
template(h) {
88+
return h`
89+
<div class="container">
90+
<div class="jumbotron">
91+
<div class="row">
92+
<div class="col-md-6">
93+
<h1>Doz</h1>
94+
</div>
95+
<div class="col-md-6">
96+
<div class="row">
97+
<div class="col-sm-6 smallpad">
98+
<button type="button" class="btn btn-primary btn-block" id="run" onclick="${this.action.run}">Create 1,000 rows</button>
99+
</div>
100+
<div class="col-sm-6 smallpad">
101+
<button type="button" class="btn btn-primary btn-block" id="runlots" onclick="${this.action.runLots}">Create 10,000 rows</button>
102+
</div>
103+
<div class="col-sm-6 smallpad">
104+
<button type="button" class="btn btn-primary btn-block" id="add" onclick="${this.action.add}">Append 1,000 rows</button>
105+
</div>
106+
<div class="col-sm-6 smallpad">
107+
<button type="button" class="btn btn-primary btn-block" id="update" onclick="${this.action.update}">Update every 10th row</button>
108+
</div>
109+
<div class="col-sm-6 smallpad">
110+
<button type="button" class="btn btn-primary btn-block" id="clear" onclick="${this.action.clear}">Clear</button>
111+
</div>
112+
<div class="col-sm-6 smallpad">
113+
<button type="button" class="btn btn-primary btn-block" id="swaprows" onclick="${this.action.swapRows}">Swap Rows</button>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
</div>
119+
<table class="table table-hover table-striped test-data">
120+
<tbody>
121+
${this.props.data.map(
122+
item => h`
123+
<tr key="${item.id}" onclick="${() => this.action.select(item.id)}" class="${item.selected ? 'danger' : ''}" >
124+
<td class="col-md-1">${item.id}</td>
125+
<td class="col-md-4" >
126+
<a>${item.label}</a>
127+
</td>
128+
<td class="col-md-1">
129+
<a>
130+
<span class="glyphicon glyphicon-remove" aria-hidden="true" onclick="${(e) => {e.stopPropagation(); this.action.del(item.id)}}"></span>
131+
</a>
132+
</td>
133+
<td class="col-md-6"></td>
134+
</tr>`
135+
)}
136+
</tbody>
137+
</table>
138+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
139+
</div>
140+
`
141+
},
142+
});

0 commit comments

Comments
 (0)