# hammerjs-position

> Add position in event. Position is divided into three(left, right, center)

Latest version **0.1.4** (published 2019-03-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install hammerjs-position
pnpm add hammerjs-position
yarn add hammerjs-position
bun add hammerjs-position
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2019-03-28 |
| First published | 2019-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 159.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | supernovel |
| Maintainers | supernovel |

## Links

- npm: https://www.npmjs.com/package/hammerjs-position
- Repository: https://github.com/supernovel/hamemrjs-position
- Homepage: https://github.com/supernovel/hamemrjs-position#readme
- Issues: https://github.com/supernovel/hamemrjs-position/issues
- npm.io page: https://npm.io/package/hammerjs-position

## Dependencies (2)

- [@egjs/hammerjs](https://npm.io/package/@egjs/hammerjs.md) ^2.0.14
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1

## Recent versions

- 0.1.4 (latest) — 2019-03-28

## README

## Hammerjs-position

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

-   Support Pan, Tap, Swipe, Press Recognizer
-   Depend on [Hammerjs](https://www.npmjs.com/package/@egjs/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위치를 기준으로 이벤트가 불립니다. <br> Only use pan recognizer.       | V       |
|              |        | DYNAMIC_POSITION                                  | 현재 터치되는 위치를 기준으로 이벤트가 불립니다. <br> 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
        }
    });

---
_Source: https://npm.io/package/hammerjs-position · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._