Merge remote-tracking branch 'origin/main' into more-eslint

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts

@@ -1,16 +1,11 @@
-import {
-  Component,
-  Inject,
-  Injector,
-  OnInit,
-} from '@angular/core';
-import { first } from 'rxjs/operators';
-
-import { slide } from '../../shared/animations/slide';
-import { HostWindowService } from '../../shared/host-window.service';
-import { MenuService } from '../../shared/menu/menu.service';
-import { MenuID } from '../../shared/menu/menu-id.model';
+import { Component, HostListener, Inject, Injector, OnInit } from '@angular/core';
 import { NavbarSectionComponent } from '../navbar-section/navbar-section.component';
+import { MenuService } from '../../shared/menu/menu.service';
+import { slide } from '../../shared/animations/slide';
+import { first } from 'rxjs/operators';
+import { HostWindowService } from '../../shared/host-window.service';
+import { MenuID } from '../../shared/menu/menu-id.model';
+import { Observable } from 'rxjs';
 
 /**
  * Represents an expandable section in the navbar
@@ -27,12 +22,42 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
    */
   menuID = MenuID.PUBLIC;
 
+  /**
+   * True if mouse has entered the menu section toggler
+   */
+  mouseEntered = false;
+
+  /**
+   * True if screen size was small before a resize event
+   */
+  wasMobile = undefined;
+
+  /**
+   * Observable that emits true if the screen is small, false otherwise
+   */
+  isMobile$: Observable<boolean>;
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.isMobile$.pipe(
+      first()
+    ).subscribe((isMobile) => {
+      // When switching between desktop and mobile active sections should be deactivated
+      if (isMobile !== this.wasMobile) {
+        this.wasMobile = isMobile;
+        this.menuService.deactivateSection(this.menuID, this.section.id);
+        this.mouseEntered = false;
+      }
+    });
+  }
+
   constructor(@Inject('sectionDataProvider') menuSection,
               protected menuService: MenuService,
               protected injector: Injector,
               private windowService: HostWindowService,
   ) {
     super(menuSection, menuService, injector);
+    this.isMobile$ = this.windowService.isMobile();
   }
 
   ngOnInit() {
@@ -40,48 +65,42 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
   }
 
   /**
-   * Overrides the super function that activates this section (triggered on hover)
-   * Has an extra check to make sure the section can only be activated on non-mobile devices
-   * @param {Event} event The user event that triggered this function
+   * When the mouse enters the section toggler activate the menu section
+   * @param $event
+   * @param isActive
    */
-  activateSection(event): void {
-    this.windowService.isXsOrSm().pipe(
-      first(),
+  onMouseEnter($event: Event, isActive: boolean) {
+    this.isMobile$.pipe(
+      first()
     ).subscribe((isMobile) => {
-      if (!isMobile) {
-        super.activateSection(event);
+      if (!isMobile && !isActive && !this.mouseEntered) {
+        this.activateSection($event);
       }
+      this.mouseEntered = true;
     });
   }
 
   /**
-   * Overrides the super function that deactivates this section (triggered on hover)
-   * Has an extra check to make sure the section can only be deactivated on non-mobile devices
-   * @param {Event} event The user event that triggered this function
+   * When the mouse leaves the section toggler deactivate the menu section
+   * @param $event
+   * @param isActive
    */
-  deactivateSection(event): void {
-    this.windowService.isXsOrSm().pipe(
-      first(),
+  onMouseLeave($event: Event, isActive: boolean) {
+    this.isMobile$.pipe(
+      first()
     ).subscribe((isMobile) => {
-      if (!isMobile) {
-        super.deactivateSection(event);
+      if (!isMobile && isActive && this.mouseEntered) {
+        this.deactivateSection($event);
       }
+      this.mouseEntered = false;
     });
   }
 
   /**
-   * Overrides the super function that toggles this section (triggered on click)
-   * Has an extra check to make sure the section can only be toggled on mobile devices
-   * @param {Event} event The user event that triggered this function
+   * returns the ID of the DOM element representing the navbar section
+   * @param sectionId
    */
-  toggleSection(event): void {
-    event.preventDefault();
-    this.windowService.isXsOrSm().pipe(
-      first(),
-    ).subscribe((isMobile) => {
-      if (isMobile) {
-        super.toggleSection(event);
-      }
-    });
+  expandableNavbarSectionId(sectionId: string) {
+    return `expandable-navbar-section-${sectionId}-dropdown`;
   }
 }