Skip to content

Commit 6536176

Browse files
krausestkrausest
committed
temporarily add js files in butterfly
1 parent f842575 commit 6536176

File tree

7 files changed

+3910
-1
lines changed

7 files changed

+3910
-1
lines changed

‎frameworks/keyed/butterfloat/.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
**/*.js
21
index.html

‎frameworks/keyed/butterfloat/app-vm.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { butterfly } from "butterfloat";
2+
import { filter, map, mergeMap, range } from "rxjs";
3+
import { RowViewModel } from "./row-vm.js";
4+
class AppViewModel {
5+
#idRange;
6+
#setIdRange;
7+
get idRange() {
8+
return this.#idRange;
9+
}
10+
#selectedId;
11+
#setSelectedId;
12+
get selectedId() {
13+
return this.#selectedId;
14+
}
15+
#rows;
16+
get rows() {
17+
return this.#rows;
18+
}
19+
#rowsToUpdate;
20+
#setRowsToUpdate;
21+
get rowsToUpdate() {
22+
return this.#rowsToUpdate;
23+
}
24+
constructor() {
25+
;
26+
[this.#idRange, this.#setIdRange] = butterfly({
27+
min: 0,
28+
max: 0,
29+
added: [-1, -1]
30+
});
31+
[this.#selectedId, this.#setSelectedId] = butterfly(-1);
32+
[this.#rowsToUpdate, this.#setRowsToUpdate] = butterfly(-1);
33+
this.#rows = this.#idRange.pipe(
34+
filter((idRange) => idRange.added[1] > 0),
35+
mergeMap((idRange) => range(idRange.added[0], idRange.added[1])),
36+
map((id) => new RowViewModel(this, id))
37+
);
38+
}
39+
clear() {
40+
this.#setIdRange((current) => ({
41+
min: current.max,
42+
max: current.max,
43+
added: [-1, -1]
44+
}));
45+
}
46+
selectRow(id) {
47+
this.#setSelectedId(id);
48+
}
49+
createRows(count) {
50+
this.#setIdRange((current) => {
51+
const min = current.max;
52+
const max = current.max + count;
53+
return { min, max, added: [current.max, count] };
54+
});
55+
}
56+
appendRows(count) {
57+
this.#setIdRange((current) => {
58+
const min = current.min;
59+
const max = current.max + count;
60+
return { min, max, added: [current.max, count] };
61+
});
62+
}
63+
updateRow(id) {
64+
this.#setRowsToUpdate(id);
65+
}
66+
}
67+
export {
68+
AppViewModel
69+
};

‎frameworks/keyed/butterfloat/app.js

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { jsx } from "butterfloat";
2+
import { AppViewModel } from "./app-vm.js";
3+
import { Row } from "./row.js";
4+
import { map, withLatestFrom } from "rxjs";
5+
function App(_props, { bindEffect, bindImmediateEffect, events }) {
6+
const vm = new AppViewModel();
7+
const children = vm.rows.pipe(map((row) => () => /* @__PURE__ */ jsx(Row, { vm: row })));
8+
bindImmediateEffect(events.run, () => vm.createRows(1e3));
9+
bindImmediateEffect(events.runlots, () => vm.createRows(1e4));
10+
bindImmediateEffect(events.add, () => vm.appendRows(1e3));
11+
bindImmediateEffect(events.clear, () => vm.clear());
12+
bindEffect(
13+
events.update.pipe(withLatestFrom(events.tbodyAttach)),
14+
([_, tbody]) => {
15+
const rows = tbody.querySelectorAll("tr");
16+
for (let i = 0; i < rows.length; i += 10) {
17+
const row = rows[i];
18+
const id = Number.parseInt(row.dataset.id, 10);
19+
vm.updateRow(id);
20+
}
21+
}
22+
);
23+
bindEffect(
24+
events.swaprows.pipe(withLatestFrom(events.tbodyAttach)),
25+
([_, tbody]) => {
26+
const rows = tbody.querySelectorAll("tr");
27+
if (rows.length > 998) {
28+
const row0 = rows[0];
29+
const row1 = rows[1];
30+
const row997 = rows[997];
31+
const row998 = rows[998];
32+
row0.after(row998);
33+
row997.after(row1);
34+
}
35+
}
36+
);
37+
return /* @__PURE__ */ jsx("div", { class: "container" }, /* @__PURE__ */ jsx("div", { class: "jumbotron" }, /* @__PURE__ */ jsx("div", { class: "row" }, /* @__PURE__ */ jsx("div", { class: "col-md-6" }, /* @__PURE__ */ jsx("h1", null, "Butterfloat")), /* @__PURE__ */ jsx("div", { class: "col-md-6" }, /* @__PURE__ */ jsx("div", { class: "row" }, /* @__PURE__ */ jsx("div", { class: "col-sm-6 smallpad" }, /* @__PURE__ */ jsx(
38+
"button",
39+
{
40+
type: "button",
41+
class: "btn btn-primary btn-block",
42+
id: "run",
43+
events: { click: events.run }
44+
},
45+
"Create 1,000 rows"
46+
)), /* @__PURE__ */ jsx("div", { class: "col-sm-6 smallpad" }, /* @__PURE__ */ jsx(
47+
"button",
48+
{
49+
type: "button",
50+
class: "btn btn-primary btn-block",
51+
id: "runlots",
52+
events: { click: events.runlots }
53+
},
54+
"Create 10,000 rows"
55+
)), /* @__PURE__ */ jsx("div", { class: "col-sm-6 smallpad" }, /* @__PURE__ */ jsx(
56+
"button",
57+
{
58+
type: "button",
59+
class: "btn btn-primary btn-block",
60+
id: "add",
61+
events: { click: events.add }
62+
},
63+
"Append 1,000 rows"
64+
)), /* @__PURE__ */ jsx("div", { class: "col-sm-6 smallpad" }, /* @__PURE__ */ jsx(
65+
"button",
66+
{
67+
type: "button",
68+
class: "btn btn-primary btn-block",
69+
id: "update",
70+
events: { click: events.update }
71+
},
72+
"Update every 10th row"
73+
)), /* @__PURE__ */ jsx("div", { class: "col-sm-6 smallpad" }, /* @__PURE__ */ jsx(
74+
"button",
75+
{
76+
type: "button",
77+
class: "btn btn-primary btn-block",
78+
id: "clear",
79+
events: { click: events.clear }
80+
},
81+
"Clear"
82+
)), /* @__PURE__ */ jsx("div", { class: "col-sm-6 smallpad" }, /* @__PURE__ */ jsx(
83+
"button",
84+
{
85+
type: "button",
86+
class: "btn btn-primary btn-block",
87+
id: "swaprows",
88+
events: { click: events.swaprows }
89+
},
90+
"Swap Rows"
91+
)))))), /* @__PURE__ */ jsx("table", { class: "table table-hover table-striped test-data" }, /* @__PURE__ */ jsx(
92+
"tbody",
93+
{
94+
id: "tbody",
95+
childrenBind: children,
96+
childrenBindMode: "append",
97+
events: { bfDomAttach: events.tbodyAttach }
98+
}
99+
)));
100+
}
101+
export {
102+
App
103+
};

‎frameworks/keyed/butterfloat/data.js

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

0 commit comments

Comments
 (0)