client/src/app/shared/menu/top-menu-dropdown.component.ts

   1 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
   2 import { filter, take } from 'rxjs/operators'
   3 import { NavigationEnd, Router } from '@angular/router'
   4 import { Subscription } from 'rxjs'
   5 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
   6
   7 export type TopMenuDropdownParam = {
   8   label: string
   9   routerLink?: string
  10
  11   children?: {
  12     label: string
  13     routerLink: string
  14   }[]
  15 }
  16
  17 @Component({
  18   selector: 'my-top-menu-dropdown',
  19   templateUrl: './top-menu-dropdown.component.html',
  20   styleUrls: [ './top-menu-dropdown.component.scss' ]
  21 })
  22 export class TopMenuDropdownComponent implements OnInit, OnDestroy {
  23   @Input() menuEntries: TopMenuDropdownParam[] = []
  24
  25   suffixLabels: { [ parentLabel: string ]: string }
  26
  27   private openedOnHover = false
  28   private routeSub: Subscription
  29
  30   constructor (private router: Router) {}
  31
  32   ngOnInit () {
  33     this.updateChildLabels(window.location.pathname)
  34
  35     this.routeSub = this.router.events
  36                         .pipe(filter(event => event instanceof NavigationEnd))
  37                         .subscribe(() => this.updateChildLabels(window.location.pathname))
  38   }
  39
  40   ngOnDestroy () {
  41     if (this.routeSub) this.routeSub.unsubscribe()
  42   }
  43
  44   openDropdownOnHover (dropdown: NgbDropdown) {
  45     this.openedOnHover = true
  46     dropdown.open()
  47
  48     // Menu was closed
  49     dropdown.openChange
  50             .pipe(take(1))
  51             .subscribe(e => this.openedOnHover = false)
  52   }
  53
  54   dropdownAnchorClicked (dropdown: NgbDropdown) {
  55     if (this.openedOnHover) {
  56       this.openedOnHover = false
  57       return
  58     }
  59
  60     return dropdown.toggle()
  61   }
  62
  63   closeDropdownIfHovered (dropdown: NgbDropdown) {
  64     if (this.openedOnHover === false) return
  65
  66     dropdown.close()
  67     this.openedOnHover = false
  68   }
  69
  70   private updateChildLabels (path: string) {
  71     this.suffixLabels = {}
  72
  73     for (const entry of this.menuEntries) {
  74       if (!entry.children) continue
  75
  76       for (const child of entry.children) {
  77         if (path.startsWith(child.routerLink)) {
  78           this.suffixLabels[entry.label] = child.label
  79         }
  80       }
  81     }
  82   }
  83 }