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
background-color: var(--uw-white);
}
}
}
// Top Level <ul> flex top items
&--horizontal {
@include uw-full-width;
......
src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js
+ 93
− 61
View file @ 1f8fdaab
......@@ -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) {
......
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