Skip to content

Commit 1caa5df

Browse files
htmujahidhtmujahid
authored
Create App.js
1 parent 13b189a commit 1caa5df

File tree

1 file changed

+262
-0
lines changed
  • frameworks/non-keyed/sonnetjs/src

1 file changed

+262
-0
lines changed

‎frameworks/non-keyed/sonnetjs/src/App.js

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
import { $component, SonnetComponent } from '@sonnetjs/core';
2+
3+
const ADJECTIVES = [
4+
'pretty',
5+
'large',
6+
'big',
7+
'small',
8+
'tall',
9+
'short',
10+
'long',
11+
'handsome',
12+
'plain',
13+
'quaint',
14+
'clean',
15+
'elegant',
16+
'easy',
17+
'angry',
18+
'crazy',
19+
'helpful',
20+
'mushy',
21+
'odd',
22+
'unsightly',
23+
'adorable',
24+
'important',
25+
'inexpensive',
26+
'cheap',
27+
'expensive',
28+
'fancy',
29+
];
30+
const COLOURS = [
31+
'red',
32+
'yellow',
33+
'blue',
34+
'green',
35+
'pink',
36+
'brown',
37+
'purple',
38+
'brown',
39+
'white',
40+
'black',
41+
'orange',
42+
];
43+
const NOUNS = [
44+
'table',
45+
'chair',
46+
'house',
47+
'bbq',
48+
'desk',
49+
'car',
50+
'pony',
51+
'cookie',
52+
'sandwich',
53+
'burger',
54+
'pizza',
55+
'mouse',
56+
'keyboard',
57+
];
58+
59+
const nts = (n) => Math.round(n / 100);
60+
61+
class App extends SonnetComponent {
62+
script = () => {
63+
this.index = 1;
64+
this.data = [];
65+
this.labels = null;
66+
this.invalidLabels = true;
67+
this.selected = null;
68+
69+
this.TBODY = document.getElementsByTagName('tbody')[0];
70+
71+
this.adjectivesLength = ADJECTIVES.length;
72+
this.coloursLength = COLOURS.length;
73+
this.nounsLength = NOUNS.length;
74+
75+
this.TBODY.onclick = (e) => {
76+
e.stopPropagation;
77+
if (e.target.matches('a.lbl')) {
78+
e.preventDefault;
79+
const element = e.target.parentNode.parentNode;
80+
if (element === this.selected)
81+
this.selected.className = this.selected.className ? '' : 'danger';
82+
else {
83+
if (this.selected) this.selected.className = '';
84+
element.className = 'danger';
85+
this.selected = element;
86+
}
87+
} else if (e.target.matches('span.remove')) {
88+
const element = e.target.parentNode.parentNode.parentNode;
89+
const index = Array.prototype.indexOf.call(this.TBODY.children, element);
90+
element.remove();
91+
this.data.splice(index, 1);
92+
this.invalidLabels = true;
93+
}
94+
};
95+
96+
for (let [key, value] of Object.entries({
97+
run: this.run,
98+
runlots: this.run(10000),
99+
add: this.add,
100+
update: this.update,
101+
clear: this.clear,
102+
swaprows: this.swaprows,
103+
})) {
104+
document.getElementById(key).onclick = (e) => {
105+
e.stopPropagation();
106+
value();
107+
};
108+
}
109+
}
110+
111+
run = (n = 1000) => {
112+
if (this.data.length) this.clear();
113+
this.add(n);
114+
}
115+
116+
add = (n = 1000) => {
117+
const nt = nts(n);
118+
let i,
119+
j = 0,
120+
r1,
121+
r2,
122+
r3;
123+
124+
const itemTemplates = document.getElementById(`t${n}`).content; // .cloneNode(true);
125+
if (itemTemplates.children.length < nt) {
126+
const itemTemplate = itemTemplates.firstElementChild;
127+
while (nt >= itemTemplates.children.length * 2)
128+
itemTemplates.appendChild(itemTemplates.cloneNode(true));
129+
while (nt > itemTemplates.children.length)
130+
itemTemplates.appendChild(itemTemplate.cloneNode(true));
131+
}
132+
const ids = Array.prototype.map.call(
133+
itemTemplates.querySelectorAll(`td:first-child`),
134+
(i) => i.firstChild,
135+
);
136+
const labels = Array.prototype.map.call(
137+
itemTemplates.querySelectorAll(`a.lbl`),
138+
(i) => i.firstChild,
139+
);
140+
141+
while ((n -= nt) >= 0) {
142+
for (i = 0; i < nt; i++, j++) {
143+
r1 = Math.round(Math.random() * 1000) % this.adjectivesLength;
144+
r2 = Math.round(Math.random() * 1000) % this.coloursLength;
145+
r3 = Math.round(Math.random() * 1000) % this.nounsLength;
146+
ids[i].nodeValue = this.index++;
147+
this.data.push(
148+
(labels[
149+
i
150+
].nodeValue = `${ADJECTIVES[r1]} ${COLOURS[r2]} ${NOUNS[r3]}`),
151+
);
152+
}
153+
this.TBODY.appendChild(itemTemplates.cloneNode(true));
154+
}
155+
this.invalidLabels = true;
156+
}
157+
158+
update = () => {
159+
if (this.invalidLabels) this.labels = this.TBODY.querySelectorAll('a.lbl');
160+
this.invalidLabels = false;
161+
const length = this.labels.length;
162+
let i;
163+
for (i = 0; i < length; i += 10)
164+
this.labels[i].firstChild.nodeValue = this.data[i] += ' !!!';
165+
}
166+
167+
clear = () => {
168+
this.TBODY.textContent = '';
169+
this.data = [];
170+
this.invalidLabels = true;
171+
}
172+
173+
swaprows = () => {
174+
if (this.TBODY.children.length < 999) return;
175+
this.invalidLabels = true;
176+
const first = this.TBODY.firstElementChild;
177+
[this.data[1], this.data[998]] = [this.data[998], this.data[1]];
178+
this.TBODY.insertBefore(
179+
this.TBODY.insertBefore(first.nextElementSibling, this.TBODY.children[998])
180+
.nextElementSibling,
181+
first.nextElementSibling,
182+
);
183+
}
184+
185+
get = () => {
186+
return /*html*/ `
187+
<div class="container">
188+
<div class="jumbotron">
189+
<div class="row">
190+
<div class="col-md-6">
191+
<h1>Vanillajs-3-"keyed"</h1>
192+
</div>
193+
<div class="col-md-6">
194+
<div class="row">
195+
<div class="col-sm-6 smallpad">
196+
<button
197+
type="button"
198+
class="btn btn-primary btn-block"
199+
id="run"
200+
>
201+
Create 1,000 rows
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="runlots"
209+
>
210+
Create 10,000 rows
211+
</button>
212+
</div>
213+
<div class="col-sm-6 smallpad">
214+
<button
215+
type="button"
216+
class="btn btn-primary btn-block"
217+
id="add"
218+
>
219+
Append 1,000 rows
220+
</button>
221+
</div>
222+
<div class="col-sm-6 smallpad">
223+
<button
224+
type="button"
225+
class="btn btn-primary btn-block"
226+
id="update"
227+
>
228+
Update every 10th row
229+
</button>
230+
</div>
231+
<div class="col-sm-6 smallpad">
232+
<button
233+
type="button"
234+
class="btn btn-primary btn-block"
235+
id="clear"
236+
>
237+
Clear
238+
</button>
239+
</div>
240+
<div class="col-sm-6 smallpad">
241+
<button
242+
type="button"
243+
class="btn btn-primary btn-block"
244+
id="swaprows"
245+
>
246+
Swap Rows
247+
</button>
248+
</div>
249+
</div>
250+
</div>
251+
</div>
252+
</div>
253+
<table class="table table-hover table-striped test-data">
254+
<tbody id="tbody"></tbody>
255+
</table>
256+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
257+
</div>
258+
`;
259+
}
260+
}
261+
262+
export default $component(App);

0 commit comments

Comments
 (0)