From bcbb7a68e18a6cde3e194942427b3c3d4eff625d Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Tue, 5 Jan 2021 15:12:45 -0500
Subject: [PATCH] ISTWCMS-4199: adding logic to run horizontal menu js only
once
---
js/component_scripts.min.js | 256 +++++++++---------
.../menu/menu--horizontal/menu--horizontal.js | 256 +++++++++---------
2 files changed, 264 insertions(+), 248 deletions(-)
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index 955ccc56..76107b6c 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -240,170 +240,178 @@
// uw-horizontal-nav
$(document).ready(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");
+ // 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() {
- /* Toggle mobile menu */
- function toggleMenu() {
+ 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");
- if (this.classList.contains('active')) {
+ /* Toggle mobile menu */
+ function toggleMenu() {
+
+ if (this.classList.contains('active')) {
this.classList.remove('active');
this.setAttribute('aria-expanded', 'false');
navHeader.classList.remove('open');
navHeader.classList.add('close');
- $('html').removeClass('no-scroll');
- } else {
- this.classList.add('active');
- this.setAttribute('aria-expanded', 'true');
- navHeader.classList.remove('close');
- navHeader.classList.add('open');
- $('html').addClass('no-scroll');
+ $('html').removeClass('no-scroll');
+ } else {
+ this.classList.add('active');
+ this.setAttribute('aria-expanded', 'true');
+ navHeader.classList.remove('close');
+ navHeader.classList.add('open');
+ $('html').addClass('no-scroll');
- }
+ }
- };
+ };
- for (let menu of menus) {
- /* Activate Submenu */
+ for (let menu of menus) {
+ /* Activate Submenu */
- function toggleItem() {
+ function toggleItem() {
- var parent = this.parentNode.parentNode.parentNode.parentNode;
- var screenWidth = $(window).width();
+ console.log('CLICKED');
+ var parent = this.parentNode.parentNode.parentNode.parentNode;
+ var screenWidth = $(window).width();
- if (this.classList.contains('submenu-active')) {
+ if (this.classList.contains('submenu-active')) {
- this.classList.remove('submenu-active');
+ console.log('IF');
- if (this.hasAttribute('aria-expanded', 'true')) {
+ this.classList.remove('submenu-active');
- 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');
- }
- }
- } else if ( $('.submenu-active') ) {
- // Get elements with .submnenu-active than close them,
+ if (this.hasAttribute('aria-expanded', 'true')) {
- $('.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');
+ 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');
+ }
+ }
+ } else if ($('.submenu-active')) {
+ console.log('ELSEIF');
+ // Get elements with .submnenu-active than 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 {
+ console.log('ELSE');
+ this.classList.add('submenu-active');
+ this.setAttribute('aria-expanded', 'true');
}
}
- else {
- this.classList.add('submenu-active');
- this.setAttribute('aria-expanded', 'true');
- }
- }
- /* Close Submenu From Anywhere */
- function closeSubmenu(e) {
+ /* Close Submenu From Anywhere */
+ function closeSubmenu(e) {
- let isClickInside = menu.contains(e.target);
+ let isClickInside = menu.contains(e.target);
- if (!isClickInside && menu.querySelector(".submenu-active")) {
-
- menu.querySelector(".submenu-active").classList.remove("submenu-active");
- }
-
- }
- }
+ if (!isClickInside && menu.querySelector(".submenu-active")) {
- for (let item of items) {
- 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 .
- item.addEventListener('keyup', function(e) {
+ menu.querySelector(".submenu-active").classList.remove("submenu-active");
+ }
- if(e.key === "Enter") {
- this.click();
- }
- if(e.key === "Escape") {
- this.click();
}
+ }
- // Space bar keypress to open close menu
- // keyCode to be deprecated find way to use key
- });
- item.addEventListener('keypress', function(e) {
- if(e.keyCode == 32) {
- this.click();
- e.preventDefault();
+ console.log(items);
+ for (let item of items) {
+ if (item.querySelector(".menu--subnav")) {
+ item.addEventListener("click", toggleItem, false);
}
- });
- }
-
- document.addEventListener("click", closeSubmenu, false);
- // Add event listeners on the menu toggle button.
- toggle.addEventListener("click", toggleMenu, false);
-
+ // Add event listeners to keyup event of enter and escape keys for the menu--items .
+ item.addEventListener('keyup', function (e) {
+ if (e.key === "Enter") {
+ this.click();
+ }
+ if (e.key === "Escape") {
+ this.click();
+ }
+ // Space bar keypress to open close menu
+ // keyCode to be deprecated find way to use key
+ });
+ item.addEventListener('keypress', function (e) {
+ if (e.keyCode == 32) {
+ this.click();
+ e.preventDefault();
+ }
+ });
+ }
- // apply timeout to the to event firing
- // so it fires at end of event.
- function debouncer( func ) {
- var timeoutID ,
- timeout = 200;
- return function () {
- var scope = this ,
- args = arguments;
- clearTimeout( timeoutID );
- timeoutID = setTimeout( function () {
- func.apply( scope , Array.prototype.slice.call( args ) );
- } , timeout );
- };
- }
- // Check the width of the screen and
- // force the button click if wider that 767px.
- function menuCheckWidth() {
- // Set screenWidth var
- var screenWidth = $(window).width();
- if (screenWidth > 767 ) {
- if($('html').hasClass('no-scroll')){
- toggle.click();
- $('.uw-horizontal-nav').css('display', 'block');
- }
- else{
- $('.uw-header__navigation').addClass('open');
- }
+ document.addEventListener("click", closeSubmenu, false);
+ // Add event listeners on the menu toggle button.
+ //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 = 200;
+ return function () {
+ var scope = this,
+ args = arguments;
+ clearTimeout(timeoutID);
+ timeoutID = setTimeout(function () {
+ func.apply(scope, Array.prototype.slice.call(args));
+ }, timeout);
+ };
}
- else {
- if($('.uw-header__navigation').hasClass('open')){
- $('.uw-header__navigation').removeClass('open');
- $('.uw-header__navigation').addClass('close');
+
+ // Check the width of the screen and
+ // force the button click if wider that 767px.
+ function menuCheckWidth() {
+ // Set screenWidth var
+ var screenWidth = $(window).width();
+ if (screenWidth > 767) {
+ if ($('html').hasClass('no-scroll')) {
+ toggle.click();
+ $('.uw-horizontal-nav').css('display', 'block');
+ } else {
+ $('.uw-header__navigation').addClass('open');
+ }
+ } else {
+ if ($('.uw-header__navigation').hasClass('open')) {
+ $('.uw-header__navigation').removeClass('open');
+ $('.uw-header__navigation').addClass('close');
+ }
}
}
- }
- // Listen to event resize and apply the debouncer
- // to the menuCheckWidth function.
- $(window).resize(
- debouncer( function () {
+
+ // Listen to event resize and apply the debouncer
+ // to the menuCheckWidth function.
+ $(window).resize(
+ debouncer(function () {
menuCheckWidth();
}
- )
- );
+ )
+ );
- menuCheckWidth();
+ menuCheckWidth();
+ });
});
}
};
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
index 859aa498..b974f4f9 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
@@ -4,170 +4,178 @@
// uw-horizontal-nav
$(document).ready(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");
+ // 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() {
- /* Toggle mobile menu */
- function toggleMenu() {
+ 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");
- if (this.classList.contains('active')) {
+ /* Toggle mobile menu */
+ function toggleMenu() {
+
+ if (this.classList.contains('active')) {
this.classList.remove('active');
this.setAttribute('aria-expanded', 'false');
navHeader.classList.remove('open');
navHeader.classList.add('close');
- $('html').removeClass('no-scroll');
- } else {
- this.classList.add('active');
- this.setAttribute('aria-expanded', 'true');
- navHeader.classList.remove('close');
- navHeader.classList.add('open');
- $('html').addClass('no-scroll');
+ $('html').removeClass('no-scroll');
+ } else {
+ this.classList.add('active');
+ this.setAttribute('aria-expanded', 'true');
+ navHeader.classList.remove('close');
+ navHeader.classList.add('open');
+ $('html').addClass('no-scroll');
- }
+ }
- };
+ };
- for (let menu of menus) {
- /* Activate Submenu */
+ for (let menu of menus) {
+ /* Activate Submenu */
- function toggleItem() {
+ function toggleItem() {
- var parent = this.parentNode.parentNode.parentNode.parentNode;
- var screenWidth = $(window).width();
+ console.log('CLICKED');
+ var parent = this.parentNode.parentNode.parentNode.parentNode;
+ var screenWidth = $(window).width();
- if (this.classList.contains('submenu-active')) {
+ if (this.classList.contains('submenu-active')) {
- this.classList.remove('submenu-active');
+ console.log('IF');
- if (this.hasAttribute('aria-expanded', 'true')) {
+ this.classList.remove('submenu-active');
- 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');
- }
- }
- } else if ( $('.submenu-active') ) {
- // Get elements with .submnenu-active than close them,
+ if (this.hasAttribute('aria-expanded', 'true')) {
- $('.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');
+ 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');
+ }
+ }
+ } else if ($('.submenu-active')) {
+ console.log('ELSEIF');
+ // Get elements with .submnenu-active than 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 {
+ console.log('ELSE');
+ this.classList.add('submenu-active');
+ this.setAttribute('aria-expanded', 'true');
}
}
- else {
- this.classList.add('submenu-active');
- this.setAttribute('aria-expanded', 'true');
- }
- }
- /* Close Submenu From Anywhere */
- function closeSubmenu(e) {
+ /* Close Submenu From Anywhere */
+ function closeSubmenu(e) {
- let isClickInside = menu.contains(e.target);
+ let isClickInside = menu.contains(e.target);
- if (!isClickInside && menu.querySelector(".submenu-active")) {
-
- menu.querySelector(".submenu-active").classList.remove("submenu-active");
- }
-
- }
- }
+ if (!isClickInside && menu.querySelector(".submenu-active")) {
- for (let item of items) {
- 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 .
- item.addEventListener('keyup', function(e) {
+ menu.querySelector(".submenu-active").classList.remove("submenu-active");
+ }
- if(e.key === "Enter") {
- this.click();
- }
- if(e.key === "Escape") {
- this.click();
}
+ }
- // Space bar keypress to open close menu
- // keyCode to be deprecated find way to use key
- });
- item.addEventListener('keypress', function(e) {
- if(e.keyCode == 32) {
- this.click();
- e.preventDefault();
+ console.log(items);
+ for (let item of items) {
+ if (item.querySelector(".menu--subnav")) {
+ item.addEventListener("click", toggleItem, false);
}
- });
- }
-
- document.addEventListener("click", closeSubmenu, false);
- // Add event listeners on the menu toggle button.
- toggle.addEventListener("click", toggleMenu, false);
-
+ // Add event listeners to keyup event of enter and escape keys for the menu--items .
+ item.addEventListener('keyup', function (e) {
+ if (e.key === "Enter") {
+ this.click();
+ }
+ if (e.key === "Escape") {
+ this.click();
+ }
+ // Space bar keypress to open close menu
+ // keyCode to be deprecated find way to use key
+ });
+ item.addEventListener('keypress', function (e) {
+ if (e.keyCode == 32) {
+ this.click();
+ e.preventDefault();
+ }
+ });
+ }
- // apply timeout to the to event firing
- // so it fires at end of event.
- function debouncer( func ) {
- var timeoutID ,
- timeout = 200;
- return function () {
- var scope = this ,
- args = arguments;
- clearTimeout( timeoutID );
- timeoutID = setTimeout( function () {
- func.apply( scope , Array.prototype.slice.call( args ) );
- } , timeout );
- };
- }
- // Check the width of the screen and
- // force the button click if wider that 767px.
- function menuCheckWidth() {
- // Set screenWidth var
- var screenWidth = $(window).width();
- if (screenWidth > 767 ) {
- if($('html').hasClass('no-scroll')){
- toggle.click();
- $('.uw-horizontal-nav').css('display', 'block');
- }
- else{
- $('.uw-header__navigation').addClass('open');
- }
+ document.addEventListener("click", closeSubmenu, false);
+ // Add event listeners on the menu toggle button.
+ //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 = 200;
+ return function () {
+ var scope = this,
+ args = arguments;
+ clearTimeout(timeoutID);
+ timeoutID = setTimeout(function () {
+ func.apply(scope, Array.prototype.slice.call(args));
+ }, timeout);
+ };
}
- else {
- if($('.uw-header__navigation').hasClass('open')){
- $('.uw-header__navigation').removeClass('open');
- $('.uw-header__navigation').addClass('close');
+
+ // Check the width of the screen and
+ // force the button click if wider that 767px.
+ function menuCheckWidth() {
+ // Set screenWidth var
+ var screenWidth = $(window).width();
+ if (screenWidth > 767) {
+ if ($('html').hasClass('no-scroll')) {
+ toggle.click();
+ $('.uw-horizontal-nav').css('display', 'block');
+ } else {
+ $('.uw-header__navigation').addClass('open');
+ }
+ } else {
+ if ($('.uw-header__navigation').hasClass('open')) {
+ $('.uw-header__navigation').removeClass('open');
+ $('.uw-header__navigation').addClass('close');
+ }
}
}
- }
- // Listen to event resize and apply the debouncer
- // to the menuCheckWidth function.
- $(window).resize(
- debouncer( function () {
+
+ // Listen to event resize and apply the debouncer
+ // to the menuCheckWidth function.
+ $(window).resize(
+ debouncer(function () {
menuCheckWidth();
}
- )
- );
+ )
+ );
- menuCheckWidth();
+ menuCheckWidth();
+ });
});
}
};
--
GitLab