snabbdom/examples/carousel-svg/script.js

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

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