bindingx-web-polyfill/demo/pan.js

The web polyfill for BindingX.

'use strict';

import {parse} from 'bindingx-parser';
import bindingx from '../src/';

let x = 0;
let y = 0;

const block = document.getElementById('block');
const consoleElement = document.getElementById('console');

function printGesture(status,ev) {
  let data = getTouches(ev);
  console.log(status+","+data.length,data);
  consoleElement.innerText = status+"/"+data.length+"\n"+JSON.stringify(data);

}

function getTouches(e) {
  // let touches = e.changedTouches;
  let touches = e.touches;
  let output = [];
  for (let i = 0; i < touches.length; i++) {
      let touch = {
          clientX: touches[i].clientX,
          clientY: touches[i].clientY+"\n"
      };
      output.push(touch);
  }
  return output;
}


block.addEventListener('touchend',(ev)=>{
  // printGesture('touchend',ev);
});

block.addEventListener('touchmove', (ev)=>{
  // printGesture('touchmove',ev);
});

block.addEventListener('touchstart', (ev) => {
  // printGesture('touchstart',ev);
  bindingx.bind({
    anchor: block,
    // debug:true,
    eventType: 'pan',
    props: [
      {
        element: block,
        property: 'transform.translateX',
        expression: {
          origin: `x+${x}`,
          transformed: parse(`x+${x}`)
        }
      },
      {
        element: block,
        property: 'transform.translateY',
        expression: {
          origin: `y+${y}`,
          transformed: parse(`y+${y}`)
        }
      },
      // {
      //   element: block,
      //   property: 'margin-top',
      //   expression: {
      //     origin: 'y+0',
      //     transformed: parse('y+0')
      //   }
      // },
      // {
      //   element: block,
      //   property: 'padding-top',
      //   expression: {
      //     origin: 'y+0',
      //     transformed: parse('y+0')
      //   }
      // },
      // {
      //   element: block,
      //   property: 'width',
      //   expression: {
      //     origin: 'y+0',
      //     transformed: parse('y+0')
      //   }
      // }
    ]
  }, (e) => {

    if (e.state === 'end') {
      x += e.deltaX;
      y += e.deltaY;
      // console.log(bindingx.getComputedStyle(block));
    }
  });
});