From 7e1d4c6490d5539f83731d935dcfe9e845f6892e Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Thu, 14 Jan 2021 23:17:04 +0200
Subject: [PATCH] closing menu panel
---
.../hy-desktop-menu-links.tsx | 57 ++++++++++++++-----
1 file changed, 44 insertions(+), 13 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 dae341d5..6d450fd2 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,7 +67,6 @@ export class HyDesktopMenuLinks {
}
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;
@@ -127,6 +126,13 @@ export class HyDesktopMenuLinks {
}
}
+ closePanel() {
+ this.isDesktopMenuOpen = false;
+ this.currenOpenMenuId = 0;
+ this.showBackdropShadow();
+ this.clearPanelItemsStatus();
+ }
+
clearPanelItemsStatus() {
const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
@@ -147,31 +153,56 @@ export class HyDesktopMenuLinks {
}
handleDesktopMenuClose(event) {
- console.log(event.type);
+ this.closePanel();
- this.isDesktopMenuOpen = false;
- this.currenOpenMenuId = 0;
- this.showBackdropShadow();
- this.clearPanelItemsStatus();
+ 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;
+
+ if (leaveEvent.clientY < headerHeight - 4) {
+ this.closePanel();
+ }
event.stopPropagation();
}
handleDesktopMenuToggle(event, id) {
- console.log(event.type);
+ let toggleEvent = event as MouseEvent;
- this.isDesktopMenuOpen = true;
+ const activeMenuItem = this.el.shadowRoot.querySelector(
+ `.desktop-menu-link[link-id="${id}"] .desktop-menu-link__label`
+ ) as HTMLElement;
+ let topBorder = activeMenuItem.getClientRects()[0].top;
if (this.currenOpenMenuId != id) {
this.currenOpenMenuId = id;
- this.showPanel(id);
+
+ if (toggleEvent.clientY < topBorder) {
+ this.closePanel();
+ } else {
+ this.isDesktopMenuOpen = true;
+ this.showPanel(id);
+ }
+ } else {
+ // Mouse moving around the same menu link
+ if (toggleEvent.clientY < topBorder) {
+ this.closePanel();
+ } else {
+ if (!this.isDesktopMenuOpen) {
+ this.isDesktopMenuOpen = true;
+ this.showPanel(id);
+ }
+ }
}
event.stopPropagation();
}
handleDesktopMenuFocus(event, id) {
- console.log(event.type);
if (this.isDesktopMenuOpen && this.currenOpenMenuId != id) {
this.currenOpenMenuId = id;
this.showPanel(id);
@@ -181,8 +212,6 @@ export class HyDesktopMenuLinks {
}
handleDesktopMenuClick(event, id) {
- console.log(event.type);
-
this.isDesktopMenuOpen = !this.isDesktopMenuOpen;
if (!this.isDesktopMenuOpen) {
this.handleDesktopMenuClose(event);
@@ -234,7 +263,9 @@ export class HyDesktopMenuLinks {
class={classAttributes}
link-id={id}
onClick={(e) => this.handleDesktopMenuClick(e, id)}
- onMouseOver={(e) => this.handleDesktopMenuToggle(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)}
aria-expanded="false"
>
--
GitLab