snabbdom/examples/carousel-svg/script.js

var snabbdom = require('../../snabbdom.js');
var patch = snabbdom.init([
	require('../../modules/attributes'),
	require('../../modules/style'),
	require('../../modules/eventlisteners')
]);
var h = require('../../h.js');

var vnode;

var 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 = (data) =>
	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", () => {
	var container = document.getElementById("container");
	vnode = patch(container, view(data));
	render();
});