Skip to content
This repository was archived by the owner on Aug 20, 2023. It is now read-only.

Commit b7758fe

Browse files
nlm-pronlm-pro
committed
feat(frameworks): add cash & zepto
1 parent 9622e6a commit b7758fe

File tree

8 files changed

+748
-0
lines changed

8 files changed

+748
-0
lines changed

‎frameworks/keyed/cash/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Cash-"keyed"</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id='main'>
10+
<div class="container">
11+
<div class="jumbotron">
12+
<div class="row">
13+
<div class="col-md-6">
14+
<h1>Cash-"keyed"</h1>
15+
</div>
16+
<div class="col-md-6">
17+
<div class="row">
18+
<div class="col-sm-6 smallpad">
19+
<button type='button' class='btn btn-primary btn-block' id='run'>Create 1,000 rows</button>
20+
</div>
21+
<div class="col-sm-6 smallpad">
22+
<button type='button' class='btn btn-primary btn-block' id='runlots'>Create 10,000 rows</button>
23+
</div>
24+
<div class="col-sm-6 smallpad">
25+
<button type='button' class='btn btn-primary btn-block' id='add'>Append 1,000 rows</button>
26+
</div>
27+
<div class="col-sm-6 smallpad">
28+
<button type='button' class='btn btn-primary btn-block' id='update'>Update every 10th row</button>
29+
</div>
30+
<div class="col-sm-6 smallpad">
31+
<button type='button' class='btn btn-primary btn-block' id='clear'>Clear</button>
32+
</div>
33+
<div class="col-sm-6 smallpad">
34+
<button type='button' class='btn btn-primary btn-block' id='swaprows'>Swap Rows</button>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
<table class="table table-hover table-striped test-data">
41+
<tbody id="tbody">
42+
</tbody>
43+
</table>
44+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
45+
</div>
46+
</div>
47+
<script src="node_modules/cash-dom/dist/cash.min.js"></script>
48+
<script src='src/index.js'></script>
49+
</body>
50+
</html>

‎frameworks/keyed/cash/package-lock.json‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/cash/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "js-framework-benchmark-cash",
3+
"version": "1.1.0",
4+
"description": "Cash demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "cash-dom",
8+
"issues": [
9+
772
10+
]
11+
},
12+
"scripts": {
13+
"build-dev": "exit 0",
14+
"build-prod": "exit 0"
15+
},
16+
"repository": {
17+
"type": "git",
18+
"url": "git+https://github.com/krausest/js-framework-benchmark.git"
19+
},
20+
"keywords": [
21+
"jquery"
22+
],
23+
"author": "Noël Macé",
24+
"license": "Apache-2.0",
25+
"bugs": {
26+
"url": "https://github.com/krausest/js-framework-benchmark/issues"
27+
},
28+
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
29+
"dependencies": {
30+
"cash": "8.1.0"
31+
}
32+
}

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

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
function _random(max) {
2+
return Math.round(Math.random()*1000)%max;
3+
}
4+
5+
class Store {
6+
constructor() {
7+
this.data = [];
8+
this.backup = null;
9+
this.selected = null;
10+
this.id = 1;
11+
}
12+
buildData(count = 1000) {
13+
var 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"];
14+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
15+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
16+
var data = [];
17+
for (var i = 0; i < count; i++)
18+
data.push({id: this.id++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
19+
return data;
20+
}
21+
updateData(mod = 10) {
22+
for (let i=0;i<this.data.length;i+=10) {
23+
this.data[i].label += ' !!!';
24+
// this.data[i] = Object.assign({}, this.data[i], {label: this.data[i].label +' !!!'});
25+
}
26+
}
27+
delete(id) {
28+
const idx = this.data.findIndex(d => d.id==id);
29+
this.data = this.data.filter((e,i) => i!=idx);
30+
return this;
31+
}
32+
run() {
33+
this.data = this.buildData();
34+
this.selected = null;
35+
}
36+
add() {
37+
this.data = this.data.concat(this.buildData(1000));
38+
this.selected = null;
39+
}
40+
update() {
41+
this.updateData();
42+
this.selected = null;
43+
}
44+
select(id) {
45+
this.selected = id;
46+
}
47+
hideAll() {
48+
this.backup = this.data;
49+
this.data = [];
50+
this.selected = null;
51+
}
52+
showAll() {
53+
this.data = this.backup;
54+
this.backup = null;
55+
this.selected = null;
56+
}
57+
runLots() {
58+
this.data = this.buildData(10000);
59+
this.selected = null;
60+
}
61+
clear() {
62+
this.data = [];
63+
this.selected = null;
64+
}
65+
swapRows() {
66+
if(this.data.length > 998) {
67+
var a = this.data[1];
68+
this.data[1] = this.data[998];
69+
this.data[998] = a;
70+
}
71+
}
72+
}
73+
74+
var getParentId = function(elem) {
75+
while (elem) {
76+
if (elem.tagName==="TR") {
77+
return elem.data_id;
78+
}
79+
elem = elem.parentNode;
80+
}
81+
return undefined;
82+
}
83+
class Main {
84+
constructor(props) {
85+
this.store = new Store();
86+
this.select = this.select.bind(this);
87+
this.delete = this.delete.bind(this);
88+
this.add = this.add.bind(this);
89+
this.run = this.run.bind(this);
90+
this.update = this.update.bind(this);
91+
this.start = 0;
92+
this.rows = [];
93+
this.data = [];
94+
this.selectedRow = undefined;
95+
96+
$("#main").on("click", e => {
97+
//console.log("listener",e);
98+
if (e.target.matches('#add')) {
99+
e.preventDefault();
100+
//console.log("add");
101+
this.add();
102+
}
103+
else if (e.target.matches('#run')) {
104+
e.preventDefault();
105+
//console.log("run");
106+
this.run();
107+
}
108+
else if (e.target.matches('#update')) {
109+
e.preventDefault();
110+
//console.log("update");
111+
this.update();
112+
}
113+
else if (e.target.matches('#hideall')) {
114+
e.preventDefault();
115+
//console.log("hideAll");
116+
this.hideAll();
117+
}
118+
else if (e.target.matches('#showall')) {
119+
e.preventDefault();
120+
//console.log("showAll");
121+
this.showAll();
122+
}
123+
else if (e.target.matches('#runlots')) {
124+
e.preventDefault();
125+
//console.log("runLots");
126+
this.runLots();
127+
}
128+
else if (e.target.matches('#clear')) {
129+
e.preventDefault();
130+
//console.log("clear");
131+
this.clear();
132+
}
133+
else if (e.target.matches('#swaprows')) {
134+
e.preventDefault();
135+
//console.log("swapRows");
136+
this.swapRows();
137+
}
138+
else if (e.target.matches('.remove')) {
139+
e.preventDefault();
140+
let id = getParentId(e.target);
141+
let idx = this.findIdx(id);
142+
//console.log("delete",idx);
143+
this.delete(idx);
144+
}
145+
else if (e.target.matches('.lbl')) {
146+
e.preventDefault();
147+
let id = getParentId(e.target);
148+
let idx = this.findIdx(id);
149+
//console.log("select",idx);
150+
this.select(idx);
151+
}
152+
});
153+
this.tbody = $("#tbody");
154+
}
155+
findIdx(id) {
156+
for (let i=0;i<this.data.length;i++){
157+
if (this.data[i].id === id) return i;
158+
}
159+
return undefined;
160+
}
161+
run() {
162+
this.removeAllRows();
163+
this.store.clear();
164+
this.rows = [];
165+
this.data = [];
166+
this.store.run();
167+
this.appendRows();
168+
this.unselect();
169+
}
170+
add() {
171+
this.store.add();
172+
this.appendRows();
173+
}
174+
//#region update
175+
update() {
176+
this.store.update();
177+
for (let i=0;i<this.data.length;i+=10) {
178+
this.rows[i].find('.lbl').text(this.store.data[i].label);
179+
}
180+
}
181+
//#endregion update
182+
unselect() {
183+
if (this.selectedRow !== undefined) {
184+
this.selectedRow.removeClass("danger");
185+
this.selectedRow = undefined;
186+
}
187+
}
188+
select(idx) {
189+
this.unselect();
190+
this.store.select(this.data[idx].id);
191+
this.selectedRow = this.rows[idx];
192+
this.selectedRow.addClass("danger");
193+
}
194+
recreateSelection() {
195+
let old_selection = this.store.selected;
196+
let sel_idx = this.store.data.findIndex(d => d.id === old_selection);
197+
if (sel_idx >= 0) {
198+
this.store.select(this.data[sel_idx].id);
199+
this.selectedRow = this.rows[sel_idx];
200+
this.selectedRow.addClass("danger");
201+
}
202+
}
203+
delete(idx) {
204+
// Remove that row from the DOM
205+
this.store.delete(this.data[idx].id);
206+
this.rows[idx].remove();
207+
this.rows.splice(idx, 1);
208+
this.data.splice(idx, 1);
209+
this.unselect();
210+
this.recreateSelection();
211+
}
212+
removeAllRows() {
213+
this.tbody.text("");
214+
}
215+
runLots() {
216+
this.removeAllRows();
217+
this.store.clear();
218+
this.rows = [];
219+
this.data = [];
220+
this.store.runLots();
221+
this.appendRows();
222+
this.unselect();
223+
}
224+
clear() {
225+
this.store.clear();
226+
this.rows = [];
227+
this.data = [];
228+
// This is actually a bit faster, but close to cheating
229+
// requestAnimationFrame(() => {
230+
this.removeAllRows();
231+
this.unselect();
232+
// });
233+
}
234+
swapRows() {
235+
if (this.data.length>10) {
236+
this.store.swapRows();
237+
this.data[1] = this.store.data[1];
238+
this.data[998] = this.store.data[998];
239+
240+
this.rows[998].insertBefore(this.rows[2])
241+
this.rows[1].insertBefore(this.rows[999])
242+
243+
let tmp = this.rows[998];
244+
this.rows[998] = this.rows[1];
245+
this.rows[1] = tmp;
246+
}
247+
}
248+
appendRows() {
249+
var rows = this.rows, s_data = this.store.data, data = this.data, tbody = this.tbody;
250+
for(let i=rows.length;i<s_data.length; i++) {
251+
let tr = this.createRow(s_data[i]);
252+
rows[i] = tr;
253+
data[i] = s_data[i];
254+
tbody.append(tr);
255+
}
256+
}
257+
//#region create-row
258+
createRow(data) {
259+
const tr = $(`<tr id=${data.id}>
260+
<td class="col-md-1">${data.id}</td>
261+
<td class="col-md-4">
262+
<a class='lbl'>${data.label}</a>
263+
</td>
264+
<td class="col-md-1">
265+
<a class="remove">
266+
<span class="glyphicon glyphicon-remove remove" aria-hidden="true"></span>
267+
</a>
268+
</td>
269+
<td class="col-md-6"></td>
270+
</tr>`);
271+
272+
tr.prop("data_id",data.id);
273+
274+
return tr;
275+
}
276+
//#endregion create-row
277+
}
278+
279+
new Main();

0 commit comments

Comments
 (0)