honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(gestures): allow override of Hammer default configuration 

Closes #7924
This commit is contained in:
Kara Erickson 2016-04-07 11:57:49 -07:00 committed by Kara
parent 26a3390549
commit 6cbf99086e
4 changed files with 79 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/angular2/src/platform/browser_common.ts
View File

@ -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<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}),

46
modules/angular2/src/platform/dom/events/hammer_gestures.dart
View File

@ -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(
@ -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 {

44
modules/angular2/src/platform/dom/events/hammer_gestures.ts
View File

@ -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; }
}

2
modules/angular2/src/platform/worker_render_common.ts
View File

@ -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<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}),