fix(portal): behavior between html getinfo and animation offset x

infra-geo-ouverte · Sep 17, 2021 · 7c5d767 · 7c5d767
1 parent b761136
commit 7c5d767
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html
@@ -199,7 +199,7 @@
   [map]="map"
   [store]="queryStore"
   [hasFeatureEmphasisOnSelection]="hasFeatureEmphasisOnSelection"
-  [@toastPanelOffsetX]="(isMobile() || !isLandscape()) ? undefined : getToastPanelExtent()"
+  [@toastPanelOffsetX]="toastPanelOffsetX$ | async"
   [@toastPanelOffsetY]="getToastPanelOffsetY()"
   [@toastPanelMobileSidenav]="(isMobile() && sidenavOpened) || (isTablet() && isPortrait() && sidenavOpened)"
   [opened]="toastPanelOpened"

diff --git a/src/app/pages/portal/portal.component.ts b/src/app/pages/portal/portal.component.ts
@@ -7,7 +7,7 @@ import {
   ElementRef
 } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { Subscription, of, BehaviorSubject } from 'rxjs';
+import { Subscription, of, BehaviorSubject, combineLatest } from 'rxjs';
 import { debounceTime, take, pairwise, skipWhile } from 'rxjs/operators';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import MapBrowserEvent from 'ol/MapBrowserEvent';
@@ -107,6 +107,8 @@ import olFormatGeoJSON from 'ol/format/GeoJSON';
   ]
 })
 export class PortalComponent implements OnInit, OnDestroy {
+  public toastPanelOffsetX$: BehaviorSubject<string> = new BehaviorSubject(undefined);
+  public sidenavOpened$: BehaviorSubject<boolean> = new BehaviorSubject(false);
   public minSearchTermLength = 2;
   public hasExpansionPanel = false;
   public hasGeolocateButton = true;
@@ -130,7 +132,7 @@ export class PortalComponent implements OnInit, OnDestroy {
   readonly workspaceMaximize$: BehaviorSubject<boolean> = new BehaviorSubject(
     this.storageService.get('workspaceMaximize') as boolean
   );
-  public sidenavOpened = false;
+
   public searchBarTerm = '';
   public onSettingsChange$ = new BehaviorSubject<boolean>(undefined);
   public termDefinedInUrl = false;
@@ -146,6 +148,7 @@ export class PortalComponent implements OnInit, OnDestroy {
 
   private context$$: Subscription;
   private openSidenav$$: Subscription;
+  private sidenavMediaAndOrientation$$: Subscription;
 
   public igoSearchPointerSummaryEnabled: boolean;
 
@@ -168,6 +171,14 @@ export class PortalComponent implements OnInit, OnDestroy {
     return this.mapState.map;
   }
 
+  get sidenavOpened(): boolean {
+    return this.sidenavOpened$.value;
+  }
+
+  set sidenavOpened(value: boolean) {
+    this.sidenavOpened$.next(value);
+  }
+
   get auth(): AuthOptions {
     return this.configService.getConfig('auth') || [];
   }
@@ -441,6 +452,25 @@ export class PortalComponent implements OnInit, OnDestroy {
         this.menuButtonClass = this.getClassMenuButton();
       }
     );
+
+    this.sidenavMediaAndOrientation$$ =
+      combineLatest([
+        this.sidenavOpened$,
+        this.mediaService.media$,
+        this.mediaService.orientation$]
+      ).pipe(
+        debounceTime(50)
+      ).subscribe((sidenavMediaAndOrientation: [boolean, string, string]) => {
+        this.computeToastPanelOffsetX();
+      });
+  }
+
+  computeToastPanelOffsetX() {
+    if (this.isMobile() || !this.isLandscape()) {
+      this.toastPanelOffsetX$.next(undefined);
+    } else {
+      this.toastPanelOffsetX$.next(this.getToastPanelExtent());
+    }
   }
 
   getClassMenuButton() {
@@ -534,6 +564,7 @@ export class PortalComponent implements OnInit, OnDestroy {
     this.activeWidget$$.unsubscribe();
     this.openSidenav$$.unsubscribe();
     this.workspaceMaximize$$.map(f => f.unsubscribe());
+    this.sidenavMediaAndOrientation$$.unsubscribe();
   }
 
   /**