Socket
Socket
Sign inDemoInstall

ember-gesture-modifiers

Package Overview
Dependencies
540
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-gesture-modifiers

Addon that provides gestures as modifiers.


Version published
Maintainers
1
Weekly downloads
7,134
decreased by-1.52%

Weekly downloads

Readme

Source

ember-gesture-modifiers

Addon that provides gestures as modifiers.

Compatibility

  • Ember.js v3.28 or above
  • Embroider or ember-auto-import v2

Installation

ember install ember-gesture-modifiers

Usage

Currently only a Pan modifier is provided. More gestures will be added in the future.

Pan modifier

<div
  {{did-pan
    onPanStart=this.didPanStart
    onPan=this.didPan
    onPanEnd=this.didPanEnd
  }}
>

arguments

  • onPanStart - hook fired when a pan is started
  • onPan - hook fired when the pan is updated
  • onPanEnd - hook fired when a pan has ended
  • threshold (default: 10) - minimum touch movement needed in px to start a pan
  • axis (default: 'horizontal') - axis for the pan event to be recognized ('horizontal', 'vertical' or 'both')
  • capture (default: false) - whether or not to use capture events instead of bubbling
  • preventScroll (default: true) - whether or not to prevent scroll during panning
  • pointerTypes (default: ['touch']) - the pointer types to support (one or more of 'touch', 'mouse', 'pen')

The hooks are passed a TouchData object which looks like:

{
  originalEvent: <TouchEvent>,
  timeStamp: 2896.435000002384,
  initial: {
    x: 427.87109375,
    y: 276.98046875,
    timeStamp: 2251.9500000053085
  },
  current: {
    deltaX: 0,
    deltaY: 0,
    x: 192.95703125,
    y: 279.12890625,
    distance: 234.92388670364133,
    distanceX: -234.9140625,
    distanceY: 2.1484375,
    angle: 180.52399148917002,
    overallVelocityX: -0.36449888283057935,
    overallVelocityY: 0.0033335725424327154,
    overallVelocity: -0.36449888283057935,
    velocityX: -0.03269026669500546,
    velocityY: 0,
    velocity: -0.03269026669500546
  },
  cache: {
    velocity: {
      distanceX: -234.9140625,
      distanceY: 2.1484375,
      timeStamp: 2613.435000006575
    }
  }
}

Testing

A pan test helper is exposed by the addon.

import { pan } from 'ember-gesture-modifiers/test-support';

...

// arg1: CSS selector on which the pan happens
// arg2: a direction in which the pan should happen. Either 'left', 'right', 'down', 'up' or 'up-right'.
await pan('.my-css-selector', 'right');

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Keywords

FAQs

Last updated on 21 Dec 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc