besom

A Javascript Library For Multi-Touch or Mouse Event Gestures (tap, longtap, doubletap, pinch, slide, rotate)

Usage no npm install needed!

<script type="module">
  import besom from 'https://cdn.skypack.dev/besom';
</script>

README

Besom

A Javascript Library For Multi-Touch and Mouse Event Gestures (tap, longtap, doubletap, pinch, slide, rotate)

Installation

npm install besom --save or yarn add besom or cdn https://cdn.jsdelivr.net/npm/besom/dist/besom.min.js

Usage

  var Besom = require('besom'), g = Besom.create(document.getElementById('demo'));
  g.enable('longtap', 'slide', 'pinch');

  //bind Event
  g.on('tap', function(){ console.log('tap') }); //tap event is enabled by default
  g.on('longtap', function(){ console.log('longtap') });

  g.on('slide', function(e){ this.translate(e.translate) });
  g.on('slideEnd', function(){ console.log('slideEnd')  });

  g.on('start', function(e){
    if(e.count == 2) this.setPointAsOrigin(e.center)
  })
  g.on('pinch', function(e){ this.scale(e.scale) });
  g.on('pinchEnd', function(){ console.log('pinchEnd') });

See Demos Click Here

Supported Gestures

  • tap(enabled default)
  • longtap
  • doubletap
  • slide
  • pinch
  • rotate

Bind Event Name

  • tap
  • longtap
  • doubletap
  • start
  • slide
  • slideEnd
  • pinch
  • pinchEnd
  • rotate
  • rotateEnd

Instance And Methods

Create Gestures Maintainer
Besom.create(element)
  • element:HTMLElement
Gestures Maintainer Methods
  • enable(gesture), disable(gesture) - enable/disable gestures

  • on(event, fn) - add gesture event function

    the parameter of the event callback function - fn(currentGestureEventObject, startGestureEventObject, currentTransformableElement)

    • currentGestureEventObject and startGestureEventObject is the formatted event object with caculated datas of the gestures
    • currentTransformableElement or this in the callback function fn - refers to the transformable element. More details see bellow
  • delegate(className, event, fn) - delegate the gesture of the child element which has the className className

  • destroy() - destroy the gesture manager and events

Create Transformable Element
Besom.element(element)
  • element:HTMLElement.
Transformable Element Properties and Methods
  • element - the html element
  • transform - the transform property of the element
  • offset() - return the element offset.left and offset.top in the page
  • getPointOrigin(point) - caculate the point({pageX:number, pageY:number) in the element matrix
  • setPointAsOrigin(point) - set the point({pageX:number, pageY:number}) as the element origin
  • translate(offset, duration) - translate offset.x as horizon and offset.y as vertical distance in duration time.
  • scale(scale, duration)
  • rotate(rotate, duration)
  • position() - return the left and top styles of the element.
  • move(params, duration) - move the element to the postion(different to translate) with params({ left, top, width, height }) in duration time.