Skip to content

Commit 77bcde6

Browse files
krausestkrausest
committed
Merge branch 'areknawo-master'
2 parents eb5c8ee + 0335c3d commit 77bcde6

File tree

6 files changed

+279
-0
lines changed

6 files changed

+279
-0
lines changed

‎frameworks/keyed/isotope/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Isotope</title>
5+
<link href="/css/currentStyle.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
<div id="main" class="container"></div>
9+
<script src="dist/main.js"></script>
10+
</body>
11+
</html>

‎frameworks/keyed/isotope/package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "js-framework-benchmark-isotope",
3+
"version": "1.0.0",
4+
"description": "Benchmark for Isotope UI library",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "@isotope/core"
7+
},
8+
"scripts": {
9+
"build-dev": "rollup -c -w",
10+
"build-prod": "rollup -c --environment production"
11+
},
12+
"keywords": [
13+
"isotope"
14+
],
15+
"author": "Stefan Krause",
16+
"license": "Apache-2.0",
17+
"homepage": "https://github.com/krausest/js-framework-benchmark",
18+
"repository": {
19+
"type": "git",
20+
"url": "https://github.com/krausest/js-framework-benchmark.git"
21+
},
22+
"devDependencies": {
23+
"@rollup/plugin-node-resolve": "7.0.0",
24+
"rollup": "1.15.6",
25+
"rollup-plugin-terser": "5.0.0"
26+
},
27+
"dependencies": {
28+
"@isotope/core": "0.2.0"
29+
}
30+
}

‎frameworks/keyed/isotope/rollup.config.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import resolve from "@rollup/plugin-node-resolve";
2+
import { terser } from "rollup-plugin-terser";
3+
4+
const plugins = [resolve()];
5+
6+
if (process.env.production) {
7+
plugins.push(terser());
8+
}
9+
10+
export default {
11+
input: "src/main.js",
12+
output: {
13+
file: "dist/main.js",
14+
format: "iife",
15+
name: "main"
16+
},
17+
plugins
18+
};

‎frameworks/keyed/isotope/src/main.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { buildData } from "./utils";
2+
import { createDOMView } from "@isotope/core/lib/view";
3+
import menu from "./menu";
4+
import "@isotope/core/lib/configurators/attribs";
5+
import "@isotope/core/lib/configurators/classes";
6+
import "@isotope/core/lib/nodes/html";
7+
import "@isotope/core/lib/nodes/map";
8+
import "@isotope/core/lib/nodes/text";
9+
10+
const view = createDOMView(document.querySelector("#main"));
11+
const container = view.div({
12+
state: {
13+
data: [],
14+
selected: undefined,
15+
},
16+
});
17+
const select = (id) => {
18+
return container.setState({ selected: id });
19+
};
20+
const remove = (num) => {
21+
const data = container.getState("data");
22+
const idx = data.findIndex((d) => d.id === num);
23+
24+
container.setState({ data: [...data.slice(0, idx), ...data.slice(idx + 1)] });
25+
};
26+
const add = () => {
27+
return container.setState({
28+
data: container.getState("data").concat(buildData(1000)),
29+
});
30+
};
31+
const clear = () => {
32+
container.setState({ data: [], selected: undefined });
33+
};
34+
const partialUpdate = () => {
35+
const data = container.getState("data");
36+
37+
for (let i = 0; i < data.length; i += 10) {
38+
data[i].label += " !!!";
39+
}
40+
container.setState({ data });
41+
};
42+
const run = () => {
43+
container.setState({
44+
data: buildData(1000),
45+
selected: undefined,
46+
});
47+
};
48+
const runLots = () => {
49+
container.setState({
50+
data: buildData(10000),
51+
selected: undefined,
52+
});
53+
};
54+
const swapRows = () => {
55+
const data = container.getState("data");
56+
if (data.length > 998) {
57+
container.setState({
58+
data: [data[0], data[998], ...data.slice(2, 998), data[1], data[999]],
59+
});
60+
}
61+
};
62+
const btns = [
63+
{ id: "run", onClick: run, text: "Create 1,000 rows" },
64+
{ id: "runlots", onClick: runLots, text: "Create 10,000 rows" },
65+
{ id: "add", onClick: add, text: "Append 1,000 rows" },
66+
{ id: "update", onClick: partialUpdate, text: "Update every 10th row" },
67+
{ id: "clear", onClick: clear, text: "Clear" },
68+
{ id: "swaprows", onClick: swapRows, text: "Swap Rows" },
69+
];
70+
71+
container.$(menu(btns));
72+
73+
container.link(
74+
view
75+
.table({
76+
classes: ["table", "table-hover", "table-striped", "test-data"],
77+
})
78+
.tbody()
79+
.map(
80+
() => container.getState("data"),
81+
(row, tbody) => {
82+
if (row) {
83+
const tableRow = tbody.tr({
84+
classes: () => ({
85+
danger: container.getState("selected") === row.id,
86+
}),
87+
});
88+
tableRow.td({ classes: ["col-md-1"] }).text(`${row.id}`);
89+
tableRow.link(
90+
tableRow
91+
.td({ classes: ["col-md-4"] })
92+
.a()
93+
.text(() => row.label)
94+
.on("click", () => {
95+
select(row.id);
96+
})
97+
);
98+
tableRow
99+
.td({ classes: ["col-md-1"] })
100+
.a()
101+
.on("click", () => remove(row.id))
102+
.span({
103+
attribs: { "aria-hidden": "true" },
104+
classes: ["glyphicon", "glyphicon-remove"],
105+
});
106+
tableRow.td({ classes: ["col-md-6"] });
107+
108+
return tableRow;
109+
}
110+
}
111+
)
112+
);
113+
view.span({
114+
attribs: { "aria-hidden": "true" },
115+
classes: ["preloadicon", "glyphicon", "glyphicon-remove"],
116+
});

‎frameworks/keyed/isotope/src/menu.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import "@isotope/core/lib/configurators/attribs";
2+
import "@isotope/core/lib/configurators/classes";
3+
import "@isotope/core/lib/nodes/html";
4+
import "@isotope/core/lib/nodes/text";
5+
6+
const menu = (btns) => (parent) => {
7+
const container = parent
8+
.div({ classes: ["jumbotron"] })
9+
.div({ classes: ["row"] });
10+
11+
container
12+
.div({ classes: ["col-md-6"] })
13+
.h1()
14+
.text("Isotope");
15+
16+
const buttonsContainer = container.div({ classes: ["col-md-6"] });
17+
18+
btns.forEach(({ id, onClick, text }) => {
19+
const item = buttonsContainer.div({ classes: ["col-sm-6", "smallpad"] });
20+
item
21+
.button({
22+
attribs: { type: "button", id },
23+
classes: ["btn", "btn-primary", "btn-block"],
24+
})
25+
.text(text)
26+
.on("click", onClick);
27+
28+
return item;
29+
});
30+
};
31+
32+
export default menu;

‎frameworks/keyed/isotope/src/utils.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
let rowId = 1;
2+
3+
const random = (max) => Math.round(Math.random() * 1000) % max;
4+
const buildData = (count = 1000) => {
5+
const adjectives = [
6+
"pretty",
7+
"large",
8+
"big",
9+
"small",
10+
"tall",
11+
"short",
12+
"long",
13+
"handsome",
14+
"plain",
15+
"quaint",
16+
"clean",
17+
"elegant",
18+
"easy",
19+
"angry",
20+
"crazy",
21+
"helpful",
22+
"mushy",
23+
"odd",
24+
"unsightly",
25+
"adorable",
26+
"important",
27+
"inexpensive",
28+
"cheap",
29+
"expensive",
30+
"fancy",
31+
];
32+
const colors = [
33+
"red",
34+
"yellow",
35+
"blue",
36+
"green",
37+
"pink",
38+
"brown",
39+
"purple",
40+
"brown",
41+
"white",
42+
"black",
43+
"orange",
44+
];
45+
const nouns = [
46+
"table",
47+
"chair",
48+
"house",
49+
"bbq",
50+
"desk",
51+
"car",
52+
"pony",
53+
"cookie",
54+
"sandwich",
55+
"burger",
56+
"pizza",
57+
"mouse",
58+
"keyboard",
59+
];
60+
const data = [];
61+
for (let i = 0; i < count; i++) {
62+
data.push({
63+
id: rowId++,
64+
label: `${adjectives[random(adjectives.length)]} ${
65+
colors[random(colors.length)]
66+
} ${nouns[random(nouns.length)]}`,
67+
});
68+
}
69+
return data;
70+
};
71+
72+
export { buildData, random };

0 commit comments

Comments
 (0)