chore(nav-drawer): make isOs and isPlatformBrowser properties, #4426

Also reduce wait in nav-drawer test from 2000 -> 200ms
Also remove unnecessary checks for isPlatformBrowser in
nav-drawer

Author: wnvko

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

@@ -21,7 +21,7 @@ export class HammerGesturesManager {
     private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = [];
 
     constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any, private platformUtil: PlatformUtil) {
-        this.platformBrowser = this.platformUtil.isPlatformBrowser();
+        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

@@ -231,7 +231,6 @@ export function isFirefox(): boolean {
 
 /**
  * @hidden
- * TODO: make injectable, check isPlatformBrowser()
  */
 @Injectable({ providedIn: 'root' })
 export class PlatformUtil {
@@ -241,12 +240,12 @@ export class PlatformUtil {
         this.platformBrowser = isPlatformBrowser(this.platformId);
     }
 
-    public isIOS(): boolean {
+    public get isIOS(): boolean {
         const iosBrowser = this.platformBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
         return iosBrowser;
     }
 
-    public isPlatformBrowser(): boolean {
+    public get isPlatformBrowser(): boolean {
         return this.platformBrowser;
     }
 }

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

@@ -561,7 +561,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
                 this.nativeElement.addEventListener('compositionend', this.compositionEndHandler);
             }
         });
-        if (this.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/grid/cell.spec.ts

@@ -193,15 +193,15 @@ describe('IgxGrid - Cell component', () => {
 
     it('Should not attach doubletap handler for non-iOS', () => {
         const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener');
-        spyOn(PlatformUtil.prototype, 'isIOS').and.returnValue(false);
+        spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(false);
         const fix = TestBed.createComponent(DefaultGridComponent);
         fix.detectChanges();
         expect(addListenerSpy).not.toHaveBeenCalled();
     });
 
     it('Should handle doubletap on iOS, trigger onDoubleClick event', () => {
         const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener');
-        spyOn(PlatformUtil.prototype, 'isIOS').and.returnValue(true);
+        spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(true);
         const fix = TestBed.createComponent(DefaultGridComponent);
         fix.detectChanges();
 

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

@@ -525,7 +525,7 @@ describe('Navigation Drawer', () => {
         window.dispatchEvent(new Event('resize'));
 
         // wait for debounce
-        await wait(2000);
+        await wait(200);
         expect(fixture.componentInstance.navDrawer.pin).toBe(false, `Shouldn't change state on resize if window width is the same`);
         expect(fixture.componentInstance.pin).toBe(true, 'Parent component pin remain on resize if window width is the same');
         fixture.componentInstance.pin = true;
@@ -535,15 +535,15 @@ describe('Navigation Drawer', () => {
         window.dispatchEvent(new Event('resize'));
 
         // wait for debounce
-        await wait(2000);
+        await wait(200);
         expect(fixture.componentInstance.navDrawer.pin).toBe(true, 'Should pin on window resize over threshold');
         expect(fixture.componentInstance.pin).toBe(true, 'Parent pin update on window resize over threshold');
 
         widthSpyOverride.and.returnValue(768);
         window.dispatchEvent(new Event('resize'));
 
         // wait for debounce
-        await wait(2000);
+        await wait(200);
         expect(fixture.componentInstance.navDrawer.pin).toBe(false, 'Should un-pin on window resize below threshold');
         expect(fixture.componentInstance.pin).toBe(false, 'Parent pin update on window resize below threshold');
         fixture.componentInstance.pinThreshold = 500;

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

@@ -596,18 +596,14 @@ export class IgxNavigationDrawerComponent implements
     }
 
     private getWindowWidth() {
-        if (!this.platformUtil.isPlatformBrowser()) {
-            return;
-        }
-
         return (window.innerWidth > 0) ? window.innerWidth : screen.width;
     }
 
     /**
      * Sets the drawer width.
      */
     private setDrawerWidth(width: string) {
-        if (this.platformUtil.isPlatformBrowser()) {
+        if (this.platformUtil.isPlatformBrowser) {
             requestAnimationFrame(() => {
                 if (this.drawer) {
                     this.renderer.setElementStyle(this.drawer, 'width', width);
@@ -641,7 +637,7 @@ export class IgxNavigationDrawerComponent implements
             this._touchManager.addGlobalEventListener('document', 'panmove', this.pan);
             this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd);
         }
-        if (!this._resizeObserver && this.platformUtil.isPlatformBrowser()) {
+        if (!this._resizeObserver && this.platformUtil.isPlatformBrowser) {
             this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150)))
                 .subscribe((value) => {
                     this.checkPinThreshold(value);
@@ -659,6 +655,9 @@ export class IgxNavigationDrawerComponent implements
     }
 
     private checkPinThreshold = (evt?: Event) => {
+        if (!this.platformUtil.isPlatformBrowser) {
+            return;
+        }
         let windowWidth;
         if (this.pinThreshold) {
             windowWidth = this.getWindowWidth();
@@ -797,27 +796,19 @@ export class IgxNavigationDrawerComponent implements
      * @param opacity optional value to apply to the overlay
      */
     private setXSize(x: number, opacity?: string) {
-        if (this.platformUtil.isPlatformBrowser()) {
-            // 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);
-        }
+        // 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 {
+                const transform = x ? 'translate3d(' + x + 'px,0,0)' : '';
+                this.renderer.setElementStyle(this.drawer, 'transform', transform);
+                this.renderer.setElementStyle(this.drawer, '-webkit-transform', transform);
+            }
+            if (opacity !== undefined) {
+                this.renderer.setElementStyle(this.overlay, 'opacity', opacity);
+            }
+        });
     }
 
     private toggleOpenedEvent = (evt?) => {