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