From 5236f248924bf9e71a77a3cba9aac75e243dc1bc Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Fri, 15 Jan 2021 18:37:16 +0200
Subject: [PATCH] desktop menu behavior open/close panel
---
.../hy-desktop-menu-links.tsx | 50 +++++++++----------
1 file changed, 25 insertions(+), 25 deletions(-)
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 3e7ac2be..4bbdde51 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
@@ -67,6 +67,8 @@ export class HyDesktopMenuLinks {
}
showPanel(id) {
+ this.isDesktopMenuOpen = true;
+
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;
@@ -144,10 +146,10 @@ export class HyDesktopMenuLinks {
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;
+ //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();
+ //if (activeMenuItem !== null) activeMenuItem.focus();
//Show is-active-trail underlining
const activeTrailMenuItem = this.el.shadowRoot.querySelector(
@@ -174,8 +176,21 @@ export class HyDesktopMenuLinks {
event.stopPropagation();
}
+ handleDesktopMenuEnter(event, id) {
+ const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`) as HTMLElement;
+
+ // Set focus to the button.
+ if (activeMenuItem !== null) activeMenuItem.focus();
+
+ this.currenOpenMenuId = id;
+ this.showPanel(id);
+
+ event.stopPropagation();
+ }
+
handleDesktopMenuLeave(event) {
let leaveEvent = event as MouseEvent;
+
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
const headerHeight = hyHeader.offsetTop + hyHeader.offsetHeight;
@@ -186,7 +201,7 @@ export class HyDesktopMenuLinks {
event.stopPropagation();
}
- handleDesktopMenuToggle(event, id) {
+ handleDesktopMenuMove(event, id) {
let toggleEvent = event as MouseEvent;
const activeMenuItem = this.el.shadowRoot.querySelector(
@@ -194,24 +209,10 @@ export class HyDesktopMenuLinks {
) as HTMLElement;
let topBorder = activeMenuItem.getClientRects()[0].top;
- if (this.currenOpenMenuId != id) {
- this.currenOpenMenuId = id;
-
- if (toggleEvent.clientY < topBorder) {
- this.closePanel();
- } else {
- this.isDesktopMenuOpen = true;
- this.showPanel(id);
- }
- } else {
+ if (this.currenOpenMenuId == id) {
// Mouse moving around the same menu link
if (toggleEvent.clientY < topBorder) {
this.closePanel();
- } else {
- if (!this.isDesktopMenuOpen) {
- this.isDesktopMenuOpen = true;
- this.showPanel(id);
- }
}
}
@@ -219,7 +220,7 @@ export class HyDesktopMenuLinks {
}
handleDesktopMenuFocus(event, id) {
- if (this.isDesktopMenuOpen && this.currenOpenMenuId != id) {
+ if (this.currenOpenMenuId != id) {
this.currenOpenMenuId = id;
this.showPanel(id);
}
@@ -228,12 +229,11 @@ export class HyDesktopMenuLinks {
}
handleDesktopMenuClick(event, id) {
- this.isDesktopMenuOpen = !this.isDesktopMenuOpen;
if (!this.isDesktopMenuOpen) {
- this.handleDesktopMenuClose(event);
- } else {
this.currenOpenMenuId = id;
this.showPanel(id);
+ } else {
+ this.handleDesktopMenuClose(event);
}
event.stopPropagation();
@@ -279,10 +279,10 @@ export class HyDesktopMenuLinks {
class={classAttributes}
link-id={id}
onClick={(e) => this.handleDesktopMenuClick(e, id)}
- //onMouseOver={(e) => this.handleDesktopMenuToggle(e, id)}
- onMouseMove={(e) => this.handleDesktopMenuToggle(e, id)}
- onMouseLeave={(e) => this.handleDesktopMenuLeave(e)}
onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
+ onMouseEnter={(e) => this.handleDesktopMenuEnter(e, id)}
+ onMouseLeave={(e) => this.handleDesktopMenuLeave(e)}
+ onMouseMove={(e) => this.handleDesktopMenuMove(e, id)}
aria-expanded="false"
>
<span class={classAttributesLabel}>{label}</span>
--
GitLab