@dreamworld/hammer-events

1.0.2 • Public • Published

hammer-events

A LitElement Mixin used to listen for the hammer events hammerjs.

Usage

Installation

  npm install @dremworld/hammer-events;

  OR

  yarn add @dremworld/hammer-events;

In a lit element

import { hammerEvents } from '@dremworld/hammer-events';

class SampleElement extends hammerEvents(LitElement) {
  constructor() {
    super();

    /**
     * Host element hammer events are bind.
     * Passed event has(event as a key and value as event options).
     * E.g: {'tap': {}, 'swipe': {}}
     */
    this.hammerEvents = {'tap': {}, 'swipe': {}};

    /**
     * Local element hammer events are bind.
     * Passed event has(event as a key and value as a selectors and event options).
     * e.g.: {'tap': {'selectors': ['.loading', '#container', 'paper-button'], options: {}}}
     */
    this.hammerLocalEvents = {'tap': {'selectors': ['.loading']}, 'options': {}};
  }

  //Called super class connectedCallback method because `hammerevents` is bind `connectedCallback` method.
  connectedCallback() {
    super.connectedCallback && super.connectedCallback();

    this.addEventListener('tap', function(e){
      console.log("tap event triggered");
    });
  }

  render() {
    return html`
      <div class="loading" @tap=${this.__onLoadingTap}>
        <div class="test">Loading..</div>
      </div>
    `;
  }

  __onLoadingTap() {
    console.log("tap on loading...");
  }
}
customElements.define('sample-element', SampleElement);

Methods

Name Description
hammerRefresh() Re-bind local element events. It's mainly used If after randered the local dom you can simpy call this method.
hammerDestroy() Destroy hammer events for local eleemnt and also host events.

Readme

Keywords

none

Package Sidebar

Install

npm i @dreamworld/hammer-events

Weekly Downloads

22

Version

1.0.2

License

MIT

Unpacked Size

10.4 kB

Total Files

8

Last publish

Collaborators

  • chiragmoradiya
  • chetang7
  • ajay-dhameliya
  • dw-devops