Newer
Older
Markus Kalijärvi
committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import {Component, Element, h, Host, Listen, Prop, State} from '@stencil/core';
@Component({
tag: 'hy-menu-level-container',
styleUrl: 'menu-level-container.scss',
shadow: false
})
export class MenuLevelContainer {
@Element() el: HTMLElement;
@State() open: boolean = false;
@Prop() menuLevel: number;
@Prop({mutable: true, reflect: true}) triggerItem: string;
@Prop({mutable: true, reflect: true}) depth: number = 0;
@Prop({reflect: true}) activeTrailTriggered: boolean = false;
@Prop({mutable: true}) headingItem: any;
@Listen('menuContainerActiveTrail', {target: 'document', capture: true})
menuContainerActiveTrail(data) {
const currentMenuContainer = this.el.getAttribute('trigger-item');
if (currentMenuContainer === data.detail.triggerItem) {
this.activeTrailTriggered = true;
this.open = true;
}
}
@Listen('menuContainerToggled', {target: 'document', capture: true})
menuContainerToggled(data) {
// Toggle submenu.
if (this.triggerItem == data.detail.triggerItem) {
this.activeTrailTriggered = false;
this.open = !this.open;
// Add/Remove is-hidden class from each upper level menu-items
// to make browsing more accessible.
let parentMenu = this.el.parentElement.closest('hy-menu-level-container');
if (parentMenu) {
const items = Array.from(parentMenu.children);
items.forEach((item) => {
if (data.detail.triggerType === 'remove') {
item.classList.remove('is-hidden');
} else {
item.classList.add('is-hidden');
}
});
}
}
}
componentWillRender() {
let parentMenu = this.el.closest('hy-menu-level-container');
let nextParentMenu;
this.depth = 0;
while (parentMenu) {
nextParentMenu = parentMenu.parentElement.closest('hy-menu-level-container');
if (nextParentMenu === parentMenu) {
break;
} else {
parentMenu = nextParentMenu;
this.depth = this.depth + 1;
}
}
// Set trigger item for each menu level container and handle only submenus.
// Add a heading element foreach level.
if (this.menuLevel > 1) {
const parentMenuItem = this.el.closest('hy-menu-item');
this.triggerItem = parentMenuItem.getAttribute('menu-link-id');
this.headingItem = {...this.headingItem, url: parentMenuItem.getAttribute('url')};
this.headingItem = {...this.headingItem, label: parentMenuItem.getAttribute('label')};
} else {
this.triggerItem = 'home';
}
}
render() {
let classAttributes = ['hy-menu-level-container', 'hy-menu-level-container--level-' + this.depth];
if (this.depth === 1) {
this.open = true;
classAttributes = [...classAttributes, this.open ? 'is-open' : null];
return (
<Host aria-expanded={this.open.toString()} class={classAttributes.join(' ')} tabindex={'-1'}>
<slot />
</Host>
);
} else {
classAttributes = [...classAttributes, this.open ? 'is-open' : null];
return (
<Host aria-expanded={this.open.toString()} class={classAttributes.join(' ')} tabindex={'-1'}>
<hy-menu-item label={this.headingItem.label} url={this.headingItem.url} isHeading={true} />
<slot />
</Host>
);
}
}
}