From 11c690a3e6f5d653fd928b29706f9857e55e5ab9 Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Mon, 10 Mar 2025 16:50:12 +0000 Subject: [PATCH 1/3] Update sticky-header.js after linting it --- js/sticky-header.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/js/sticky-header.js b/js/sticky-header.js index 3f333a41..f3af5d7f 100644 --- a/js/sticky-header.js +++ b/js/sticky-header.js @@ -1,7 +1,7 @@ (function stickyHeaderScript(Drupal) { Drupal.behaviors.stickyHeader = { attach(context) { - const headers = once('allStickyHeaders', '.lgd-header', context); + const headers = once("allStickyHeaders", ".lgd-header", context); if (!headers) { return; @@ -11,8 +11,8 @@ function calculatePositions() { let tabsHeight = 0; const tabs = header - .closest('body') - .querySelector('.lgd-region--tabs'); + .closest("body") + .querySelector(".lgd-region--tabs"); if (tabs) { tabsHeight = tabs.offsetHeight; } @@ -20,11 +20,11 @@ let displaceOffsetTop = 0; const displaceOffsetTopValue = parseInt( getComputedStyle(document.documentElement) - .getPropertyValue('--drupal-displace-offset-top') - .replace('px', ''), + .getPropertyValue("--drupal-displace-offset-top") + .replace("px", ""), 10, ); - console.log('working'); + console.log("working"); if (displaceOffsetTopValue) { displaceOffsetTop = displaceOffsetTopValue; } @@ -32,21 +32,21 @@ const headerHeight = header.offsetHeight; const headerPosition = displaceOffsetTop + tabsHeight; - if (header.closest('body').classList.contains('sticky-header')) { + if (header.closest("body").classList.contains("sticky-header")) { document.documentElement.style.setProperty( - '--lgd-sticky-header-position', + "--lgd-sticky-header-position", `${headerPosition}px`, ); document.documentElement.style.setProperty( - '--lgd-sticky-header-height', + "--lgd-sticky-header-height", `${headerHeight}px`, ); } if ( - header.closest('body').classList.contains('sticky-header--sticky') + header.closest("body").classList.contains("sticky-header--sticky") ) { - header.style.position = 'fixed'; + header.style.position = "fixed"; } } @@ -55,10 +55,10 @@ function handleScroll() { if (oldScroll > window.scrollY) { - header.closest('body').classList.add('sticky-header--sticky'); + header.closest("body").classList.add("sticky-header--sticky"); } else { - header.closest('body').classList.remove('sticky-header--sticky'); - header.style.position = 'relative'; + header.closest("body").classList.remove("sticky-header--sticky"); + header.style.position = "relative"; } // Update oldScroll to the new scroll position after the comparison oldScroll = window.scrollY; @@ -67,9 +67,9 @@ } if ( - header.closest('body').classList.contains('sticky-header--scroll') + header.closest("body").classList.contains("sticky-header--scroll") ) { - window.addEventListener('scroll', handleScroll); + window.addEventListener("scroll", handleScroll); } setTimeout(() => { From 581d05a2e65ee2b2cb2b802e9cf16829c92b658e Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Mon, 10 Mar 2025 16:51:20 +0000 Subject: [PATCH 2/3] Remove console.log --- js/sticky-header.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/sticky-header.js b/js/sticky-header.js index f3af5d7f..10aaa0db 100644 --- a/js/sticky-header.js +++ b/js/sticky-header.js @@ -24,7 +24,6 @@ .replace("px", ""), 10, ); - console.log("working"); if (displaceOffsetTopValue) { displaceOffsetTop = displaceOffsetTopValue; } From 379e21b4f623c9f500a2aa88ef056a046bf66246 Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Mon, 10 Mar 2025 16:53:57 +0000 Subject: [PATCH 3/3] Update JS files with linting fixes --- components/add-to-calendar/add-to-calendar.js | 10 +-- js/back-to-top.js | 16 ++--- js/guides.js | 4 +- js/header.js | 72 +++++++++---------- js/subsites-menu.js | 30 ++++---- 5 files changed, 66 insertions(+), 66 deletions(-) diff --git a/components/add-to-calendar/add-to-calendar.js b/components/add-to-calendar/add-to-calendar.js index cb5a8b9e..6227bcc3 100644 --- a/components/add-to-calendar/add-to-calendar.js +++ b/components/add-to-calendar/add-to-calendar.js @@ -7,20 +7,20 @@ Drupal.behaviors.localgovAddToCalendar = { attach(context) { const addToCalendarButtons = once( - 'all-add-to-calendar-buttons', - '.localgov-add-to-calendar__trigger', + "all-add-to-calendar-buttons", + ".localgov-add-to-calendar__trigger", context, ); if (addToCalendarButtons.length) { addToCalendarButtons.forEach((button) => { const calendarModal = button.nextElementSibling; const calendarModalClose = calendarModal.querySelector( - '.localgov-add-to-calendar__dialog-close-button', + ".localgov-add-to-calendar__dialog-close-button", ); - button.addEventListener('click', () => { + button.addEventListener("click", () => { calendarModal.showModal(); }); - calendarModalClose.addEventListener('click', () => { + calendarModalClose.addEventListener("click", () => { calendarModal.close(); }); }); diff --git a/js/back-to-top.js b/js/back-to-top.js index d661a9ab..c535d3ed 100644 --- a/js/back-to-top.js +++ b/js/back-to-top.js @@ -19,10 +19,10 @@ * past the top of the viewport. In practices, there's only one of * these since we've only targeted one element. */ - const [backToTop] = once('back-to-top', '.back-to-top', context); + const [backToTop] = once("back-to-top", ".back-to-top", context); const [backToTopTarget] = once( - 'back-to-top-target', - '.back-to-top-target', + "back-to-top-target", + ".back-to-top-target", context, ); @@ -32,7 +32,7 @@ entry.isIntersecting || (!entry.isIntersecting && entry.boundingClientRect.top <= 0) ? false - : 'until-hidden'; + : "until-hidden"; }); } @@ -52,15 +52,15 @@ } // Create an element absolutely positioned at our threshold. - backToTopTarget.style.position = 'absolute'; + backToTopTarget.style.position = "absolute"; backToTopTarget.style.top = `${viewportHeight * minContentViewportRatio}px`; - backToTop.addEventListener('click', (event) => { - event.target.hidden = 'until-found'; + backToTop.addEventListener("click", (event) => { + event.target.hidden = "until-found"; }); // Create an IntersectionObserver. const intersectionObserver = new IntersectionObserver(observerCallback, { - rootMargin: '16px', + rootMargin: "16px", }); intersectionObserver.observe(backToTopTarget); }, diff --git a/js/guides.js b/js/guides.js index c12c56a2..89074c2f 100644 --- a/js/guides.js +++ b/js/guides.js @@ -12,8 +12,8 @@ // the element with the corresponding ID. const path = window.location.hash; // check if path links to id - if (path.includes('#')) { - const id = path.split('#')[1]; + if (path.includes("#")) { + const id = path.split("#")[1]; const element = document.querySelector(`#${id}`); if (element) { element.focus(); diff --git a/js/header.js b/js/header.js index 1fc2c7de..72db9bfc 100644 --- a/js/header.js +++ b/js/header.js @@ -10,23 +10,23 @@ // @todo: make it possible to override this without having to maintain a // *copy* of this file. const headerSearchFormLabel = once( - 'header-search-label', - '.lgd-region--search form label', + "header-search-label", + ".lgd-region--search form label", context, ); if (headerSearchFormLabel.length) { - headerSearchFormLabel[0].classList.add('visually-hidden'); + headerSearchFormLabel[0].classList.add("visually-hidden"); } // Set up initial variables. // // We need a bunch of classes and selectors. let secondaryMenuRegionIsOpen = false; - const headerToggleSelector = '.lgd-header__toggle'; - const primaryToggleClass = 'lgd-header__toggle--primary'; - const toggleActiveClass = 'lgd-header__toggle--active'; - const regionActiveClass = 'lgd-header__nav--active'; + const headerToggleSelector = ".lgd-header__toggle"; + const primaryToggleClass = "lgd-header__toggle--primary"; + const toggleActiveClass = "lgd-header__toggle--active"; + const regionActiveClass = "lgd-header__nav--active"; // This contains all toggles and their corresponding regions. const navInfo = {}; // This is used as a check on resize to see if the window size *actually* @@ -36,7 +36,7 @@ // and we can build an object full of references to them and to their // regions. We use .once() to avoid re-running this. const headerToggles = once( - 'header-toggle', + "header-toggle", headerToggleSelector, context, ); @@ -49,7 +49,7 @@ // button attributes. function handleReset() { headerToggles.forEach((headerToggle) => { - headerToggle.setAttribute('aria-expanded', 'false'); + headerToggle.setAttribute("aria-expanded", "false"); headerToggle.classList.remove(toggleActiveClass); }); @@ -60,12 +60,12 @@ // General function for when the ESC is clicked. function handleEscKeyClick(buttonToFocus) { - context.addEventListener('keydown', (e) => { + context.addEventListener("keydown", (e) => { // When on any link in the secondary menu, if you hit escape // set focus back to: // 1. menu button on small screens, and // 2. services button on large screens - if (e.key === 'Escape') { + if (e.key === "Escape") { e.preventDefault(); handleReset(); buttonToFocus.focus(); @@ -77,15 +77,15 @@ // references to the various DOM elements we need to work with. headerToggles.forEach((toggle) => { const region = context.getElementById( - toggle.getAttribute('aria-controls'), + toggle.getAttribute("aria-controls"), ); const nav = toggle.classList.contains(primaryToggleClass) - ? 'primary' - : 'secondary'; + ? "primary" + : "secondary"; // The resulting region.primary.firstLink isn't used, but it's less // difficult to add it than to add only region.secondary.firstLink. if (region) { - const links = region.querySelectorAll('.menu a'); + const links = region.querySelectorAll(".menu a"); const firstLink = links[0]; const lastLink = links[links.length - 1]; @@ -98,9 +98,9 @@ function handleToggleClick(toggleThatWasClicked) { // Get the current state as a boolean. const currentState = - toggleThatWasClicked.getAttribute('aria-expanded') === 'true'; + toggleThatWasClicked.getAttribute("aria-expanded") === "true"; - toggleThatWasClicked.setAttribute('aria-expanded', !currentState); + toggleThatWasClicked.setAttribute("aria-expanded", !currentState); toggleThatWasClicked.classList.toggle(toggleActiveClass); } @@ -127,8 +127,8 @@ // When on the first link in the secondary menu, if you shift+tab // set focus back to the services button function handleSecondaryMenuShiftTabClick() { - navInfo.secondary.firstLink.addEventListener('keydown', (e) => { - if (e.shiftKey && e.key === 'Tab') { + navInfo.secondary.firstLink.addEventListener("keydown", (e) => { + if (e.shiftKey && e.key === "Tab") { e.preventDefault(); navInfo.secondary.toggle.focus(); } @@ -138,8 +138,8 @@ // When on the last link in the secondary menu, if you hit tab // set focus back to the services button function handleSecondaryMenuTabClick() { - navInfo.secondary.lastLink.addEventListener('keydown', (e) => { - if (e.key === 'Tab') { + navInfo.secondary.lastLink.addEventListener("keydown", (e) => { + if (e.key === "Tab") { e.preventDefault(); navInfo.secondary.toggle.focus(); } @@ -148,10 +148,10 @@ // If you click on the page, anywhere outside the secondary menu region // or the secondary menu toggle button, close the secondary menu region - document.addEventListener('click', (e) => { + document.addEventListener("click", (e) => { if ( - !e.target.closest('#lgd-header__nav--secondary') && - !e.target.closest('.lgd-header__toggle--secondary') && + !e.target.closest("#lgd-header__nav--secondary") && + !e.target.closest(".lgd-header__toggle--secondary") && secondaryMenuRegionIsOpen ) { handleSecondaryMenuToggleClick(); @@ -169,56 +169,56 @@ if (window.innerWidth < 768) { if ( - Object.keys(navInfo).includes('secondary') && + Object.keys(navInfo).includes("secondary") && navInfo.secondary.toggle ) { navInfo.secondary.toggle.removeEventListener( - 'click', + "click", handleSecondaryMenuToggleClick, true, ); navInfo.secondary.toggle.removeEventListener( - 'click', + "click", handleSecondaryMenuShiftTabClick, true, ); navInfo.secondary.toggle.removeEventListener( - 'click', + "click", handleSecondaryMenuTabClick, true, ); } if (navInfo.primary.toggle) { navInfo.primary.toggle.addEventListener( - 'click', + "click", handlePrimaryMenuToggleClick, ); } } else { if ( - Object.keys(navInfo).includes('primary') && + Object.keys(navInfo).includes("primary") && navInfo.primary.toggle ) { navInfo.primary.toggle.removeEventListener( - 'click', + "click", handlePrimaryMenuToggleClick, true, ); } if ( - Object.keys(navInfo).includes('secondary') && + Object.keys(navInfo).includes("secondary") && navInfo.secondary.toggle ) { navInfo.secondary.toggle.addEventListener( - 'click', + "click", handleSecondaryMenuToggleClick, ); navInfo.secondary.toggle.addEventListener( - 'click', + "click", handleSecondaryMenuShiftTabClick, ); navInfo.secondary.toggle.addEventListener( - 'keyup', + "keyup", handleSecondaryMenuTabClick, ); } @@ -239,7 +239,7 @@ // Call our functions, initially and also when the window is resized. handleWindowResized(); window.addEventListener( - 'resize', + "resize", Drupal.debounce(handleCheckIfWindowActuallyResized, 50, false), ); }, diff --git a/js/subsites-menu.js b/js/subsites-menu.js index 3adff89c..143522ec 100644 --- a/js/subsites-menu.js +++ b/js/subsites-menu.js @@ -10,23 +10,23 @@ let windowWidth = window.innerWidth; const subsitesMenuToggle = document.querySelector( - '.subsite-extra__header-toggle-button', + ".subsite-extra__header-toggle-button", ); - const subsitesMenu = document.querySelector('.subsite-extra-menu'); + const subsitesMenu = document.querySelector(".subsite-extra-menu"); - subsitesMenuToggle.addEventListener('click', () => { + subsitesMenuToggle.addEventListener("click", () => { subsitesMenuToggle.setAttribute( - 'aria-expanded', - subsitesMenuToggle.getAttribute('aria-expanded') === 'true' - ? 'false' - : 'true', + "aria-expanded", + subsitesMenuToggle.getAttribute("aria-expanded") === "true" + ? "false" + : "true", ); - subsitesMenu.classList.toggle('subsite-extra-menu--active'); + subsitesMenu.classList.toggle("subsite-extra-menu--active"); }); function handleReset() { - subsitesMenuToggle.setAttribute('aria-expanded', 'false'); - subsitesMenu.classList.remove('subsite-extra-menu--active'); + subsitesMenuToggle.setAttribute("aria-expanded", "false"); + subsitesMenu.classList.remove("subsite-extra-menu--active"); } // If the window is resized to more than 768px, reset the menu. @@ -42,8 +42,8 @@ } // Close the menu when the escape key is pressed. - context.addEventListener('keydown', (e) => { - if (e.key === 'Escape') { + context.addEventListener("keydown", (e) => { + if (e.key === "Escape") { e.preventDefault(); handleReset(); subsitesMenuToggle.focus(); @@ -51,14 +51,14 @@ }); // Close the menu when a click is made outside of it. - document.addEventListener('click', (e) => { - if (!e.target.closest('#lgd-header__nav--subsites-menu')) { + document.addEventListener("click", (e) => { + if (!e.target.closest("#lgd-header__nav--subsites-menu")) { handleReset(); } }); window.addEventListener( - 'resize', + "resize", Drupal.debounce(handleWindowResized, 50, false), ); },