Skip to content
Snippets Groups Projects
Commit bcbb7a68 authored by Eric Bremner's avatar Eric Bremner
Browse files

ISTWCMS-4199: adding logic to run horizontal menu js only once

parent 3de56839
No related branches found
No related tags found
1 merge request!9Istwcms 4199 theme menus
Hide whitespace changes
Inline Side-by-side
js/component_scripts.min.js
+ 132
− 124
View file @ bcbb7a68
...@@ -240,170 +240,178 @@ ...@@ -240,170 +240,178 @@
// uw-horizontal-nav // uw-horizontal-nav
$(document).ready(function(){ $(document).ready(function(){
const toggle = document.querySelector(".uw-navigation-button"); // Have to add the run this code only once, so that multiple
const navHeader = document.querySelector(".uw-header__navigation"); // loads of the menu are not shown when logged in.
const menus = document.querySelectorAll(".menu--horizontal"); $(document, context).once('menuhorizontal').each( function() {
const items = document.querySelectorAll(".menu--item");
/* Toggle mobile menu */ const toggle = document.querySelector(".uw-navigation-button");
function toggleMenu() { 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.classList.remove('active');
this.setAttribute('aria-expanded', 'false'); this.setAttribute('aria-expanded', 'false');
navHeader.classList.remove('open'); navHeader.classList.remove('open');
navHeader.classList.add('close'); navHeader.classList.add('close');
$('html').removeClass('no-scroll'); $('html').removeClass('no-scroll');
} else { } else {
this.classList.add('active'); this.classList.add('active');
this.setAttribute('aria-expanded', 'true'); this.setAttribute('aria-expanded', 'true');
navHeader.classList.remove('close'); navHeader.classList.remove('close');
navHeader.classList.add('open'); navHeader.classList.add('open');
$('html').addClass('no-scroll'); $('html').addClass('no-scroll');
} }
}; };
for (let menu of menus) { for (let menu of menus) {
/* Activate Submenu */ /* Activate Submenu */
function toggleItem() { function toggleItem() {
var parent = this.parentNode.parentNode.parentNode.parentNode; console.log('CLICKED');
var screenWidth = $(window).width();
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 (this.hasAttribute('aria-expanded', 'true')) {
}
// 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,
$('.submenu-active').removeClass('submenu-active').attr('aria-expanded', 'false'); this.setAttribute('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 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 */ /* Close Submenu From Anywhere */
function closeSubmenu(e) { function closeSubmenu(e) {
let isClickInside = menu.contains(e.target); let isClickInside = menu.contains(e.target);
if (!isClickInside && menu.querySelector(".submenu-active")) { if (!isClickInside && menu.querySelector(".submenu-active")) {
menu.querySelector(".submenu-active").classList.remove("submenu-active");
}
}
}
for (let item of items) { menu.querySelector(".submenu-active").classList.remove("submenu-active");
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) {
if(e.key === "Enter") {
this.click();
}
if(e.key === "Escape") {
this.click();
} }
}
// Space bar keypress to open close menu console.log(items);
// keyCode to be deprecated find way to use key for (let item of items) {
}); if (item.querySelector(".menu--subnav")) {
item.addEventListener('keypress', function(e) { item.addEventListener("click", toggleItem, false);
if(e.keyCode == 32) {
this.click();
e.preventDefault();
} }
}); // Add event listeners to keyup event of enter and escape keys for the menu--items .
} item.addEventListener('keyup', function (e) {
document.addEventListener("click", closeSubmenu, false);
// Add event listeners on the menu toggle button.
toggle.addEventListener("click", toggleMenu, false);
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 document.addEventListener("click", closeSubmenu, false);
// so it fires at end of event. // Add event listeners on the menu toggle button.
function debouncer( func ) { //toggle.addEventListener("click", toggleMenu, false);
var timeoutID ,
timeout = 200;
return function () { // apply timeout to the to event firing
var scope = this , // so it fires at end of event.
args = arguments; function debouncer(func) {
clearTimeout( timeoutID ); var timeoutID,
timeoutID = setTimeout( function () { timeout = 200;
func.apply( scope , Array.prototype.slice.call( args ) ); return function () {
} , timeout ); var scope = this,
}; args = arguments;
} clearTimeout(timeoutID);
// Check the width of the screen and timeoutID = setTimeout(function () {
// force the button click if wider that 767px. func.apply(scope, Array.prototype.slice.call(args));
function menuCheckWidth() { }, timeout);
// 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')){ // Check the width of the screen and
$('.uw-header__navigation').removeClass('open'); // force the button click if wider that 767px.
$('.uw-header__navigation').addClass('close'); 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 // Listen to event resize and apply the debouncer
// to the menuCheckWidth function. // to the menuCheckWidth function.
$(window).resize( $(window).resize(
debouncer( function () { debouncer(function () {
menuCheckWidth(); menuCheckWidth();
} }
) )
); );
menuCheckWidth(); menuCheckWidth();
});
}); });
} }
}; };
......
source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
+ 132
− 124
View file @ bcbb7a68
...@@ -4,170 +4,178 @@ ...@@ -4,170 +4,178 @@
// uw-horizontal-nav // uw-horizontal-nav
$(document).ready(function(){ $(document).ready(function(){
const toggle = document.querySelector(".uw-navigation-button"); // Have to add the run this code only once, so that multiple
const navHeader = document.querySelector(".uw-header__navigation"); // loads of the menu are not shown when logged in.
const menus = document.querySelectorAll(".menu--horizontal"); $(document, context).once('menuhorizontal').each( function() {
const items = document.querySelectorAll(".menu--item");
/* Toggle mobile menu */ const toggle = document.querySelector(".uw-navigation-button");
function toggleMenu() { 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.classList.remove('active');
this.setAttribute('aria-expanded', 'false'); this.setAttribute('aria-expanded', 'false');
navHeader.classList.remove('open'); navHeader.classList.remove('open');
navHeader.classList.add('close'); navHeader.classList.add('close');
$('html').removeClass('no-scroll'); $('html').removeClass('no-scroll');
} else { } else {
this.classList.add('active'); this.classList.add('active');
this.setAttribute('aria-expanded', 'true'); this.setAttribute('aria-expanded', 'true');
navHeader.classList.remove('close'); navHeader.classList.remove('close');
navHeader.classList.add('open'); navHeader.classList.add('open');
$('html').addClass('no-scroll'); $('html').addClass('no-scroll');
} }
}; };
for (let menu of menus) { for (let menu of menus) {
/* Activate Submenu */ /* Activate Submenu */
function toggleItem() { function toggleItem() {
var parent = this.parentNode.parentNode.parentNode.parentNode; console.log('CLICKED');
var screenWidth = $(window).width();
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 (this.hasAttribute('aria-expanded', 'true')) {
}
// 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,
$('.submenu-active').removeClass('submenu-active').attr('aria-expanded', 'false'); this.setAttribute('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 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 */ /* Close Submenu From Anywhere */
function closeSubmenu(e) { function closeSubmenu(e) {
let isClickInside = menu.contains(e.target); let isClickInside = menu.contains(e.target);
if (!isClickInside && menu.querySelector(".submenu-active")) { if (!isClickInside && menu.querySelector(".submenu-active")) {
menu.querySelector(".submenu-active").classList.remove("submenu-active");
}
}
}
for (let item of items) { menu.querySelector(".submenu-active").classList.remove("submenu-active");
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) {
if(e.key === "Enter") {
this.click();
}
if(e.key === "Escape") {
this.click();
} }
}
// Space bar keypress to open close menu console.log(items);
// keyCode to be deprecated find way to use key for (let item of items) {
}); if (item.querySelector(".menu--subnav")) {
item.addEventListener('keypress', function(e) { item.addEventListener("click", toggleItem, false);
if(e.keyCode == 32) {
this.click();
e.preventDefault();
} }
}); // Add event listeners to keyup event of enter and escape keys for the menu--items .
} item.addEventListener('keyup', function (e) {
document.addEventListener("click", closeSubmenu, false);
// Add event listeners on the menu toggle button.
toggle.addEventListener("click", toggleMenu, false);
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 document.addEventListener("click", closeSubmenu, false);
// so it fires at end of event. // Add event listeners on the menu toggle button.
function debouncer( func ) { //toggle.addEventListener("click", toggleMenu, false);
var timeoutID ,
timeout = 200;
return function () { // apply timeout to the to event firing
var scope = this , // so it fires at end of event.
args = arguments; function debouncer(func) {
clearTimeout( timeoutID ); var timeoutID,
timeoutID = setTimeout( function () { timeout = 200;
func.apply( scope , Array.prototype.slice.call( args ) ); return function () {
} , timeout ); var scope = this,
}; args = arguments;
} clearTimeout(timeoutID);
// Check the width of the screen and timeoutID = setTimeout(function () {
// force the button click if wider that 767px. func.apply(scope, Array.prototype.slice.call(args));
function menuCheckWidth() { }, timeout);
// 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')){ // Check the width of the screen and
$('.uw-header__navigation').removeClass('open'); // force the button click if wider that 767px.
$('.uw-header__navigation').addClass('close'); 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 // Listen to event resize and apply the debouncer
// to the menuCheckWidth function. // to the menuCheckWidth function.
$(window).resize( $(window).resize(
debouncer( function () { debouncer(function () {
menuCheckWidth(); menuCheckWidth();
} }
) )
); );
menuCheckWidth(); menuCheckWidth();
});
}); });
} }
}; };
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment