From a474384b84ed95ce24883b38e5e13ca952fc3ba1 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Fri, 23 Sep 2022 14:55:38 +0300
Subject: [PATCH] Issue #3255131 by andy-blum, finnsky, mherchel, nod_:
Olivero: Refactor JS to make use of second argument within
Element.classList.toggle()
---
core/themes/olivero/js/navigation-utils.js | 15 ++++---------
core/themes/olivero/js/navigation.js | 13 +++--------
core/themes/olivero/js/search.js | 4 +---
.../olivero/js/second-level-navigation.js | 22 +++++++------------
core/themes/olivero/js/tabs.js | 12 +++++-----
5 files changed, 21 insertions(+), 45 deletions(-)
diff --git a/core/themes/olivero/js/navigation-utils.js b/core/themes/olivero/js/navigation-utils.js
index 4530c9a03b3a..c3ce385f8d6f 100644
--- a/core/themes/olivero/js/navigation-utils.js
+++ b/core/themes/olivero/js/navigation-utils.js
@@ -79,12 +79,7 @@
*/
function toggleStickyHeaderState(pinnedState) {
if (isDesktopNav()) {
- if (pinnedState === true) {
- siteHeaderFixable.classList.add('is-expanded');
- } else {
- siteHeaderFixable.classList.remove('is-expanded');
- }
-
+ siteHeaderFixable.classList.toggle('is-expanded', pinnedState);
stickyHeaderToggleButton.setAttribute('aria-checked', pinnedState);
setStickyHeaderStorage(pinnedState);
}
@@ -133,11 +128,9 @@
entries.forEach((entry) => {
// Firefox doesn't seem to support entry.isIntersecting properly,
// so we check the intersectionRatio.
- if (entry.intersectionRatio < 1) {
- fixableElements.forEach((el) => el.classList.add('is-fixed'));
- } else {
- fixableElements.forEach((el) => el.classList.remove('is-fixed'));
- }
+ fixableElements.forEach((el) =>
+ el.classList.toggle('is-fixed', entry.intersectionRatio < 1),
+ );
});
}
diff --git a/core/themes/olivero/js/navigation.js b/core/themes/olivero/js/navigation.js
index f24e6c901f1f..641f8c28e760 100644
--- a/core/themes/olivero/js/navigation.js
+++ b/core/themes/olivero/js/navigation.js
@@ -28,16 +28,9 @@
function toggleNav(props, state) {
const value = !!state;
props.navButton.setAttribute('aria-expanded', value);
-
- if (value) {
- props.body.classList.add('is-overlay-active');
- props.body.classList.add('is-fixed');
- props.navWrapper.classList.add('is-active');
- } else {
- props.body.classList.remove('is-overlay-active');
- props.body.classList.remove('is-fixed');
- props.navWrapper.classList.remove('is-active');
- }
+ props.body.classList.toggle('is-overlay-active', value);
+ props.body.classList.toggle('is-fixed', value);
+ props.navWrapper.classList.toggle('is-active', value);
}
/**
diff --git a/core/themes/olivero/js/search.js b/core/themes/olivero/js/search.js
index 7626fd07f1c4..4c4ead979fc4 100644
--- a/core/themes/olivero/js/search.js
+++ b/core/themes/olivero/js/search.js
@@ -99,13 +99,13 @@
*/
function toggleSearchVisibility(visibility) {
searchWideButton.setAttribute('aria-expanded', visibility === true);
+ searchWideWrapper.classList.toggle('is-active', visibility === true);
searchWideWrapper.addEventListener('transitionend', handleFocus, {
once: true,
});
if (visibility === true) {
Drupal.olivero.closeAllSubNav();
- searchWideWrapper.classList.add('is-active');
document.addEventListener('click', watchForClickOut, { capture: true });
document.addEventListener('focusout', watchForFocusOut, {
@@ -113,8 +113,6 @@
});
document.addEventListener('keyup', watchForEscapeOut, { capture: true });
} else {
- searchWideWrapper.classList.remove('is-active');
-
document.removeEventListener('click', watchForClickOut, {
capture: true,
});
diff --git a/core/themes/olivero/js/second-level-navigation.js b/core/themes/olivero/js/second-level-navigation.js
index f8f9a98c5c3f..76a35ec4ee6c 100644
--- a/core/themes/olivero/js/second-level-navigation.js
+++ b/core/themes/olivero/js/second-level-navigation.js
@@ -42,23 +42,17 @@
).classList.remove('is-active-menu-parent');
});
}
- button.setAttribute('aria-expanded', 'true');
- 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('[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');
}
+
+ button.setAttribute('aria-expanded', state);
+ topLevelMenuItem
+ .querySelector('[data-drupal-selector="primary-nav-menu--level-2"]')
+ .classList.toggle('is-active-menu-parent', state);
+ topLevelMenuItem
+ .querySelector('[data-drupal-selector="primary-nav-menu-🥕"]')
+ .classList.toggle('is-active-menu-parent', state);
}
Drupal.olivero.toggleSubNav = toggleSubNav;
diff --git a/core/themes/olivero/js/tabs.js b/core/themes/olivero/js/tabs.js
index c5d3e0d52892..ecc31653854e 100644
--- a/core/themes/olivero/js/tabs.js
+++ b/core/themes/olivero/js/tabs.js
@@ -32,13 +32,11 @@
* The event object.
*/
function handleTriggerClick(e) {
- if (!tabs.classList.contains(expandedClass)) {
- e.currentTarget.setAttribute('aria-expanded', 'true');
- tabs.classList.add(expandedClass);
- } else {
- e.currentTarget.setAttribute('aria-expanded', 'false');
- tabs.classList.remove(expandedClass);
- }
+ e.currentTarget.setAttribute(
+ 'aria-expanded',
+ !tabs.classList.contains(expandedClass),
+ );
+ tabs.classList.toggle(expandedClass);
}
if (isTabsMobileLayout() && !activeTab.matches('.tabs__tab:first-child')) {
--
GitLab