Merge pull request #460 from damyanpetev/navdrawer-updates

Navdrawer updates for #447

src/core/navigation/directives.ts

@@ -12,7 +12,8 @@ export class NavigationToggle {
         this.state = nav;
     }
 
-    @HostListener("click") public toggleNavigationDrawer() {
+    @HostListener("click")
+    public toggleNavigationDrawer() {
         this.state.toggle(this.target, true);
     }
 }
@@ -28,7 +29,8 @@ export class NavigationClose {
         this.state = nav;
     }
 
-    @HostListener("click") public closeNavigationDrawer() {
+    @HostListener("click")
+    public closeNavigationDrawer() {
         this.state.close(this.target, true);
     }
 }

src/core/touch.ts

@@ -1,5 +1,5 @@
-import {Injectable, NgZone} from "@angular/core";
-import { forEach } from "@angular/router/src/utils/collection";
+import { Inject, Injectable, NgZone } from "@angular/core";
+import { DOCUMENT, ɵgetDOM as getDOM } from "@angular/platform-browser";
 
 const EVENT_SUFFIX: string = "precise";
 
@@ -12,27 +12,23 @@ export class HammerGesturesManager {
     /**
      * Event option defaults for each recognizer, see http://hammerjs.github.io/api/ for API listing.
      */
-    protected hammerOptions: any[] = [
-        {
-            name: "pan",
-            options: {
-                threshold: 0
-            }
-        }, {
-            name: "pinch",
-            options: {
-                enable: true
-            }
-        }, {
-            name: "rotate",
-            options: {
-                enable: true
-            }
-        }];
+    protected hammerOptions: HammerOptions = {
+        // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065)
+        // see https://github.com/IgniteUI/igniteui-js-blocks/issues/447#issuecomment-324601803
+        inputClass: Hammer.TouchInput,
+        recognizers: [
+            [ Hammer.Pan, { threshold: 0 } ],
+            [ Hammer.Pinch, { enable: true } ],
+            [ Hammer.Rotate, { enable: true } ],
+            [ Hammer.Swipe, {
+                direction: Hammer.DIRECTION_HORIZONTAL
+            }]
+        ]
+    };
 
     private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = [];
 
-    constructor(private _zone: NgZone) {
+    constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any) {
     }
 
     public supports(eventName: string): boolean {
@@ -51,10 +47,8 @@ export class HammerGesturesManager {
         // Creating the manager bind events, must be done outside of angular
         return this._zone.runOutsideAngular(() => {
             // new Hammer is a shortcut for Manager with defaults
-            const mc = new Hammer(element);
-            for (const item of this.hammerOptions) {
-                mc.get(item.name).set(item.options);
-            }
+            const mc = new Hammer(element, this.hammerOptions);
+            this.addManagerForElement(element, mc);
             const handler = (eventObj) => { this._zone.run(() => { eventHandler(eventObj); }); };
             mc.on(eventName, handler);
             return () => { mc.off(eventName, handler); };
@@ -68,38 +62,10 @@ export class HammerGesturesManager {
      * @param target Can be one of either window, body or document(fallback default).
      */
     public addGlobalEventListener(target: string, eventName: string, eventHandler: (eventObj) => void): () => void {
-        const element = this.getGlobalEventTarget(target);
+        const element = getDOM().getGlobalEventTarget(this.doc, target);
 
         // Creating the manager bind events, must be done outside of angular
-        return this._zone.runOutsideAngular(() => {
-            // new Hammer is a shortcut for Manager with defaults
-
-            const mc: HammerManager = new Hammer(element as HTMLElement);
-            this.addManagerForElement(element as HTMLElement, mc);
-
-            for (const item of this.hammerOptions) {
-                mc.get(item.name).set(item.options);
-            }
-            const handler = (eventObj) => {
-                this._zone.run(() => {
-                    eventHandler(eventObj);
-                });
-            };
-            mc.on(eventName, handler);
-            return () => { mc.off(eventName, handler); };
-        });
-    }
-
-    /** temp replacement for DOM.getGlobalEventTarget(target) because DI won't play nice for now */
-    public getGlobalEventTarget(target: string): EventTarget {
-        switch (target) {
-            case "window":
-                return window;
-            case "body":
-                return document.body;
-            default:
-                return document;
-        }
+        return this.addEventListener(element as HTMLElement, eventName, eventHandler);
     }
 
     /**

src/navigation-drawer/navigation-drawer.component.spec.ts

@@ -233,7 +233,7 @@ describe("Navigation Drawer", () => {
                 return swipe(document.body, 10, 10, 150, 250, 0);
             })
             .then(() => {
-                expect(fixture.componentInstance.viewChild.isOpen).toEqual(true);
+                expect(fixture.componentInstance.viewChild.isOpen).toEqual(true, "Should accept edge swipe");
                 return swipe(document.body, 180, 10, 150, -180, 0);
             })
             .then(() => {
@@ -370,6 +370,8 @@ describe("Navigation Drawer", () => {
             };
 
             return new Promise((resolve, reject) => {
+                // force touch (https://github.com/hammerjs/hammer.js/issues/1065)
+                Simulator.setType("touch");
                 Simulator.gestures.swipe(element, swipeOptions, () => {
                     resolve();
                 });
@@ -385,6 +387,8 @@ describe("Navigation Drawer", () => {
             };
 
             return new Promise((resolve, reject) => {
+                // force touch (https://github.com/hammerjs/hammer.js/issues/1065)
+                Simulator.setType("touch");
                 Simulator.gestures.pan(element, swipeOptions, () => {
                     resolve();
                 });

src/navigation-drawer/navigation-drawer.component.ts

@@ -100,7 +100,7 @@ export class NavigationDrawer extends BaseComponent implements IToggleView,
     @Output() public closed = new EventEmitter();
 
     private _hasMimiTempl: boolean = false;
-    private _swipeAttached: boolean = false;
+    private _gesturesAttached: boolean = false;
     private _widthCache: { width: number, miniWidth: number } = { width: null, miniWidth: null };
     private css: { [name: string]: string; } = {
         drawer: "ig-nav-drawer",
@@ -203,7 +203,7 @@ export class NavigationDrawer extends BaseComponent implements IToggleView,
         // wait for template and ng-content to be ready
         this._hasMimiTempl = this.getChild(this.css.miniProjection) !== null;
         this.updateEdgeZone();
-        if (this.pinThreshold && this.getWindowWidth() > this.pinThreshold) {
+        if (this.pinThreshold && this.getWindowWidth() >= this.pinThreshold) {
             this.pin = true;
         }
 
@@ -232,6 +232,7 @@ export class NavigationDrawer extends BaseComponent implements IToggleView,
             this.ensureDrawerHeight();
             if (this.pin) {
                 this._touchManager.destroy();
+                this._gesturesAttached = false;
             } else {
                 this.ensureEvents();
             }
@@ -406,13 +407,13 @@ export class NavigationDrawer extends BaseComponent implements IToggleView,
 
     private ensureEvents() {
         // set listeners for swipe/pan only if needed, but just once
-        if (this.enableGestures && !this.pin && !this._swipeAttached) {
+        if (this.enableGestures && !this.pin && !this._gesturesAttached) {
             // Built-in manager handler(L20887) causes endless loop and max stack exception.
             // https://github.com/angular/angular/issues/6993
             // Use ours for now (until beta.10):
             // this.renderer.listen(document, "swipe", this.swipe);
             this._touchManager.addGlobalEventListener("document", "swipe", this.swipe);
-            this._swipeAttached = true;
+            this._gesturesAttached = true;
 
             // this.renderer.listen(document, "panstart", this.panstart);
             // this.renderer.listen(document, "pan", this.pan);