From 6cbf99086e8fa2a08d3c1eae80e581e951eab1ce Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Thu, 7 Apr 2016 11:57:49 -0700 Subject: [PATCH] feat(gestures): allow override of Hammer default configuration Closes #7924 --- .../angular2/src/platform/browser_common.ts | 6 +++ .../platform/dom/events/hammer_gestures.dart | 46 ++++++++++++++----- .../platform/dom/events/hammer_gestures.ts | 44 +++++++++++++++--- .../src/platform/worker_render_common.ts | 2 + 4 files changed, 79 insertions(+), 19 deletions(-) diff --git a/modules/angular2/src/platform/browser_common.ts b/modules/angular2/src/platform/browser_common.ts index 1dec3414f9..7eae9a1556 100644 --- a/modules/angular2/src/platform/browser_common.ts +++ b/modules/angular2/src/platform/browser_common.ts @@ -30,6 +30,10 @@ import {BrowserDomAdapter} from './browser/browser_adapter'; import {BrowserGetTestability} from 'angular2/src/platform/browser/testability'; import {wtfInit} from 'angular2/src/core/profile/wtf_init'; import {EventManager, EVENT_MANAGER_PLUGINS} from "angular2/src/platform/dom/events/event_manager"; +import { + HAMMER_GESTURE_CONFIG, + HammerGestureConfig +} from 'angular2/src/platform/dom/events/hammer_gestures'; import {ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/common_dom'; export {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens'; export {Title} from 'angular2/src/platform/browser/title'; @@ -41,6 +45,7 @@ export { } from 'angular2/platform/common_dom'; export {BrowserDomAdapter} from './browser/browser_adapter'; export {enableDebugTools, disableDebugTools} from 'angular2/src/platform/browser/tools/tools'; +export {HAMMER_GESTURE_CONFIG, HammerGestureConfig} from './dom/events/hammer_gestures'; /** * A set of providers to initialize the Angular platform in a web browser. @@ -77,6 +82,7 @@ export const BROWSER_APP_COMMON_PROVIDERS: Array events = []; + Map overrides = {}; + + buildHammer(Element element) { + var mc = new js.JsObject(js.context['Hammer'], [element]); + overrideDefault(mc, 'pinch', {'enable': true}); + overrideDefault(mc, 'rotate', {'enable': true}); + this.overrides.forEach((Object config, String eventName) => overrideDefault(mc, eventName, config)); + return mc; + } + +} + @Injectable() class HammerGesturesPlugin extends HammerGesturesPluginCommon { + HammerGestureConfig _config; + + HammerGesturesPlugin(@Inject(HAMMER_GESTURE_CONFIG) this._config) {} + bool supports(String eventName) { - if (!super.supports(eventName)) return false; + if (!super.supports(eventName) && !this.isCustomEvent(eventName)) return false; if (!js.context.hasProperty('Hammer')) { throw new BaseException( @@ -26,16 +54,7 @@ class HammerGesturesPlugin extends HammerGesturesPluginCommon { zone.runOutsideAngular(() { // Creating the manager bind events, must be done outside of angular - var mc = new js.JsObject(js.context['Hammer'], [element]); - - var jsObj = mc.callMethod('get', ['pinch']); - jsObj.callMethod('set', [ - new js.JsObject.jsify({'enable': true}) - ]); - jsObj = mc.callMethod('get', ['rotate']); - jsObj.callMethod('set', [ - new js.JsObject.jsify({'enable': true}) - ]); + var mc = this._config.buildHammer(element); mc.callMethod('on', [ eventName, @@ -48,6 +67,9 @@ class HammerGesturesPlugin extends HammerGesturesPluginCommon { ]); }); } + + isCustomEvent(String eventName) { return this._config.events.indexOf(eventName) > -1; } + } class HammerEvent { diff --git a/modules/angular2/src/platform/dom/events/hammer_gestures.ts b/modules/angular2/src/platform/dom/events/hammer_gestures.ts index a47fb1b576..5fcbb97b6b 100644 --- a/modules/angular2/src/platform/dom/events/hammer_gestures.ts +++ b/modules/angular2/src/platform/dom/events/hammer_gestures.ts @@ -1,12 +1,42 @@ import {HammerGesturesPluginCommon} from './hammer_common'; -import {isPresent} from 'angular2/src/facade/lang'; +import {isPresent, CONST_EXPR} from 'angular2/src/facade/lang'; import {BaseException, WrappedException} from 'angular2/src/facade/exceptions'; -import {Injectable} from 'angular2/src/core/di'; +import {Injectable, Inject, OpaqueToken} from 'angular2/core'; + +export const HAMMER_GESTURE_CONFIG: OpaqueToken = + CONST_EXPR(new OpaqueToken("HammerGestureConfig")); + +export interface HammerInstance { + on(eventName: string, callback: Function): void; + off(eventName: string, callback: Function): void; +} + +@Injectable() +export class HammerGestureConfig { + events: string[] = []; + + overrides: {[key: string]: Object} = {}; + + buildHammer(element: HTMLElement): HammerInstance { + var mc = new Hammer(element); + + mc.get('pinch').set({enable: true}); + mc.get('rotate').set({enable: true}); + + for (let eventName in this.overrides) { + mc.get(eventName).set(this.overrides[eventName]); + } + + return mc; + } +} @Injectable() export class HammerGesturesPlugin extends HammerGesturesPluginCommon { + constructor(@Inject(HAMMER_GESTURE_CONFIG) private _config: HammerGestureConfig) { super(); } + supports(eventName: string): boolean { - if (!super.supports(eventName)) return false; + if (!super.supports(eventName) && !this.isCustomEvent(eventName)) return false; if (!isPresent(window['Hammer'])) { throw new BaseException(`Hammer.js is not loaded, can not bind ${eventName} event`); @@ -19,14 +49,14 @@ export class HammerGesturesPlugin extends HammerGesturesPluginCommon { var zone = this.manager.getZone(); eventName = eventName.toLowerCase(); - return zone.runOutsideAngular(function() { + return zone.runOutsideAngular(() => { // Creating the manager bind events, must be done outside of angular - var mc = new Hammer(element); - mc.get('pinch').set({enable: true}); - mc.get('rotate').set({enable: true}); + var mc = this._config.buildHammer(element); var callback = function(eventObj) { zone.run(function() { handler(eventObj); }); }; mc.on(eventName, callback); return () => { mc.off(eventName, callback); }; }); } + + isCustomEvent(eventName: string): boolean { return this._config.events.indexOf(eventName) > -1; } } diff --git a/modules/angular2/src/platform/worker_render_common.ts b/modules/angular2/src/platform/worker_render_common.ts index e1f4c7c6c2..59360b5335 100644 --- a/modules/angular2/src/platform/worker_render_common.ts +++ b/modules/angular2/src/platform/worker_render_common.ts @@ -48,6 +48,7 @@ import { import {Serializer} from 'angular2/src/web_workers/shared/serializer'; import {ON_WEB_WORKER} from 'angular2/src/web_workers/shared/api'; import {RenderStore} from 'angular2/src/web_workers/shared/render_store'; +import {HAMMER_GESTURE_CONFIG, HammerGestureConfig} from './dom/events/hammer_gestures'; export const WORKER_SCRIPT: OpaqueToken = CONST_EXPR(new OpaqueToken("WebWorkerScript")); @@ -77,6 +78,7 @@ export const WORKER_RENDER_APPLICATION_COMMON: Array