Skip to content

Commit e44565e

Browse files
hman61hman61
authored
Merge branch 'master' into DooHTML-v0.30.5
2 parents a758704 + 8f125a8 commit e44565e

File tree

105 files changed

+24112
-22125
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

105 files changed

+24112
-22125
lines changed

‎Chrome_Results.ods

636 Bytes
Binary file not shown.

‎frameworks/keyed/1more/app.js

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
import { html, render, key, component } from "1more";
2+
3+
function random(max) {
4+
return Math.round(Math.random() * 1000) % max;
5+
}
6+
7+
const A = [
8+
"pretty",
9+
"large",
10+
"big",
11+
"small",
12+
"tall",
13+
"short",
14+
"long",
15+
"handsome",
16+
"plain",
17+
"quaint",
18+
"clean",
19+
"elegant",
20+
"easy",
21+
"angry",
22+
"crazy",
23+
"helpful",
24+
"mushy",
25+
"odd",
26+
"unsightly",
27+
"adorable",
28+
"important",
29+
"inexpensive",
30+
"cheap",
31+
"expensive",
32+
"fancy",
33+
];
34+
const C = [
35+
"red",
36+
"yellow",
37+
"blue",
38+
"green",
39+
"pink",
40+
"brown",
41+
"purple",
42+
"brown",
43+
"white",
44+
"black",
45+
"orange",
46+
];
47+
const N = [
48+
"table",
49+
"chair",
50+
"house",
51+
"bbq",
52+
"desk",
53+
"car",
54+
"pony",
55+
"cookie",
56+
"sandwich",
57+
"burger",
58+
"pizza",
59+
"mouse",
60+
"keyboard",
61+
];
62+
63+
let nextId = 1;
64+
65+
function buildData(count) {
66+
const data = [];
67+
for (let i = 0; i < count; i++) {
68+
data[i] = {
69+
id: nextId++,
70+
label: `${A[random(A.length)]} ${C[random(C.length)]} ${
71+
N[random(N.length)]
72+
}`,
73+
};
74+
}
75+
return data;
76+
}
77+
78+
let state = {
79+
data: [],
80+
selected: undefined,
81+
};
82+
83+
const actions = {
84+
run() {
85+
state = { ...state, data: buildData(1000) };
86+
_render();
87+
},
88+
add() {
89+
state = { ...state, data: state.data.concat(buildData(1000)) };
90+
_render();
91+
},
92+
runlots() {
93+
state = { ...state, data: buildData(10000) };
94+
_render();
95+
},
96+
cleardata() {
97+
state = { data: [], selected: undefined };
98+
_render();
99+
},
100+
update() {
101+
const data = state.data.slice();
102+
for (let i = 0; i < data.length; i += 10) {
103+
const item = data[i];
104+
data[i] = { ...item, label: item.label + " !!!" };
105+
}
106+
state = { ...state, data };
107+
_render();
108+
},
109+
select(id) {
110+
state = { ...state, selected: id };
111+
_render();
112+
},
113+
remove(id) {
114+
const data = state.data.slice();
115+
const idx = data.findIndex(item => item.id === id);
116+
data.splice(idx, 1);
117+
state = { ...state, data };
118+
_render();
119+
},
120+
swaprows() {
121+
const data = state.data.slice();
122+
const tmp = data[1];
123+
data[1] = data[998];
124+
data[998] = tmp;
125+
state = { ...state, data };
126+
_render();
127+
},
128+
};
129+
130+
const Item = component(() => item => html`
131+
<tr class=${item.selected ? "danger" : null}>
132+
<td class="col-md-1">${item.id}</td>
133+
<td class="col-md-4">
134+
<a onclick=${() => actions.select(item.id)}>${item.label}</a>
135+
</td>
136+
<td class="col-md-1">
137+
<a onclick=${() => actions.remove(item.id)}>
138+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
139+
</a>
140+
</td>
141+
<td class="col-md-6"></td>
142+
</tr>
143+
`);
144+
145+
const App = component(() => state => html`
146+
<div class="container">
147+
<div class="jumbotron">
148+
<div class="row">
149+
<div class="col-md-6">
150+
<h1>1more</h1>
151+
</div>
152+
<div class="col-md-6">
153+
<div class="row">
154+
<div class="col-sm-6 smallpad">
155+
<button
156+
type="button"
157+
class="btn btn-primary btn-block"
158+
id="run"
159+
onclick=${actions.run}
160+
>
161+
Create 1,000 rows
162+
</button>
163+
</div>
164+
<div class="col-sm-6 smallpad">
165+
<button
166+
type="button"
167+
class="btn btn-primary btn-block"
168+
id="runlots"
169+
onclick=${actions.runlots}
170+
>
171+
Create 10,000 rows
172+
</button>
173+
</div>
174+
<div class="col-sm-6 smallpad">
175+
<button
176+
type="button"
177+
class="btn btn-primary btn-block"
178+
id="add"
179+
onclick=${actions.add}
180+
>
181+
Append 1,000 rows
182+
</button>
183+
</div>
184+
<div class="col-sm-6 smallpad">
185+
<button
186+
type="button"
187+
class="btn btn-primary btn-block"
188+
id="update"
189+
onclick=${actions.update}
190+
>
191+
Update every 10th row
192+
</button>
193+
</div>
194+
<div class="col-sm-6 smallpad">
195+
<button
196+
type="button"
197+
class="btn btn-primary btn-block"
198+
id="clear"
199+
onclick=${actions.cleardata}
200+
>
201+
Clear
202+
</button>
203+
</div>
204+
<div class="col-sm-6 smallpad">
205+
<button
206+
type="button"
207+
class="btn btn-primary btn-block"
208+
id="swaprows"
209+
onclick=${actions.swaprows}
210+
>
211+
Swap Rows
212+
</button>
213+
</div>
214+
</div>
215+
</div>
216+
</div>
217+
</div>
218+
<table class="table table-hover table-striped test-data">
219+
<tbody>
220+
${state.data.map(item =>
221+
key(
222+
item.id,
223+
Item(
224+
state.selected === item.id ? { ...item, selected: true } : item,
225+
),
226+
),
227+
)}
228+
</tbody>
229+
</table>
230+
<span
231+
class="preloadicon glyphicon glyphicon-remove"
232+
aria-hidden="true"
233+
></span>
234+
</div>
235+
`);
236+
237+
const container = document.getElementById("main");
238+
239+
const _render = () => {
240+
render(App(state), container);
241+
};
242+
_render();

‎frameworks/keyed/1more/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>1more</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet" />
7+
<script src='dist/app.min.js' type="module"></script>
8+
</head>
9+
<body>
10+
<div id="main">
11+
</div>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)