Skip to content

feat(gestures): allow override of Hammer defaults #7924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kara wants to merge 1 commit into from
Closed

feat(gestures): allow override of Hammer defaults #7924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions modules/angular2/src/platform/browser_common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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.
Expand Down Expand Up @@ -77,6 +82,7 @@ export const BROWSER_APP_COMMON_PROVIDERS: Array<any /*Type | Provider | any[]*/
new Provider(EVENT_MANAGER_PLUGINS, {useClass: DomEventsPlugin, multi: true}),
new Provider(EVENT_MANAGER_PLUGINS, {useClass: KeyEventsPlugin, multi: true}),
new Provider(EVENT_MANAGER_PLUGINS, {useClass: HammerGesturesPlugin, multi: true}),
new Provider(HAMMER_GESTURE_CONFIG, {useClass: HammerGestureConfig}),
new Provider(DomRootRenderer, {useClass: DomRootRenderer_}),
new Provider(RootRenderer, {useExisting: DomRootRenderer}),
new Provider(SharedStylesHost, {useExisting: DomSharedStylesHost}),
Expand Down
46 changes: 34 additions & 12 deletions modules/angular2/src/platform/dom/events/hammer_gestures.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,42 @@ library angular.events;
import 'dart:html';
import './hammer_common.dart';
import 'package:angular2/src/facade/exceptions.dart' show BaseException;
import "package:angular2/src/core/di.dart" show Injectable;
import "package:angular2/src/core/di.dart" show Injectable, Inject, OpaqueToken;

import 'dart:js' as js;

const OpaqueToken HAMMER_GESTURE_CONFIG = const OpaqueToken("HammerGestureConfig");

overrideDefault(js.JsObject mc, String eventName, Object config) {
var jsObj = mc.callMethod('get', [eventName]);
jsObj.callMethod('set', [
new js.JsObject.jsify(config)
]);
}

@Injectable()
class HammerGestureConfig {
List<String> 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(
Expand All @@ -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,
Expand All @@ -48,6 +67,9 @@ class HammerGesturesPlugin extends HammerGesturesPluginCommon {
]);
});
}

isCustomEvent(String eventName) { return this._config.events.indexOf(eventName) > -1; }

}

class HammerEvent {
Expand Down
44 changes: 37 additions & 7 deletions modules/angular2/src/platform/dom/events/hammer_gestures.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`);
Expand All @@ -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; }
}
2 changes: 2 additions & 0 deletions modules/angular2/src/platform/worker_render_common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"));

Expand Down Expand Up @@ -77,6 +78,7 @@ export const WORKER_RENDER_APPLICATION_COMMON: Array<any /*Type | Provider | any
new Provider(EVENT_MANAGER_PLUGINS, {useClass: DomEventsPlugin, multi: true}),
new Provider(EVENT_MANAGER_PLUGINS, {useClass: KeyEventsPlugin, multi: true}),
new Provider(EVENT_MANAGER_PLUGINS, {useClass: HammerGesturesPlugin, multi: true}),
new Provider(HAMMER_GESTURE_CONFIG, {useClass: HammerGestureConfig}),
new Provider(DomRootRenderer, {useClass: DomRootRenderer_}),
new Provider(RootRenderer, {useExisting: DomRootRenderer}),
new Provider(SharedStylesHost, {useExisting: DomSharedStylesHost}),
Expand Down