pdb_ng2 - Overriding Default Bootstrap Providers (Hammer.js Setup)

[sjova]

In my NG2 app I need ability to override HammerGesturesPlugin and HammerGestureConfig providers.

By default angular load this providers from here (loaded automatically by bootstrap): https://github.com/angular/angular/blob/master/modules/%40angular/platform-browser/src/browser.ts#L52 https://github.com/angular/angular/blob/master/modules/%40angular/platform-browser/src/browser.ts#L53

And in my app I'm overriding Hammer.js providers like this:

import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser/src/dom/events/event_manager';
import {HAMMER_GESTURE_CONFIG, HammerGestureConfig, HammerGesturesPlugin} from './hammer-custom';

bootstrap(MyApp, [
    { provide: EVENT_MANAGER_PLUGINS, useClass: HammerGesturesPlugin, multi: true },
    { provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig },
])
.catch(err => console.error(err));

I think above setup is only way to do this without hacks. Also I tested above setup with this version of angular 2.0.0-rc.1 (2016-05-03) and works fine.

And here is my hammer-custom.ts

// This file is based on:
// "@angular/platform-browser/src/dom/events/hammer_gestures.ts".
//
// Few more related files:
// "@angular/platform-browser/src/browser.ts"
// "@angular/platform-browser/src/dom/events/hammer_common.ts"


declare var Hammer: any;

import {Inject, Injectable, OpaqueToken} from '@angular/core';

import {BaseException} from '@angular/common/src/facade/exceptions';
import {isPresent} from '@angular/common/src/facade/lang';

import {HammerGesturesPluginCommon} from '@angular/platform-browser/src/dom/events/hammer_common';

export const HAMMER_GESTURE_CONFIG: OpaqueToken = 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 {
    console.log('HammerGestureConfig.buildHammer()'); // dev

    // var mc = new Hammer(element); // initial setup
    var mc = new Hammer(element, {
      touchAction: 'auto'
    });


    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) && !this.isCustomEvent(eventName)) return false;

    if (!isPresent((window as any /** TODO #???? */)['Hammer'])) {
      throw new BaseException(`Hammer.js is not loaded, can not bind ${eventName} event`);
    }

    return true;
  }

  addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
    var zone = this.manager.getZone();
    eventName = eventName.toLowerCase();

    return zone.runOutsideAngular(() => {
      // Creating the manager bind events, must be done outside of angular
      var mc = this._config.buildHammer(element);
      var callback = function(eventObj: any /** TODO #???? */) {
        zone.runGuarded(function() { handler(eventObj); });
      };
      mc.on(eventName, callback);
      return () => { mc.off(eventName, callback); };
    });
  }

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

Basically I override only this line: https://github.com/angular/angular/blob/master/modules/%40angular/platform-browser/src/dom/events/hammer_gestures.ts#L22

---

Can you give me some directions how I can do this in pdb_ng2 module? I tried few things but without success.

I tried to add above providers here: https://github.com/mrjmd/pdb/blob/8.x-1.x/modules/pdb_ng2/assets/app/app.ts#L24 https://github.com/mrjmd/pdb/blob/8.x-1.x/modules/pdb_ng2/assets/classes/global-providers.ts#L40 but that setup doesn't work on my side.