Newer
Older
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
export interface DesktopLinks {
label: string;
url: string;
menuLinkId: string;
}
import {Component, h, Element, Prop, State, Watch} from '@stencil/core';
@Component({
tag: 'hy-desktop-menu-links',
styleUrl: 'hy-desktop-menu-links.scss',
shadow: true,
})
export class HyDesktopMenuLinks {
@Element() el: HTMLElement;
/*
First level menu links to be displayed on Desktop screens.
* */
@Prop() dataDesktopLinks: DesktopLinks[] | string;
private _dataDesktopLinks: DesktopLinks[];
@State() firstLevelLinksList: Array<object> = [];
@Watch('dataDesktopLinks') dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
this._dataDesktopLinks = typeof data === 'string' ? JSON.parse(data) : data;
}
componentWillLoad() {
this.dataDesktopLinksWatcher(this.dataDesktopLinks);
}
handleMenuDesktopHover(id) {
console.log(id);
let panel = (this.el.parentElement as HTMLElement).nextElementSibling;
if (panel) {
//@todo hide/show panel here
//@todo show proper subtree on panel based on given menu-link-id
console.log(document.querySelectorAll('[trigger-item="' + id + '"]')[0]);
/*
<hy-menu-item menu-link-id="538c248e4fd3cde8e72463b2387b571f" url="/en/lets-research" label="Research" data-drupal-link-system-path="node/90" class="hy-menu-item hy-menu-item--desktop hydrated" depth="1" menu-type="desktop" menu-button-submenu-expand="Expand submenu for">
* */
/*
<hy-menu-level-container menu-level="2" aria-expanded="false" class="hy-menu-level-container hy-menu-level-container--level-2 hy-menu-level-container--mobile hydrated" tabindex="-1" depth="2" trigger-item="68f5a4fa9dae69bb944a173f3f8af88f"><!----><hy-menu-item menu-type="mobile" class="hy-menu-item hy-menu-item--mobile hydrated" depth="2">
* */
}
}
componentDidLoad() {
const links = this._dataDesktopLinks as Array<DesktopLinks>;
let firstLevelLinksList = [];
for (let i = 0; i < links.length; i++) {
let className = 'desktop-menu-link-' + links[i].menuLinkId;
firstLevelLinksList.push(
<a class={className} href={links[i].url} onMouseOver={() => this.handleMenuDesktopHover(links[i].menuLinkId)}>
{links[i].label}
</a>
);
}
this.firstLevelLinksList = firstLevelLinksList;
}
render() {
return <div class={'hy-site-header__menu-desktop'}>{this.firstLevelLinksList}</div>;
}
}