diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 752d7ac6101c10007be9d24fd668161fe42405e6..dae341d58c7f20c74009fc071456c1925ae11253 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -37,6 +37,7 @@ export class HyDesktopMenuLinks {
@State() menuLinkItems: Array<object> = [];
@State() hasToolbar: boolean = false;
@State() isDesktopMenuOpen: boolean = false;
+ @State() currenOpenMenuId: number = 0;
private _submenuLeftMargin: number = 32;
private _headerBorderOffset: number = 0;
@@ -51,11 +52,6 @@ export class HyDesktopMenuLinks {
}
showBackdropShadow(state = 'close', top = 0) {
- if (state === 'open') {
- }
- if (top == 0) {
- }
- /*
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
@@ -63,42 +59,15 @@ export class HyDesktopMenuLinks {
if (state === 'open') {
hyBackdropDiv.classList.add('is-active');
hyBackdropDiv.style.top = `${top}px`;
- }
-
- if (state === 'close') {
- hyBackdropDiv.classList.remove('is-active');
+ } else {
hyBackdropDiv.style.top = '0';
+ hyBackdropDiv.classList.remove('is-active');
}
}
- */
- }
-
- handleDesktopMenuClose() {
- /*
- this.isDesktopMenuOpen = false;
- this.showBackdropShadow();
-
- const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
- const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
- const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[aria-expanded="true"]`) as HTMLElement;
-
- // Return focus to the button of the last desktop panel that was active.
- if (activeMenuItem !== null) activeMenuItem.focus();
-
- // Reset elements by removing the active classes.
- menuItems.forEach((item) => {
- item.classList.remove('desktop-menu-link--is-active');
- item.setAttribute('aria-expanded', 'false');
- });
- menuPanelItems.forEach((item) => {
- item.classList.remove('hy-desktop-menu-panel--is-active');
- item.setAttribute('aria-hidden', 'true');
- });
- */
}
- handleDesktopMenuToggle(id) {
- this.isDesktopMenuOpen = true;
+ showPanel(id) {
+ console.log('show panel');
const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel'); // all panels
const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`) as HTMLElement;
@@ -138,8 +107,6 @@ export class HyDesktopMenuLinks {
const menuPanelLeftPosition = activeButtonRect.left - this._submenuLeftMargin;
activeMenuItemSibling.style.paddingLeft = `${menuPanelLeftPosition}px`;
- // @todo Position underline block under the activated top menu item.
-
// Position shortcuts block.
let shortcutsDiv = activeMenuItemSibling.querySelectorAll('ul.shortcuts-panel')[0] as HTMLElement; // shortcuts block
if (shortcutsDiv) {
@@ -160,41 +127,71 @@ export class HyDesktopMenuLinks {
}
}
- handleDesktopMenuClick(id) {
- console.log(id);
- /*
- const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`);
- const activeMenuItemSibling = activeMenuItem.nextElementSibling as HTMLElement; // current panel
+ clearPanelItemsStatus() {
+ const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
+ const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
+ const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[aria-expanded="true"]`) as HTMLElement;
- if (!this.isDesktopMenuOpen) {
- // Add active classes to the currently active item and its sibling element.
- this.isDesktopMenuOpen = true;
- activeMenuItem.classList.add('desktop-menu-link--is-active');
- activeMenuItem.setAttribute('aria-expanded', 'true');
- activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active');
-
- if (this.hasToolbar) {
- activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active--has-toolbar');
- }
- activeMenuItemSibling.setAttribute('aria-hidden', 'false');
+ // Return focus to the button of the last desktop panel that was active.
+ if (activeMenuItem !== null) activeMenuItem.focus();
- let rect = activeMenuItemSibling.getBoundingClientRect();
- this.showBackdropShadow('open', rect.bottom);
- } else {
- // Remove active classes to the currently active item and its sibling element.
- this.isDesktopMenuOpen = false;
- activeMenuItem.classList.remove('desktop-menu-link--is-active');
- activeMenuItem.setAttribute('aria-expanded', 'false');
- activeMenuItemSibling.classList.remove('hy-desktop-menu-panel--is-active');
- if (this.hasToolbar) {
- activeMenuItemSibling.classList.remove('hy-desktop-menu-panel--is-active--has-toolbar');
- }
+ // Reset elements by removing the active classes.
+ menuItems.forEach((item) => {
+ item.classList.remove('desktop-menu-link--is-active');
+ item.setAttribute('aria-expanded', 'false');
+ });
+ menuPanelItems.forEach((item) => {
+ item.classList.remove('hy-desktop-menu-panel--is-active');
+ item.setAttribute('aria-hidden', 'true');
+ });
+ }
- activeMenuItemSibling.setAttribute('aria-hidden', 'true');
+ handleDesktopMenuClose(event) {
+ console.log(event.type);
- this.showBackdropShadow();
+ this.isDesktopMenuOpen = false;
+ this.currenOpenMenuId = 0;
+ this.showBackdropShadow();
+ this.clearPanelItemsStatus();
+
+ event.stopPropagation();
+ }
+
+ handleDesktopMenuToggle(event, id) {
+ console.log(event.type);
+
+ this.isDesktopMenuOpen = true;
+
+ if (this.currenOpenMenuId != id) {
+ this.currenOpenMenuId = id;
+ this.showPanel(id);
}
- */
+
+ event.stopPropagation();
+ }
+
+ handleDesktopMenuFocus(event, id) {
+ console.log(event.type);
+ if (this.isDesktopMenuOpen && this.currenOpenMenuId != id) {
+ this.currenOpenMenuId = id;
+ this.showPanel(id);
+ }
+
+ event.stopPropagation();
+ }
+
+ handleDesktopMenuClick(event, id) {
+ console.log(event.type);
+
+ this.isDesktopMenuOpen = !this.isDesktopMenuOpen;
+ if (!this.isDesktopMenuOpen) {
+ this.handleDesktopMenuClose(event);
+ } else {
+ this.currenOpenMenuId = id;
+ this.showPanel(id);
+ }
+
+ event.stopPropagation();
}
componentDidLoad() {
@@ -236,15 +233,19 @@ export class HyDesktopMenuLinks {
type="button"
class={classAttributes}
link-id={id}
- onClick={() => this.handleDesktopMenuClick(id)}
- onMouseOver={() => this.handleDesktopMenuToggle(id)}
- onFocus={() => this.handleDesktopMenuToggle(id)}
+ onClick={(e) => this.handleDesktopMenuClick(e, id)}
+ onMouseOver={(e) => this.handleDesktopMenuToggle(e, id)}
+ onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
aria-expanded="false"
>
<span class={classAttributesLabel}>{label}</span>
<hy-icon icon={'hy-icon-caret-down'} size={32} />
</button>
- <div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
+ <div
+ class="hy-desktop-menu-panel"
+ onMouseLeave={(e) => this.handleDesktopMenuClose(e)}
+ aria-hidden="true"
+ >
<div class="hy-desktop-menu-panel__desktop-menu">
<div class="hy-desktop-menu-panel__desktop-menu__menu-items">
<a
@@ -306,7 +307,7 @@ export class HyDesktopMenuLinks {
)}
</div>
<button
- onClick={() => this.handleDesktopMenuClose()}
+ onClick={(e) => this.handleDesktopMenuClose(e)}
class={{
'hy-desktop-menu-panel__panel-toggle': true,
}}