diff options
Diffstat (limited to 'client/src/app/shared/menu/top-menu-dropdown.component.ts')
-rw-r--r-- | client/src/app/shared/menu/top-menu-dropdown.component.ts | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts new file mode 100644 index 000000000..272b721b2 --- /dev/null +++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts | |||
@@ -0,0 +1,75 @@ | |||
1 | import { Component, Input, OnDestroy, OnInit } from '@angular/core' | ||
2 | import { filter, take } from 'rxjs/operators' | ||
3 | import { NavigationStart, Router } from '@angular/router' | ||
4 | import { Subscription } from 'rxjs' | ||
5 | import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' | ||
6 | import { drop } from 'lodash-es' | ||
7 | |||
8 | export type TopMenuDropdownParam = { | ||
9 | label: string | ||
10 | routerLink?: string | ||
11 | |||
12 | children?: { | ||
13 | label: string | ||
14 | routerLink: string | ||
15 | }[] | ||
16 | } | ||
17 | |||
18 | @Component({ | ||
19 | selector: 'my-top-menu-dropdown', | ||
20 | templateUrl: './top-menu-dropdown.component.html', | ||
21 | styleUrls: [ './top-menu-dropdown.component.scss' ] | ||
22 | }) | ||
23 | export class TopMenuDropdownComponent implements OnInit, OnDestroy { | ||
24 | @Input() menuEntries: TopMenuDropdownParam[] = [] | ||
25 | |||
26 | suffixLabels: { [ parentLabel: string ]: string } | ||
27 | |||
28 | private openedOnHover = false | ||
29 | private routeSub: Subscription | ||
30 | |||
31 | constructor (private router: Router) {} | ||
32 | |||
33 | ngOnInit () { | ||
34 | this.updateChildLabels(window.location.pathname) | ||
35 | |||
36 | this.routeSub = this.router.events | ||
37 | .pipe(filter(event => event instanceof NavigationStart)) | ||
38 | .subscribe(() => this.updateChildLabels(window.location.pathname)) | ||
39 | } | ||
40 | |||
41 | ngOnDestroy () { | ||
42 | if (this.routeSub) this.routeSub.unsubscribe() | ||
43 | } | ||
44 | |||
45 | openDropdownOnHover (dropdown: NgbDropdown) { | ||
46 | this.openedOnHover = true | ||
47 | dropdown.open() | ||
48 | |||
49 | // Menu was closed | ||
50 | dropdown.openChange | ||
51 | .pipe(take(1)) | ||
52 | .subscribe(e => this.openedOnHover = false) | ||
53 | } | ||
54 | |||
55 | closeDropdownIfHovered (dropdown: NgbDropdown) { | ||
56 | if (this.openedOnHover === false) return | ||
57 | |||
58 | dropdown.close() | ||
59 | this.openedOnHover = false | ||
60 | } | ||
61 | |||
62 | private updateChildLabels (path: string) { | ||
63 | this.suffixLabels = {} | ||
64 | |||
65 | for (const entry of this.menuEntries) { | ||
66 | if (!entry.children) continue | ||
67 | |||
68 | for (const child of entry.children) { | ||
69 | if (path.startsWith(child.routerLink)) { | ||
70 | this.suffixLabels[entry.label] = child.label | ||
71 | } | ||
72 | } | ||
73 | } | ||
74 | } | ||
75 | } | ||