From b2b7a0e0ceb02bc7df2b13a54d790dd6fa9c9a0b Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Mon, 18 Jan 2021 11:46:34 +0200
Subject: [PATCH] set timeout to show panel to make hover less sensitive
---
.../hy-desktop-menu-links.tsx | 26 +++++++++++++++----
1 file changed, 21 insertions(+), 5 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 baa2ac72..be6bb178 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
@@ -42,6 +42,8 @@ export class HyDesktopMenuLinks {
private _submenuLeftMargin: number = 32;
private _headerBorderOffset: number = 0;
+ private _hoverTimer = null;
+
@Watch('dataDesktopLinks')
dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
this._dataDesktopLinks = typeof data === 'string' ? JSON.parse(data) : data;
@@ -116,6 +118,17 @@ export class HyDesktopMenuLinks {
let rect = activeMenuItemSibling.getBoundingClientRect();
this.showBackdropShadow('open', rect.bottom);
+ /*
+ if (this.el.parentElement.classList.contains('hy-site-header--sticky-active')) {
+ console.log(rect.top + ' ' + rect.height + ' ' + rect.bottom) ;
+ this.showBackdropShadow('open', parseInt(headerHeight)+rect.height);
+ }
+ else {
+ console.log(rect.top + ' ' + rect.height + ' ' + rect.bottom) ;
+ this.showBackdropShadow('open', rect.bottom);
+ }
+ */
+
// Position submenu block under the activated top menu item.
let activeButtonRect = activeMenuItem.getBoundingClientRect();
const menuPanelLeftPosition = activeButtonRect.left - this._submenuLeftMargin;
@@ -182,13 +195,15 @@ export class HyDesktopMenuLinks {
}
handleDesktopMenuEnter(event, id) {
- const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`) as HTMLElement;
+ this._hoverTimer = setTimeout(() => {
+ const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`) as HTMLElement;
- // Set focus to the button.
- if (activeMenuItem !== null) activeMenuItem.focus();
+ // Set focus to the button.
+ if (activeMenuItem !== null) activeMenuItem.focus();
- this.currenOpenMenuId = id;
- this.showPanel(id);
+ this.currenOpenMenuId = id;
+ this.showPanel(id);
+ }, 350);
event.stopPropagation();
}
@@ -201,6 +216,7 @@ export class HyDesktopMenuLinks {
if (leaveEvent.clientY < headerHeight - 4) {
this.closePanel();
+ clearTimeout(this._hoverTimer);
}
event.stopPropagation();
--
GitLab