-
Notifications
You must be signed in to change notification settings - Fork 836
/
main.js
112 lines (99 loc) · 3.47 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { observable, h } from 'sinuous';
import { template, t, o } from 'sinuous/template';
import { map } from 'sinuous/map';
let idCounter = 1;
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"],
colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
function _random (max) { return Math.round(Math.random() * 1000) % max; }
function buildData(count) {
let data = new Array(count);
for (let i = 0; i < count; i++) {
data[i] = {
id: idCounter++,
label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`
};
}
return data;
}
function getParentId(node) {
do {
if (node.props && node.props.id) {
return node.props.id;
}
} while ((node = node.parentNode));
}
const App = () => {
const data = observable([]);
const run = () => data(buildData(1000)) && selected(null);
const runLots = () => data(buildData(10000)) && selected(null);
const add = () => data(data().concat(buildData(1000)));
const clear = () => data([]) && selected(null);
const removeOrSelect = (e) => e.target.matches('.remove') ? remove(e) : select(e);
const select = (e) => selected(getParentId(e.target));
let rowObject;
const selected = (id) => {
if (rowObject) rowObject.selected = '';
const d = data();
if (id && (rowObject = d.find(d => d.id === id))) {
rowObject.selected = 'danger';
}
};
const update = () => {
const d = data();
for (let i = 0; i < d.length; i += 10) {
d[i].label += ' !!!';
}
};
const swapRows = () => {
const d = data();
if (d.length > 998) {
const tmp = d[1];
d[1] = d[998];
d[998] = tmp;
data(d);
}
};
const remove = (e) => {
const d = data();
const idx = d.findIndex(d => d.id === getParentId(e.target));
d.splice(idx, 1);
data(d);
};
const Button = ({ id, text, fn }) => html`
<div class="col-sm-6 smallpad">
<button id="${ id }" class="btn btn-primary btn-block" type=button onclick=${fn}>
${ text }
</button>
</div>`;
const Row = template(() => html`
<tr class=${ o('selected') }>
<td class=col-md-1>${ t('id') }</td>
<td class=col-md-4><a>${ o('label') }</a></td>
<td class=col-md-1><a>
<span class="glyphicon glyphicon-remove remove" aria-hidden=true />
</a></td>
<td class=col-md-6 />
</tr>
`);
return html`<div class=container>
<div class=jumbotron><div class=row>
<div class=col-md-6><h1>Sinuous Keyed</h1></div>
<div class=col-md-6><div class=row>
<${Button} id=run text="Create 1,000 rows" fn=${ run } />
<${Button} id=runlots text="Create 10,000 rows" fn=${ runLots } />
<${Button} id=add text="Append 1,000 rows" fn=${ add } />
<${Button} id=update text="Update every 10th row" fn=${ update } />
<${Button} id=clear text=Clear fn=${ clear } />
<${Button} id=swaprows text="Swap Rows" fn=${ swapRows } />
</div></div>
</div></div>
<table class="table table-hover table-striped test-data">
<tbody onclick=${removeOrSelect}>
${map(data, Row)}
</tbody>
</table>
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden=true />
</div>`;
};
document.getElementById('main').appendChild(App());