From 1f8fdaab3d8f85a7a375420f2d3a5035e81eb3ec Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Fri, 24 Jun 2022 12:06:17 -0400
Subject: [PATCH] ISTWCMS-5633:confirming javascript for horizontal menu works
when pulled into pattern lab footer file.
---
.../menu--horizontal/_menu--horizontal.scss | 2 +-
.../menu/menu--horizontal/menu--horizontal.js | 154 +++++++++++-------
2 files changed, 94 insertions(+), 62 deletions(-)
diff --git a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
index ff0e9958..485247de 100644
--- a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -277,8 +277,8 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
background-color: var(--uw-white);
}
}
-
}
+
// Top Level <ul> flex top items
&--horizontal {
@include uw-full-width;
diff --git a/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js
index b081ab04..937e631d 100644
--- a/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js
+++ b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js
@@ -3,25 +3,33 @@
*/
(function ($, Drupal) {
+ 'use strict';
Drupal.behaviors.menuhorizontal = {
- attach: function (context, settings) {
+ attach: function (context) {
// uw-horizontal-nav.
$(document).ready(
function () {
-
// Have to add the run this code only once, so that multiple
// loads of the menu are not shown when logged in.
$(document, context).once('menuhorizontal').each(
function () {
- const toggle = document.querySelector('.uw-navigation-button');
- const navHeader = document.querySelector('.uw-header__navigation');
- const menus = document.querySelectorAll('.menu--horizontal');
- const items = document.querySelectorAll('.menu--item');
+ var toggle = document.querySelector('.uw-navigation-button');
+ var navHeader = document.querySelector('.uw-header__navigation');
+ var menus = document.querySelectorAll('.menu--horizontal');
+ var items = document.querySelectorAll('.menu__item');
/* Toggle mobile menu */
- function toggleMenu()
- {
+ /**
+ * Javascript for Toggle mobile menu
+ * Allows for buttons to be used.
+ * @const {string}
+ * @const {string}
+ * @const {Object}
+ * @const {Object}
+ * @returns {boolean} css for toggle.
+ */
+ function toggleMenu() {
if (this.classList.contains('active')) {
this.classList.remove('active');
@@ -41,59 +49,70 @@
}
- for (let menu of menus) {
- /* Activate Submenu */
+ /**
+ * Javascript for Toggle items
+ * Allows for buttons to be used.
+ * @const {string}
+ * @const {string}
+ * @const {Object}
+ * @const {Object}
+ * @returns {boolean} css for toggle.
+ */
+ function toggleItem() {
- function toggleItem()
- {
+ var parent = this.parentNode.parentNode.parentNode.parentNode;
- var parent = this.parentNode.parentNode.parentNode.parentNode;
+ var screenWidth = $(window).width();
- var screenWidth = $(window).width();
+ if (this.classList.contains('submenu-active')) {
- if (this.classList.contains('submenu-active')) {
+ this.classList.remove('submenu-active');
- this.classList.remove('submenu-active');
+ if (this.hasAttribute('aria-expanded', 'true')) {
- if (this.hasAttribute('aria-expanded', 'true')) {
-
- this.setAttribute('aria-expanded', 'false');
- }
- // If hamburger.
- if (screenWidth <= 767) {
- // Look at parents and reset the menus.
- if (parent.classList.contains('uw-horizontal-nav--secondary')) {
- $('.uw-horizontal-nav--main').css('display', 'block');
- }
- }
+ this.setAttribute('aria-expanded', 'false');
}
- else if ($('.submenu-active')) {
-
- // Get elements with .submnenu-active then close them,.
- $('.submenu-active').removeClass('submenu-active').attr('aria-expanded', 'false');
-
- // And open this one.
- this.classList.add('submenu-active');
- this.setAttribute('aria-expanded', 'true');
-
- // If hamburger.
- if (screenWidth <= 767) {
- // Look at parents and hide other menus if not secondary and open.
- if (parent.classList.contains('uw-horizontal-nav--secondary')) {
- $('.uw-horizontal-nav--main').css('display', 'none');
- $('.uw-horizontal-nav--secondary').css('display', 'block');
- }
+ // If hamburger.
+ if (screenWidth <= 767) {
+ // Look at parents and reset the menus.
+ if (parent.classList.contains('uw-horizontal-nav--secondary')) {
+ $('.uw-horizontal-nav--main').css('display', 'block');
}
}
- else {
- this.classList.add('submenu-active');
- this.setAttribute('aria-expanded', 'true');
+ }
+ else if ($('.submenu-active')) {
+
+ // Get elements with .submnenu-active then close them,.
+ $('.submenu-active').removeClass('submenu-active').attr('aria-expanded', 'false');
+
+ // And open this one.
+ this.classList.add('submenu-active');
+ this.setAttribute('aria-expanded', 'true');
+
+ // If hamburger.
+ if (screenWidth <= 767) {
+ // Look at parents and hide other menus
+ // if not secondary and open.
+ if (parent.classList.contains('uw-horizontal-nav--secondary')) {
+ $('.uw-horizontal-nav--main').css('display', 'none');
+ $('.uw-horizontal-nav--secondary').css('display', 'block');
+ }
}
}
+ else {
+ this.classList.add('submenu-active');
+ this.setAttribute('aria-expanded', 'true');
+ }
+ }
+ for (let menu of menus) {
/* Close Submenu From Anywhere */
- function closeSubmenu(e)
- {
+ /**
+ * Javascript
+ * Allows for close menu.
+ * @returns {boolean} close menu.
+ */
+ function closeSubmenu(e) {
let isClickInside = menu.contains(e.target);
@@ -101,16 +120,16 @@
menu.querySelector('.submenu-active').classList.remove('submenu-active');
}
-
}
document.addEventListener('click', closeSubmenu, FALSE);
}
for (let item of items) {
- if (item.querySelector('.menu--subnav')) {
+ if (item.querySelector('.menu__subnav')) {
item.addEventListener('click', toggleItem, FALSE);
}
- // Add event listeners to keyup event of enter and escape keys for the menu--items .
+ // Add event listeners to keyup event of enter
+ // and escape keys for the menu--items .
item.addEventListener(
'keyup', function (e) {
@@ -127,7 +146,7 @@
);
item.addEventListener(
'keypress', function (e) {
- if (e.keyCode == 32) {
+ if (e.keyCode === 32) {
this.click();
e.preventDefault();
}
@@ -135,20 +154,27 @@
);
}
- // If Toggle on page Add event listeners on the menu toggle button.
+ // If Toggle on page Add event
+ // listeners on the menu toggle button.
if (toggle) {
toggle.addEventListener('click', toggleMenu, FALSE);
}
// Apply timeout to the to event firing
// so it fires at end of event.
- function debouncer(func)
- {
- var timeoutID,
- timeout = 300;
+ /**
+ * Javascript for debounce
+ * @var {string}
+ * @var {Object}
+ * @const {Object}
+ * @returns {funcction} debounce.
+ */
+ function debouncer(func) {
+ var timeoutID;
+ var timeout = 300;
return function () {
- var scope = this,
- args = arguments;
+ var scope = this;
+ var args = arguments;
clearTimeout(timeoutID);
timeoutID = setTimeout(
function () {
@@ -160,8 +186,14 @@
// Check the width of the screen and
// force the button click if wider that 767px.
- function menuCheckWidth()
- {
+ /**
+ * Javascript for check width
+ * @var {string}
+ * @var {Object}
+ * @const {Object}
+ * @returns {funcction} how wide.
+ */
+ function menuCheckWidth() {
// Check if menu is on page.
if (navHeader) {
--
GitLab