From 1297eb7beedc58ba6037f478221a267e52cb08e1 Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Wed, 4 Nov 2020 13:30:50 +0200
Subject: [PATCH] Close language menu on click outside dropdown
---
.../menu-language/menu-language.scss | 4 +++
.../menu-language/menu-language.tsx | 29 +++++++------------
2 files changed, 15 insertions(+), 18 deletions(-)
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index aa6a38eb..f41bf241 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -42,6 +42,10 @@
outline-offset: 2px;
}
+ &:hover {
+ cursor: pointer;
+ }
+
&.is-open {
.menu--language__toggle__caret {
transform: rotate(180deg);
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 4eb8fc6d..6af1f0e7 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -51,34 +51,27 @@ export class MenuLanguage {
@Listen('click')
handleComponentClick(event) {
- let target = event.target as HTMLTextAreaElement;
- const targetElement = target.tagName.toLowerCase();
- console.log(targetElement);
+ event.stopPropagation();
}
@Listen('click', {target: 'window'})
handleClick(event) {
if (this.isMenuOpen) {
- let target = event.target as HTMLTextAreaElement;
+ const target = event.target as HTMLTextAreaElement;
const targetElement = target.tagName.toLowerCase();
- console.log(targetElement);
- /*
- let hyHeader = this.el.closest('.hy-site-header');
- console.log(hyHeader);
+ if (targetElement !== 'hy-menu-language') {
+ const hyHeader = this.el.closest('.hy-site-header');
+ const hyBackdropDiv = (hyHeader as HTMLElement).children[0];
- if (hyHeader) {
- var hyBackdropDiv = (hyHeader as HTMLElement).children[0];
+ if (hyBackdropDiv && hyBackdropDiv.classList.contains('is-active')) {
+ (hyBackdropDiv as HTMLElement).classList.remove('is-active');
+ (hyBackdropDiv as HTMLElement).style.top = '0';
+ this.isMenuOpen = !this.isMenuOpen;
+ }
}
-
- if (hyBackdropDiv) {
- console.log('backdrop found');
- (hyBackdropDiv as HTMLElement).classList.remove('is-active');
- (hyBackdropDiv as HTMLElement).style.top = '0';
- this.isMenuOpen = !this.isMenuOpen;
- }
- */
}
+ event.stopPropagation();
}
componentWillRender() {
--
GitLab