fixes kolzchut/srm#679

kolzchut · Nov 28, 2023 · da60a0a · da60a0a
1 parent 86e0b48
commit da60a0a
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 2 deletions.
diff --git a/projects/srm/src/app/page/page.component.html b/projects/srm/src/app/page/page.component.html
@@ -104,3 +104,4 @@
         tabindex="-1"
 ></app-map>
 <span aria-live='assertive' class='a11y'>{{a11y.title | async}}</span>
+<div class='survey' id='survey' #survey [class.visible]='surveyVisible'></div>
diff --git a/projects/srm/src/app/page/page.component.less b/projects/srm/src/app/page/page.component.less
@@ -173,6 +173,41 @@
         clip: rect(1px, 1px, 1px, 1px);
         white-space: nowrap;
     }
+
+    .survey {
+        height: 200px;
+        max-width: 100%;
+        width: 360px;
+        position: absolute;
+        pointer-events: none;
+        margin: 0;
+        background: none;
+        // border: 1px solid black;
+        z-index: 1000;
+        border-radius: 4px;
+        overflow: hidden;
+        transition: transform 0.2s ease-in-out;
+        transform: translateY(calc(100% ~'+' 20px));
+
+        &.visible {
+            transform: translateY(0%);
+            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+        }
+
+        .desktop({
+            bottom: 4px;
+            left: 50px;
+        });
+        .mobile({
+            bottom: 0;
+            left: 0;
+        });
+        ::ng-deep {
+            * {
+                pointer-events: all;
+            }
+        }
+    }
 }
 
 @keyframes hide-results {

diff --git a/projects/srm/src/app/page/page.component.ts b/projects/srm/src/app/page/page.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { LngLatLike } from 'mapbox-gl';
@@ -64,7 +64,7 @@ class SearchParamCalc {
   templateUrl: './page.component.html',
   styleUrls: ['./page.component.less']
 })
-export class PageComponent implements OnInit {
+export class PageComponent implements OnInit, AfterViewInit, OnDestroy {
 
   stage = '';
   card = '';
@@ -108,6 +108,10 @@ export class PageComponent implements OnInit {
   areaSearchState: AreaSearchState;
   filtersState: FiltersState;
 
+  @ViewChild('survey') survey: ElementRef;
+  surveyMutationObserver: MutationObserver;
+  surveyVisible = false;
+
   constructor(private route: ActivatedRoute, private api: ApiService, private router: Router, private seo: SeoSocialShareService,
               private platform: PlatformService, public layout: LayoutService, private analytics: AnalyticsService,
               public a11y: A11yService,
@@ -435,6 +439,23 @@ export class PageComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  ngAfterViewInit(): void {
+    this.surveyMutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          this.surveyVisible = (this.survey.nativeElement as HTMLElement).childElementCount > 0;
+        }
+      });
+    });
+    this.surveyMutationObserver.observe(this.survey.nativeElement, {
+      childList: true,
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.surveyMutationObserver.disconnect();
+  }
+
   needsDidYouMean(searchParams: SearchParams) {
     return !!searchParams?.query && 
             !searchParams?.filter_responses?.length &&