From e08eb48737fd4342e82b58d8654ef0b3ae417931 Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Fri, 27 Nov 2020 14:49:28 -0500
Subject: [PATCH] adding css to update active state, removed the max-width
contrants of uw-main
---
css/styles.css | 123 ++++++------------
js/component_scripts.min.js | 87 +++++--------
.../site-container/_site-container.scss | 7 -
.../site-container/site-container.twig | 2 +-
.../site-container/site-container.yml | 2 +-
.../layout-builder/_layout-builder.scss | 14 +-
.../menu--horizontal/_menu--horizontal.scss | 25 ++--
.../menu/menu--horizontal/menu--horizontal.js | 87 +++++--------
source/_patterns/04-components/menu/menu.twig | 6 +
9 files changed, 124 insertions(+), 229 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 624b39ce..a5d23a0e 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2128,22 +2128,10 @@ svg:not(:root) {
.uw-site-container .uw-highlighted {
padding: 0; } }
.uw-site-container .uw-main {
- margin-left: auto;
- margin-right: auto;
- max-width: 75rem;
- padding: 0 16px;
grid-column: 1 / 2;
grid-row: 3 / 4;
min-height: 60vh;
- padding: 1.5rem;
width: 100%; }
- @media (min-width: 75rem) {
- .uw-site-container .uw-main {
- padding-left: 0;
- padding-right: 0; } }
- @media (min-width: 75rem) {
- .uw-site-container .uw-main {
- padding: 0; } }
.uw-site-container .uw-footer {
grid-column: 1 / 2;
grid-row: 4 / 5; }
@@ -2220,6 +2208,7 @@ svg:not(:root) {
.messages,
.message,
.contextual-region.profile,
+.uw-content-moderation,
form {
margin-left: auto;
margin-right: auto;
@@ -2237,26 +2226,22 @@ form {
.messages,
.message,
.contextual-region.profile,
+ .uw-content-moderation,
form {
padding-left: 0;
padding-right: 0; } }
- @media (min-width: 75rem) {
- .uw-highlighted,
- .block-page-title-block,
- .block-local-tasks-block,
- .layout-builder-form,
- .node-form,
- .admin-list,
- .js-media-library-view,
- .messages,
- .message,
- .contextual-region.profile,
- form {
- padding: 1rem 0; } }
.entity-meta__header {
background-color: #fffbda; }
+.uw-content-moderation__wrapper {
+ background-color: #fff1d2;
+ border: 1px solid #fad980;
+ font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-size: 14.22224px;
+ max-width: inherit;
+ padding: 16px; }
+
.ui-dialog-titlebar {
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 20.256px; }
@@ -4276,10 +4261,6 @@ fieldset,
background-color: #ccc;
color: #000; }
-.org-default .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #ccc;
- color: #000; }
-
.org-default .uw-horizontal-nav .menu--horizontal li > a {
color: #000; }
.org-default .uw-horizontal-nav .menu--horizontal li > a:focus {
@@ -4292,9 +4273,6 @@ fieldset,
background-color: #fff;
color: #000; }
-.org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav .is-active-trail > a {
- border-bottom: 2px solid #000; }
-
.org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
background-color: transparent;
border-bottom: 2px solid transparent;
@@ -4335,10 +4313,6 @@ fieldset,
background-color: #ccc;
color: #000; }
-.org-ahs .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #ccc;
- color: #000; }
-
.org-ahs .uw-horizontal-nav .menu--horizontal li > a {
color: #000; }
.org-ahs .uw-horizontal-nav .menu--horizontal li > a:focus, .org-ahs .uw-horizontal-nav .menu--horizontal li > a.active {
@@ -4348,9 +4322,6 @@ fieldset,
background-color: #fff;
color: #000; }
-.org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav .is-active-trail > a {
- border-bottom: 2px solid #005963; }
-
.org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
background-color: transparent;
border-bottom: 2px solid transparent;
@@ -4377,6 +4348,10 @@ fieldset,
background-color: inherit;
border-bottom: 2px solid #000;
color: #000; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 2px solid #ccc;
+ color: #000; }
.org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 2px solid #ccc;
@@ -4399,10 +4374,6 @@ fieldset,
background-color: #ccc;
color: #000; }
-.org-art .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #ccc;
- color: #000; }
-
.org-art .uw-horizontal-nav .menu--horizontal li > a {
color: #000; }
.org-art .uw-horizontal-nav .menu--horizontal li > a:focus, .org-art .uw-horizontal-nav .menu--horizontal li > a.active {
@@ -4412,9 +4383,6 @@ fieldset,
background-color: #fff;
color: #000; }
-.org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav .is-active-trail > a {
- border-bottom: 2px solid #d93f00; }
-
.org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
background-color: transparent;
border-bottom: 2px solid transparent;
@@ -4441,6 +4409,10 @@ fieldset,
background-color: inherit;
border-bottom: 2px solid #000;
color: #000; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 2px solid #ccc;
+ color: #000; }
.org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 2px solid #ccc;
@@ -4463,10 +4435,6 @@ fieldset,
background-color: #ccc;
color: #000; }
-.org-eng .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #ccc;
- color: #000; }
-
.org-eng .uw-horizontal-nav .menu--horizontal li > a {
color: #000; }
.org-eng .uw-horizontal-nav .menu--horizontal li > a:focus, .org-eng .uw-horizontal-nav .menu--horizontal li > a.active {
@@ -4476,9 +4444,6 @@ fieldset,
background-color: #fff;
color: #000; }
-.org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav .is-active-trail > a {
- border-bottom: 2px solid #57058b; }
-
.org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
background-color: transparent;
border-bottom: 2px solid transparent;
@@ -4505,6 +4470,10 @@ fieldset,
background-color: inherit;
border-bottom: 2px solid #000;
color: #000; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 2px solid #ccc;
+ color: #000; }
.org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 2px solid #ccc;
@@ -4527,10 +4496,6 @@ fieldset,
background-color: #ccc;
color: #000; }
-.org-env .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #ccc;
- color: #000; }
-
.org-env .uw-horizontal-nav .menu--horizontal li > a {
color: #000; }
.org-env .uw-horizontal-nav .menu--horizontal li > a:focus, .org-env .uw-horizontal-nav .menu--horizontal li > a.active {
@@ -4540,9 +4505,6 @@ fieldset,
background-color: #fff;
color: #000; }
-.org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav .is-active-trail > a {
- border-bottom: 2px solid #607000; }
-
.org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
background-color: transparent;
border-bottom: 2px solid transparent;
@@ -4569,6 +4531,10 @@ fieldset,
background-color: inherit;
border-bottom: 2px solid #000;
color: #000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 2px solid #ccc;
+ color: #000; }
.org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 2px solid #ccc;
@@ -4591,10 +4557,6 @@ fieldset,
background-color: #ccc;
color: #000; }
-.org-mat .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #ccc;
- color: #000; }
-
.org-mat .uw-horizontal-nav .menu--horizontal li > a {
color: #000; }
.org-mat .uw-horizontal-nav .menu--horizontal li > a:focus, .org-mat .uw-horizontal-nav .menu--horizontal li > a.active {
@@ -4604,9 +4566,6 @@ fieldset,
background-color: #fff;
color: #000; }
-.org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav .is-active-trail > a {
- border-bottom: 2px solid #c60078; }
-
.org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
background-color: transparent;
border-bottom: 2px solid transparent;
@@ -4633,6 +4592,10 @@ fieldset,
background-color: inherit;
border-bottom: 2px solid #000;
color: #000; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 2px solid #ccc;
+ color: #000; }
.org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 2px solid #ccc;
@@ -4655,10 +4618,6 @@ fieldset,
background-color: #ccc;
color: #000; }
-.org-sci .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #ccc;
- color: #000; }
-
.org-sci .uw-horizontal-nav .menu--horizontal li > a {
color: #000; }
.org-sci .uw-horizontal-nav .menu--horizontal li > a:focus, .org-sci .uw-horizontal-nav .menu--horizontal li > a.active {
@@ -4668,9 +4627,6 @@ fieldset,
background-color: #fff;
color: #000; }
-.org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav .is-active-trail > a {
- border-bottom: 2px solid #0033be; }
-
.org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
background-color: transparent;
border-bottom: 2px solid transparent;
@@ -4697,6 +4653,10 @@ fieldset,
background-color: inherit;
border-bottom: 2px solid #000;
color: #000; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 2px solid #ccc;
+ color: #000; }
.org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 2px solid #ccc;
@@ -4719,10 +4679,6 @@ fieldset,
background-color: #ccc;
color: #000; }
-.org-school .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #ccc;
- color: #000; }
-
.org-school .uw-horizontal-nav .menu--horizontal li > a {
color: #000; }
.org-school .uw-horizontal-nav .menu--horizontal li > a:focus, .org-school .uw-horizontal-nav .menu--horizontal li > a.active {
@@ -4732,9 +4688,6 @@ fieldset,
background-color: #fff;
color: #000; }
-.org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav .is-active-trail > a {
- border-bottom: 2px solid #80001f; }
-
.org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
background-color: transparent;
border-bottom: 2px solid transparent;
@@ -4761,6 +4714,10 @@ fieldset,
background-color: inherit;
border-bottom: 2px solid #000;
color: #000; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 2px solid #ccc;
+ color: #000; }
.org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 2px solid #ccc;
@@ -4859,7 +4816,7 @@ fieldset,
font-size: 0.79rem;
text-transform: none;
width: 100%; }
- .uw-horizontal-nav--menu .menu--subnav * {
+ .uw-horizontal-nav--menu .menu--subnav li {
-webkit-animation: fadeIn ease 0.2s;
animation: fadeIn ease 0.2s; }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
@@ -4924,7 +4881,7 @@ fieldset,
padding-left: 16px; } }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item:first-of-type .menu--link-parent {
display: block;
- font-size: 0.79rem;
+ font-size: 0.88889rem;
margin: 0 0 8px 0;
position: relative; }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item:first-of-type .menu--link-parent::after {
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index a8ee6874..fd6f0290 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -244,31 +244,6 @@
const menus = document.querySelectorAll(".menu--horizontal");
const items = document.querySelectorAll(".menu--item");
-
- // var menuItems = document.querySelectorAll('li.has-submenu');
- // Array.prototype.forEach.call(menuItems, function(el, i){
- // var activatingA = el.querySelector('a');
- // var btn = '<button><span><span class="visuallyhidden">show submenu for “' + activatingA.text + 'â€</span></span></button>';
- // activatingA.insertAdjacentHTML('afterend', btn);
- //
- // el.querySelector('button').addEventListener("click", function(event){
- // if (this.parentNode.className == "has-submenu") {
- // this.parentNode.className = "has-submenu open";
- // this.parentNode.querySelector('a').setAttribute('aria-expanded', "true");
- // this.parentNode.querySelector('button').setAttribute('aria-expanded', "true");
- // } else {
- // this.parentNode.className = "has-submenu";
- // this.parentNode.querySelector('a').setAttribute('aria-expanded', "false");
- // this.parentNode.querySelector('button').setAttribute('aria-expanded', "false");
- // }
- // event.preventDefault();
- // });
- // });
-
-
-
-
-
/* Toggle mobile menu */
// // function toggleMenu() {
// // if (menu.classList.contains("active")) {
@@ -279,46 +254,32 @@
// // toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
// // }
// // }
-//
-
-
-
-
- /* add to hamburger mobile menu button */
- // toggle.addEventListener("click", toggleMenu, false);
for (let menu of menus) {
/* Activate Submenu */
function toggleItem() {
- console.log('toggled');
-
- if (this.classList.contains("submenu-active")) {
-
- console.log('has it');
-
- this.classList.remove("submenu-active");
-
- console.log('removed');
+ if (this.classList.contains('submenu-active')) {
- } else if (menu.querySelector(".submenu-active")) {
-
-
-
- console.log('foundone');
- console.log(menu.querySelector(".submenu-active"));
- menu.querySelector(".submenu-active").classList.remove("submenu-active");
+ this.classList.remove('submenu-active');
+ if (this.hasAttribute('aria-expanded', 'true')) {
+ this.setAttribute('aria-expanded', 'false');
+ }
+ } else if ( $('.submenu-active') ) {
+ // 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');
}
else {
- console.log('added in the else');
- this.classList.add("submenu-active");
+ this.classList.add('submenu-active');
+ this.setAttribute('aria-expanded', 'true');
+
}
}
@@ -337,21 +298,31 @@
}
/* Event Listeners */
+ /* add to hamburger mobile menu button */
+ // toggle.addEventListener("click", toggleMenu, false);
+
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) {
+
if(e.key === "Enter") {
- console.log(e.key);
- $(this).click();
+ this.click();
}
if(e.key === "Escape") {
- console.log(e.key);
- $(this).click();
+ 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();
}
- return ;
});
}
document.addEventListener("click", closeSubmenu, false);
diff --git a/source/_patterns/03-layouts/site-container/_site-container.scss b/source/_patterns/03-layouts/site-container/_site-container.scss
index d91681aa..b72b36a7 100644
--- a/source/_patterns/03-layouts/site-container/_site-container.scss
+++ b/source/_patterns/03-layouts/site-container/_site-container.scss
@@ -20,17 +20,10 @@
}
.uw-main {
- //@include uw-contained-width;
- @include uw-contained-width;
grid-column: 1 / 2;
grid-row: 3 / 4;
min-height: 60vh;
- padding: rem(gesso-spacing(md));
width: 100%;
- @include xl {
- padding: 0;
- }
-
}
.uw-footer {
diff --git a/source/_patterns/03-layouts/site-container/site-container.twig b/source/_patterns/03-layouts/site-container/site-container.twig
index 27bfe5f6..0200a1cb 100644
--- a/source/_patterns/03-layouts/site-container/site-container.twig
+++ b/source/_patterns/03-layouts/site-container/site-container.twig
@@ -1,5 +1,5 @@
{% if is_demo %}
- {% set faculty = faculty ? faculty : 'org-eng' %}
+ {% set faculty = faculty ? faculty : 'org-art' %}
{% endif %}
<div class="uw-site-container" {% if is_demo %}{{ faculty }}{% endif %}>
diff --git a/source/_patterns/03-layouts/site-container/site-container.yml b/source/_patterns/03-layouts/site-container/site-container.yml
index d82b757a..af901e7a 100644
--- a/source/_patterns/03-layouts/site-container/site-container.yml
+++ b/source/_patterns/03-layouts/site-container/site-container.yml
@@ -362,7 +362,7 @@ secondary_items:
options:
attributes:
class: ''
- active_trail: true
+ active_trail: false
submenu:
- text: 'Degree Options and Specializations'
url: '#'
diff --git a/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss b/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
index 1fe8717c..8a131d7c 100644
--- a/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
+++ b/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
@@ -13,19 +13,23 @@
.messages,
.message,
.contextual-region.profile,
+.uw-content-moderation,
form {
@include uw-contained-width;
padding: rem(gesso-spacing(sm));
- @include xl {
- padding:rem(gesso-spacing(sm)) 0;
- }
}
// righ column on edit
.entity-meta__header{
background-color:#fffbda;
}
-
-
+.uw-content-moderation__wrapper{
+ background-color: gesso-color(ui, warning, background);
+ border: 1px solid gesso-color(ui, warning, border);
+ font-family:gesso-font-family(systemmedium);
+ font-size: gesso-font-size(-1);
+ max-width:inherit;
+ padding: gesso-spacing(sm);
+}
// overlay popuup
.ui-dialog-titlebar{
diff --git a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
index 0daf6052..a7ae25d0 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -36,12 +36,6 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
color: gesso-brand(org-default,uw-black,lvl4);
}
li {
- &.submenu-active {
- > a {
- background-color: gesso-grayscale(gray-3);
- color: gesso-brand(org-default,uw-black,lvl4);
- }
- }
> a{
color: gesso-brand(org-default,uw-black,lvl4);
@@ -63,7 +57,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.menu--subnav{
.is-active-trail {
> a{
- border-bottom: 2px solid gesso-brand(org-default,uw-black,lvl4);
+ //border-bottom: 2px solid gesso-brand(org-default,uw-black,lvl4);
}
}
@@ -131,12 +125,6 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
color: gesso-brand(org-default,uw-black,lvl4);
}
li {
- &.submenu-active {
- > a {
- background-color: gesso-grayscale(gray-3);
- color: gesso-brand(org-default,uw-black,lvl4);
- }
- }
> a{
color: gesso-brand(org-default,uw-black,lvl4);
@@ -155,7 +143,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.is-active-trail {
> a{
- border-bottom: 2px solid gesso-brand($faculty, lvl4);
+ //border-bottom: 2px solid gesso-brand($faculty, lvl4);
}
}
a{
@@ -190,6 +178,11 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
background-color:inherit;
border-bottom:2px solid gesso-brand(org-default,uw-black,lvl4);
color: gesso-brand(org-default,uw-black,lvl4);
+ &:focus{
+ background-color:inherit;
+ border-bottom:2px solid gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
+ }
&:hover{
background-color:inherit;
border-bottom:2px solid gesso-grayscale(gray-3);
@@ -316,7 +309,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
text-transform: none;
width:100%;
- *{
+ li{
animation: fadeIn ease 0.2s;
}
@@ -378,7 +371,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
&:first-of-type{
.menu--link-parent {
display:block;
- font-size:rem(gesso-font-size(-2));
+ font-size:rem(gesso-font-size(-1));
margin:0 0 gesso-spacing(xs) 0;
position:relative;
&::after {
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 f30c1721..f2828131 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
@@ -8,31 +8,6 @@
const menus = document.querySelectorAll(".menu--horizontal");
const items = document.querySelectorAll(".menu--item");
-
- // var menuItems = document.querySelectorAll('li.has-submenu');
- // Array.prototype.forEach.call(menuItems, function(el, i){
- // var activatingA = el.querySelector('a');
- // var btn = '<button><span><span class="visuallyhidden">show submenu for “' + activatingA.text + 'â€</span></span></button>';
- // activatingA.insertAdjacentHTML('afterend', btn);
- //
- // el.querySelector('button').addEventListener("click", function(event){
- // if (this.parentNode.className == "has-submenu") {
- // this.parentNode.className = "has-submenu open";
- // this.parentNode.querySelector('a').setAttribute('aria-expanded', "true");
- // this.parentNode.querySelector('button').setAttribute('aria-expanded', "true");
- // } else {
- // this.parentNode.className = "has-submenu";
- // this.parentNode.querySelector('a').setAttribute('aria-expanded', "false");
- // this.parentNode.querySelector('button').setAttribute('aria-expanded', "false");
- // }
- // event.preventDefault();
- // });
- // });
-
-
-
-
-
/* Toggle mobile menu */
// // function toggleMenu() {
// // if (menu.classList.contains("active")) {
@@ -43,46 +18,32 @@
// // toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
// // }
// // }
-//
-
-
-
-
- /* add to hamburger mobile menu button */
- // toggle.addEventListener("click", toggleMenu, false);
for (let menu of menus) {
/* Activate Submenu */
function toggleItem() {
- console.log('toggled');
-
- if (this.classList.contains("submenu-active")) {
-
- console.log('has it');
-
- this.classList.remove("submenu-active");
-
- console.log('removed');
+ if (this.classList.contains('submenu-active')) {
- } else if (menu.querySelector(".submenu-active")) {
-
-
-
- console.log('foundone');
- console.log(menu.querySelector(".submenu-active"));
- menu.querySelector(".submenu-active").classList.remove("submenu-active");
+ this.classList.remove('submenu-active');
+ if (this.hasAttribute('aria-expanded', 'true')) {
+ this.setAttribute('aria-expanded', 'false');
+ }
+ } else if ( $('.submenu-active') ) {
+ // 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');
}
else {
- console.log('added in the else');
- this.classList.add("submenu-active");
+ this.classList.add('submenu-active');
+ this.setAttribute('aria-expanded', 'true');
+
}
}
@@ -101,21 +62,31 @@
}
/* Event Listeners */
+ /* add to hamburger mobile menu button */
+ // toggle.addEventListener("click", toggleMenu, false);
+
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) {
+
if(e.key === "Enter") {
- console.log(e.key);
- $(this).click();
+ this.click();
}
if(e.key === "Escape") {
- console.log(e.key);
- $(this).click();
+ 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();
}
- return ;
});
}
document.addEventListener("click", closeSubmenu, false);
diff --git a/source/_patterns/04-components/menu/menu.twig b/source/_patterns/04-components/menu/menu.twig
index 3a263e71..4dc2cb9f 100644
--- a/source/_patterns/04-components/menu/menu.twig
+++ b/source/_patterns/04-components/menu/menu.twig
@@ -5,6 +5,7 @@
{% macro menu_links(items, attributes, menu_level, menu_name, menu_class, item_class, link_class, parent) %}
{% import _self as menus %}
{% if items %}
+
{% if menu_level == 0 %}
{# double quotes around class using menu_name needed for interpolation #}
{% set additional_classes = [
@@ -67,6 +68,9 @@
{% if menu_level == 0 %}
{% set item_classes = item_classes|merge(['has-submenu']) %}
{% set link_classes = ['menu--link__sub'] %}
+ {% set additional_item_attributes = {
+ 'aria-expanded': 'false'
+ } %}
{% elseif menu_level <= 2 %}
{% set menu_parent_hide = true %}
{% set item_classes = item_classes|merge(['has-children']) %}
@@ -102,6 +106,8 @@
{% endif %}
<li {{ add_attributes(additional_item_attributes) }}>
+
+
<a
{% if item.submenu %}
tabindex="0"
--
GitLab