Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2262279

Browse files
mksunny1mksunny1
committed
Updated VanillaJS-3 and Deleight keyed implementations
I tried to make them better. Nice-looking local results.
1 parent 5eb151c commit 2262279

File tree

5 files changed

+125
-366
lines changed

5 files changed

+125
-366
lines changed

‎frameworks/keyed/deleight/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ <h1>Deleight-"keyed"</h1>
7979
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
8080
</div>
8181
</div>
82+
<template><tr><td class='col-md-1 id'>[id]</td><td class='col-md-4'><a class='lbl'>[lbl]</a></td><td class='col-md-1'><a class='remove'><span class='remove glyphicon glyphicon-remove' aria-hidden='true'></span></a></td><td class='col-md-6'></td></tr></template>
8283
<script src='dist/Main.js' type="module"></script>
8384
</body>
8485
</html>

‎frameworks/keyed/deleight/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,6 @@
2929
"rollup": "^4.14.2"
3030
},
3131
"dependencies": {
32-
"deleight": "^1.1.7"
32+
"deleight": "^4.0.0"
3333
}
3434
}

‎frameworks/keyed/deleight/src/Main.js

Lines changed: 38 additions & 226 deletions
Original file line numberDiff line numberDiff line change
@@ -1,230 +1,42 @@
1-
import { templates, createFragment } from "deleight/apriori";
2-
import { apply, parentSelector } from "deleight/appliance";
3-
import { set, update } from "deleight/domitory";
4-
import {
5-
preventDefault,
6-
stopPropagation,
7-
eventListener,
8-
matchListener,
9-
} from "deleight/eventivity";
10-
import { one } from "deleight/onetomany";
11-
import { range, items } from "deleight/generational";
12-
13-
function _random(max) {
14-
return Math.round(Math.random() * 1000) % max;
15-
}
16-
const adjectives = [
17-
"pretty",
18-
"large",
19-
"big",
20-
"small",
21-
"tall",
22-
"short",
23-
"long",
24-
"handsome",
25-
"plain",
26-
"quaint",
27-
"clean",
28-
"elegant",
29-
"easy",
30-
"angry",
31-
"crazy",
32-
"helpful",
33-
"mushy",
34-
"odd",
35-
"unsightly",
36-
"adorable",
37-
"important",
38-
"inexpensive",
39-
"cheap",
40-
"expensive",
41-
"fancy",
42-
];
43-
const colours = [
44-
"red",
45-
"yellow",
46-
"blue",
47-
"green",
48-
"pink",
49-
"brown",
50-
"purple",
51-
"brown",
52-
"white",
53-
"black",
54-
"orange",
55-
];
56-
const nouns = [
57-
"table",
58-
"chair",
59-
"house",
60-
"bbq",
61-
"desk",
62-
"car",
63-
"pony",
64-
"cookie",
65-
"sandwich",
66-
"burger",
67-
"pizza",
68-
"mouse",
69-
"keyboard",
70-
];
71-
72-
const itemTemplate = templates(
73-
`
74-
<tr>
75-
<td class='col-md-1'>\${indices[item]}</td>
76-
<td class='col-md-4'><a class='lbl'>\${data[item]}</a></td>
77-
<td class='col-md-1'>
78-
<a class='remove'>
79-
<span class='remove glyphicon glyphicon-remove' aria-hidden='true'></span>
80-
</a>
81-
</td>
82-
<td class='col-md-6'></td>
83-
</tr>
84-
`,
85-
["indices", "data"],
86-
);
871

88-
function data() {
89-
return {
90-
index: 1,
91-
*createIndices(n) {
92-
const start = this.index;
93-
const end = (this.index += n);
94-
for (let i = start; i < end; i++) yield i;
95-
},
96-
*createLabels(n) {
97-
for (let i = 0; i < n; i++) {
98-
yield adjectives[_random(adjectives.length)] +
99-
" " +
100-
colours[_random(colours.length)] +
101-
" " +
102-
nouns[_random(nouns.length)];
103-
}
104-
},
105-
build(n, context) {
106-
context.indices.push(...this.createIndices(n));
107-
context.data.push(...this.createLabels(n));
108-
},
109-
create(n, context) {
110-
this.clear(context);
111-
this.build(n, context);
112-
},
113-
append(n, context) {
114-
this.build(n, context);
115-
},
116-
update(context) {
117-
const length = context.data.length;
118-
for (let i = 0; i < length; i += 10) context.data[i] += " !!!";
119-
},
120-
clear(context) {
121-
context.data = [];
122-
context.indices = [];
123-
},
124-
swap(context) {
125-
if (context.data.length >= 999) {
126-
[context.data[1], context.data[998]] = [
127-
context.data[998],
128-
context.data[1],
129-
];
130-
[context.indices[1], context.indices[998]] = [
131-
context.indices[998],
132-
context.indices[1],
133-
];
134-
}
135-
},
136-
remove(element, context) {
137-
const index = Array.from(element.parentNode.children).indexOf(element);
138-
context.indices.splice(index, 1);
139-
context.data.splice(index, 1);
140-
},
141-
};
142-
}
143-
144-
function view(table) {
145-
return {
146-
create(n, context) {
147-
this.clear();
148-
this.append(n, context);
149-
},
150-
append(n, context) {
151-
const length = context.data.length;
152-
const renderedItems = [...itemTemplate(
153-
range(length - n, length),
154-
context.indices,
155-
context.data,
156-
)];
157-
table.append(createFragment(renderedItems.join('')));
158-
},
159-
update(context) {
160-
apply(
161-
{
162-
"a.lbl": (...labels) => {
163-
const indices = [...range(0, context.data.length, 10)];
164-
set(items(labels, indices), {
165-
textContent: items(context.data, indices),
166-
});
167-
},
168-
},
169-
table,
170-
);
171-
},
172-
clear(context) {
173-
table.innerHTML = "";
174-
},
175-
swap(context) {
176-
if (table.children.length >= 999) {
177-
update(
178-
[...items(table.children, [1, 998])],
179-
[...items(table.children, [998, 1])],
180-
);
181-
}
182-
},
183-
remove(element, context) {
184-
table.removeChild(element);
185-
},
186-
};
187-
}
188-
189-
apply({
190-
tbody: (table) => {
191-
const component = one([data(), view(table)], false, [{}]);
2+
import { ArrayActions, call, ChildrenActions } from 'deleight/apption';
3+
import { apply, parentSelector } from "deleight/appliance";
1924

193-
let selected;
194-
function select(node) {
195-
if (node === selected) {
196-
selected.className = selected.className ? "" : "danger";
197-
} else {
198-
if (selected) selected.className = "";
199-
node.className = "danger";
200-
selected = node;
201-
}
5+
const _random = ((max) => Math.round(Math.random() * 1000) % max), click = (handler => element => element.onclick = handler);
6+
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"];
7+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
8+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
9+
10+
const array = [], tbody = document.querySelector('tbody'), row = document.querySelector('template').content.firstElementChild;
11+
const rowId = row.querySelector('td'), rowlbl = row.querySelector('a');
12+
let id = 1, selected = null;
13+
14+
const AppChildrenActions = class extends ChildrenActions {
15+
render(item) {
16+
return (rowId.firstChild.nodeValue = item.id) && (rowlbl.firstChild.nodeValue = item.lbl) && row.cloneNode(true);
17+
} update(value = ' !!!') {
18+
for (let i = 0; i < array.length; i += 10)
19+
this.element.children[i].querySelector('a').firstChild.nodeValue = array[i].lbl += value;
20220
}
21+
}, actions = [new ArrayActions(array), new AppChildrenActions(tbody)];
20322

204-
const removeListener = (e) => {
205-
component.remove([parentSelector(e.target, "tr")]);
206-
};
207-
208-
table.addEventListener(
209-
"click",
210-
matchListener({
211-
"a.lbl": (e) => select(e.target.parentNode.parentNode),
212-
"span.remove": eventListener(
213-
[removeListener, preventDefault, stopPropagation],
214-
{},
215-
),
216-
}),
217-
);
218-
219-
const btnListener = (fn) => (btn) => btn.addEventListener("click", fn);
220-
221-
apply({
222-
"#run": btnListener(() => component.create([1000])),
223-
"#runlots": btnListener(() => component.create([10000])),
224-
"#add": btnListener(() => component.append([1000])),
225-
"#update": btnListener(() => component.update()),
226-
"#clear": btnListener(() => component.clear()),
227-
"#swaprows": btnListener(() => component.swap()),
228-
});
229-
},
230-
});
23+
function* createItems(n) {
24+
for (let i = 0; i < n; i++, id++)
25+
yield { id, lbl: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}` }
26+
}
27+
function run(n = 1000) { call({ clear: actions, push: actions }, ...createItems(n)) }
28+
apply({
29+
"#run": click(() => run(1000)), "#runlots": click(() => run(10000)),
30+
"#add": click(() => call({ push: actions }, ...createItems(1000))),
31+
"#update": click(() => call({ update: [actions[1]] })), "#clear": click(() => call({ clear: actions })),
32+
"#swaprows": click(() => call({ swap: actions }, 1, 998)),
33+
tbody: click((e) => {
34+
const row = parentSelector(e.target, 'tr'); if (!row) return;
35+
const index = Array.prototype.indexOf.call(tbody.children, row);
36+
if (e.target.tagName === 'A') {
37+
if (selected) selected.className = '';
38+
selected = (row === selected)? null: row;
39+
if (selected) selected.className = 'danger';
40+
} else if (e.target.tagName === 'SPAN') call({ splice: actions }, index, 1);
41+
})
42+
}, document.body, true, true);

0 commit comments

Comments
 (0)