Skip to content
Snippets Groups Projects
Commit 1f8fdaab authored by Martin Leblanc's avatar Martin Leblanc
Browse files

ISTWCMS-5633:confirming javascript for horizontal menu works when pulled into... 

ISTWCMS-5633:confirming javascript for horizontal menu works when pulled into pattern lab footer file.
parent fff57a1a
No related branches found
No related tags found
1 merge request!15ISTWCMS-5633: import of website's header section
Hide whitespace changes
Inline Side-by-side
src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+ 1
− 1
View file @ 1f8fdaab
...@@ -277,8 +277,8 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org ...@@ -277,8 +277,8 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
background-color: var(--uw-white); background-color: var(--uw-white);
} }
} }
} }
// Top Level <ul> flex top items // Top Level <ul> flex top items
&--horizontal { &--horizontal {
@include uw-full-width; @include uw-full-width;
......
src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js
+ 93
− 61
View file @ 1f8fdaab
...@@ -3,25 +3,33 @@ ...@@ -3,25 +3,33 @@
*/ */
(function ($, Drupal) { (function ($, Drupal) {
'use strict';
Drupal.behaviors.menuhorizontal = { Drupal.behaviors.menuhorizontal = {
attach: function (context, settings) { attach: function (context) {
// uw-horizontal-nav. // uw-horizontal-nav.
$(document).ready( $(document).ready(
function () { function () {
// Have to add the run this code only once, so that multiple // Have to add the run this code only once, so that multiple
// loads of the menu are not shown when logged in. // loads of the menu are not shown when logged in.
$(document, context).once('menuhorizontal').each( $(document, context).once('menuhorizontal').each(
function () { function () {
const toggle = document.querySelector('.uw-navigation-button'); var toggle = document.querySelector('.uw-navigation-button');
const navHeader = document.querySelector('.uw-header__navigation'); var navHeader = document.querySelector('.uw-header__navigation');
const menus = document.querySelectorAll('.menu--horizontal'); var menus = document.querySelectorAll('.menu--horizontal');
const items = document.querySelectorAll('.menu--item'); var items = document.querySelectorAll('.menu__item');
/* Toggle mobile menu */ /* 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')) { if (this.classList.contains('active')) {
this.classList.remove('active'); this.classList.remove('active');
...@@ -41,59 +49,70 @@ ...@@ -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');
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')) { // If hamburger.
if (screenWidth <= 767) {
// Get elements with .submnenu-active then close them,. // Look at parents and reset the menus.
$('.submenu-active').removeClass('submenu-active').attr('aria-expanded', 'false'); if (parent.classList.contains('uw-horizontal-nav--secondary')) {
$('.uw-horizontal-nav--main').css('display', 'block');
// 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'); else if ($('.submenu-active')) {
this.setAttribute('aria-expanded', 'true');
// 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 */ /* 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); let isClickInside = menu.contains(e.target);
...@@ -101,16 +120,16 @@ ...@@ -101,16 +120,16 @@
menu.querySelector('.submenu-active').classList.remove('submenu-active'); menu.querySelector('.submenu-active').classList.remove('submenu-active');
} }
} }
document.addEventListener('click', closeSubmenu, FALSE); document.addEventListener('click', closeSubmenu, FALSE);
} }
for (let item of items) { for (let item of items) {
if (item.querySelector('.menu--subnav')) { if (item.querySelector('.menu__subnav')) {
item.addEventListener('click', toggleItem, FALSE); 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( item.addEventListener(
'keyup', function (e) { 'keyup', function (e) {
...@@ -127,7 +146,7 @@ ...@@ -127,7 +146,7 @@
); );
item.addEventListener( item.addEventListener(
'keypress', function (e) { 'keypress', function (e) {
if (e.keyCode == 32) { if (e.keyCode === 32) {
this.click(); this.click();
e.preventDefault(); e.preventDefault();
} }
...@@ -135,20 +154,27 @@ ...@@ -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) { if (toggle) {
toggle.addEventListener('click', toggleMenu, FALSE); toggle.addEventListener('click', toggleMenu, FALSE);
} }
// Apply timeout to the to event firing // Apply timeout to the to event firing
// so it fires at end of event. // so it fires at end of event.
function debouncer(func) /**
{ * Javascript for debounce
var timeoutID, * @var {string}
timeout = 300; * @var {Object}
* @const {Object}
* @returns {funcction} debounce.
*/
function debouncer(func) {
var timeoutID;
var timeout = 300;
return function () { return function () {
var scope = this, var scope = this;
args = arguments; var args = arguments;
clearTimeout(timeoutID); clearTimeout(timeoutID);
timeoutID = setTimeout( timeoutID = setTimeout(
function () { function () {
...@@ -160,8 +186,14 @@ ...@@ -160,8 +186,14 @@
// Check the width of the screen and // Check the width of the screen and
// force the button click if wider that 767px. // 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. // Check if menu is on page.
if (navHeader) { if (navHeader) {
......
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