From 36e9a903f45d5d8171ef8b49614ebd99e088534c Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Mon, 18 Jan 2021 15:57:20 +0200
Subject: [PATCH] close menu lang when desktop panel is open and vice versa
---
src/components.d.ts | 2 ++
.../menu-language/menu-language.tsx | 24 +++++++++++++--
.../navigation/menu-language/readme.md | 6 ++++
.../hy-desktop-menu-links.tsx | 30 +++++++++++++++++--
.../hy-desktop-menu-links/readme.md | 6 ++++
5 files changed, 63 insertions(+), 5 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 3e9e50d2..f5282119 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -1559,6 +1559,7 @@ declare namespace LocalJSX {
}
interface HyDesktopMenuLinks {
dataDesktopLinks?: DesktopLinks[] | string;
+ onMenuDesktopToggled?: (event: CustomEvent<any>) => void;
}
interface HyDocsContainer {}
interface HyDropdown {
@@ -1860,6 +1861,7 @@ declare namespace LocalJSX {
dataMenuLanguage?: MenuLanguage[] | string;
isMobile?: boolean;
labels?: ComponentLabels[] | string;
+ onMenuLanguageToggled?: (event: CustomEvent<any>) => void;
}
interface HyMenuLanguageItem {
abbr?: string;
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 14d4e70f..781645bd 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -8,7 +8,7 @@ export interface MenuLanguage {
isActive?: boolean;
}
-import {Component, h, Prop, Host, Watch, Element, Listen, State} from '@stencil/core';
+import {Component, h, Prop, Host, Watch, Element, Listen, State, Event, EventEmitter} from '@stencil/core';
@Component({
tag: 'hy-menu-language',
@@ -21,6 +21,9 @@ export class MenuLanguage {
@Prop() isMobile: boolean = false;
@Prop() labels?: ComponentLabels[] | string;
@State() isMenuOpen: boolean = false;
+
+ @Event() menuLanguageToggled: EventEmitter;
+
private _dataMenuLanguage: MenuLanguage[];
private _labels: ComponentLabels[];
@@ -32,19 +35,36 @@ export class MenuLanguage {
this._labels = typeof data === 'string' ? JSON.parse(data) : data;
}
+ // Close the language menu if user clicks anywhere outside the Menu language component.
@Listen('click', {target: 'window'})
handleOutsideMenuClick(event) {
- // Close the language menu if user clicks anywhere outside the Menu language component.
this.isMenuOpen = false;
event.stopPropagation();
}
+ // CLose the language menu if user opens the desktop menu panel.
+ @Listen('menuDesktopToggled', {target: 'document'})
+ desktopMenuToggled() {
+ this.isMenuOpen = false;
+ }
+
+ @Listen('focus')
+ handleComponentFocus(event) {
+ // Close desktop menu panel if it's open.
+ this.menuLanguageToggled.emit();
+
+ event.stopPropagation();
+ }
+
@Listen('click')
handleComponentClick(event) {
this.isMenuOpen = !this.isMenuOpen;
const languageMenuSelector = event.target as HTMLElement;
if (this.isMenuOpen) {
+ // Close desktop menu panel if it's open.
+ this.menuLanguageToggled.emit();
+
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
const headerHeight = `${
languageMenuSelector.offsetHeight +
diff --git a/src/components/navigation/menu-language/readme.md b/src/components/navigation/menu-language/readme.md
index 35ba8fbb..cd19087f 100644
--- a/src/components/navigation/menu-language/readme.md
+++ b/src/components/navigation/menu-language/readme.md
@@ -10,6 +10,12 @@
| `isMobile` | `is-mobile` | | `boolean` | `false` |
| `labels` | `labels` | | `ComponentLabels[] \| string` | `undefined` |
+## Events
+
+| Event | Description | Type |
+| --------------------- | ----------- | ------------------ |
+| `menuLanguageToggled` | | `CustomEvent<any>` |
+
## Dependencies
### Used by
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 43b970e5..38881507 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
@@ -19,7 +19,7 @@ export interface DesktopLinks {
}
import {ColorVariant} from '../../../utils/utils';
-import {Component, h, Element, Prop, State, Watch} from '@stencil/core';
+import {Component, h, Element, Prop, State, Watch, EventEmitter, Event, Listen} from '@stencil/core';
@Component({
tag: 'hy-desktop-menu-links',
@@ -39,6 +39,8 @@ export class HyDesktopMenuLinks {
@State() isDesktopMenuOpen: boolean = false;
@State() currenOpenMenuId: number = 0;
+ @Event() menuDesktopToggled: EventEmitter;
+
private _submenuLeftMargin: number = 32;
private _headerBorderOffset: number = 0;
@@ -70,7 +72,22 @@ export class HyDesktopMenuLinks {
showPanel(id) {
// Close menu lang menu if it's open
- //this.closeLangMenu();
+ this.menuDesktopToggled.emit();
+
+ /*
+ @Listen('handleClick', {capture: true}) handleClick() {
+ this.menuContainerToggled.emit({
+ triggerItem: this.menuLinkId,
+ triggerType: 'add',
+ });
+ const currentParent = this.el.parentNode;
+ this.addBreadcrumb.emit({
+ url: this.url,
+ label: currentParent.parentElement.getAttribute('label'),
+ bid: this.menuLinkId,
+ });
+ }
+ */
// Open desktop menu panel
this.isDesktopMenuOpen = true;
@@ -89,6 +106,7 @@ export class HyDesktopMenuLinks {
item.classList.remove('hy-desktop-menu-panel--is-active');
item.setAttribute('aria-hidden', 'true');
(item as HTMLElement).style.transition = 'none';
+ (item as HTMLElement).style.opacity = '0';
});
// Add active classes to the currently active item and its sibling element.
@@ -114,7 +132,6 @@ export class HyDesktopMenuLinks {
const headerHeight = this.el.parentElement.classList.contains('hy-site-header--sticky-active')
? `${this.el.parentElement.offsetHeight + this._headerBorderOffset}px`
: `${this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset}px`;
- console.log(this.el.parentElement.offsetTop + ' ' + this.el.parentElement.offsetHeight);
activeMenuItemSibling.style.top = headerHeight;
// Add shadow backdrop
@@ -190,6 +207,13 @@ export class HyDesktopMenuLinks {
event.stopPropagation();
}
+ // CLose the desktop menu panel if user opens the language menu.
+ @Listen('menuLanguageToggled', {target: 'document'})
+ menuLanguageToggled() {
+ let fadeOut = true;
+ this.closePanel(fadeOut);
+ }
+
handleDesktopMenuEnter(event, id) {
this._hoverTimer = setTimeout(() => {
const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`) as HTMLElement;
diff --git a/src/components/site-header/hy-desktop-menu-links/readme.md b/src/components/site-header/hy-desktop-menu-links/readme.md
index 97289c9d..c35a3a1b 100644
--- a/src/components/site-header/hy-desktop-menu-links/readme.md
+++ b/src/components/site-header/hy-desktop-menu-links/readme.md
@@ -8,6 +8,12 @@
| ------------------ | -------------------- | ----------- | -------------------------- | ----------- |
| `dataDesktopLinks` | `data-desktop-links` | | `DesktopLinks[] \| string` | `undefined` |
+## Events
+
+| Event | Description | Type |
+| -------------------- | ----------- | ------------------ |
+| `menuDesktopToggled` | | `CustomEvent<any>` |
+
## Dependencies
### Used by
--
GitLab