fix(nav-drawer): move isPlatformBrowser to util, #4426

Author: wnvko

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

@@ -1,6 +1,7 @@
-import { Inject, Injectable, NgZone, PLATFORM_ID } from '@angular/core';
+import { Inject, Injectable, NgZone } from '@angular/core';
 import { ɵgetDOM as getDOM } from '@angular/platform-browser';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT } from '@angular/common';
+import { PlatformUtil } from './utils';
 
 const EVENT_SUFFIX = 'precise';
 
@@ -19,8 +20,8 @@ export class HammerGesturesManager {
 
     private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = [];
 
-    constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any) {
-        this.platformBrowser = isPlatformBrowser(PLATFORM_ID);
+    constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any, private platformUtil: PlatformUtil) {
+        this.platformBrowser = this.platformUtil.isPlatformBrowser();
         if (this.platformBrowser) {
             this.hammerOptions = {
                 // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065)

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

@@ -1,3 +1,6 @@
+import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
 /**
  *@hidden
  */
@@ -230,11 +233,22 @@ export function isFirefox(): boolean {
  * @hidden
  * TODO: make injectable, check isPlatformBrowser()
  */
+@Injectable({ providedIn: 'root' })
 export class PlatformUtil {
-    static isIOS(): boolean {
-        const iosBrowser = typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
+    private platformBrowser: boolean;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: Object) {
+        this.platformBrowser = isPlatformBrowser(this.platformId);
+    }
+
+    public isIOS(): boolean {
+        const iosBrowser = this.platformBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
         return iosBrowser;
     }
+
+    public isPlatformBrowser(): boolean {
+        return this.platformBrowser;
+    }
 }
 
 /**
@@ -246,8 +260,21 @@ export function isLeftClick(event: PointerEvent) {
 
 /** @hidden */
 export function isNavigationKey(key: string): boolean {
-    return ['down', 'up', 'left', 'right', 'arrowdown', 'arrowup', 'arrowleft', 'arrowright',
-        'home', 'end', 'space', 'spacebar', ' '].indexOf(key) !== -1;
+    return [
+        'down',
+        'up',
+        'left',
+        'right',
+        'arrowdown',
+        'arrowup',
+        'arrowleft',
+        'arrowright',
+        'home',
+        'end',
+        'space',
+        'spacebar',
+        ' '
+    ].indexOf(key) !== -1;
 }
 
 /**
@@ -285,8 +312,21 @@ export interface CancelableBrowserEventArgs extends CancelableEventArgs {
     event?: Event;
 }
 
-export const NAVIGATION_KEYS = new Set(['down', 'up', 'left', 'right', 'arrowdown', 'arrowup', 'arrowleft', 'arrowright',
-                                'home', 'end', 'space', 'spacebar', ' ']);
+export const NAVIGATION_KEYS = new Set([
+    'down',
+    'up',
+    'left',
+    'right',
+    'arrowdown',
+    'arrowup',
+    'arrowleft',
+    'arrowright',
+    'home',
+    'end',
+    'space',
+    'spacebar',
+    ' '
+]);
 export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
 export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
 export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'tab', 'enter', 'f2', 'escape', 'esc']);

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -555,7 +555,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         public cdr: ChangeDetectorRef,
         private element: ElementRef,
         protected zone: NgZone,
-        private touchManager: HammerGesturesManager) { }
+        private touchManager: HammerGesturesManager,
+        protected platformUtil: PlatformUtil) { }
 
     private addPointerListeners(selection) {
         if (selection !== GridSelectionMode.multiple) { return; }
@@ -587,7 +588,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
                 this.nativeElement.addEventListener('compositionend', this.compositionEndHandler);
             }
         });
-        if (PlatformUtil.isIOS()) {
+        if (this.platformUtil.isIOS()) {
             this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, {
                 cssProps: { } /* don't disable user-select, etc */
             } as HammerOptions);

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts

@@ -6,6 +6,7 @@ import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
 // import { IgxHierarchicalSelectionAPIService } from './selection';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-selection';
 import { HammerGesturesManager } from '../../core/touch';
+import { PlatformUtil } from '../../core/utils';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27,9 +28,10 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple
         public cdr: ChangeDetectorRef,
         private helement: ElementRef,
         protected zone: NgZone,
-        touchManager: HammerGesturesManager
+        touchManager: HammerGesturesManager,
+        protected platformUtil: PlatformUtil
         ) {
-            super(selectionService, crudService, gridAPI, cdr, helement, zone, touchManager);
+            super(selectionService, crudService, gridAPI, cdr, helement, zone, touchManager, platformUtil);
             // this.hSelection = <IgxHierarchicalSelectionAPIService>selection;
          }
 

projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts

@@ -3,7 +3,7 @@ import { Component, ChangeDetectorRef, ElementRef, ViewChild, Inject,
 import { IgxGridCellComponent } from '../cell.component';
 import { IgxTreeGridAPIService } from './tree-grid-api.service';
 import { GridBaseAPIService } from '../api.service';
-import { getNodeSizeViaRange } from '../../core/utils';
+import { getNodeSizeViaRange, PlatformUtil } from '../../core/utils';
 import { DOCUMENT } from '@angular/common';
 import { IgxGridBaseComponent, IGridDataBindable } from '../grid';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-selection';
@@ -26,8 +26,9 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent implements On
                 element: ElementRef,
                 protected zone: NgZone,
                 touchManager: HammerGesturesManager,
-                @Inject(DOCUMENT) public document) {
-        super(selectionService, crudService, gridAPI, cdr, element, zone, touchManager);
+                @Inject(DOCUMENT) public document,
+                protected platformUtil: PlatformUtil) {
+        super(selectionService, crudService, gridAPI, cdr, element, zone, touchManager, platformUtil);
         this.treeGridAPI = <IgxTreeGridAPIService>gridAPI;
     }
 

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

@@ -14,15 +14,14 @@ import {
     Output,
     Renderer,
     SimpleChange,
-    ViewChild,
-    PLATFORM_ID
+    ViewChild
 } 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';
+import { PlatformUtil } from '../core/utils';
 
 let NEXT_ID = 0;
 /**
@@ -419,7 +418,8 @@ export class IgxNavigationDrawerComponent implements
         @Optional() private _state: IgxNavigationService,
         // private animate: AnimationBuilder, TODO
         protected renderer: Renderer,
-        private _touchManager: HammerGesturesManager) {
+        private _touchManager: HammerGesturesManager,
+        private platformUtil: PlatformUtil) {
     }
 
     /**
@@ -614,7 +614,7 @@ export class IgxNavigationDrawerComponent implements
     }
 
     private getWindowWidth() {
-        if (!isPlatformBrowser(PLATFORM_ID)) {
+        if (!this.platformUtil.isPlatformBrowser()) {
             return;
         }
 
@@ -625,7 +625,7 @@ export class IgxNavigationDrawerComponent implements
      * Sets the drawer width.
      */
     private setDrawerWidth(width: string) {
-        if (isPlatformBrowser(PLATFORM_ID)) {
+        if (this.platformUtil.isPlatformBrowser()) {
             requestAnimationFrame(() => {
                 if (this.drawer) {
                     this.renderer.setElementStyle(this.drawer, 'width', width);
@@ -659,7 +659,7 @@ export class IgxNavigationDrawerComponent implements
             this._touchManager.addGlobalEventListener('document', 'panmove', this.pan);
             this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd);
         }
-        if (!this._resizeObserver && isPlatformBrowser(PLATFORM_ID)) {
+        if (!this._resizeObserver && this.platformUtil.isPlatformBrowser()) {
             this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150)))
                 .subscribe((value) => {
                     this.checkPinThreshold(value);
@@ -815,7 +815,7 @@ export class IgxNavigationDrawerComponent implements
      * @param opacity optional value to apply to the overlay
      */
     private setXSize(x: number, opacity?: string) {
-        if (isPlatformBrowser(PLATFORM_ID)) {
+        if (this.platformUtil.isPlatformBrowser()) {
             // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO)
             window.requestAnimationFrame(() => {
                 this.setXSizeInternal(x, opacity);