forked from snabbdom/snabbdom
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
119 lines (108 loc) · 2.23 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import {
init,
attributesModule,
styleModule,
eventListenersModule,
h,
} from "../../build/index.js";
const patch = init([attributesModule, styleModule, eventListenersModule]);
let vnode;
let data = {
degRotation: 0,
};
function gRotation() {
// console.log("gRotation: %s", data.degRotation);
return "rotate(" + data.degRotation + "deg)";
}
function triangleClick(id) {
console.log("triangleClick: %s", id);
render();
}
function handleRotate(degs) {
data.degRotation += degs;
console.log("handleRotate: %s, %s", degs, data.degRotation);
render();
}
function handleReset(degs) {
data.degRotation = degs;
console.log("handleReset: %s", degs);
render();
}
function render() {
vnode = patch(vnode, view(data));
}
const hTriangle = (id, degRotation) =>
h("polygon#" + id, {
attrs: {
points: "-50,-88 0,-175 50,-88",
transform: "rotate(" + degRotation + ")",
"stroke-width": 3,
},
on: {
click: () => {
triangleClick(id);
},
},
});
const view = () =>
h("div.view", [
h("h1", "Snabbdom SVG Carousel"),
h(
"svg",
{ attrs: { width: 380, height: 380, viewBox: [-190, -190, 380, 380] } },
[
h(
"g#carousel",
{
style: { "-webkit-transform": gRotation(), transform: gRotation() },
},
[
hTriangle("yellow", 0),
hTriangle("green", 60),
hTriangle("magenta", 120),
hTriangle("red", 180),
hTriangle("cyan", 240),
hTriangle("blue", 300),
]
),
]
),
h(
"button",
{
on: {
click: () => {
handleRotate(60);
},
},
},
"Rotate Clockwise"
),
h(
"button",
{
on: {
click: () => {
handleRotate(-60);
},
},
},
"Rotate Anticlockwise"
),
h(
"button",
{
on: {
click: () => {
handleReset(0);
},
},
},
"Reset"
),
]);
window.addEventListener("DOMContentLoaded", () => {
const container = document.getElementById("container");
vnode = patch(container, view(data));
render();
});