npm.io
0.1.4 • Published 7 years ago

hammerjs-position

Licence
MIT
Version
0.1.4
Deps
2
Size
160 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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
property type explain
relativeCenter { x: Integer, y: Integer } element에 대한 포인터 중앙 위치
relativeCenterRatio { x: Double, y: Double } element에 대한 포인터 중앙 위치 비율
position Number POSITION BIT
positionNames Array<String> emit되는 이름 리스트
Recognizer options
  • if position value not null, add position properties in event
name type value explain default
position Number undefined, null disable V
Hammer.POSITION_NONE 위치에 대한 이벤트가 발생하지않습니다.(not emit)
Hammer.POSITION_ALL 위치 전체에 대해 이벤트가 각각 발생합니다.(emit all)
Hammer.POSITION_LEFT | Hammer.POSITION_RIGHT ... 해당 위치만 이벤트가 각각 발생합니다.(emit)
positionType Number STATIC_POSITION panstart위치를 기준으로 이벤트가 불립니다.
Only use pan recognizer.		 V
DYNAMIC_POSITION 현재 터치되는 위치를 기준으로 이벤트가 불립니다.
Only use pan recognizer.
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
    }
});