From 92ef9519a15bddd63e4c27221542911248341985 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Sun, 12 Jul 2020 13:35:00 +0200
Subject: [PATCH] Fix navbar subnav JS bug
---
.../02-organisms/00-global/navbar.mustache | 10 +++++++---
source/js/components/footer/FooterCollapsible.vue | 11 +++--------
source/js/components/navbar/Navbar.vue | 13 +++----------
source/js/components/navbar/NavbarSubitem.vue | 15 +++++++++++++--
source/js/utils.js | 12 ++++++++++++
5 files changed, 38 insertions(+), 23 deletions(-)
diff --git a/source/_patterns/02-organisms/00-global/navbar.mustache b/source/_patterns/02-organisms/00-global/navbar.mustache
index de423d8..5e86d17 100644
--- a/source/_patterns/02-organisms/00-global/navbar.mustache
+++ b/source/_patterns/02-organisms/00-global/navbar.mustache
@@ -28,9 +28,9 @@
<a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
</li>
<li class="navbar-menu__item">
- <ui-navbar-subitem label="Lidé" href="{{ link.templates-people }}">
+ <ui-navbar-subitem label="Lidé">
<ul class="navbar-menu__submenu">
- <li><a href="#" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
+ <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
</ul>
</ui-navbar-subtitem>
</li>
@@ -42,7 +42,11 @@
</ui-navbar-subtitem>
</li>
<li class="navbar-menu__item">
- <a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volby</a>
+ <ui-navbar-subitem label="Volby">
+ <ul class="navbar-menu__submenu">
+ <li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volební rozcestník</a></li>
+ </ul>
+ </ui-navbar-subtitem>
</li>
<li class="navbar-menu__item">
<a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
diff --git a/source/js/components/footer/FooterCollapsible.vue b/source/js/components/footer/FooterCollapsible.vue
index 4e241e7..6503acc 100644
--- a/source/js/components/footer/FooterCollapsible.vue
+++ b/source/js/components/footer/FooterCollapsible.vue
@@ -9,17 +9,15 @@
</template>
<script>
-import screens from "../../../../screens";
-
-const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
+import { isLgScreenSize } from "../../utils";
export default {
data() {
return {
- isLgScreenSize: this.getWindowWidth() >= lgScreenSize,
+ isLgScreenSize: isLgScreenSize(),
show: false,
resizeHandler: () => {
- this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize;
+ this.$data.isLgScreenSize = isLgScreenSize();
},
};
},
@@ -43,9 +41,6 @@ export default {
}
},
methods: {
- getWindowWidth() {
- return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
- },
handleClick() {
if (this.$props.href) {
window.location = this.$props.href;
diff --git a/source/js/components/navbar/Navbar.vue b/source/js/components/navbar/Navbar.vue
index 3360f53..bf73f55 100644
--- a/source/js/components/navbar/Navbar.vue
+++ b/source/js/components/navbar/Navbar.vue
@@ -1,8 +1,6 @@
<script>
import UiNavbarSubitem from "./NavbarSubitem";
- import screens from "../../../../screens";
-
- const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
+ import { isLgScreenSize } from "../../utils";
export default {
components: {
@@ -10,18 +8,13 @@
},
data() {
return {
- isLgScreenSize: this.getWindowWidth() >= lgScreenSize,
+ isLgScreenSize: isLgScreenSize(),
show: false,
resizeHandler: () => {
- this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize;
+ this.$data.isLgScreenSize = isLgScreenSize();
},
};
},
- methods: {
- getWindowWidth() {
- return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
- }
- },
mounted() {
this.$nextTick(() => {
window.addEventListener("resize", this.$data.resizeHandler);
diff --git a/source/js/components/navbar/NavbarSubitem.vue b/source/js/components/navbar/NavbarSubitem.vue
index dad7335..a3b550e 100644
--- a/source/js/components/navbar/NavbarSubitem.vue
+++ b/source/js/components/navbar/NavbarSubitem.vue
@@ -1,7 +1,6 @@
<template>
- <div @mouseenter="show = true" @mouseleave="show = false">
+ <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
<span class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
-
<div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
<slot>
</slot>
@@ -10,6 +9,8 @@
</template>
<script>
+import { isLgScreenSize } from "../../utils";
+
export default {
data() {
return {
@@ -25,6 +26,16 @@ export default {
}
},
methods: {
+ onMouseEnter() {
+ if (isLgScreenSize()) {
+ this.$data.show = true;
+ }
+ },
+ onMouseLeave() {
+ if (isLgScreenSize()) {
+ this.$data.show = false;
+ }
+ },
handleClick() {
if (this.$props.href) {
window.location = this.$props.href;
diff --git a/source/js/utils.js b/source/js/utils.js
index 467970e..dd7ac5d 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -1,5 +1,17 @@
+import screens from "../../screens";
+
+const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
+
export const forEachNode = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, array[i]); // passes back stuff we need
}
};
+
+export function getWindowWidth() {
+ return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+}
+
+export function isLgScreenSize() {
+ return getWindowWidth() >= lgScreenSize;
+}
--
GitLab