fix(nav-drawer): bypass all calls to browsers' object, #4426

Author: wnvko

projects/igniteui-angular/src/lib/core/touch.ts

@@ -1,6 +1,6 @@
-import { Inject, Injectable, NgZone } from '@angular/core';
+import { Inject, Injectable, NgZone, PLATFORM_ID } from '@angular/core';
 import { ɵgetDOM as getDOM } from '@angular/platform-browser';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 
 const EVENT_SUFFIX = 'precise';
 
@@ -11,26 +11,31 @@ const EVENT_SUFFIX = 'precise';
  */
 @Injectable()
 export class HammerGesturesManager {
+    private platformBrowser: boolean;
     /**
      * Event option defaults for each recognizer, see http://hammerjs.github.io/api/ for API listing.
      */
-    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-angular/issues/447#issuecomment-324601803
-        inputClass: Hammer.TouchInput,
-        recognizers: [
-            [ Hammer.Pan, { threshold: 0 } ],
-            [ Hammer.Swipe, {
-                direction: Hammer.DIRECTION_HORIZONTAL
-            }],
-            [Hammer.Tap],
-            [Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']]
-        ]
-    };
+    protected hammerOptions: HammerOptions = {};
 
     private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = [];
 
     constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any) {
+        this.platformBrowser = isPlatformBrowser(PLATFORM_ID);
+        if (this.platformBrowser) {
+            this.hammerOptions = {
+                // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065)
+                // see https://github.com/IgniteUI/igniteui-angular/issues/447#issuecomment-324601803
+                inputClass: Hammer.TouchInput,
+                recognizers: [
+                    [Hammer.Pan, { threshold: 0 }],
+                    [Hammer.Swipe, {
+                        direction: Hammer.DIRECTION_HORIZONTAL
+                    }],
+                    [Hammer.Tap],
+                    [Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']]
+                ]
+            };
+        }
     }
 
     public supports(eventName: string): boolean {
@@ -41,10 +46,14 @@ export class HammerGesturesManager {
      * Add listener extended with options for Hammer.js. Will use defaults if none are provided.
      * Modeling after other event plugins for easy future modifications.
      */
-    public addEventListener(element: HTMLElement,
-                            eventName: string,
-                            eventHandler: (eventObj) => void,
-                            options: HammerOptions = null): () => void {
+    public addEventListener(
+        element: HTMLElement,
+        eventName: string,
+        eventHandler: (eventObj) => void,
+        options: HammerOptions = null): () => void {
+        if (!this.platformBrowser) {
+            return;
+        }
 
         // Creating the manager bind events, must be done outside of angular
         return this._zone.runOutsideAngular(() => {
@@ -67,6 +76,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 {
+        if (!this.platformBrowser) {
+            return;
+        }
+
         const element = this.getGlobalEventTarget(target);
 
         // Creating the manager bind events, must be done outside of angular

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts

@@ -14,14 +14,15 @@ import {
     Output,
     Renderer,
     SimpleChange,
-    TemplateRef,
-    ViewChild
+    ViewChild,
+    PLATFORM_ID
 } from '@angular/core';
 import { fromEvent, interval, Subscription } from 'rxjs';
 import { debounce } from 'rxjs/operators';
 import { IgxNavigationService, IToggleView } from '../core/navigation';
 import { HammerGesturesManager } from '../core/touch';
 import { IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective } from './navigation-drawer.directives';
+import { isPlatformBrowser } from '@angular/common';
 
 let NEXT_ID = 0;
 /**
@@ -595,18 +596,26 @@ export class IgxNavigationDrawerComponent implements
     }
 
     private getWindowWidth() {
+        if (!isPlatformBrowser(PLATFORM_ID)) {
+            return;
+        }
+
         return (window.innerWidth > 0) ? window.innerWidth : screen.width;
     }
 
     /**
      * Sets the drawer width.
      */
     private setDrawerWidth(width: string) {
-        requestAnimationFrame(() => {
-            if (this.drawer) {
-                this.renderer.setElementStyle(this.drawer, 'width', width);
-            }
-        });
+        if (isPlatformBrowser(PLATFORM_ID)) {
+            requestAnimationFrame(() => {
+                if (this.drawer) {
+                    this.renderer.setElementStyle(this.drawer, 'width', width);
+                }
+            });
+        } else {
+            this.renderer.setElementStyle(this.drawer, 'width', width);
+        }
     }
 
     /**
@@ -632,7 +641,7 @@ export class IgxNavigationDrawerComponent implements
             this._touchManager.addGlobalEventListener('document', 'panmove', this.pan);
             this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd);
         }
-        if (!this._resizeObserver) {
+        if (!this._resizeObserver && isPlatformBrowser(PLATFORM_ID)) {
             this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150)))
                 .subscribe((value) => {
                     this.checkPinThreshold(value);
@@ -788,19 +797,27 @@ export class IgxNavigationDrawerComponent implements
      * @param opacity optional value to apply to the overlay
      */
     private setXSize(x: number, opacity?: string) {
-        // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO)
-        window.requestAnimationFrame(() => {
-            if (this.hasAnimateWidth) {
-                this.renderer.setElementStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : '');
-            } else {
-                this.renderer.setElementStyle(this.drawer, 'transform', x ? 'translate3d(' + x + 'px,0,0)' : '');
-                this.renderer.setElementStyle(this.drawer, '-webkit-transform',
-                    x ? 'translate3d(' + x + 'px,0,0)' : '');
-            }
-            if (opacity !== undefined) {
-                this.renderer.setElementStyle(this.overlay, 'opacity', opacity);
-            }
-        });
+        if (isPlatformBrowser(PLATFORM_ID)) {
+            // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO)
+            window.requestAnimationFrame(() => {
+                this.setXSizeInternal(x, opacity);
+            });
+        } else {
+            this.setXSizeInternal(x, opacity);
+        }
+    }
+
+    private setXSizeInternal(x: number, opacity?: string) {
+        if (this.hasAnimateWidth) {
+            this.renderer.setElementStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : '');
+        } else {
+            this.renderer.setElementStyle(this.drawer, 'transform', x ? 'translate3d(' + x + 'px,0,0)' : '');
+            this.renderer.setElementStyle(this.drawer, '-webkit-transform',
+                x ? 'translate3d(' + x + 'px,0,0)' : '');
+        }
+        if (opacity !== undefined) {
+            this.renderer.setElementStyle(this.overlay, 'opacity', opacity);
+        }
     }
 
     private toggleOpenedEvent = (evt?) => {