From fee44e7c8db3060cd5c8331f804ebfe7077d52b8 Mon Sep 17 00:00:00 2001 From: Matt Baer Date: Thu, 30 Jul 2020 11:26:29 -0400 Subject: [PATCH] Add menu hover delay on user pages + editor --- less/pad.less | 2 +- static/js/menu.js | 34 ++++++++++++++++++++++++++++++ templates/base.tmpl | 3 ++- templates/collection.tmpl | 3 ++- templates/pad.tmpl | 5 +++-- templates/user/include/footer.tmpl | 1 + templates/user/include/header.tmpl | 2 +- 7 files changed, 44 insertions(+), 6 deletions(-) create mode 100644 static/js/menu.js diff --git a/less/pad.less b/less/pad.less index d3e4350..91c002d 100644 --- a/less/pad.less +++ b/less/pad.less @@ -60,7 +60,7 @@ &:hover { background: @lightNavHoverBG; } - &:hover > ul { + &:hover > ul, &.open > ul { display: block; } &.selected { diff --git a/static/js/menu.js b/static/js/menu.js new file mode 100644 index 0000000..9b631a8 --- /dev/null +++ b/static/js/menu.js @@ -0,0 +1,34 @@ +var menuItems = document.querySelectorAll('li.has-submenu'); +var menuTimer; +function closeMenu($menu) { + $menu.querySelector('a').setAttribute('aria-expanded', "false"); + $menu.className = "has-submenu"; +} +Array.prototype.forEach.call(menuItems, function(el, i){ + el.addEventListener("mouseover", function(event){ + let $menu = document.querySelectorAll(".has-submenu.open"); + if ($menu.length > 0) { + closeMenu($menu[0]); + } + this.className = "has-submenu open"; + this.querySelector('a').setAttribute('aria-expanded', "true"); + clearTimeout(menuTimer); + }); + el.addEventListener("mouseout", function(event){ + menuTimer = setTimeout(function(event){ + let $menu = document.querySelector(".has-submenu.open"); + closeMenu($menu); + }, 500); + }); + el.querySelector('a').addEventListener("click", function(event){ + if (this.parentNode.className == "has-submenu") { + this.parentNode.className = "has-submenu open"; + this.setAttribute('aria-expanded', "true"); + } else { + this.parentNode.className = "has-submenu"; + this.setAttribute('aria-expanded', "false"); + } + event.preventDefault(); + return false; + }); +}); \ No newline at end of file diff --git a/templates/base.tmpl b/templates/base.tmpl index 556dfba..604d0ff 100644 --- a/templates/base.tmpl +++ b/templates/base.tmpl @@ -24,7 +24,7 @@