Merge pull request #128 from lupestro/feature/recognize-gesture-modifier

feature(modifier): Add recognize-gesture modifier

Author: eriktrom

CHANGELOG.md

@@ -1,6 +1,11 @@
 Changelog
 ---------
 
+## v2.0.0
+
+- [#129](https://github.com/html-next/ember-gestures/pull/129) [BREAKING] Set minimum node version to 8.x and bump to most recent qunit and ember-cli-babel 7 *by [Lupestro](https://github.com/lupestro)*
+- [#128](https://github.com/html-next/ember-gestures/pull/128) Added {recognize-gesture} modifier as alternative to mixin. Modifier requires Ember 2.18 or later to use. *by [Lupestro](https://github.com/lupestro)*
+   
 ## v1.1.3
 
 - update yarn.lock *by [html-next](https://github.com/html-next)*

README.md

@@ -83,6 +83,21 @@ warned `pinch` `rotate` `pan` and `swipe` can break scrolling behavior if not pl
 `pan` and `swipe` are horizontal only (configured this way to avoid breaking vertical scroll).
 `vertical-pan` and `vertical-swipe` are vertical only (configured this way to avoid breaking horizontal scroll).
 
+##### Modifier
+As an alternative to using the `RecognizerMixin`, you may use the `{{recognize-gesture}}` modifier. This is particularly useful when you are applying the recognizer to an element within the handlebars of your component, rather than to the root element of a component, and vital when your component _has_ no root element, as when you use Glimmer components or components with `tagName=""`.
+
+Example
+```hbs
+<div {{recognize-gesture "pan" "tap" "press" }}>
+```
+Gestures to recognize are supplied using positional parameters on the modifier. Hammer manager options can be supplied using named parameters on the modifier.
+
+When using `{{ember-on-modifier}}` with these events, you must use the real DOM event names, which are lowercase without hyphens. So your event for "double-tap" would be "doubletap". 
+
+Also, if you are using objects derived from `EmberObject`, like Ember components, avoid using action names that are the camel-case form of the gesture names, like `doubleTap`, as these are also the names for the component's generated event listeners, and may get unexpectedly triggered when an event bubbles up to the component as well as when your `{{on}}` action fires on the element. (This is one more reason to migrate to Glimmer components, which don't automatically add event handlers to your namespace.) 
+
+The modifier can only be used with Ember 2.18 or later.
+
 #### Using Gestures
 
 Using gestures emitted by Hammer recognizers with Ember is almost like using any other event with Ember.

addon/modifiers/recognize-gesture.js

@@ -0,0 +1,55 @@
+
+import Modifier from 'ember-class-based-modifier';
+import { getOwner } from '@ember/application';
+
+export default class RecognizeGestureModifier extends Modifier {
+
+    constructor() {
+        super(...arguments);
+        this.recognizers = null;
+        this.manager = null;
+        this.gestures = getOwner(this).lookup('service:-gestures');
+
+        if (this.args.positional) {
+            this.recognizers = this.gestures.retrieve(this.args.positional);
+        }
+        this.managerOptions = (this.args.named && (Object.keys(this.args.named).length > 0)) ? Object.assign({}, this.args.named) : { domEvents: true };
+        this.managerOptions.useCapture = this.gestures.useCapture;
+
+    }
+
+    didInstall() {
+        if (!this.recognizers) return;
+        this.element.style['touch-action'] = 'manipulation';
+        this.element.style['-ms-touch-action'] = 'manipulation'; 
+        this.recognizers.then ( (recognizers) => {
+            if (this.isDestroyed) return;
+            this.sortRecognizers(recognizers);
+            this.manager = new Hammer.Manager(this.element, this.managerOptions);
+            recognizers.forEach((recognizer) => { this.manager.add(recognizer); });        
+        });
+    }
+
+    willRemove() {
+        this.manager.destroy();
+        this.manager = null;
+    }
+
+    // Move each recognizer after all recognizers it excludes in the list - why?
+    sortRecognizers(recognizers) { 
+        for (let i = 0; i < recognizers.length; i++) {
+            const r = recognizers[i];
+            let currentIndex = i;
+            if (r.exclude.length) {  
+                for (let j = 0; j < r.exclude.length; j++) {
+                    const newIndex = recognizers.indexOf(r.exclude[j]);
+                    if (newIndex > 0 && currentIndex < newIndex) {
+                        recognizers.splice(currentIndex, 1);
+                        recognizers.splice(newIndex, 0, r);
+                        currentIndex = newIndex;
+                    }
+                }
+            }
+        }
+    }
+}

app/modifiers/recognize-gesture.js

@@ -0,0 +1 @@
+export { default } from 'ember-gestures/modifiers/recognize-gesture';

config/dependency-lint.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+    //generateTests: false
+};

package.json

@@ -44,6 +44,7 @@
     "broccoli-funnel": "^2.0.2",
     "broccoli-merge-trees": "^3.0.2",
     "ember-cli-babel": "^7.7.0",
+    "ember-class-based-modifier": "^0.10.0",
     "ember-cli-htmlbars": "^2.0.1",
     "ember-cli-version-checker": "^2.1.0",
     "ember-copy": "^1.0.0",
@@ -55,6 +56,7 @@
     "broccoli-asset-rev": "^2.4.5",
     "ember-cli": "~3.1.2",
     "ember-cli-dependency-checker": "^2.0.0",
+    "ember-cli-dependency-lint": "^1.1.3",
     "ember-cli-eslint": "^4.2.1",
     "ember-cli-htmlbars-inline-precompile": "^1.0.0",
     "ember-cli-inject-live-reload": "^1.4.1",
@@ -69,6 +71,7 @@
     "ember-hammertime": "^1.2.3",
     "ember-load-initializers": "^1.0.0",
     "ember-maybe-import-regenerator": "^0.1.6",
+    "ember-on-modifier": "1.0.0",
     "ember-resolver": "^4.0.0",
     "ember-source": "~3.1.0",
     "ember-source-channel-url": "^1.0.1",

tests/dummy/app/components/single-and-double-tap-modifier.js

@@ -0,0 +1,31 @@
+import Component from '@ember/component';
+import { run } from '@ember/runloop';
+import layout from '../templates/components/recognizes-single-and-double-tap';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+  sawSingle: false,
+  sawDouble: false,
+
+  reset: function () {
+    if (!this.get('isDestroyed')) {
+      this.set('sawSingle', false);
+      this.set('sawDouble', false);
+    }
+  },
+
+  actions: {
+    doTap: function() {
+      this.set('sawSingle', true);
+      run.debounce(this, this.reset, 1000);
+    },
+  
+    doDoubleTap: function() {
+      this.set('sawDouble', true);
+      run.debounce(this, this.reset, 1000);
+    } 
+  
+  }
+
+});

tests/dummy/app/router.js

@@ -8,6 +8,7 @@ const Router = EmberRouter.extend({
 
 Router.map(function() {
   this.route('taps');
+  this.route('modtaps');
 });
 
 export default Router;

tests/dummy/app/routes/modtaps.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+    init: function() {
+        this._super(...arguments);
+      }    
+});

tests/dummy/app/templates/components/single-and-double-tap-modifier.hbs

@@ -0,0 +1,15 @@
+<div 
+    {{recognize-gesture "tap" "double-tap"}}
+    {{on "tap" (action "doTap") }}
+    {{on "doubletap" (action "doDoubleTap") }}
+>
+    <span>Tap on me once or twice (implemented with modifier).</span>
+
+    {{#if sawSingle}}
+    I saw a single-tap.
+    {{/if}}
+
+    {{#if sawDouble}}
+    I saw a double-tap.
+    {{/if}}
+</div>

tests/dummy/app/templates/index.hbs

@@ -1,4 +1,5 @@
 <h2>Demos index</h2>
 <ol>
   <li>{{#link-to "taps"}}taps{{/link-to}}</li>
+  <li>{{#link-to "modtaps"}}taps (w/Modifiers){{/link-to}}</li>
 </ol>

tests/dummy/app/templates/modtaps.hbs

@@ -0,0 +1,9 @@
+<div>{{#link-to "index"}}back to index{{/link-to}}</div>
+
+<h2>Taps tests (with modifiers)</h2>
+<ol>
+  <li>{{single-and-double-tap-modifier}}</li>
+  <li>{{traditional-click}}</li>
+</ol>
+
+