@elementsx/touch-x v0.1.3

touch-x

Drag/Swipe Library For Mobile/Desktop Devices

Caveat: This is currently only focused on single touch and swipe(move) actions. Double tab, zoom, 3 finger actions are not covered with this library.

Usage with Webpack, Browserify, & Other Bundlers

If you want to use it with a bundler, install @elementsx/touch-x with npm:

$ npm install @elementsx/touch-x --save-dev

Simply import the module into your bundle:

import {XTouch} from  '@elementsx/touch-x';

Usage with Browser

<script src="//unpkg.com/@elementsx/touch-x"></script>

How to use

Initiate a touch action with new TouchX(cssSelector). This will fire a x-swipe event when the selected area is touched and moves.

Try It The following code is to draw lines on a screen using this library.

// HTML
<div class="area">
  <svg width="100%" height="100%"></svg>
</div>

// Javascript
new TouchX(document.querySelector('.area'));

let lineEl;
document.addEventListener('x-swipe', event => {
  const {type, x1, y1, x2, y2} = event.detail;

  if (type === 'start'){
    lineEl = document.createElementNS("http://www.w3.org/2000/svg", 'line');
    lineEl.setAttribute('x1', x1);
    lineEl.setAttribute('y1', y1);
    lineEl.setAttribute('stroke', 'red')
    document.querySelector('svg').appendChild(lineEl);
  } else if (type === 'move') {
    lineEl.setAttribute('x2', x2);
    lineEl.setAttribute('y2', y2);
  } else if (type === 'cancel') {
    lineEl.remove();
  }
});

x-swipe event detail

Commands For Maintainers

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm start
# build for production with minification
npm run build