Skip to content
Snippets Groups Projects
Unverified Commit 55361f84 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3213074 by mherchel, Indrajith KB, Gauravmahlawat: Olivero: Refactor... 

Issue #3213074 by mherchel, Indrajith KB, Gauravmahlawat: Olivero: Refactor second-level-navigation.es6.js to meet Drupal's JavaScript coding standards
parent b1c2f226
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
core/themes/olivero/js/second-level-navigation.es6.js
+ 19
− 17
View file @ 55361f84
((Drupal) => {
const { isDesktopNav } = Drupal.olivero;
const secondLevelNavMenus = document.querySelectorAll(
'.primary-nav__menu-item--has-children',
'[data-drupal-selector="primary-nav-menu-item-has-children"]',
);
/**
......@@ -12,7 +12,7 @@
*/
function toggleSubNav(topLevelMenuItem, toState) {
const buttonSelector =
'.primary-nav__button-toggle, .primary-nav__menu-link--button';
'[data-drupal-selector="primary-nav-submenu-toggle-button"]';
const button = topLevelMenuItem.querySelector(buttonSelector);
const state =
toState !== undefined
......@@ -27,29 +27,29 @@
'aria-expanded',
'false',
);
el.querySelector('.primary-nav__menu--level-2').classList.remove(
'is-active-menu-parent',
);
el.querySelector('.primary-nav__menu-🥕').classList.remove(
'is-active-menu-parent',
);
el.querySelector(
'[data-drupal-selector="primary-nav-menu--level-2"]',
).classList.remove('is-active-menu-parent');
el.querySelector(
'[data-drupal-selector="primary-nav-menu-🥕"]',
).classList.remove('is-active-menu-parent');
});
}
button.setAttribute('aria-expanded', 'true');
topLevelMenuItem
.querySelector('.primary-nav__menu--level-2')
.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]')
.classList.add('is-active-menu-parent');
topLevelMenuItem
.querySelector('.primary-nav__menu-🥕')
.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]')
.classList.add('is-active-menu-parent');
} else {
button.setAttribute('aria-expanded', 'false');
topLevelMenuItem.classList.remove('is-touch-event');
topLevelMenuItem
.querySelector('.primary-nav__menu--level-2')
.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]')
.classList.remove('is-active-menu-parent');
topLevelMenuItem
.querySelector('.primary-nav__menu-🥕')
.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]')
.classList.remove('is-active-menu-parent');
}
}
......@@ -67,7 +67,7 @@
setTimeout(() => {
const menuParentItem = e.target.closest(
'.primary-nav__menu-item--has-children',
'[data-drupal-selector="primary-nav-menu-item-has-children"]',
);
if (!menuParentItem.contains(document.activeElement)) {
toggleSubNav(menuParentItem, false);
......@@ -78,7 +78,7 @@
// Add event listeners onto each sub navigation parent and button.
secondLevelNavMenus.forEach((el) => {
const button = el.querySelector(
'.primary-nav__button-toggle, .primary-nav__menu-link--button',
'[data-drupal-selector="primary-nav-submenu-toggle-button"]',
);
button.removeAttribute('aria-hidden');
......@@ -136,7 +136,7 @@
// Return focus to the toggle button if the submenu contains focus.
if (el.contains(document.activeElement)) {
el.querySelector(
'.primary-nav__button-toggle, .primary-nav__menu-link--button',
'[data-drupal-selector="primary-nav-submenu-toggle-button"]',
).focus();
}
toggleSubNav(el, false);
......@@ -154,7 +154,7 @@
secondLevelNavMenus.forEach((el) => {
const button = el.querySelector(
'.primary-nav__button-toggle, .primary-nav__menu-link--button',
'[data-drupal-selector="primary-nav-submenu-toggle-button"]',
);
const state = button.getAttribute('aria-expanded') === 'true';
......@@ -181,7 +181,9 @@
(e) => {
if (
areAnySubNavsOpen() &&
!e.target.matches('.header-nav, .header-nav *')
!e.target.matches(
'[data-drupal-selector="header-nav"], [data-drupal-selector="header-nav"] *',
)
) {
closeAllSubNav();
}
......
core/themes/olivero/js/second-level-navigation.js
+ 13
− 13
View file @ 55361f84
......@@ -7,10 +7,10 @@
(function (Drupal) {
var isDesktopNav = Drupal.olivero.isDesktopNav;
var secondLevelNavMenus = document.querySelectorAll('.primary-nav__menu-item--has-children');
var secondLevelNavMenus = document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]');
function toggleSubNav(topLevelMenuItem, toState) {
var buttonSelector = '.primary-nav__button-toggle, .primary-nav__menu-link--button';
var buttonSelector = '[data-drupal-selector="primary-nav-submenu-toggle-button"]';
var button = topLevelMenuItem.querySelector(buttonSelector);
var state = toState !== undefined ? toState : button.getAttribute('aria-expanded') !== 'true';
......@@ -18,19 +18,19 @@
if (isDesktopNav()) {
secondLevelNavMenus.forEach(function (el) {
el.querySelector(buttonSelector).setAttribute('aria-expanded', 'false');
el.querySelector('.primary-nav__menu--level-2').classList.remove('is-active-menu-parent');
el.querySelector('.primary-nav__menu-🥕').classList.remove('is-active-menu-parent');
el.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.remove('is-active-menu-parent');
el.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.remove('is-active-menu-parent');
});
}
button.setAttribute('aria-expanded', 'true');
topLevelMenuItem.querySelector('.primary-nav__menu--level-2').classList.add('is-active-menu-parent');
topLevelMenuItem.querySelector('.primary-nav__menu-🥕').classList.add('is-active-menu-parent');
topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.add('is-active-menu-parent');
topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.add('is-active-menu-parent');
} else {
button.setAttribute('aria-expanded', 'false');
topLevelMenuItem.classList.remove('is-touch-event');
topLevelMenuItem.querySelector('.primary-nav__menu--level-2').classList.remove('is-active-menu-parent');
topLevelMenuItem.querySelector('.primary-nav__menu-🥕').classList.remove('is-active-menu-parent');
topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.remove('is-active-menu-parent');
topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.remove('is-active-menu-parent');
}
}
......@@ -39,7 +39,7 @@
function handleBlur(e) {
if (!Drupal.olivero.isDesktopNav()) return;
setTimeout(function () {
var menuParentItem = e.target.closest('.primary-nav__menu-item--has-children');
var menuParentItem = e.target.closest('[data-drupal-selector="primary-nav-menu-item-has-children"]');
if (!menuParentItem.contains(document.activeElement)) {
toggleSubNav(menuParentItem, false);
......@@ -48,7 +48,7 @@
}
secondLevelNavMenus.forEach(function (el) {
var button = el.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button');
var button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');
button.removeAttribute('aria-hidden');
button.removeAttribute('tabindex');
el.addEventListener('touchstart', function () {
......@@ -81,7 +81,7 @@
function closeAllSubNav() {
secondLevelNavMenus.forEach(function (el) {
if (el.contains(document.activeElement)) {
el.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button').focus();
el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]').focus();
}
toggleSubNav(el, false);
......@@ -93,7 +93,7 @@
function areAnySubNavsOpen() {
var subNavsAreOpen = false;
secondLevelNavMenus.forEach(function (el) {
var button = el.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button');
var button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');
var state = button.getAttribute('aria-expanded') === 'true';
if (state) {
......@@ -110,7 +110,7 @@
}
});
document.addEventListener('touchstart', function (e) {
if (areAnySubNavsOpen() && !e.target.matches('.header-nav, .header-nav *')) {
if (areAnySubNavsOpen() && !e.target.matches('[data-drupal-selector="header-nav"], [data-drupal-selector="header-nav"] *')) {
closeAllSubNav();
}
}, {
......
core/themes/olivero/templates/navigation/menu--primary-menu.html.twig
+ 21
− 5
View file @ 55361f84
......@@ -31,6 +31,7 @@
{% macro menu_links(items, attributes, menu_level) %}
{% set primary_nav_level = 'primary-nav__menu--level-' ~ (menu_level + 1) %}
{% set drupal_selector_primary_nav_level = 'primary-nav-menu--level-' ~ (menu_level + 1) %}
{% import _self as menus %}
{% if items %}
......@@ -39,10 +40,10 @@
has the overflow:hidden CSS rule applied.
#}
{% if menu_level == 1 %}
<span class="primary-nav__menu-🥕"></span>
<span data-drupal-selector="primary-nav-menu-🥕" class="primary-nav__menu-🥕"></span>
{% endif %}
<ul {{ attributes.addClass('primary-nav__menu', primary_nav_level) }}>
<ul {{ attributes.addClass('primary-nav__menu', primary_nav_level).setAttribute('data-drupal-selector', drupal_selector_primary_nav_level) }}>
{% set attributes = attributes.removeClass(primary_nav_level) %}
{% for item in items %}
......@@ -72,7 +73,7 @@
]
%}
<li{{ item.attributes.addClass(item_classes) }}>
<li{{ item.attributes.addClass(item_classes).setAttribute('data-drupal-selector', item.below ? 'primary-nav-menu-item-has-children' : false) }}>
{#
A unique HTML ID should be used, but that isn't available through
Twig yet, so the |clean_id filter is used for now.
......@@ -84,7 +85,11 @@
{% endset %}
{% if menu_item_type == 'link' or menu_item_type == 'nolink' %}
{{ link(menu_item_type == 'link' ? link_title : item.title, item.url, { 'class': link_classes }) }}
{{ link(menu_item_type == 'link' ? link_title : item.title, item.url, {
'class': link_classes,
'data-drupal-selector': 'primary-nav-menu-link-has-children',
})
}}
{% if item.below %}
{#
......@@ -92,7 +97,17 @@
but still visible in non-JS environments so that chevron can indicate presence of
drop menu).
#}
<button class="primary-nav__button-toggle" aria-controls="{{ aria_id }}" aria-expanded="false" aria-hidden="true" tabindex="-1">
{%
set toggle_button_attributes = create_attribute({
'class': 'primary-nav__button-toggle',
'data-drupal-selector': 'primary-nav-submenu-toggle-button',
'aria-controls': aria_id,
'aria-expanded': 'false',
'aria-hidden': 'true',
'tabindex': '-1',
})
%}
<button{{ toggle_button_attributes }}>
<span class="visually-hidden">{{ '@title sub-navigation'|t({'@title': item.title}) }}</span>
<span class="icon--menu-toggle"></span>
</button>
......@@ -106,6 +121,7 @@
'class': link_classes,
'aria-controls': item.below ? aria_id : false,
'aria-expanded': item.below ? 'false' : false,
'data-drupal-selector': item.below ? 'primary-nav-submenu-toggle-button' : false,
})
}}
......
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