propagating-hammerjs

WebJar for propagating-hammerjs

License

License

MIT
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

propagating-hammerjs
Last Version

Last Version

1.4.6
Release Date

Release Date

Type

Type

jar
Description

Description

propagating-hammerjs
WebJar for propagating-hammerjs
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/josdejong/propagating-hammerjs

Download propagating-hammerjs

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/propagating-hammerjs/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>propagating-hammerjs</artifactId>
    <version>1.4.6</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/propagating-hammerjs/
implementation 'org.webjars.npm:propagating-hammerjs:1.4.6'
// https://jarcasting.com/artifacts/org.webjars.npm/propagating-hammerjs/
implementation ("org.webjars.npm:propagating-hammerjs:1.4.6")
'org.webjars.npm:propagating-hammerjs:jar:1.4.6'
<dependency org="org.webjars.npm" name="propagating-hammerjs" rev="1.4.6">
  <artifact name="propagating-hammerjs" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='propagating-hammerjs', version='1.4.6')
)
libraryDependencies += "org.webjars.npm" % "propagating-hammerjs" % "1.4.6"
[org.webjars.npm/propagating-hammerjs "1.4.6"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm : hammerjs jar [2.0.6,3)

Project Modules

There are no modules declared in this project.

propagating-hammerjs

Extend hammer.js (v2) with event propagation.

We use the @egjs/hammerjs fork because hammer.js is not maintained anymore.

Features

  • Events emitted by hammer will propagate in order from child to parent elements.
  • Events are extended with a function event.stopPropagation() to stop propagation to parent elements.
  • Events are extended with a property event.firstTarget containing the element where a gesture started.
  • Supports changing and rearranging the HTML DOM on the fly.
  • Load via commonjs, AMD, or as a plain old JavaScript file.

Install

npm install @egjs/hammerjs propagating-hammerjs

Load

Browser

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@egjs/hammerjs@latest/dist/hammer.js"></script>
  <script src="https://unpkg.com/propagating-hammerjs@latest/propagating.js"></script>
  <script>
    function init() {
      var hammer = propagating(new Hammer(element));
    }
  </script>
</head>
<body>
</body>
</html>

Commonjs (e.g. Node.js, Browserify)

var Hammer = require('@egjs/hammerjs');
var propagating = require('propagating-hammerjs');

function init() {
  var hammer = propagating(new Hammer(element));
}

ESM (e.g. ES6, typescript)

import Hammer from '@egjs/hammerjs';
import propagating from 'propagating-hammerjs';

function init() {
  const hammer = propagating(new Hammer(element));
}

Use

To extend individual hammer.js instances with event propagation:

var hammer = propagating(new Hammer(element));

To extend the global hammer.js constructor

Hammer = propagating(Hammer);

Examples

Here a basic usage example. More examples are available in the folder /examples.

<!DOCTYPE html>
<html>
<head>
  <script src="node_modules/@egjs/hammerjs/dist/hammer.js"></script>
  <script src="node_muludes/propagating-hammerjs/propagating.js"></script>
  <style>
    div     {border: 1px solid black;}
    #parent {width: 400px; height: 400px; background: lightgreen;}
    #child  {width: 200px; height: 200px; background: yellow; margin: 10px;}
  </style>
</head>
<body>

<div id="parent">
  parent
  <div id="child">
    child
  </div>
</div>

<script>
  var parent = document.getElementById('parent');
  var hammer1 = propagating(new Hammer(parent))
      .on('tap', function (event) {
        alert('tap on parent');
      });

  var child = document.getElementById('child');
  var hammer2 = propagating(new Hammer(child))
      .on('tap', function (event) {
        alert('tap on child');

        // stop propagation from child to parent
        event.stopPropagation();
      });
</script>
</body>
</html>

API

Construction:

propagating(hammer: Hammer.Manager, options?: {
  preventDefault?: true | 'mouse' | 'touch' | 'pen'
}): Hammer.Manager

parameters

  • hammer: Hammer.Manager An hammer instance or the global hammer constructor.

  • options: Object An optional object with options. Available options:

    • preventDefault: true | 'mouse' | 'touch' | 'pen'. Optional. Enforce preventing the default browser behavior. Cannot be set to false.

returns

Returns the same hammer instance with extended functionality.

events

The emitted hammer.js events are extended with:

  • event.stopPropagation()

    If called, the event will not further propagate the elements parents.

  • event.firstTarget

    Contains the HTML element where a gesture started (where as event.target contains the element where the pointer is right now).

Develop

To generate the UMD bundle for commonjs and browser, run:

npm run build

License

MIT

Versions

Version
1.4.6