Dispatch resize event on dropdown toggle [Fixes #570]

projects/bird-atlas/src/app/+bird-society/bird-society-info/bird-society-info.component.ts

@@ -6,6 +6,8 @@ import { BreadcrumbId, BreadcrumbService } from '../../core/breadcrumb.service';
 import { PopstateService } from '../../core/popstate.service';
 import { VisualizationMode } from '../../shared-modules/map-utils/visualization-mode';
 import { BirdSocietyInfoSpeciesTableComponent } from './bird-society-info-species-table/bird-society-info-species-table.component';
+import { PlatformService } from 'projects/laji/src/app/root/platform.service';
+import { Util } from 'projects/laji/src/app/shared/service/util.service';
 
 @Component({
   templateUrl: 'bird-society-info.component.html',
@@ -36,6 +38,7 @@ export class BirdSocietyInfoComponent implements OnInit, OnDestroy {
     private atlasApi: AtlasApiService,
     private route: ActivatedRoute,
     private breadcrumbs: BreadcrumbService,
+    private platformService: PlatformService,
     private cdr: ChangeDetectorRef,
     private popstateService: PopstateService
   ) {}
@@ -110,15 +113,7 @@ export class BirdSocietyInfoComponent implements OnInit, OnDestroy {
 
   onResize() {
     this.displayModeLarge = !this.displayModeLarge;
-    try {
-      const event = new Event('resize');
-      window.dispatchEvent(event);
-    } catch (error) {
-      const event = window.document.createEvent('UIEvents');
-      // @ts-ignore
-      event.initUIEvent('resize', true, false, window, 0);
-      window.dispatchEvent(event);
-    }
+    Util.dispatchResizeEvent(this.platformService);
     this.cdr.markForCheck();
     this.cdr.detectChanges();
   }

projects/laji-ui/src/lib/directives/fill-height.directive.ts

@@ -1,5 +1,7 @@
 import { Directive, ElementRef, Renderer2, OnDestroy, AfterViewInit, Input, Inject, PLATFORM_ID, OnChanges } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
+import { Util } from 'projects/laji/src/app/shared/service/util.service';
+import { PlatformService } from 'projects/laji/src/app/root/platform.service';
 
 export interface IFillHeightOptions {
   disabled?: boolean;
@@ -18,6 +20,7 @@ export class FillHeightDirective implements OnDestroy, AfterViewInit, OnChanges
 
   constructor(private el: ElementRef,
     private renderer: Renderer2,
+    private platformService: PlatformService,
     @Inject(PLATFORM_ID) private platformId: any
   ) {}
 
@@ -58,17 +61,7 @@ export class FillHeightDirective implements OnDestroy, AfterViewInit, OnChanges
       h = this.options.height;
     }
     this.renderer.setStyle(this.el.nativeElement, 'height', h.toString() + 'px');
-    try {
-      const event = new Event('resize');
-      (event as any)['ignore-fill-height'] = true;
-      window.dispatchEvent(event);
-    } catch (e) {
-      const evt = window.document.createEvent('UIEvents');
-      (evt as any)['ignore-fill-height'] = true;
-      // @ts-ignore
-      evt.initUIEvent('resize', true, false, window, 0);
-      window.dispatchEvent(evt);
-    }
+    Util.dispatchResizeEvent(this.platformService, 'ignore-fill-height');
   }
 
   ngOnDestroy() {

projects/laji-ui/src/lib/dropdown/dropdown-toggle.directive.ts

@@ -1,5 +1,7 @@
 import { DOCUMENT } from '@angular/common';
 import { Directive, ElementRef, HostBinding, HostListener, Inject } from '@angular/core';
+import { PlatformService } from 'projects/laji/src/app/root/platform.service';
+import { Util } from 'projects/laji/src/app/shared/service/util.service';
 
 /**
  * Makes the target element to be show a dropdown menu on click.
@@ -19,6 +21,7 @@ export class DropdownToggleDirective {
 
   constructor(
     private elementRef: ElementRef,
+    private platformService: PlatformService,
     @Inject(DOCUMENT) private document: Document
   ) { }
 
@@ -28,6 +31,7 @@ export class DropdownToggleDirective {
 
     const isDisplayed = dropdownMenuElement.style.display !== 'none';
     dropdownMenuElement.style.display = isDisplayed ? 'none' : 'block';
+    Util.dispatchResizeEvent(this.platformService);
   }
 
   @HostListener('document:click', ['$event.target'])
@@ -49,6 +53,7 @@ export class DropdownToggleDirective {
     if (!clickedInside) {
       menu.style.display = 'none';
     }
+    Util.dispatchResizeEvent(this.platformService);
   }
 
   /**

projects/laji-ui/src/lib/sidebar/sidebar.component.ts

@@ -6,6 +6,7 @@ import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import { SidebarLinkComponent } from './sidebar-link/sidebar-link.component';
 import { PlatformService } from 'projects/laji/src/app/root/platform.service';
+import { Util } from 'projects/laji/src/app/shared/service/util.service';
 
 const mobileBreakpoint = 768;
 
@@ -159,15 +160,7 @@ export class SidebarComponent implements OnDestroy, AfterViewInit {
   }
 
   onResizeAnimationComplete() {
-    try {
-      const event = new Event('resize');
-      (event as any)['ignore-sidebar'] = true;
-      this.platformService.window.dispatchEvent(event);
-    } catch (e) {
-      const evt: any = this.platformService.window.document.createEvent('UIEvents');
-      evt.initUIEvent('resize', true, false, this.platformService.window, 0);
-      this.platformService.window.dispatchEvent(evt);
-    }
+    Util.dispatchResizeEvent(this.platformService, 'ignore-sidebar');
   }
 
   onDragStart() {

projects/laji-ui/src/lib/tabs/tab/tab.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, Inject, PLATFORM_ID, EventEmitter, Output } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { PlatformService } from 'projects/laji/src/app/root/platform.service';
+import { Util } from 'projects/laji/src/app/shared/service/util.service';
 
 @Component({
   selector: 'lu-tab',
@@ -40,15 +41,7 @@ export class TabComponent {
       return;
     }
     setTimeout(() => {
-      try {
-        this.platformService.window.dispatchEvent(new Event('resize'));
-      } catch (e) {
-        try {
-          const evt: any = this.platformService.window.document.createEvent('UIEvents');
-          evt.initUIEvent('resize', true, false, this.platformService.window, 0);
-          this.platformService.window.dispatchEvent(evt);
-        } catch (error) {}
-      }
+      Util.dispatchResizeEvent(this.platformService);
     }, 100);
   }
 }

projects/laji/src/app/shared/service/browser.service.ts

@@ -4,6 +4,7 @@ import { PlatformService } from '../../root/platform.service';
 import { DOCUMENT, Location } from '@angular/common';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 import { HistoryService } from './history.service';
+import { Util } from './util.service';
 
 export interface IBrowserState {
   visibility: boolean;
@@ -137,13 +138,7 @@ export class BrowserService implements OnDestroy {
     this.resizeSub = this.resize.pipe(
       debounceTime(100)
     ).subscribe(() => {
-      try {
-        this.platformService.window.dispatchEvent(new Event('resize'));
-      } catch (e) {
-        const evt: any = this.document.createEvent('UIEvents');
-        evt.initUIEvent('resize', true, false, this.platformService.window, 0);
-        this.platformService.window.dispatchEvent(evt);
-      }
+      Util.dispatchResizeEvent(this.platformService);
     });
   }
 

projects/laji/src/app/shared/service/util.service.ts

@@ -1,6 +1,7 @@
 import { NavigationEnd, Event } from '@angular/router';
 import * as merge from 'deepmerge';
 import { Document } from '../model/Document';
+import { PlatformService } from '../../root/platform.service';
 
 export type WithNonNullableKeys<T, K extends keyof T> = T & {
   [P in K]-?: NonNullable<T[P]>;
@@ -184,11 +185,35 @@ export class Util {
     return typeof any === 'object' && any !== null && !Array.isArray(any);
   }
 
+  /**
+   * @param platformService
+   * @param tag can be used to track the event eg. if this event needs to be ignored by a specific listener. Should not be a key of the Event type!
+   */
+  public static dispatchResizeEvent(platformService: PlatformService, tag?: string) {
+    try {
+      const event = new Event('resize');
+      if (tag !== undefined) {
+        (event as any)[tag] = true;
+      }
+      platformService.window.dispatchEvent(event);
+    } catch (e) {
+      try {
+        const evt: any = platformService.window.document.createEvent('UIEvents');
+        if (tag !== undefined) {
+          (evt as any)[tag] = true;
+        }
+        evt.initUIEvent('resize', true, false, platformService.window, 0);
+        platformService.window.dispatchEvent(evt);
+      } catch (error) {}
+    }
+  }
+
   private static mergeClone(value: any, options: any) {
     return merge(Util.mergeEmptyTarget(value), value, options);
   }
 
   private static mergeEmptyTarget(value: any) {
     return Array.isArray(value) ? [] : {};
   }
+
 }

projects/vir/src/app/component/global-message/global-message.component.ts

@@ -8,6 +8,7 @@ import { LocalStorage } from 'ngx-webstorage';
 import { environment } from '../../../environments/environment';
 import { isPlatformBrowser } from '@angular/common';
 import { Util } from 'projects/laji/src/app/shared/service/util.service';
+import { PlatformService } from 'projects/laji/src/app/root/platform.service';
 
 @Component({
   selector: 'vir-global-message',
@@ -30,6 +31,7 @@ export class GlobalMessageComponent implements OnDestroy, OnInit {
     private router: Router,
     private cdr: ChangeDetectorRef,
     private translate: TranslateService,
+    private platformService: PlatformService,
     @Inject(PLATFORM_ID) private platformId: any) {}
 
   ngOnInit() {
@@ -85,16 +87,7 @@ export class GlobalMessageComponent implements OnDestroy, OnInit {
   private toggle() {
     this.isCurrentPageClosed() ? this.open() : this.close();
     if (isPlatformBrowser(this.platformId)) {
-      setTimeout(() => {
-        try {
-          window.dispatchEvent(new Event('resize'));
-        } catch (e) {
-          const evt = window.document.createEvent('UIEvents');
-          // @ts-ignore
-          evt.initUIEvent('resize', true, false, window, 0);
-          window.dispatchEvent(evt);
-        }
-      });
+      setTimeout(() => Util.dispatchResizeEvent(this.platformService));
     }
   }
 }