hammerjs-position v0.1.4

Hammerjs-position

엘리먼트에 대한 상대적 위치를 이벤트에 추가합니다. Add relative position in event

• Support Pan, Tap, Swipe, Press Recognizer
• Depend on Hammerjs
• Hammerjs Event 객체의 center와 Manager의 element를 확인합니다.

Usage

• default

  import { Tap, Pan } from '@egjs/hammerjs';
  import { PositionManager, POSITION, STATIC_POSITION, DYNAMIC_POSITION } from 'hammerjs-position';
  
  const hammer = new PositionManager(element, { recognizers: [
      [Tap, { position: POSITION.ALL }],
      [Pan, { position: (POSITION.LEFT | POSITION.RIGHT), positionType: STATIC_POSITION }]
  ]});
  
  hammer.on('tap.left', console.log);
  hammer.on('pan.right', console.log);

• browser

  <script src='https://cdnjs.com/libraries/hammer.js/'>
  <script src='hammerjs-position.umd.min.js'>
  <script>
      var instance = new Hammer.PositionManager(document.body, { recognizers: [
          [Hammer.Tap, { position: Hammer.POSITION_ALL }],
          [Hammer.Pan, { position: (Hammer.POSITION_LEFT | Hammer.POSITION_RIGHT) }]
      ]});
      ...
  </script>

Event name

element
---------------------------
|      |          |       |
| left |  centerh | right |
|      |          |       |
---------------------------

element
------------------
|      top       |
------------------
|     centerv    |
------------------
|     bottom     |
------------------

ex) panup.left, tap.right, panright.centerv

Added Properties in event object

Recognizer options

• if position value not null, add position properties in event

Check postion

const POSITION = {
    NONE:               0b000000,
    LEFT:               0b000001,
    RIGHT:              0b000010,
    TOP:                0b000100,
    BOTTOM:             0b001000,
    CENTER_HORIZENTAL:  0b010000,
    CENTER_VERTICAL:    0b100000
}; // src/getPosition.js

hammerInstance.on(event => {
    const { position } = event; // position = (POSITION.LEFT | POSITION.TOP)

    if((centerPosition ^ (POSITION.LEFT | POSITION.TOP)) === 0){
        000101 XOR 000101 = 000000
        is left top
    }

    if(centerPostion & LEFT){
        is contain left bit
    }
});