diff --git a/README.md b/README.md index a67e6b3..843394b 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ You need to enter two items when creating a sub-theme: 2. The machine name for the theme, this must start with a letter and use only lowercase letters and underscores, e.g. super_council ## Custom Styles -Hopefully most of the custom styles you will need are set via CSS custom properties in the `/css/variables.css` file in your sub-theme. +Hopefully most of the custom styles you will need are set via CSS custom properties in the `/css/base/variables.css` file in your sub-theme. This is where you set your colours, fonts, spacing, etc. Then you "apply" these variables where needed, like so: @@ -48,11 +48,43 @@ If you need to add any CSS overrides, you can create custom CSS files for these ## Automated CSS Coding Standards To make sure we follow Drupal's CSS coding standards (without having to think about it), there is a handy `npm` script to automatically scan and fix any CSS coding standards violations. -Simple run `npm install` to get the necessary packages, then run `npm start` to scan the files and fix any issues. +Simply run `npm install` to get the necessary packages, then run one of the following commands to scan the files and fix any issues. + +- "start": "npm run lint:css && npm run lint:js", +- "start:fix": "npm run lint:css:fix && npm run lint:js:fix", +- "lint:css": "stylelint \"**/*.css\"", +- "lint:css:fix": "stylelint \"**/*.css\" --fix", +- "lint:js": "eslint \"**/*.js\"", +- "lint:js:fix": "eslint \"**/*.js\" --fix", + +### start +This command will run the linter on your CSS and JS files and give you are report in your terminal of any issues. found. + +### start:fix +This command will do the same as `start` but will also attempt to fix any issues it finds, such as using correct quote marks, fixing indentation, etc. + +It's advisable to run `start` after you run this command to see if there was anything the automated linter couldn't fix. + +### lint:css +This is the same as `start` except it only checks the CSS files. + +### lint:css:fix +This is the same as `start:fix` except it only affects the CSS files. + +### lint:js +This is the same as `start` except it only checks the JS files. + +### lint:js:fix +This is the same as `start:fix` except it only affects the JS files. + +### Troubleshooting +If you get an error, such as node not being able to find prettier, you might need to install the packages from Drupal core's `package.json`. All of our linting extends Drupal core's linting to make sure we are always following Drupal's exact coding standards. To do so, simply `cd web/core` and then `npm install`. + +If you still cannot run the linter, make sure you are using the correct version of Node. We have a `.nvmrc` file to help you. Run `nvm use` from your theme directory to install the correct version. ## Maintainers -This project is currently maintained by: +This project is currently maintained by: - Mark Conroy https://github.com/markconroy - Maria Young https://github.com/msayoung diff --git a/components/add-to-calendar/add-to-calendar.js b/components/add-to-calendar/add-to-calendar.js index 17a670e..cb5a8b9 100644 --- a/components/add-to-calendar/add-to-calendar.js +++ b/components/add-to-calendar/add-to-calendar.js @@ -6,11 +6,17 @@ (function localgovAddToCalendarScript(Drupal) { Drupal.behaviors.localgovAddToCalendar = { attach(context) { - const addToCalendarButtons = once('all-add-to-calendar-buttons', '.localgov-add-to-calendar__trigger', context); + const addToCalendarButtons = once( + 'all-add-to-calendar-buttons', + '.localgov-add-to-calendar__trigger', + context, + ); if (addToCalendarButtons.length) { - addToCalendarButtons.forEach(button => { + addToCalendarButtons.forEach((button) => { const calendarModal = button.nextElementSibling; - const calendarModalClose = calendarModal.querySelector('.localgov-add-to-calendar__dialog-close-button'); + const calendarModalClose = calendarModal.querySelector( + '.localgov-add-to-calendar__dialog-close-button', + ); button.addEventListener('click', () => { calendarModal.showModal(); }); @@ -19,6 +25,6 @@ }); }); } - } + }, }; -}(Drupal)); +})(Drupal); diff --git a/components/prev-next/prev-next.css b/components/prev-next/prev-next.css index 4d71204..08e9649 100644 --- a/components/prev-next/prev-next.css +++ b/components/prev-next/prev-next.css @@ -15,8 +15,7 @@ ul.lgd-prev-next__list li.lgd-prev-next__list-item { display: flex; flex-wrap: wrap; align-items: center; - padding: var(--button-padding-vertical) var(--button-padding-horizontal) - var(--button-padding-vertical) var(--button-padding-horizontal); + padding: var(--button-padding-vertical) var(--button-padding-horizontal) var(--button-padding-vertical) var(--button-padding-horizontal); text-decoration: none; color: var(--button-text-color); border: var(--border); diff --git a/css/base/variables.css b/css/base/variables.css index f3138fc..ad85ced 100644 --- a/css/base/variables.css +++ b/css/base/variables.css @@ -71,8 +71,7 @@ body { We choose basic fonts that most people have in browser cache from visiting other websites. This will help with page speed, rather than calling fonts from Google Fonts or somewhere. */ - --font-primary: roboto, oxygen, ubuntu, cantarell, "Open Sans", - "Helvetica Neue", sans-serif; + --font-primary: roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-secondary: georgia, "Times New Roman", times, serif; --font-heading-1: var(--font-secondary); --font-heading-2: var(--font-secondary); @@ -94,11 +93,7 @@ body { --font-size-large: calc(var(--font-size) * 1.3125); --font-size-larger: calc(var(--font-size) * 1.6875); --font-size-largest: calc(var(--font-size) * 2.875); - --font-size-h1: clamp( - var(--font-size-larger), - 10vw, - var(--font-size-largest) - ); + --font-size-h1: clamp(var(--font-size-larger), 10vw, var(--font-size-largest)); --font-size-h2: clamp(var(--font-size-large), 8vw, var(--font-size-larger)); --font-size-h3: clamp(var(--font-size-medium), 6vw, var(--font-size-large)); --font-size-h4: var(--font-size-medium); @@ -140,10 +135,8 @@ body { --border-style: solid; --border-radius: var(--spacing-smallest); --border: var(--border-width) var(--border-style) var(--border-color); - --border-large: var(--border-width-large) var(--border-style) - var(--border-color); - --border-dark: var(--border-width) var(--border-style) - var(--border-color-dark); + --border-large: var(--border-width-large) var(--border-style) var(--border-color); + --border-dark: var(--border-width) var(--border-style) var(--border-color-dark); --border-transparent: var(--border-width) var(--border-style) transparent; /* Animation */ @@ -292,10 +285,7 @@ body { --sidebar-exposed-form-item-spacing: var(--spacing); /* Guide Navigation */ - --section-spacing-vertical-guide-nav: calc( - var(--spacing-large) + 1rem - ); /* 1rem to account for padding on left of bullets */ - + --section-spacing-vertical-guide-nav: calc(var(--spacing-large) + 1rem); /* 1rem to account for padding on left of bullets */ --section-spacing-horizontal-guide-nav: var(--spacing-large); --guide-nav-column-count: 3; @@ -501,188 +491,68 @@ body { --color-page-section-background-color-6-text-color: var(--color-white); --color-page-section-background-color-6-link-color: var(--color-white); /* Page Sections - Newsroom Teasers */ - --color-page-section-background-color-1-newsroom-teaser-background-color: var( - --color-white - ); - --color-page-section-background-color-1-newsroom-teaser-text-color: var( - --color-black - ); - --color-page-section-background-color-1-newsroom-teaser-link-color: var( - --color-black - ); - --color-page-section-background-color-2-newsroom-teaser-background-color: var( - --color-white - ); - --color-page-section-background-color-2-newsroom-teaser-text-color: var( - --color-black - ); - --color-page-section-background-color-2-newsroom-teaser-link-color: var( - --color-black - ); - --color-page-section-background-color-3-newsroom-teaser-background-color: var( - --color-black - ); - --color-page-section-background-color-3-newsroom-teaser-text-color: var( - --color-white - ); - --color-page-section-background-color-3-newsroom-teaser-link-color: var( - --color-white - ); - --color-page-section-background-color-4-newsroom-teaser-background-color: var( - --color-white - ); - --color-page-section-background-color-4-newsroom-teaser-text-color: var( - --color-black - ); - --color-page-section-background-color-4-newsroom-teaser-link-color: var( - --color-black - ); - --color-page-section-background-color-5-newsroom-teaser-background-color: var( - --color-white - ); - --color-page-section-background-color-5-newsroom-teaser-text-color: var( - --color-black - ); - --color-page-section-background-color-5-newsroom-teaser-link-color: var( - --color-black - ); - --color-page-section-background-color-6-newsroom-teaser-background-color: var( - --color-white - ); - --color-page-section-background-color-6-newsroom-teaser-text-color: var( - --color-black - ); - --color-page-section-background-color-6-newsroom-teaser-link-color: var( - --color-black - ); + --color-page-section-background-color-1-newsroom-teaser-background-color: var(--color-white); + --color-page-section-background-color-1-newsroom-teaser-text-color: var(--color-black); + --color-page-section-background-color-1-newsroom-teaser-link-color: var(--color-black); + --color-page-section-background-color-2-newsroom-teaser-background-color: var(--color-white); + --color-page-section-background-color-2-newsroom-teaser-text-color: var(--color-black); + --color-page-section-background-color-2-newsroom-teaser-link-color: var(--color-black); + --color-page-section-background-color-3-newsroom-teaser-background-color: var(--color-black); + --color-page-section-background-color-3-newsroom-teaser-text-color: var(--color-white); + --color-page-section-background-color-3-newsroom-teaser-link-color: var(--color-white); + --color-page-section-background-color-4-newsroom-teaser-background-color: var(--color-white); + --color-page-section-background-color-4-newsroom-teaser-text-color: var(--color-black); + --color-page-section-background-color-4-newsroom-teaser-link-color: var(--color-black); + --color-page-section-background-color-5-newsroom-teaser-background-color: var(--color-white); + --color-page-section-background-color-5-newsroom-teaser-text-color: var(--color-black); + --color-page-section-background-color-5-newsroom-teaser-link-color: var(--color-black); + --color-page-section-background-color-6-newsroom-teaser-background-color: var(--color-white); + --color-page-section-background-color-6-newsroom-teaser-text-color: var(--color-black); + --color-page-section-background-color-6-newsroom-teaser-link-color: var(--color-black); /* Page Sections - Box Links */ - --color-page-section-background-color-1-box-link-border-color: var( - --color-white - ); - --color-page-section-background-color-1-box-link-background-color: var( - --color-white - ); - --color-page-section-background-color-1-box-link-text-color: var( - --color-black - ); - --color-page-section-background-color-1-box-link-link-color: var( - --color-black - ); - --color-page-section-background-color-2-box-link-border-color: var( - --color-white - ); - --color-page-section-background-color-2-box-link-background-color: var( - --color-white - ); - --color-page-section-background-color-2-box-link-text-color: var( - --color-black - ); - --color-page-section-background-color-2-box-link-link-color: var( - --color-black - ); - --color-page-section-background-color-3-box-link-border-color: var( - --color-black - ); - --color-page-section-background-color-3-box-link-background-color: var( - --color-black - ); - --color-page-section-background-color-3-box-link-text-color: var( - --color-white - ); - --color-page-section-background-color-3-box-link-link-color: var( - --color-white - ); - --color-page-section-background-color-4-box-link-border-color: var( - --color-white - ); - --color-page-section-background-color-4-box-link-background-color: var( - --color-white - ); - --color-page-section-background-color-4-box-link-text-color: var( - --color-black - ); - --color-page-section-background-color-4-box-link-link-color: var( - --color-black - ); - --color-page-section-background-color-5-box-link-border-color: var( - --color-white - ); - --color-page-section-background-color-5-box-link-background-color: var( - --color-white - ); - --color-page-section-background-color-5-box-link-text-color: var( - --color-black - ); - --color-page-section-background-color-5-box-link-link-color: var( - --color-black - ); - --color-page-section-background-color-6-box-link-border-color: var( - --color-white - ); - --color-page-section-background-color-6-box-link-background-color: var( - --color-white - ); - --color-page-section-background-color-6-box-link-text-color: var( - --color-black - ); - --color-page-section-background-color-6-box-link-link-color: var( - --color-black - ); + --color-page-section-background-color-1-box-link-border-color: var(--color-white); + --color-page-section-background-color-1-box-link-background-color: var(--color-white); + --color-page-section-background-color-1-box-link-text-color: var(--color-black); + --color-page-section-background-color-1-box-link-link-color: var(--color-black); + --color-page-section-background-color-2-box-link-border-color: var(--color-white); + --color-page-section-background-color-2-box-link-background-color: var(--color-white); + --color-page-section-background-color-2-box-link-text-color: var(--color-black); + --color-page-section-background-color-2-box-link-link-color: var(--color-black); + --color-page-section-background-color-3-box-link-border-color: var(--color-black); + --color-page-section-background-color-3-box-link-background-color: var(--color-black); + --color-page-section-background-color-3-box-link-text-color: var(--color-white); + --color-page-section-background-color-3-box-link-link-color: var(--color-white); + --color-page-section-background-color-4-box-link-border-color: var(--color-white); + --color-page-section-background-color-4-box-link-background-color: var(--color-white); + --color-page-section-background-color-4-box-link-text-color: var(--color-black); + --color-page-section-background-color-4-box-link-link-color: var(--color-black); + --color-page-section-background-color-5-box-link-border-color: var(--color-white); + --color-page-section-background-color-5-box-link-background-color: var(--color-white); + --color-page-section-background-color-5-box-link-text-color: var(--color-black); + --color-page-section-background-color-5-box-link-link-color: var(--color-black); + --color-page-section-background-color-6-box-link-border-color: var(--color-white); + --color-page-section-background-color-6-box-link-background-color: var(--color-white); + --color-page-section-background-color-6-box-link-text-color: var(--color-black); + --color-page-section-background-color-6-box-link-link-color: var(--color-black); /* Page Sections - Featured Subsites */ - --color-page-section-background-color-1-featured-subsite-background-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-1-featured-subsite-text-color: var( - --color-black - ); - --color-page-section-background-color-1-featured-subsite-link-color: var( - --color-black - ); - --color-page-section-background-color-2-featured-subsite-background-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-2-featured-subsite-text-color: var( - --color-black - ); - --color-page-section-background-color-2-featured-subsite-link-color: var( - --color-black - ); - --color-page-section-background-color-3-featured-subsite-background-color: var( - --color-black - ); - --color-page-section-background-color-3-featured-subsite-text-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-3-featured-subsite-link-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-4-featured-subsite-background-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-4-featured-subsite-text-color: var( - --color-black - ); - --color-page-section-background-color-4-featured-subsite-link-color: var( - --color-black - ); - --color-page-section-background-color-5-featured-subsite-background-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-5-featured-subsite-text-color: var( - --color-black - ); - --color-page-section-background-color-5-featured-subsite-link-color: var( - --color-black - ); - --color-page-section-background-color-6-featured-subsite-background-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-6-featured-subsite-text-color: var( - --color-black - ); - --color-page-section-background-color-6-featured-subsite-link-color: var( - --color-black - ); + --color-page-section-background-color-1-featured-subsite-background-color: var(--color-grey-lightest); + --color-page-section-background-color-1-featured-subsite-text-color: var(--color-black); + --color-page-section-background-color-1-featured-subsite-link-color: var(--color-black); + --color-page-section-background-color-2-featured-subsite-background-color: var(--color-grey-lightest); + --color-page-section-background-color-2-featured-subsite-text-color: var(--color-black); + --color-page-section-background-color-2-featured-subsite-link-color: var(--color-black); + --color-page-section-background-color-3-featured-subsite-background-color: var(--color-black); + --color-page-section-background-color-3-featured-subsite-text-color: var(--color-grey-lightest); + --color-page-section-background-color-3-featured-subsite-link-color: var(--color-grey-lightest); + --color-page-section-background-color-4-featured-subsite-background-color: var(--color-grey-lightest); + --color-page-section-background-color-4-featured-subsite-text-color: var(--color-black); + --color-page-section-background-color-4-featured-subsite-link-color: var(--color-black); + --color-page-section-background-color-5-featured-subsite-background-color: var(--color-grey-lightest); + --color-page-section-background-color-5-featured-subsite-text-color: var(--color-black); + --color-page-section-background-color-5-featured-subsite-link-color: var(--color-black); + --color-page-section-background-color-6-featured-subsite-background-color: var(--color-grey-lightest); + --color-page-section-background-color-6-featured-subsite-text-color: var(--color-black); + --color-page-section-background-color-6-featured-subsite-link-color: var(--color-black); /* Add to Calendar */ --add-to-calendar-dialog-max-width: 80%; diff --git a/css/components/alert-banner.css b/css/components/alert-banner.css index 0081b2d..abb6944 100644 --- a/css/components/alert-banner.css +++ b/css/components/alert-banner.css @@ -26,8 +26,7 @@ dialog.localgov-alert-banner::backdrop { } .localgov-alert-banner__close { - padding: var(--alert-banner-close-padding-vertical) - var(--alert-banner-close-padding-horizontal); + padding: var(--alert-banner-close-padding-vertical) var(--alert-banner-close-padding-horizontal); color: var(--alert-banner-color); border: var(--alert-banner-close-border); border-color: var(--alert-banner-close-border-color); @@ -75,10 +74,8 @@ dialog.localgov-alert-banner::backdrop { } .localgov-alert-banner__inner { - margin: var(--alert-banner-inner-margin-vertical) - var(--alert-banner-inner-margin-horizontal); - padding: var(--alert-banner-inner-padding-vertical) - var(--alert-banner-inner-padding-horizontal); + margin: var(--alert-banner-inner-margin-vertical) var(--alert-banner-inner-margin-horizontal); + padding: var(--alert-banner-inner-padding-vertical) var(--alert-banner-inner-padding-horizontal); } .localgov-alert-banner--announcement .localgov-alert-banner__title { diff --git a/css/components/banner.css b/css/components/banner.css index 20af15c..4732322 100644 --- a/css/components/banner.css +++ b/css/components/banner.css @@ -11,8 +11,7 @@ .banner--primary .banner__content { position: relative; max-width: var(--banner-content-width); - margin: calc(var(--banner-content-margin) * -1) auto - var(--banner-content-margin); + margin: calc(var(--banner-content-margin) * -1) auto var(--banner-content-margin); padding: var(--banner-content-padding); color: var(--banner-content-text-color); background-color: var(--banner-content-bg-color); @@ -34,6 +33,6 @@ color: var(--color-banner-title-link-hover); } .banner__link.banner__link:focus-visible { - outline-offset: 2px; outline: 2px dashed var(--color-banner-title-link-hover); + outline-offset: 2px; } diff --git a/css/components/blog.css b/css/components/blog.css index 489cdd9..f5002d9 100644 --- a/css/components/blog.css +++ b/css/components/blog.css @@ -20,9 +20,7 @@ gap: var(--vertical-rhythm-spacing); } -.field--name-localgov-blog-channel-featured - > .field__items - > .field__item:first-of-type { +.field--name-localgov-blog-channel-featured > .field__items > .field__item:first-of-type { grid-column-start: 1; grid-column-end: 3; padding: var(--vertical-rhythm-spacing); diff --git a/css/components/breadcrumbs.css b/css/components/breadcrumbs.css index bbd065e..bab3bba 100644 --- a/css/components/breadcrumbs.css +++ b/css/components/breadcrumbs.css @@ -13,8 +13,7 @@ } .breadcrumbs { - padding: var(--breadcrumbs-padding-vertical) - var(--breadcrumbs-padding-horizontal); + padding: var(--breadcrumbs-padding-vertical) var(--breadcrumbs-padding-horizontal); border-block-end: var(--breadcrumbs-border); } diff --git a/css/components/callout-box.css b/css/components/callout-box.css index 2e2fa90..12acd93 100644 --- a/css/components/callout-box.css +++ b/css/components/callout-box.css @@ -28,10 +28,6 @@ .call-out-box--has-image .call-out-box__content { width: 75%; padding-inline-end: 20%; - background: linear-gradient( - to right, - var(--call-out-box-bg-color) 75%, - transparent - ); + background: linear-gradient(to right, var(--call-out-box-bg-color) 75%, transparent); } } diff --git a/css/components/directories.css b/css/components/directories.css index a56b8ce..77419ba 100644 --- a/css/components/directories.css +++ b/css/components/directories.css @@ -24,8 +24,6 @@ margin-block-end: var(--vertical-rhythm-spacing); } -.localgov-directory__content - .views-element-container - + .views-element-container { +.localgov-directory__content .views-element-container + .views-element-container { margin-block-start: var(--vertical-rhythm-spacing); } diff --git a/css/components/events.css b/css/components/events.css index 7c212dc..b0ed390 100644 --- a/css/components/events.css +++ b/css/components/events.css @@ -15,8 +15,7 @@ .field--name-localgov-event-call-to-action a { display: inline-block; - padding: var(--button-padding-vertical) var(--button-padding-horizontal) - var(--button-padding-vertical) var(--button-padding-horizontal); + padding: var(--button-padding-vertical) var(--button-padding-horizontal) var(--button-padding-vertical) var(--button-padding-horizontal); color: var(--button-text-color); border: var(--border); border-color: var(--button-border-color); diff --git a/css/components/fact-box.css b/css/components/fact-box.css index 1994e00..2db6801 100644 --- a/css/components/fact-box.css +++ b/css/components/fact-box.css @@ -6,8 +6,7 @@ } .fact-box--has-bg { - padding: var(--fact-box-padding-vertical) var(--fact-box-padding-horizontal) - calc(var(--fact-box-padding-vertical) - var(--vertical-rhythm-spacing)); + padding: var(--fact-box-padding-vertical) var(--fact-box-padding-horizontal) calc(var(--fact-box-padding-vertical) - var(--vertical-rhythm-spacing)); } .fact-box--fact-box-light { diff --git a/css/components/form-items.css b/css/components/form-items.css index b9d31aa..54b5187 100644 --- a/css/components/form-items.css +++ b/css/components/form-items.css @@ -87,17 +87,14 @@ select:focus { padding-inline-start: 0; } -.select2-container--default - .select2-selection--single - .select2-selection__arrow { +.select2-container--default .select2-selection--single .select2-selection__arrow { top: 13px; } /* Buttons */ button, input[type="submit"] { - padding: var(--button-padding-vertical) var(--button-padding-horizontal) - var(--button-padding-vertical) var(--button-padding-horizontal); + padding: var(--button-padding-vertical) var(--button-padding-horizontal) var(--button-padding-vertical) var(--button-padding-horizontal); cursor: pointer; color: var(--button-text-color); border: var(--border); @@ -193,9 +190,7 @@ input[type="submit"]:hover { .form-item input[type="checkbox"]:focus + label::before, .form-checkboxes input[type="checkbox"]:focus + label::before, .facet-item input[type="checkbox"]:focus + label::before, -.form-item-webform-terms-of-service - input[type="checkbox"]:focus - + label::before { +.form-item-webform-terms-of-service input[type="checkbox"]:focus + label::before { border-width: 4px; box-shadow: 0 0 0 3px var(--checkbox-select-focus-color); } @@ -214,9 +209,7 @@ input[type="submit"]:hover { .form-item input[type="checkbox"]:checked + label::after, .form-checkboxes input[type="checkbox"]:checked + label::after, .facet-item input[type="checkbox"]:checked + label::after, -.form-item-webform-terms-of-service - input[type="checkbox"]:checked - + label::after { +.form-item-webform-terms-of-service input[type="checkbox"]:checked + label::after { opacity: 1; } @@ -287,10 +280,7 @@ input[type="submit"]:hover { background: currentColor; } .webform-type-radios .form-item [type="radio"]:focus + label::before, -.webform-type-webform-radios-other - .form-item - [type="radio"]:focus - + label::before { +.webform-type-webform-radios-other .form-item [type="radio"]:focus + label::before { border-width: 4px; box-shadow: 0 0 0 4px var(--radio-select-focus-color); } diff --git a/css/components/guide-nav.css b/css/components/guide-nav.css index 36cf3bc..d17e767 100644 --- a/css/components/guide-nav.css +++ b/css/components/guide-nav.css @@ -1,7 +1,6 @@ .lgd-guide-nav { margin-block-end: var(--vertical-rhythm-spacing); - padding: var(--section-spacing-vertical-guide-nav) - var(--section-spacing-horizontal-guide-nav); + padding: var(--section-spacing-vertical-guide-nav) var(--section-spacing-horizontal-guide-nav); background-color: var(--color-grey-lighter); } diff --git a/css/components/link.css b/css/components/link.css index 33ad107..767c607 100644 --- a/css/components/link.css +++ b/css/components/link.css @@ -9,8 +9,7 @@ } .link--button-style .link-wrapper { - padding: var(--button-padding-vertical) var(--button-padding-horizontal) - var(--button-padding-vertical) var(--button-padding-horizontal); + padding: var(--button-padding-vertical) var(--button-padding-horizontal) var(--button-padding-vertical) var(--button-padding-horizontal); color: var(--button-text-color); border: var(--border); border-color: var(--button-border-color); diff --git a/css/components/page-sections.css b/css/components/page-sections.css index c7c0905..94cbb8d 100644 --- a/css/components/page-sections.css +++ b/css/components/page-sections.css @@ -3,56 +3,32 @@ background-color: var(--color-page-section-background-color); } .lgd-page-section--bg-colour-1 { - --color-page-section-background-color: var( - --color-page-section-background-color-1 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-1-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-1); + --color-page-section-text-color: var(--color-page-section-background-color-1-text-color); } .lgd-page-section--bg-colour-2 { - --color-page-section-background-color: var( - --color-page-section-background-color-2 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-2-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-2); + --color-page-section-text-color: var(--color-page-section-background-color-2-text-color); } .lgd-page-section--bg-colour-3 { - --color-page-section-background-color: var( - --color-page-section-background-color-3 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-3-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-3); + --color-page-section-text-color: var(--color-page-section-background-color-3-text-color); } /* Adding 3 extra colour options here, so they are available if other subthemes/sites need them. */ .lgd-page-section--bg-colour-4 { - --color-page-section-background-color: var( - --color-page-section-background-color-4 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-4-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-4); + --color-page-section-text-color: var(--color-page-section-background-color-4-text-color); } .lgd-page-section--bg-colour-5 { - --color-page-section-background-color: var( - --color-page-section-background-color-5 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-5-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-5); + --color-page-section-text-color: var(--color-page-section-background-color-5-text-color); } .lgd-page-section--bg-colour-6 { - --color-page-section-background-color: var( - --color-page-section-background-color-6 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-6-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-6); + --color-page-section-text-color: var(--color-page-section-background-color-6-text-color); } .lgd-page-section--padding-top-small { @@ -192,153 +168,93 @@ /* Newsroom Teasers */ .lgd-page-section--bg-colour-1 .newsroom-teaser { - color: var( - --color-page-section-background-color-1-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-1-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-1-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-1-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-1 .newsroom-teaser a { - color: var( - --color-page-section-background-color-1-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-1-newsroom-teaser-link-color); } .lgd-page-section--bg-colour-2 .newsroom-teaser { - color: var( - --color-page-section-background-color-2-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-2-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-2-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-2-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-2 .newsroom-teaser a { - color: var( - --color-page-section-background-color-2-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-2-newsroom-teaser-link-color); } .lgd-page-section--bg-colour-3 .newsroom-teaser { - color: var( - --color-page-section-background-color-3-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-3-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-3-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-3-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-3 .newsroom-teaser a { - color: var( - --color-page-section-background-color-3-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-3-newsroom-teaser-link-color); } .lgd-page-section--bg-colour-4 .newsroom-teaser { - color: var( - --color-page-section-background-color-4-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-4-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-4-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-4-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-4 .newsroom-teaser a { - color: var( - --color-page-section-background-color-4-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-4-newsroom-teaser-link-color); } .lgd-page-section--bg-colour-5 .newsroom-teaser { - color: var( - --color-page-section-background-color-5-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-5-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-5-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-5-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-5 .newsroom-teaser a { - color: var( - --color-page-section-background-color-5-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-5-newsroom-teaser-link-color); } .lgd-page-section--bg-colour-6 .newsroom-teaser { - color: var( - --color-page-section-background-color-6-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-6-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-6-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-6-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-6 .newsroom-teaser a { - color: var( - --color-page-section-background-color-6-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-6-newsroom-teaser-link-color); } /* Box Links */ .lgd-page-section--bg-colour-1 .box-link { color: var(--color-page-section-background-color-1-box-link-text-color); - border-color: var( - --color-page-section-background-color-1-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-1-box-link-background-color - ); + border-color: var(--color-page-section-background-color-1-box-link-border-color); + background-color: var(--color-page-section-background-color-1-box-link-background-color); } .lgd-page-section--bg-colour-1 .box-link a { color: var(--color-page-section-background-color-1-box-link-link-color); } .lgd-page-section--bg-colour-2 .box-link { color: var(--color-page-section-background-color-2-box-link-text-color); - border-color: var( - --color-page-section-background-color-2-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-2-box-link-background-color - ); + border-color: var(--color-page-section-background-color-2-box-link-border-color); + background-color: var(--color-page-section-background-color-2-box-link-background-color); } .lgd-page-section--bg-colour-2 .box-link a { color: var(--color-page-section-background-color-2-box-link-link-color); } .lgd-page-section--bg-colour-3 .box-link { color: var(--color-page-section-background-color-3-box-link-text-color); - border-color: var( - --color-page-section-background-color-3-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-3-box-link-background-color - ); + border-color: var(--color-page-section-background-color-3-box-link-border-color); + background-color: var(--color-page-section-background-color-3-box-link-background-color); } .lgd-page-section--bg-colour-3 .box-link a { color: var(--color-page-section-background-color-3-box-link-link-color); } .lgd-page-section--bg-colour-4 .box-link { color: var(--color-page-section-background-color-4-box-link-text-color); - border-color: var( - --color-page-section-background-color-4-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-4-box-link-background-color - ); + border-color: var(--color-page-section-background-color-4-box-link-border-color); + background-color: var(--color-page-section-background-color-4-box-link-background-color); } .lgd-page-section--bg-colour-4 .box-link a { color: var(--color-page-section-background-color-4-box-link-link-color); } .lgd-page-section--bg-colour-5 .box-link { color: var(--color-page-section-background-color-5-box-link-text-color); - border-color: var( - --color-page-section-background-color-5-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-5-box-link-background-color - ); + border-color: var(--color-page-section-background-color-5-box-link-border-color); + background-color: var(--color-page-section-background-color-5-box-link-background-color); } .lgd-page-section--bg-colour-5 .box-link a { color: var(--color-page-section-background-color-5-box-link-link-color); } .lgd-page-section--bg-colour-6 .box-link { color: var(--color-page-section-background-color-6-box-link-text-color); - border-color: var( - --color-page-section-background-color-6-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-6-box-link-background-color - ); + border-color: var(--color-page-section-background-color-6-box-link-border-color); + background-color: var(--color-page-section-background-color-6-box-link-background-color); } .lgd-page-section--bg-colour-6 .box-link a { color: var(--color-page-section-background-color-6-box-link-link-color); @@ -346,80 +262,44 @@ /* Featured Subsites */ .lgd-page-section--bg-colour-1 .featured-subsite { - color: var( - --color-page-section-background-color-1-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-1-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-1-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-1-featured-subsite-background-color); } .lgd-page-section--bg-colour-1 .featured-subsite a { - color: var( - --color-page-section-background-color-1-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-1-featured-subsite-link-color); } .lgd-page-section--bg-colour-2 .featured-subsite { - color: var( - --color-page-section-background-color-2-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-2-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-2-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-2-featured-subsite-background-color); } .lgd-page-section--bg-colour-2 .featured-subsite a { - color: var( - --color-page-section-background-color-2-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-2-featured-subsite-link-color); } .lgd-page-section--bg-colour-3 .featured-subsite { - color: var( - --color-page-section-background-color-3-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-3-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-3-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-3-featured-subsite-background-color); } .lgd-page-section--bg-colour-3 .featured-subsite a { - color: var( - --color-page-section-background-color-3-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-3-featured-subsite-link-color); } .lgd-page-section--bg-colour-4 .featured-subsite { - color: var( - --color-page-section-background-color-4-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-4-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-4-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-4-featured-subsite-background-color); } .lgd-page-section--bg-colour-4 .featured-subsite a { - color: var( - --color-page-section-background-color-4-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-4-featured-subsite-link-color); } .lgd-page-section--bg-colour-5 .featured-subsite { - color: var( - --color-page-section-background-color-5-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-5-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-5-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-5-featured-subsite-background-color); } .lgd-page-section--bg-colour-5 .featured-subsite a { - color: var( - --color-page-section-background-color-5-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-5-featured-subsite-link-color); } .lgd-page-section--bg-colour-6 .featured-subsite { - color: var( - --color-page-section-background-color-6-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-6-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-6-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-6-featured-subsite-background-color); } .lgd-page-section--bg-colour-6 .featured-subsite a { - color: var( - --color-page-section-background-color-6-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-6-featured-subsite-link-color); } diff --git a/css/components/service-landing-page.css b/css/components/service-landing-page.css index a20197a..c8b6b69 100644 --- a/css/components/service-landing-page.css +++ b/css/components/service-landing-page.css @@ -1,8 +1,7 @@ .service-landing-page__contact { margin-block-end: var(--vertical-rhythm-spacing); padding: var(--spacing); - border-inline-start: var(--border-width-large) var(--border-style) - var(--color-accent); + border-inline-start: var(--border-width-large) var(--border-style) var(--color-accent); background-color: var(--color-grey-lighter); } @@ -16,8 +15,7 @@ align-items: center; } -.service-landing-page__contact-list-item - + .service-landing-page__contact-list-item { +.service-landing-page__contact-list-item + .service-landing-page__contact-list-item { margin-block-start: var(--spacing-smaller); } diff --git a/css/components/service-statuses.css b/css/components/service-statuses.css index bfdb7a8..7f4f96d 100644 --- a/css/components/service-statuses.css +++ b/css/components/service-statuses.css @@ -70,16 +70,8 @@ background-color: var(--color-focus); } -.service-status - .nav-tabs - .nav-item - .nav-link.active:hover - .service-status-title, -.service-status - .nav-tabs - .nav-item - .nav-link.active:focus - .service-status-title { +.service-status .nav-tabs .nav-item .nav-link.active:hover .service-status-title, +.service-status .nav-tabs .nav-item .nav-link.active:focus .service-status-title { text-decoration: underline; } diff --git a/css/components/sidebar.css b/css/components/sidebar.css index 5553db2..80ab80f 100644 --- a/css/components/sidebar.css +++ b/css/components/sidebar.css @@ -9,8 +9,7 @@ .sidebar .lgd-region__inner > *, .blog-channel__sidebar > *, .newsroom__sidebar > * { - padding: var(--sidebar-exposed-form-padding-vertical) - var(--sidebar-exposed-form-padding-horizontal); + padding: var(--sidebar-exposed-form-padding-vertical) var(--sidebar-exposed-form-padding-horizontal); background-color: var(--sidebar-exposed-form-bg-color); } diff --git a/css/components/sitewide-search.css b/css/components/sitewide-search.css index 40d2e15..134c22e 100644 --- a/css/components/sitewide-search.css +++ b/css/components/sitewide-search.css @@ -1,6 +1,5 @@ .lgd-search-results-list__header-container { - padding: var(--sitewide-search-header-container-padding-vertical) - var(--sitewide-search-header-container-padding-horizontal); + padding: var(--sitewide-search-header-container-padding-vertical) var(--sitewide-search-header-container-padding-horizontal); border: var(--border); border-radius: var(--border-radius); } diff --git a/css/components/step-by-step.css b/css/components/step-by-step.css index 96f0341..60ee5bf 100644 --- a/css/components/step-by-step.css +++ b/css/components/step-by-step.css @@ -5,8 +5,7 @@ /* Sidebar Block Header */ @media screen and (min-width: 48rem) { - .block-views-blocklocalgov-step-by-step-navigation-steps - .step-by-step-pages__relationship { + .block-views-blocklocalgov-step-by-step-navigation-steps .step-by-step-pages__relationship { display: none; } } diff --git a/css/components/sticky-header.css b/css/components/sticky-header.css index 4c65586..07bfa6d 100644 --- a/css/components/sticky-header.css +++ b/css/components/sticky-header.css @@ -5,9 +5,7 @@ } .sticky-header--sticky .lgd-header + * { - margin-block-start: calc( - var(--lgd-sticky-header-position) + var(--lgd-sticky-header-height) - ); + margin-block-start: calc(var(--lgd-sticky-header-position) + var(--lgd-sticky-header-height)); scroll-padding: var(--lgd-sticky-header-height); } diff --git a/css/components/wysiwyg-styles.css b/css/components/wysiwyg-styles.css index 1596d16..8958227 100644 --- a/css/components/wysiwyg-styles.css +++ b/css/components/wysiwyg-styles.css @@ -65,10 +65,7 @@ height: 0.75rem; margin-inline-start: 0.25rem; content: ""; - background-color: var( - --external-link-icon-color - ); /* https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables#58536915 */ - + background-color: var(--external-link-icon-color); /* https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables#58536915 */ -webkit-mask-image: url("../../templates/includes/icons/external-link.svg"); mask-image: url("../../templates/includes/icons/external-link.svg"); } diff --git a/js/back-to-top.js b/js/back-to-top.js index 4dc4e91..d661a9a 100644 --- a/js/back-to-top.js +++ b/js/back-to-top.js @@ -2,7 +2,7 @@ * @file Drupal behavior for 'back to top' link. */ -(function (Drupal) { +(function localgovBackToTopScript(Drupal) { Drupal.behaviors.localgovBackToTop = { attach(context) { /** @@ -19,28 +19,29 @@ * 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 [backToTopTarget] = once( + 'back-to-top-target', + '.back-to-top-target', + context, + ); + function observerCallback(entries) { entries.forEach((entry) => { - backToTop.hidden = ( + backToTop.hidden = entry.isIntersecting || (!entry.isIntersecting && entry.boundingClientRect.top <= 0) - ) ? false : 'until-hidden'; + ? false + : 'until-hidden'; }); } - const [backToTop] = once('back-to-top', '.back-to-top', context); - const [backToTopTarget] = once( - 'back-to-top-target', - '.back-to-top-target', - context, - ); const minContentViewportRatio = parseFloat( backToTop?.dataset?.minContentViewportRatio ?? 1.5, 10, ); const viewportHeight = window.innerHeight; const documentHeight = document.documentElement.offsetHeight; - let intersectionObserver; if ( !backToTop || @@ -53,10 +54,12 @@ // Create an element absolutely positioned at our threshold. 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. - intersectionObserver = new IntersectionObserver(observerCallback, { + const intersectionObserver = new IntersectionObserver(observerCallback, { rootMargin: '16px', }); intersectionObserver.observe(backToTopTarget); diff --git a/js/guides.js b/js/guides.js index b92eca8..c12c56a 100644 --- a/js/guides.js +++ b/js/guides.js @@ -4,7 +4,7 @@ (function guidesScript(Drupal) { Drupal.behaviors.guides = { - attach: function (context) { + attach() { // When we click on a guide navigation link, we link to the top of the // Guide content. This is fine for visual users, but for screen reader // users, the focus stays at the top of the page. @@ -19,6 +19,6 @@ element.focus(); } } - } + }, }; -}(Drupal)); +})(Drupal); diff --git a/js/header.js b/js/header.js index 0163843..1fc2c7d 100644 --- a/js/header.js +++ b/js/header.js @@ -4,12 +4,16 @@ (function headerScript(Drupal) { Drupal.behaviors.header = { - attach: function (context) { + attach(context) { // Hide the search form label. We use .once() to avoid re-running. // // @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', context); + const headerSearchFormLabel = once( + 'header-search-label', + '.lgd-region--search form label', + context, + ); if (headerSearchFormLabel.length) { headerSearchFormLabel[0].classList.add('visually-hidden'); @@ -31,16 +35,50 @@ // All the interactivity here revolves around the toggles, so query them // 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', headerToggleSelector, context); + const headerToggles = once( + 'header-toggle', + headerToggleSelector, + context, + ); if (!headerToggles.length) { return; } + // General reset function to hide the menu regions and reset the toggle + // button attributes. + function handleReset() { + headerToggles.forEach((headerToggle) => { + headerToggle.setAttribute('aria-expanded', 'false'); + headerToggle.classList.remove(toggleActiveClass); + }); + + Object.keys(navInfo).forEach((nav) => { + navInfo[nav].region.classList.remove(regionActiveClass); + }); + } + + // General function for when the ESC is clicked. + function handleEscKeyClick(buttonToFocus) { + 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') { + e.preventDefault(); + handleReset(); + buttonToFocus.focus(); + } + }); + } + // Looping over the discovered menu toggles, create an object containing // references to the various DOM elements we need to work with. - headerToggles.forEach(function(toggle) { - const region = context.getElementById(toggle.getAttribute('aria-controls')); + headerToggles.forEach((toggle) => { + const region = context.getElementById( + toggle.getAttribute('aria-controls'), + ); const nav = toggle.classList.contains(primaryToggleClass) ? 'primary' : 'secondary'; @@ -59,25 +97,13 @@ // Which menu region to show is decided by the "toggleThatWasClicked" parameter. function handleToggleClick(toggleThatWasClicked) { // Get the current state as a boolean. - const currentState = toggleThatWasClicked.getAttribute('aria-expanded') === 'true'; + const currentState = + toggleThatWasClicked.getAttribute('aria-expanded') === 'true'; toggleThatWasClicked.setAttribute('aria-expanded', !currentState); toggleThatWasClicked.classList.toggle(toggleActiveClass); } - // General reset function to hide the menu regions and reset the toggle - // button attributes. - function handleReset() { - headerToggles.forEach(function(headerToggle) { - headerToggle.setAttribute('aria-expanded', 'false'); - headerToggle.classList.remove(toggleActiveClass); - }); - - Object.keys(navInfo).forEach(function(nav) { - navInfo[nav].region.classList.remove(regionActiveClass); - }); - } - // When the primary menu toggle is clicked function handlePrimaryMenuToggleClick() { handleToggleClick(navInfo.primary.toggle); @@ -93,16 +119,16 @@ handleEscKeyClick(navInfo.secondary.toggle); navInfo.secondary.region.classList.toggle(regionActiveClass); - navInfo.secondary.region.classList.contains(regionActiveClass) - ? navInfo.secondary.firstLink.focus() - : null; + if (navInfo.secondary.region.classList.contains(regionActiveClass)) { + navInfo.secondary.firstLink.focus(); + } secondaryMenuRegionIsOpen = !secondaryMenuRegionIsOpen; } // 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', function(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(); } @@ -112,37 +138,25 @@ // 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', function(e) { - if (e.key == 'Tab') { + navInfo.secondary.lastLink.addEventListener('keydown', (e) => { + if (e.key === 'Tab') { e.preventDefault(); navInfo.secondary.toggle.focus(); } }); } - - // General function for when the ESC is clicked. - function handleEscKeyClick(buttonToFocus) { - context.addEventListener('keydown', function(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') { - e.preventDefault(); - handleReset() - buttonToFocus.focus(); - } - }); - } - // 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', function(e) { - if (!e.target.closest('#lgd-header__nav--secondary') && !e.target.closest('.lgd-header__toggle--secondary') && secondaryMenuRegionIsOpen){ - handleSecondaryMenuToggleClick(); - } - }); + document.addEventListener('click', (e) => { + if ( + !e.target.closest('#lgd-header__nav--secondary') && + !e.target.closest('.lgd-header__toggle--secondary') && + secondaryMenuRegionIsOpen + ) { + handleSecondaryMenuToggleClick(); + } + }); // When the window is resized (or a device orientation changes), // set out what happens. @@ -153,23 +167,60 @@ function handleWindowResized() { handleReset(); - if (window.innerWidth < 768) { - if (Object.keys(navInfo).includes('secondary') && navInfo.secondary.toggle) { - navInfo.secondary.toggle.removeEventListener('click', handleSecondaryMenuToggleClick, true); - navInfo.secondary.toggle.removeEventListener('click', handleSecondaryMenuShiftTabClick, true); - navInfo.secondary.toggle.removeEventListener('click', handleSecondaryMenuTabClick, true); + if (window.innerWidth < 768) { + if ( + Object.keys(navInfo).includes('secondary') && + navInfo.secondary.toggle + ) { + navInfo.secondary.toggle.removeEventListener( + 'click', + handleSecondaryMenuToggleClick, + true, + ); + navInfo.secondary.toggle.removeEventListener( + 'click', + handleSecondaryMenuShiftTabClick, + true, + ); + navInfo.secondary.toggle.removeEventListener( + 'click', + handleSecondaryMenuTabClick, + true, + ); } if (navInfo.primary.toggle) { - navInfo.primary.toggle.addEventListener('click', handlePrimaryMenuToggleClick); + navInfo.primary.toggle.addEventListener( + 'click', + handlePrimaryMenuToggleClick, + ); } } else { - if (Object.keys(navInfo).includes('primary') && navInfo.primary.toggle) { - navInfo.primary.toggle.removeEventListener('click', handlePrimaryMenuToggleClick, true); + if ( + Object.keys(navInfo).includes('primary') && + navInfo.primary.toggle + ) { + navInfo.primary.toggle.removeEventListener( + 'click', + handlePrimaryMenuToggleClick, + true, + ); } - if (Object.keys(navInfo).includes('secondary') && navInfo.secondary.toggle) { - navInfo.secondary.toggle.addEventListener('click', handleSecondaryMenuToggleClick); - navInfo.secondary.toggle.addEventListener('click', handleSecondaryMenuShiftTabClick); - navInfo.secondary.toggle.addEventListener('keyup', handleSecondaryMenuTabClick); + if ( + Object.keys(navInfo).includes('secondary') && + navInfo.secondary.toggle + ) { + navInfo.secondary.toggle.addEventListener( + 'click', + handleSecondaryMenuToggleClick, + ); + navInfo.secondary.toggle.addEventListener( + 'click', + handleSecondaryMenuShiftTabClick, + ); + navInfo.secondary.toggle.addEventListener( + 'keyup', + handleSecondaryMenuTabClick, + ); } } } @@ -179,9 +230,7 @@ // near the bottom of the menu, a scrollbar comes into play which technically // means the window size has changed. function handleCheckIfWindowActuallyResized() { - if (window.innerWidth === windowWidth) { - return - } else { + if (window.innerWidth !== windowWidth) { windowWidth = window.innerWidth; handleWindowResized(); } @@ -189,7 +238,10 @@ // Call our functions, initially and also when the window is resized. handleWindowResized(); - window.addEventListener('resize', Drupal.debounce(handleCheckIfWindowActuallyResized, 50, false)); - } + window.addEventListener( + 'resize', + Drupal.debounce(handleCheckIfWindowActuallyResized, 50, false), + ); + }, }; -}(Drupal)); +})(Drupal); diff --git a/js/sticky-header.js b/js/sticky-header.js index 9ae05db..3f333a4 100644 --- a/js/sticky-header.js +++ b/js/sticky-header.js @@ -1,22 +1,30 @@ (function stickyHeaderScript(Drupal) { Drupal.behaviors.stickyHeader = { - attach: function (context) { - const headers = once('allSticyHeaders', '.lgd-header', context); + attach(context) { + const headers = once('allStickyHeaders', '.lgd-header', context); if (!headers) { return; } - headers.forEach(header => { + headers.forEach((header) => { function calculatePositions() { let tabsHeight = 0; - const tabs = header.closest('body').querySelector('.lgd-region--tabs'); + const tabs = header + .closest('body') + .querySelector('.lgd-region--tabs'); if (tabs) { tabsHeight = tabs.offsetHeight; } let displaceOffsetTop = 0; - const displaceOffsetTopValue = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--drupal-displace-offset-top').replace('px', '')); + const displaceOffsetTopValue = parseInt( + getComputedStyle(document.documentElement) + .getPropertyValue('--drupal-displace-offset-top') + .replace('px', ''), + 10, + ); + console.log('working'); if (displaceOffsetTopValue) { displaceOffsetTop = displaceOffsetTopValue; } @@ -25,11 +33,19 @@ const headerPosition = displaceOffsetTop + tabsHeight; if (header.closest('body').classList.contains('sticky-header')) { - document.documentElement.style.setProperty('--lgd-sticky-header-position', `${headerPosition}px`); - document.documentElement.style.setProperty('--lgd-sticky-header-height', `${headerHeight}px`); + document.documentElement.style.setProperty( + '--lgd-sticky-header-position', + `${headerPosition}px`, + ); + document.documentElement.style.setProperty( + '--lgd-sticky-header-height', + `${headerHeight}px`, + ); } - if (header.closest('body').classList.contains('sticky-header--sticky')) { + if ( + header.closest('body').classList.contains('sticky-header--sticky') + ) { header.style.position = 'fixed'; } } @@ -50,16 +66,16 @@ calculatePositions(); } - if (header.closest('body').classList.contains('sticky-header--scroll')) { + if ( + header.closest('body').classList.contains('sticky-header--scroll') + ) { window.addEventListener('scroll', handleScroll); } setTimeout(() => { calculatePositions(); }, 50); - }); - - } + }, }; -})(Drupal); \ No newline at end of file +})(Drupal); diff --git a/js/subsites-menu.js b/js/subsites-menu.js index 4480be7..3adff89 100644 --- a/js/subsites-menu.js +++ b/js/subsites-menu.js @@ -4,46 +4,46 @@ (function subsitesMenuScript(Drupal) { Drupal.behaviors.subsitesMenu = { - attach: function (context) { + attach(context) { // This variable will be used later to make sure that the window // was actually resized. 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", function () { + 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. function handleWindowResized() { if (window.innerWidth === windowWidth) { return; - } else { - windowWidth = window.innerWidth; } + windowWidth = window.innerWidth; + if (windowWidth > 768) { handleReset(); } } // Close the menu when the escape key is pressed. - context.addEventListener("keydown", function (e) { - if (e.key == "Escape") { + context.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { e.preventDefault(); handleReset(); subsitesMenuToggle.focus(); @@ -51,15 +51,15 @@ }); // Close the menu when a click is made outside of it. - document.addEventListener("click", function (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", - Drupal.debounce(handleWindowResized, 50, false) + 'resize', + Drupal.debounce(handleWindowResized, 50, false), ); }, };