package.examples.carousel-svg.index.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of snabbdom Show documentation

A virtual DOM library with focus on simplicity, modularity, powerful features and performance.

The newest version!

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();
});