@caweb/html-webpack-plugin 1.2.2 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/delta-rtl.css +6 -6
- package/build/delta.asset.php +1 -1
- package/build/delta.css +6 -6
- package/build/delta.css.map +1 -1
- package/build/delta.js +540 -494
- package/build/delta.js.map +1 -1
- package/build/eureka-rtl.css +6 -6
- package/build/eureka.asset.php +1 -1
- package/build/eureka.css +6 -6
- package/build/eureka.css.map +1 -1
- package/build/eureka.js +540 -494
- package/build/eureka.js.map +1 -1
- package/build/mono-rtl.css +6 -6
- package/build/mono.asset.php +1 -1
- package/build/mono.css +6 -6
- package/build/mono.css.map +1 -1
- package/build/mono.js +540 -494
- package/build/mono.js.map +1 -1
- package/build/oceanside-rtl.css +6 -6
- package/build/oceanside.asset.php +1 -1
- package/build/oceanside.css +6 -6
- package/build/oceanside.css.map +1 -1
- package/build/oceanside.js +540 -494
- package/build/oceanside.js.map +1 -1
- package/build/orangecounty-rtl.css +6 -6
- package/build/orangecounty.asset.php +1 -1
- package/build/orangecounty.css +6 -6
- package/build/orangecounty.css.map +1 -1
- package/build/orangecounty.js +540 -494
- package/build/orangecounty.js.map +1 -1
- package/build/pasorobles-rtl.css +6 -6
- package/build/pasorobles.asset.php +1 -1
- package/build/pasorobles.css +6 -6
- package/build/pasorobles.css.map +1 -1
- package/build/pasorobles.js +540 -494
- package/build/pasorobles.js.map +1 -1
- package/build/sacramento-rtl.css +6 -6
- package/build/sacramento.asset.php +1 -1
- package/build/sacramento.css +6 -6
- package/build/sacramento.css.map +1 -1
- package/build/sacramento.js +540 -494
- package/build/sacramento.js.map +1 -1
- package/build/santabarbara-rtl.css +6 -6
- package/build/santabarbara.asset.php +1 -1
- package/build/santabarbara.css +6 -6
- package/build/santabarbara.css.map +1 -1
- package/build/santabarbara.js +540 -494
- package/build/santabarbara.js.map +1 -1
- package/build/santacruz-rtl.css +6 -6
- package/build/santacruz.asset.php +1 -1
- package/build/santacruz.css +6 -6
- package/build/santacruz.css.map +1 -1
- package/build/santacruz.js +540 -494
- package/build/santacruz.js.map +1 -1
- package/build/shasta-rtl.css +6 -6
- package/build/shasta.asset.php +1 -1
- package/build/shasta.css +6 -6
- package/build/shasta.css.map +1 -1
- package/build/shasta.js +540 -494
- package/build/shasta.js.map +1 -1
- package/build/sierra-rtl.css +6 -6
- package/build/sierra.asset.php +1 -1
- package/build/sierra.css +6 -6
- package/build/sierra.css.map +1 -1
- package/build/sierra.js +540 -494
- package/build/sierra.js.map +1 -1
- package/build/trinity-rtl.css +6 -6
- package/build/trinity.asset.php +1 -1
- package/build/trinity.css +6 -6
- package/build/trinity.css.map +1 -1
- package/build/trinity.js +540 -494
- package/build/trinity.js.map +1 -1
- package/package.json +4 -4
package/build/santacruz.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/******/ (() => { // webpackBootstrap
|
|
2
2
|
/******/ var __webpack_modules__ = ({
|
|
3
3
|
|
|
4
|
-
/***/ "
|
|
5
|
-
|
|
6
|
-
!***
|
|
7
|
-
|
|
4
|
+
/***/ "./node_modules/bootstrap/dist/js/bootstrap.bundle.js":
|
|
5
|
+
/*!************************************************************!*\
|
|
6
|
+
!*** ./node_modules/bootstrap/dist/js/bootstrap.bundle.js ***!
|
|
7
|
+
\************************************************************/
|
|
8
8
|
/***/ (function(module) {
|
|
9
9
|
|
|
10
10
|
/*!
|
|
@@ -6333,7 +6333,7 @@
|
|
|
6333
6333
|
"use strict";
|
|
6334
6334
|
__webpack_require__.r(__webpack_exports__);
|
|
6335
6335
|
//@ts-check
|
|
6336
|
-
window.addEventListener(
|
|
6336
|
+
window.addEventListener('load', () => {
|
|
6337
6337
|
const w = window;
|
|
6338
6338
|
const doc = document;
|
|
6339
6339
|
|
|
@@ -6342,21 +6342,21 @@ window.addEventListener("load", () => {
|
|
|
6342
6342
|
* and define script meta-data
|
|
6343
6343
|
*/
|
|
6344
6344
|
const ARIAaccordion = {};
|
|
6345
|
-
w
|
|
6346
|
-
ARIAaccordion.NS =
|
|
6347
|
-
ARIAaccordion.AUTHOR =
|
|
6348
|
-
ARIAaccordion.VERSION =
|
|
6349
|
-
ARIAaccordion.LICENSE =
|
|
6350
|
-
const widgetClass =
|
|
6345
|
+
w.ARIAaccordion = ARIAaccordion;
|
|
6346
|
+
ARIAaccordion.NS = 'ARIAaccordion';
|
|
6347
|
+
ARIAaccordion.AUTHOR = 'Scott O\'Hara';
|
|
6348
|
+
ARIAaccordion.VERSION = '3.2.1';
|
|
6349
|
+
ARIAaccordion.LICENSE = 'https://github.com/scottaohara/accessible_accordions/blob/master/LICENSE';
|
|
6350
|
+
const widgetClass = 'accordion';
|
|
6351
6351
|
const widgetTriggerClass = `${widgetClass}__trigger`;
|
|
6352
6352
|
const widgetHeadingClass = `${widgetClass}__heading`;
|
|
6353
6353
|
const widgetPanelClass = `${widgetClass}__panel`;
|
|
6354
|
-
const widgetHeading =
|
|
6355
|
-
const widgetPanel =
|
|
6354
|
+
const widgetHeading = '[data-aria-accordion-heading]';
|
|
6355
|
+
const widgetPanel = '[data-aria-accordion-panel]';
|
|
6356
6356
|
let idCounter = 0;
|
|
6357
6357
|
|
|
6358
6358
|
/**
|
|
6359
|
-
* gets the correct selector,
|
|
6359
|
+
* gets the correct selector, 'LI' children or not
|
|
6360
6360
|
* @param {string} id
|
|
6361
6361
|
*/
|
|
6362
6362
|
const getChildSelector = id => doc.querySelectorAll(`#${id}> li`).length ? `#${id} li > ` : `#${id} > `;
|
|
@@ -6371,8 +6371,8 @@ window.addEventListener("load", () => {
|
|
|
6371
6371
|
* will be generated via this function.
|
|
6372
6372
|
*/
|
|
6373
6373
|
ARIAaccordion.create = () => {
|
|
6374
|
-
let defaultPanel =
|
|
6375
|
-
const widget = doc.querySelectorAll(
|
|
6374
|
+
let defaultPanel = 'none';
|
|
6375
|
+
const widget = doc.querySelectorAll('[data-aria-accordion]');
|
|
6376
6376
|
idCounter += 1;
|
|
6377
6377
|
for (let i = 0; i < widget.length; i++) {
|
|
6378
6378
|
const self = widget[i];
|
|
@@ -6381,7 +6381,7 @@ window.addEventListener("load", () => {
|
|
|
6381
6381
|
* Check for IDs and create arrays of necessary
|
|
6382
6382
|
* panels & headings for further setup functions.
|
|
6383
6383
|
*/
|
|
6384
|
-
if (!self.hasAttribute(
|
|
6384
|
+
if (!self.hasAttribute('id')) {
|
|
6385
6385
|
self.id = `acc_${idCounter}-${i}`;
|
|
6386
6386
|
}
|
|
6387
6387
|
|
|
@@ -6408,8 +6408,8 @@ window.addEventListener("load", () => {
|
|
|
6408
6408
|
* data-default - is there a default opened panel?
|
|
6409
6409
|
* data-constant - should the accordion always have A panel open?
|
|
6410
6410
|
*/
|
|
6411
|
-
if (self.hasAttribute(
|
|
6412
|
-
defaultPanel = self.getAttribute(
|
|
6411
|
+
if (self.hasAttribute('data-default')) {
|
|
6412
|
+
defaultPanel = self.getAttribute('data-default');
|
|
6413
6413
|
}
|
|
6414
6414
|
|
|
6415
6415
|
/**
|
|
@@ -6417,20 +6417,20 @@ window.addEventListener("load", () => {
|
|
|
6417
6417
|
* but if a data-constant attribute is used, then we need this
|
|
6418
6418
|
* to be true.
|
|
6419
6419
|
*/
|
|
6420
|
-
const constantPanel = self.hasAttribute(
|
|
6420
|
+
const constantPanel = self.hasAttribute('data-constant');
|
|
6421
6421
|
|
|
6422
6422
|
/**
|
|
6423
6423
|
* Accordions can have multiple panels open at a time,
|
|
6424
6424
|
* if they have a data-multi attribute.
|
|
6425
6425
|
*/
|
|
6426
|
-
//const multiPanel = self.hasAttribute(
|
|
6426
|
+
//const multiPanel = self.hasAttribute('data-multi');
|
|
6427
6427
|
|
|
6428
6428
|
/**
|
|
6429
6429
|
* If accordion panels are meant to transition, apply this inline style.
|
|
6430
6430
|
* This is to help mitigate a quick flash of CSS being applied to the
|
|
6431
6431
|
* no-js styling, and having an unwanted transition on initial page load.
|
|
6432
6432
|
*/
|
|
6433
|
-
if (self.hasAttribute(
|
|
6433
|
+
if (self.hasAttribute('data-transition')) {
|
|
6434
6434
|
const thesePanels = self.querySelectorAll(widgetPanel);
|
|
6435
6435
|
for (let t = 0; t < thesePanels.length; t++) {
|
|
6436
6436
|
thesePanels[t].classList.add(`${widgetPanelClass}--transition`);
|
|
@@ -6449,8 +6449,8 @@ window.addEventListener("load", () => {
|
|
|
6449
6449
|
* we can grab all the triggers and setup their functionality.
|
|
6450
6450
|
*/
|
|
6451
6451
|
for (let t = 0; t < triggers.length; t++) {
|
|
6452
|
-
triggers[t].addEventListener(
|
|
6453
|
-
triggers[t].addEventListener(
|
|
6452
|
+
triggers[t].addEventListener('click', ARIAaccordion.actions);
|
|
6453
|
+
triggers[t].addEventListener('keydown', ARIAaccordion.keytrolls);
|
|
6454
6454
|
}
|
|
6455
6455
|
} // for(widget.length)
|
|
6456
6456
|
}; // ARIAaccordion.create()
|
|
@@ -6461,7 +6461,7 @@ window.addEventListener("load", () => {
|
|
|
6461
6461
|
const panelID = `${id}_panel_${i + 1}`;
|
|
6462
6462
|
const setPanel = defaultPanel;
|
|
6463
6463
|
const constant = constantPanel;
|
|
6464
|
-
panel.setAttribute(
|
|
6464
|
+
panel.setAttribute('id', panelID);
|
|
6465
6465
|
ariaHidden(panels[0], true);
|
|
6466
6466
|
panel.classList.add(widgetPanelClass);
|
|
6467
6467
|
|
|
@@ -6472,7 +6472,7 @@ window.addEventListener("load", () => {
|
|
|
6472
6472
|
*/
|
|
6473
6473
|
//Removing broken code...
|
|
6474
6474
|
//if (setPanel !== 'none' && parseInt(setPanel) !== NaN) {
|
|
6475
|
-
if (setPanel !==
|
|
6475
|
+
if (setPanel !== 'none' && !Number.isNaN(parseInt(setPanel))) {
|
|
6476
6476
|
const setPanelInt = parseInt(setPanel);
|
|
6477
6477
|
|
|
6478
6478
|
// if value is 1 or less
|
|
@@ -6498,8 +6498,8 @@ window.addEventListener("load", () => {
|
|
|
6498
6498
|
* then run one more check.
|
|
6499
6499
|
*/
|
|
6500
6500
|
// removing broken code...
|
|
6501
|
-
// if ((constant && setPanel ===
|
|
6502
|
-
if (constant && (setPanel ===
|
|
6501
|
+
// if ((constant && setPanel === 'none') || parseInt(setPanel) === NaN) {
|
|
6502
|
+
if (constant && (setPanel === 'none' || Number.isNaN(parseInt(setPanel)))) {
|
|
6503
6503
|
ariaHidden(panels[0], false);
|
|
6504
6504
|
}
|
|
6505
6505
|
}
|
|
@@ -6509,18 +6509,18 @@ window.addEventListener("load", () => {
|
|
|
6509
6509
|
for (let i = 0; i < headings.length; i++) {
|
|
6510
6510
|
const heading = headings[i];
|
|
6511
6511
|
const targetID = heading.nextElementSibling.id;
|
|
6512
|
-
const targetState = doc.getElementById(targetID).getAttribute(
|
|
6512
|
+
const targetState = doc.getElementById(targetID).getAttribute('aria-hidden');
|
|
6513
6513
|
|
|
6514
6514
|
// setup new heading buttons
|
|
6515
|
-
const newButton = doc.createElement(
|
|
6515
|
+
const newButton = doc.createElement('button');
|
|
6516
6516
|
const buttonText = heading.textContent;
|
|
6517
6517
|
// clear out the heading's content
|
|
6518
|
-
heading.innerHTML =
|
|
6518
|
+
heading.innerHTML = '';
|
|
6519
6519
|
// provide the heading with a class for styling
|
|
6520
6520
|
heading.classList.add(widgetHeadingClass);
|
|
6521
|
-
newButton.setAttribute(
|
|
6522
|
-
newButton.setAttribute(
|
|
6523
|
-
newButton.setAttribute(
|
|
6521
|
+
newButton.setAttribute('type', 'button');
|
|
6522
|
+
newButton.setAttribute('aria-controls', targetID);
|
|
6523
|
+
newButton.setAttribute('id', `${targetID}_trigger`);
|
|
6524
6524
|
newButton.classList.add(widgetTriggerClass);
|
|
6525
6525
|
|
|
6526
6526
|
/**
|
|
@@ -6528,7 +6528,7 @@ window.addEventListener("load", () => {
|
|
|
6528
6528
|
* to be hidden or shown by default. Add an aria-expanded
|
|
6529
6529
|
* attribute value that is appropriate.
|
|
6530
6530
|
*/
|
|
6531
|
-
if (targetState ===
|
|
6531
|
+
if (targetState === 'false') {
|
|
6532
6532
|
ariaExpanded(newButton, true);
|
|
6533
6533
|
isCurrent(newButton, true);
|
|
6534
6534
|
|
|
@@ -6537,7 +6537,7 @@ window.addEventListener("load", () => {
|
|
|
6537
6537
|
* opened panel, and if the button's target is not hidden.
|
|
6538
6538
|
*/
|
|
6539
6539
|
if (constantPanel) {
|
|
6540
|
-
newButton.setAttribute(
|
|
6540
|
+
newButton.setAttribute('aria-disabled', 'true');
|
|
6541
6541
|
}
|
|
6542
6542
|
} else {
|
|
6543
6543
|
ariaExpanded(newButton, false);
|
|
@@ -6553,8 +6553,8 @@ window.addEventListener("load", () => {
|
|
|
6553
6553
|
ARIAaccordion.actions = function ( /** @type {Event} */e) {
|
|
6554
6554
|
// Need to pass in if this is a multi accordion or not.
|
|
6555
6555
|
// Also need to pass in existing trigger arrays.
|
|
6556
|
-
const thisAccordion = this.id.replace(/_panel.*$/g,
|
|
6557
|
-
const thisTarget = doc.getElementById(this.getAttribute(
|
|
6556
|
+
const thisAccordion = this.id.replace(/_panel.*$/g, '');
|
|
6557
|
+
const thisTarget = doc.getElementById(this.getAttribute('aria-controls'));
|
|
6558
6558
|
const childSelector = getChildSelector(thisAccordion);
|
|
6559
6559
|
const thisTriggers = doc.querySelectorAll(`${childSelector}${widgetHeading} .${widgetTriggerClass}`);
|
|
6560
6560
|
e.preventDefault();
|
|
@@ -6565,24 +6565,28 @@ window.addEventListener("load", () => {
|
|
|
6565
6565
|
const thisTrigger = /** @type {Element} */e.target;
|
|
6566
6566
|
|
|
6567
6567
|
// check to see if a trigger is disabled
|
|
6568
|
-
if (thisTrigger.getAttribute(
|
|
6568
|
+
if (thisTrigger.getAttribute('aria-disabled') !== 'true') {
|
|
6569
6569
|
isCurrent(thisTrigger, true);
|
|
6570
|
-
if (thisTrigger.getAttribute(
|
|
6570
|
+
if (thisTrigger.getAttribute('aria-expanded') === 'true') {
|
|
6571
6571
|
ariaExpanded(thisTrigger, false);
|
|
6572
6572
|
ariaHidden(targetPanel, true);
|
|
6573
6573
|
} else {
|
|
6574
6574
|
ariaExpanded(thisTrigger, true);
|
|
6575
6575
|
ariaHidden(targetPanel, false);
|
|
6576
|
-
if (doc.getElementById(thisAccordion).hasAttribute(
|
|
6576
|
+
if (doc.getElementById(thisAccordion).hasAttribute('data-constant')) {
|
|
6577
|
+
ariaDisabled(thisTrigger, true);
|
|
6578
|
+
}
|
|
6577
6579
|
}
|
|
6578
|
-
if (doc.getElementById(thisAccordion).hasAttribute(
|
|
6580
|
+
if (doc.getElementById(thisAccordion).hasAttribute('data-constant') || !doc.getElementById(thisAccordion).hasAttribute('data-multi')) {
|
|
6579
6581
|
// swap expanded when there is a single constant panel
|
|
6580
|
-
for (const trigger of triggers)
|
|
6581
|
-
|
|
6582
|
-
|
|
6583
|
-
|
|
6584
|
-
|
|
6585
|
-
|
|
6582
|
+
for (const trigger of triggers) {
|
|
6583
|
+
if (thisTrigger !== trigger) {
|
|
6584
|
+
isCurrent(trigger, false);
|
|
6585
|
+
const getID = trigger.getAttribute('aria-controls');
|
|
6586
|
+
ariaDisabled(trigger, false);
|
|
6587
|
+
ariaExpanded(trigger, false);
|
|
6588
|
+
ariaHidden(doc.getElementById(getID), true);
|
|
6589
|
+
}
|
|
6586
6590
|
}
|
|
6587
6591
|
}
|
|
6588
6592
|
}
|
|
@@ -6595,7 +6599,7 @@ window.addEventListener("load", () => {
|
|
|
6595
6599
|
// const keyDown = 40;
|
|
6596
6600
|
const keyHome = 36;
|
|
6597
6601
|
const keyEnd = 35;
|
|
6598
|
-
const thisAccordion = this.id.replace(/_panel.*$/g,
|
|
6602
|
+
const thisAccordion = this.id.replace(/_panel.*$/g, '');
|
|
6599
6603
|
const childSelector = getChildSelector(thisAccordion);
|
|
6600
6604
|
|
|
6601
6605
|
/** @type {NodeListOf<HTMLElement>} */
|
|
@@ -6650,16 +6654,16 @@ window.addEventListener("load", () => {
|
|
|
6650
6654
|
* Just to cut down on the verboseness of some declarations
|
|
6651
6655
|
*/
|
|
6652
6656
|
const ariaHidden = function ( /** @type {Element} */el, /** @type {boolean} */state) {
|
|
6653
|
-
el.setAttribute(
|
|
6657
|
+
el.setAttribute('aria-hidden', state.toString());
|
|
6654
6658
|
};
|
|
6655
6659
|
const ariaExpanded = function ( /** @type {Element} */el, /** @type {boolean} */state) {
|
|
6656
|
-
el.setAttribute(
|
|
6660
|
+
el.setAttribute('aria-expanded', state.toString());
|
|
6657
6661
|
};
|
|
6658
6662
|
const ariaDisabled = function ( /** @type {Element} */el, /** @type {boolean} */state) {
|
|
6659
|
-
el.setAttribute(
|
|
6663
|
+
el.setAttribute('aria-disabled', state.toString());
|
|
6660
6664
|
};
|
|
6661
6665
|
const isCurrent = function ( /** @type {Element} */el, /** @type {boolean} */state) {
|
|
6662
|
-
el.setAttribute(
|
|
6666
|
+
el.setAttribute('data-current', state.toString());
|
|
6663
6667
|
};
|
|
6664
6668
|
|
|
6665
6669
|
// go go JavaScript
|
|
@@ -6678,7 +6682,7 @@ window.addEventListener("load", () => {
|
|
|
6678
6682
|
__webpack_require__.r(__webpack_exports__);
|
|
6679
6683
|
//@ts-check
|
|
6680
6684
|
|
|
6681
|
-
window.addEventListener(
|
|
6685
|
+
window.addEventListener('load', () => {
|
|
6682
6686
|
/**
|
|
6683
6687
|
* Accordion web component that collapses and expands content inside itself on click.
|
|
6684
6688
|
*
|
|
@@ -6696,15 +6700,15 @@ window.addEventListener("load", () => {
|
|
|
6696
6700
|
*/
|
|
6697
6701
|
class CaGovAccordion extends HTMLElement {
|
|
6698
6702
|
connectedCallback() {
|
|
6699
|
-
this.summaryEl = this.querySelector(
|
|
6703
|
+
this.summaryEl = this.querySelector('summary');
|
|
6700
6704
|
// trigger the opening and closing height change animation on summary click
|
|
6701
6705
|
|
|
6702
6706
|
this.setHeight();
|
|
6703
|
-
this.summaryEl.addEventListener(
|
|
6704
|
-
this.summaryEl.insertAdjacentHTML(
|
|
6705
|
-
this.detailsEl = this.querySelector(
|
|
6706
|
-
this.bodyEl = this.querySelector(
|
|
6707
|
-
window.addEventListener(
|
|
6707
|
+
this.summaryEl.addEventListener('click', this.listen.bind(this));
|
|
6708
|
+
this.summaryEl.insertAdjacentHTML('beforeend', `<div class="cagov-open-indicator" aria-hidden="true" />`);
|
|
6709
|
+
this.detailsEl = this.querySelector('details');
|
|
6710
|
+
this.bodyEl = this.querySelector('.accordion-body');
|
|
6711
|
+
window.addEventListener('resize', this.debounce(this.setHeight).bind(this));
|
|
6708
6712
|
}
|
|
6709
6713
|
setHeight() {
|
|
6710
6714
|
window.requestAnimationFrame(() => {
|
|
@@ -6713,7 +6717,7 @@ window.addEventListener("load", () => {
|
|
|
6713
6717
|
this.closedHeight = `${this.closedHeightInt}px`;
|
|
6714
6718
|
|
|
6715
6719
|
// apply initial height
|
|
6716
|
-
if (this.detailsEl.hasAttribute(
|
|
6720
|
+
if (this.detailsEl.hasAttribute('open')) {
|
|
6717
6721
|
// if open get scrollHeight
|
|
6718
6722
|
this.detailsEl.style.height = `${this.bodyEl.scrollHeight + this.closedHeightInt}px`;
|
|
6719
6723
|
} else {
|
|
@@ -6723,7 +6727,7 @@ window.addEventListener("load", () => {
|
|
|
6723
6727
|
});
|
|
6724
6728
|
}
|
|
6725
6729
|
listen() {
|
|
6726
|
-
if (this.detailsEl.hasAttribute(
|
|
6730
|
+
if (this.detailsEl.hasAttribute('open')) {
|
|
6727
6731
|
// was open, now closing
|
|
6728
6732
|
this.detailsEl.style.height = this.closedHeight;
|
|
6729
6733
|
} else {
|
|
@@ -6748,7 +6752,7 @@ window.addEventListener("load", () => {
|
|
|
6748
6752
|
};
|
|
6749
6753
|
}
|
|
6750
6754
|
}
|
|
6751
|
-
window.customElements.define(
|
|
6755
|
+
window.customElements.define('cagov-accordion', CaGovAccordion);
|
|
6752
6756
|
});
|
|
6753
6757
|
|
|
6754
6758
|
/***/ }),
|
|
@@ -6764,7 +6768,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
6764
6768
|
//@ts-check
|
|
6765
6769
|
|
|
6766
6770
|
/* EXTERNAL LINK ICON */
|
|
6767
|
-
window.addEventListener(
|
|
6771
|
+
window.addEventListener('load', () => {
|
|
6768
6772
|
const ext = '<span class="external-link-icon" aria-hidden="true"></span>';
|
|
6769
6773
|
|
|
6770
6774
|
// Check if link is external function
|
|
@@ -6782,9 +6786,9 @@ window.addEventListener("load", () => {
|
|
|
6782
6786
|
/** @type {NodeListOf<HTMLAnchorElement>} */
|
|
6783
6787
|
const externalLink = document.querySelectorAll(`main a${cssExceptions}, .agency-footer a${cssExceptions}, .site-footer a${cssExceptions}, footer a${cssExceptions}`);
|
|
6784
6788
|
externalLink.forEach(element => {
|
|
6785
|
-
const anchorLink = element.href.indexOf(
|
|
6786
|
-
const localHost = element.href.indexOf(
|
|
6787
|
-
const localEmail = element.href.indexOf(
|
|
6789
|
+
const anchorLink = element.href.indexOf('#') === 0;
|
|
6790
|
+
const localHost = element.href.indexOf('localhost') > -1;
|
|
6791
|
+
const localEmail = element.href.indexOf('@') > -1;
|
|
6788
6792
|
const linkElement = element;
|
|
6789
6793
|
if (linkIsExternal(linkElement) === false && !anchorLink && !localEmail && !localHost) {
|
|
6790
6794
|
linkElement.innerHTML += ext; // += concatenates to external links
|
|
@@ -6805,17 +6809,19 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
6805
6809
|
//@ts-check
|
|
6806
6810
|
|
|
6807
6811
|
/* sticky header / hiding official header on scroll */
|
|
6808
|
-
window.addEventListener(
|
|
6812
|
+
window.addEventListener('load', () => {
|
|
6809
6813
|
const doc = document.documentElement;
|
|
6810
6814
|
let prevScroll = window.scrollY || doc.scrollTop;
|
|
6811
6815
|
let curScroll;
|
|
6812
6816
|
let direction = 0;
|
|
6813
6817
|
let prevDirection = 0;
|
|
6814
|
-
const headerAlert = document.querySelector(
|
|
6815
|
-
const header = document.querySelector(
|
|
6816
|
-
const mainheader = document.querySelector(
|
|
6817
|
-
if (!header || !mainheader)
|
|
6818
|
-
|
|
6818
|
+
const headerAlert = document.querySelector('header .alert');
|
|
6819
|
+
const header = document.querySelector('.utility-header');
|
|
6820
|
+
const mainheader = document.querySelector('header');
|
|
6821
|
+
if (!header || !mainheader) {
|
|
6822
|
+
return;
|
|
6823
|
+
}
|
|
6824
|
+
window.addEventListener('scroll', () => {
|
|
6819
6825
|
/*
|
|
6820
6826
|
** Find the direction of scroll
|
|
6821
6827
|
** 0 - initial, 1 - up, 2 - down
|
|
@@ -6838,8 +6844,8 @@ window.addEventListener("load", () => {
|
|
|
6838
6844
|
} else if (direction === 1 && curScroll < 40) {
|
|
6839
6845
|
// mainheader.classList.remove('scrolled');
|
|
6840
6846
|
// header.classList.remove('is-hidden');
|
|
6841
|
-
// header.removeAttribute(
|
|
6842
|
-
mainheader.style.removeProperty(
|
|
6847
|
+
// header.removeAttribute('style');
|
|
6848
|
+
mainheader.style.removeProperty('top');
|
|
6843
6849
|
prevDirection = direction;
|
|
6844
6850
|
}
|
|
6845
6851
|
}
|
|
@@ -6861,76 +6867,82 @@ window.addEventListener("load", () => {
|
|
|
6861
6867
|
__webpack_require__.r(__webpack_exports__);
|
|
6862
6868
|
//@ts-check
|
|
6863
6869
|
|
|
6864
|
-
window.addEventListener(
|
|
6870
|
+
window.addEventListener('load', () => {
|
|
6865
6871
|
const isDesktopWidth = () => window.innerWidth > 991; //Maximum px for mobile width
|
|
6866
6872
|
|
|
6867
6873
|
/** @type {HTMLButtonElement} */
|
|
6868
|
-
const navToggleBtn = document.querySelector(
|
|
6869
|
-
if (!navToggleBtn)
|
|
6874
|
+
const navToggleBtn = document.querySelector('.toggle-menu');
|
|
6875
|
+
if (!navToggleBtn) {
|
|
6876
|
+
return;
|
|
6877
|
+
}
|
|
6870
6878
|
/** @type {HTMLElement} */
|
|
6871
|
-
const mainNav = document.querySelector(
|
|
6879
|
+
const mainNav = document.querySelector('.main-navigation');
|
|
6872
6880
|
// create container for drawer mobile nav items
|
|
6873
|
-
const mobileItemsCont = document.createElement(
|
|
6874
|
-
mobileItemsCont.className =
|
|
6881
|
+
const mobileItemsCont = document.createElement('div');
|
|
6882
|
+
mobileItemsCont.className = 'nav-drawer';
|
|
6875
6883
|
|
|
6876
6884
|
// Create close mobile meu button
|
|
6877
|
-
const navMobileMenuToggleBtn = document.createElement(
|
|
6878
|
-
navMobileMenuToggleBtn.classList.add(
|
|
6879
|
-
navMobileMenuToggleBtn.ariaExpanded =
|
|
6880
|
-
navMobileMenuToggleBtn.setAttribute(
|
|
6885
|
+
const navMobileMenuToggleBtn = document.createElement('button');
|
|
6886
|
+
navMobileMenuToggleBtn.classList.add('mobile-control', 'toggle-menu');
|
|
6887
|
+
navMobileMenuToggleBtn.ariaExpanded = 'false';
|
|
6888
|
+
navMobileMenuToggleBtn.setAttribute('aria-controls', 'navigation');
|
|
6881
6889
|
navMobileMenuToggleBtn.tabIndex = -1;
|
|
6882
|
-
const navCloseBtnSpans = [0, 1, 2, 3, 4].map(() => document.createElement(
|
|
6883
|
-
navCloseBtnSpans[4].classList.add(
|
|
6884
|
-
navCloseBtnSpans[4].innerText =
|
|
6890
|
+
const navCloseBtnSpans = [0, 1, 2, 3, 4].map(() => document.createElement('span'));
|
|
6891
|
+
navCloseBtnSpans[4].classList.add('sr-only');
|
|
6892
|
+
navCloseBtnSpans[4].innerText = 'Menu';
|
|
6885
6893
|
navMobileMenuToggleBtn.append(...navCloseBtnSpans);
|
|
6886
6894
|
mobileItemsCont.append(navMobileMenuToggleBtn);
|
|
6887
6895
|
|
|
6888
6896
|
// VARIABLES
|
|
6889
6897
|
/** @type {HTMLDivElement} */
|
|
6890
|
-
const navSearchCont = document.querySelector(
|
|
6891
|
-
if (!navSearchCont)
|
|
6892
|
-
|
|
6893
|
-
|
|
6898
|
+
const navSearchCont = document.querySelector('.navigation-search');
|
|
6899
|
+
if (!navSearchCont) {
|
|
6900
|
+
return;
|
|
6901
|
+
}
|
|
6902
|
+
const mobileCntls = document.querySelector('.global-header .mobile-controls');
|
|
6903
|
+
const mobileControlsDisplay = mobileCntls ? window.getComputedStyle(mobileCntls).display : '';
|
|
6894
6904
|
|
|
6895
6905
|
//Used for hiding/showing main elements
|
|
6896
|
-
const mainElements = document.querySelectorAll(
|
|
6897
|
-
const regularHeader = document.querySelector(
|
|
6906
|
+
const mainElements = document.querySelectorAll('.main-content, footer, .site-footer, .utility-header, .branding, header');
|
|
6907
|
+
const regularHeader = document.querySelector('header');
|
|
6898
6908
|
|
|
6899
6909
|
// reset navigation function
|
|
6900
6910
|
const NavReset = () => {
|
|
6901
6911
|
//RESET
|
|
6902
|
-
document.querySelectorAll(
|
|
6912
|
+
document.querySelectorAll('.first-level-btn').forEach(el => el.ariaExpanded = 'false'); //Must be false and not blank for CSS
|
|
6903
6913
|
|
|
6904
|
-
document.querySelectorAll(
|
|
6905
|
-
el.ariaHidden =
|
|
6906
|
-
el.classList.remove(
|
|
6914
|
+
document.querySelectorAll('.sub-nav').forEach(el => {
|
|
6915
|
+
el.ariaHidden = 'true';
|
|
6916
|
+
el.classList.remove('open');
|
|
6907
6917
|
});
|
|
6908
|
-
document.querySelectorAll(
|
|
6909
|
-
document.querySelectorAll(
|
|
6910
|
-
const targetAriaHidden = isDesktopWidth() ? null :
|
|
6911
|
-
if (navSearchCont.ariaHidden
|
|
6918
|
+
document.querySelectorAll('.second-level-link').forEach(( /**@type {HTMLElement} */el) => el.tabIndex = -1);
|
|
6919
|
+
document.querySelectorAll('.rotate').forEach(( /**@type {HTMLElement} */el) => el.style.display = isDesktopWidth() ? 'none' : 'block');
|
|
6920
|
+
const targetAriaHidden = isDesktopWidth() ? null : 'true';
|
|
6921
|
+
if (navSearchCont.ariaHidden !== targetAriaHidden) {
|
|
6922
|
+
navSearchCont.ariaHidden = targetAriaHidden;
|
|
6923
|
+
}
|
|
6912
6924
|
};
|
|
6913
6925
|
const getAllNavLinks = () => ( /** @type { NodeListOf<HTMLElement>} */
|
|
6914
6926
|
navSearchCont.querySelectorAll('a.first-level-link, button.first-level-btn, input, button, [tabindex]:not([tabindex="-1"])'));
|
|
6915
6927
|
const getAllFirstLevelNavLinks = () => ( /** @type { NodeListOf<HTMLElement>} */
|
|
6916
|
-
navSearchCont.querySelectorAll(
|
|
6928
|
+
navSearchCont.querySelectorAll('a.first-level-link, button.first-level-btn'));
|
|
6917
6929
|
|
|
6918
6930
|
// Escape key event listener
|
|
6919
|
-
document.addEventListener(
|
|
6920
|
-
if (navSearchCont.classList.contains(
|
|
6921
|
-
if (e.key ===
|
|
6931
|
+
document.addEventListener('keydown', e => {
|
|
6932
|
+
if (navSearchCont.classList.contains('visible')) {
|
|
6933
|
+
if (e.key === 'Escape') {
|
|
6922
6934
|
e.stopPropagation();
|
|
6923
6935
|
closeMenu();
|
|
6924
6936
|
}
|
|
6925
6937
|
}
|
|
6926
6938
|
});
|
|
6927
6939
|
const checkIfMobileView = () => {
|
|
6928
|
-
const mobileElement = document.querySelector(
|
|
6929
|
-
return mobileElement ? getComputedStyle(mobileElement)
|
|
6940
|
+
const mobileElement = document.querySelector('.global-header .mobile-controls');
|
|
6941
|
+
return mobileElement ? getComputedStyle(mobileElement).display !== 'none' : false;
|
|
6930
6942
|
};
|
|
6931
6943
|
|
|
6932
6944
|
// Close menu on focusout (tabbing out) event (if target is outside of mobile menu and ignore if focus target is navToggleBtn button)
|
|
6933
|
-
navSearchCont.addEventListener(
|
|
6945
|
+
navSearchCont.addEventListener('focusout', e => {
|
|
6934
6946
|
if (checkIfMobileView()) {
|
|
6935
6947
|
const child = /** @type {Node} **/e.relatedTarget;
|
|
6936
6948
|
const parent = /** @type {Node} **/e.currentTarget;
|
|
@@ -6942,79 +6954,81 @@ window.addEventListener("load", () => {
|
|
|
6942
6954
|
|
|
6943
6955
|
// Button click open menu function
|
|
6944
6956
|
const openMenu = () => {
|
|
6945
|
-
navSearchCont.classList.add(
|
|
6946
|
-
navSearchCont.classList.remove(
|
|
6947
|
-
document.body.classList.add(
|
|
6948
|
-
navToggleBtn.ariaExpanded =
|
|
6957
|
+
navSearchCont.classList.add('visible');
|
|
6958
|
+
navSearchCont.classList.remove('not-visible');
|
|
6959
|
+
document.body.classList.add('overflow-hidden');
|
|
6960
|
+
navToggleBtn.ariaExpanded = 'true';
|
|
6949
6961
|
setOpen();
|
|
6950
6962
|
// Hide all the website areas (add aria-hidden)
|
|
6951
|
-
mainElements.forEach(x => x.ariaHidden =
|
|
6952
|
-
regularHeader?.classList.add(
|
|
6963
|
+
mainElements.forEach(x => x.ariaHidden = 'true');
|
|
6964
|
+
regularHeader?.classList.add('nav-overlay');
|
|
6953
6965
|
navMobileMenuToggleBtn.focus();
|
|
6954
6966
|
};
|
|
6955
6967
|
const setOpen = () => {
|
|
6956
|
-
navMobileMenuToggleBtn.ariaExpanded =
|
|
6968
|
+
navMobileMenuToggleBtn.ariaExpanded = 'true';
|
|
6957
6969
|
navSearchCont.ariaHidden = null;
|
|
6958
6970
|
// make links focusable
|
|
6959
|
-
getAllNavLinks().forEach(el => el.removeAttribute(
|
|
6971
|
+
getAllNavLinks().forEach(el => el.removeAttribute('tabindex'));
|
|
6960
6972
|
// desktop
|
|
6961
|
-
if (mobileControlsDisplay !==
|
|
6962
|
-
navToggleBtn.ariaExpanded =
|
|
6973
|
+
if (mobileControlsDisplay !== 'block' && navToggleBtn.ariaExpanded !== 'false') {
|
|
6974
|
+
navToggleBtn.ariaExpanded = 'false';
|
|
6963
6975
|
}
|
|
6964
6976
|
};
|
|
6965
6977
|
|
|
6966
6978
|
// Button click close menu function
|
|
6967
6979
|
const closeMenu = () => {
|
|
6968
|
-
if (navSearchCont.classList.contains(
|
|
6969
|
-
navSearchCont.classList.remove(
|
|
6980
|
+
if (navSearchCont.classList.contains('visible')) {
|
|
6981
|
+
navSearchCont.classList.remove('visible');
|
|
6970
6982
|
|
|
6971
6983
|
//Set focus only when close actually happens
|
|
6972
6984
|
navToggleBtn.focus();
|
|
6973
6985
|
}
|
|
6974
|
-
navSearchCont.classList.add(
|
|
6986
|
+
navSearchCont.classList.add('not-visible');
|
|
6975
6987
|
setClosed();
|
|
6976
6988
|
};
|
|
6977
6989
|
const setClosed = () => {
|
|
6978
|
-
if (navToggleBtn.ariaExpanded !==
|
|
6979
|
-
navToggleBtn.ariaExpanded =
|
|
6990
|
+
if (navToggleBtn.ariaExpanded !== 'false') {
|
|
6991
|
+
navToggleBtn.ariaExpanded = 'false';
|
|
6992
|
+
}
|
|
6993
|
+
if (navMobileMenuToggleBtn.ariaExpanded !== 'false') {
|
|
6994
|
+
navMobileMenuToggleBtn.ariaExpanded = 'false';
|
|
6980
6995
|
}
|
|
6981
|
-
if (
|
|
6982
|
-
|
|
6996
|
+
if (mainNav) {
|
|
6997
|
+
document.body.classList.remove('overflow-hidden');
|
|
6983
6998
|
}
|
|
6984
|
-
if (mainNav) document.body.classList.remove("overflow-hidden");
|
|
6985
6999
|
|
|
6986
7000
|
// removing focus
|
|
6987
7001
|
getAllNavLinks().forEach(el => el.tabIndex = -1);
|
|
6988
7002
|
// remove aria hidden for the rest of the site
|
|
6989
7003
|
mainElements.forEach(x => x.ariaHidden = null);
|
|
6990
|
-
regularHeader?.classList.remove(
|
|
7004
|
+
regularHeader?.classList.remove('nav-overlay');
|
|
6991
7005
|
NavReset();
|
|
6992
7006
|
};
|
|
6993
7007
|
|
|
6994
7008
|
// Button Click event
|
|
6995
|
-
navToggleBtn.addEventListener(
|
|
7009
|
+
navToggleBtn.addEventListener('click', openMenu);
|
|
6996
7010
|
// Button Click event
|
|
6997
|
-
navMobileMenuToggleBtn.addEventListener(
|
|
7011
|
+
navMobileMenuToggleBtn.addEventListener('click', closeMenu);
|
|
6998
7012
|
const mobileCheck = () => {
|
|
6999
|
-
const searchInput = document.querySelector(
|
|
7013
|
+
const searchInput = document.querySelector('.search-textfield');
|
|
7000
7014
|
|
|
7001
7015
|
// Add a focus event listener to add the class on focus
|
|
7002
|
-
searchInput.addEventListener(
|
|
7003
|
-
searchInput.classList.add(
|
|
7016
|
+
searchInput.addEventListener('focus', () => {
|
|
7017
|
+
searchInput.classList.add('is-in-focus');
|
|
7004
7018
|
});
|
|
7005
7019
|
|
|
7006
7020
|
// Add a blur event listener to remove the class on blur
|
|
7007
|
-
searchInput.addEventListener(
|
|
7021
|
+
searchInput.addEventListener('blur', () => {
|
|
7008
7022
|
// Remove the class after a delay
|
|
7009
7023
|
setTimeout(() => {
|
|
7010
|
-
searchInput.classList.remove(
|
|
7024
|
+
searchInput.classList.remove('is-in-focus');
|
|
7011
7025
|
}, 500);
|
|
7012
7026
|
});
|
|
7013
|
-
if (!searchInput.classList.contains(
|
|
7027
|
+
if (!searchInput.classList.contains('is-in-focus')) {
|
|
7014
7028
|
NavReset();
|
|
7015
7029
|
// desktop
|
|
7016
7030
|
if (isDesktopWidth()) {
|
|
7017
|
-
getAllFirstLevelNavLinks().forEach(el => el.removeAttribute(
|
|
7031
|
+
getAllFirstLevelNavLinks().forEach(el => el.removeAttribute('tabindex'));
|
|
7018
7032
|
}
|
|
7019
7033
|
// mobile
|
|
7020
7034
|
else {
|
|
@@ -7025,7 +7039,7 @@ window.addEventListener("load", () => {
|
|
|
7025
7039
|
};
|
|
7026
7040
|
|
|
7027
7041
|
// Close mobile nav if click outside of nav
|
|
7028
|
-
regularHeader.addEventListener(
|
|
7042
|
+
regularHeader.addEventListener('mouseup', e => {
|
|
7029
7043
|
// if the target of the click isn't the navigation container nor a descendant of the navigation
|
|
7030
7044
|
if (checkIfMobileView()) {
|
|
7031
7045
|
if (navSearchCont !== e.target && !navSearchCont?.contains( /**@type {Node} */e.target)) {
|
|
@@ -7035,11 +7049,11 @@ window.addEventListener("load", () => {
|
|
|
7035
7049
|
});
|
|
7036
7050
|
|
|
7037
7051
|
// on resize function (hide mobile nav)
|
|
7038
|
-
window.addEventListener(
|
|
7052
|
+
window.addEventListener('resize', mobileCheck);
|
|
7039
7053
|
|
|
7040
7054
|
// ONLOAD
|
|
7041
7055
|
// move duplicated logo to navigation drawer section
|
|
7042
|
-
document.querySelector(
|
|
7056
|
+
document.querySelector('.navigation-search')?.prepend(mobileItemsCont);
|
|
7043
7057
|
mobileCheck();
|
|
7044
7058
|
});
|
|
7045
7059
|
|
|
@@ -7117,7 +7131,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7117
7131
|
remove: remove
|
|
7118
7132
|
};
|
|
7119
7133
|
};
|
|
7120
|
-
const DATA_HASH_ID =
|
|
7134
|
+
const DATA_HASH_ID = 'data-nav-id';
|
|
7121
7135
|
const pluginConfig = loadConfig();
|
|
7122
7136
|
|
|
7123
7137
|
/** Find an element based on an Id
|
|
@@ -7151,7 +7165,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7151
7165
|
parentElement = parentElement.parentElement;
|
|
7152
7166
|
}
|
|
7153
7167
|
}
|
|
7154
|
-
return
|
|
7168
|
+
return '';
|
|
7155
7169
|
};
|
|
7156
7170
|
|
|
7157
7171
|
/**
|
|
@@ -7163,16 +7177,16 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7163
7177
|
let parentElement = el;
|
|
7164
7178
|
while (parentElement) {
|
|
7165
7179
|
if (parentElement.classList.contains(parentClass) && parentElement.getAttribute(DATA_HASH_ID) === hashId) {
|
|
7166
|
-
return parentElement.getAttribute(
|
|
7180
|
+
return parentElement.getAttribute('id');
|
|
7167
7181
|
} else {
|
|
7168
7182
|
parentElement = parentElement.parentElement;
|
|
7169
7183
|
}
|
|
7170
7184
|
}
|
|
7171
|
-
return
|
|
7185
|
+
return '';
|
|
7172
7186
|
};
|
|
7173
7187
|
const mobileView = () => {
|
|
7174
|
-
const mobileElement = document.querySelector(
|
|
7175
|
-
return mobileElement ? getComputedStyle(mobileElement)
|
|
7188
|
+
const mobileElement = document.querySelector('.global-header .mobile-controls');
|
|
7189
|
+
return mobileElement ? getComputedStyle(mobileElement).display !== 'none' : false;
|
|
7176
7190
|
};
|
|
7177
7191
|
|
|
7178
7192
|
/**
|
|
@@ -7184,38 +7198,38 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7184
7198
|
|
|
7185
7199
|
const config = pluginArgs.length <= 0 || pluginArgs[0] === undefined ? {} : pluginArgs[0];
|
|
7186
7200
|
// Finding if first-level-link has sub-nav then changing its clasee to first-level-btn
|
|
7187
|
-
const className =
|
|
7201
|
+
const className = 'first-level-btn';
|
|
7188
7202
|
|
|
7189
7203
|
//Change all the links next to sub-navs to first-level-btn
|
|
7190
|
-
document.querySelectorAll(
|
|
7191
|
-
node.parentElement.querySelector(
|
|
7204
|
+
document.querySelectorAll('.main-navigation .sub-nav').forEach(node => {
|
|
7205
|
+
node.parentElement.querySelector('a').className = className;
|
|
7192
7206
|
});
|
|
7193
7207
|
let CONFIG = {
|
|
7194
|
-
ACCORDION_JS:
|
|
7208
|
+
ACCORDION_JS: 'main-navigation',
|
|
7195
7209
|
ACCORDION_JS_HEADER: className,
|
|
7196
7210
|
// Assigning button class to link that has sub-nav
|
|
7197
|
-
ACCORDION_JS_PANEL:
|
|
7198
|
-
ACCORDION_DATA_PREFIX_CLASS:
|
|
7199
|
-
ACCORDION_DATA_OPENED:
|
|
7200
|
-
ACCORDION_DATA_MULTISELECTABLE:
|
|
7211
|
+
ACCORDION_JS_PANEL: 'nav-panel',
|
|
7212
|
+
ACCORDION_DATA_PREFIX_CLASS: 'data-nav-prefix-classes',
|
|
7213
|
+
ACCORDION_DATA_OPENED: 'data-nav-opened',
|
|
7214
|
+
ACCORDION_DATA_MULTISELECTABLE: 'data-nav-multiselectable',
|
|
7201
7215
|
ACCORDION_DATA_COOL_SELECTORS: true,
|
|
7202
|
-
ACCORDION_PREFIX_IDS:
|
|
7203
|
-
ACCORDION_BUTTON_ID:
|
|
7204
|
-
ACCORDION_PANEL_ID:
|
|
7205
|
-
ACCORDION_STYLE:
|
|
7206
|
-
ACCORDION_TITLE_STYLE:
|
|
7207
|
-
ACCORDION_HEADER_STYLE:
|
|
7208
|
-
ACCORDION_PANEL_STYLE:
|
|
7209
|
-
ACCORDION_ROLE_TABLIST:
|
|
7210
|
-
ACCORDION_ROLE_TAB:
|
|
7211
|
-
ACCORDION_ROLE_TABPANEL:
|
|
7212
|
-
ATTR_ROLE:
|
|
7213
|
-
ATTR_MULTISELECTABLE:
|
|
7214
|
-
ATTR_EXPANDED:
|
|
7215
|
-
ATTR_LABELLEDBY:
|
|
7216
|
-
ATTR_HIDDEN:
|
|
7217
|
-
ATTR_CONTROLS:
|
|
7218
|
-
ATTR_SELECTED:
|
|
7216
|
+
ACCORDION_PREFIX_IDS: 'nav',
|
|
7217
|
+
ACCORDION_BUTTON_ID: '_tab',
|
|
7218
|
+
ACCORDION_PANEL_ID: '_panel',
|
|
7219
|
+
ACCORDION_STYLE: 'nav',
|
|
7220
|
+
ACCORDION_TITLE_STYLE: 'has-sub-btn',
|
|
7221
|
+
ACCORDION_HEADER_STYLE: 'nav-header',
|
|
7222
|
+
ACCORDION_PANEL_STYLE: 'sub-nav',
|
|
7223
|
+
ACCORDION_ROLE_TABLIST: 'tablist',
|
|
7224
|
+
ACCORDION_ROLE_TAB: 'tab',
|
|
7225
|
+
ACCORDION_ROLE_TABPANEL: 'tabpanel',
|
|
7226
|
+
ATTR_ROLE: 'role',
|
|
7227
|
+
ATTR_MULTISELECTABLE: 'data-multiselectable',
|
|
7228
|
+
ATTR_EXPANDED: 'aria-expanded',
|
|
7229
|
+
ATTR_LABELLEDBY: 'aria-labelledby',
|
|
7230
|
+
ATTR_HIDDEN: 'aria-hidden',
|
|
7231
|
+
ATTR_CONTROLS: 'aria-controls',
|
|
7232
|
+
ATTR_SELECTED: 'aria-selected'
|
|
7219
7233
|
};
|
|
7220
7234
|
CONFIG = Object.assign(CONFIG, config);
|
|
7221
7235
|
const HASH_ID = Math.random().toString(32).slice(2, 12);
|
|
@@ -7243,12 +7257,12 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7243
7257
|
listAccordions(node).forEach(accordion_node => {
|
|
7244
7258
|
const iLisible = `z${Math.random().toString(32).slice(2, 12)}`; // avoid selector exception when starting by a number
|
|
7245
7259
|
|
|
7246
|
-
const prefixClassName = accordion_node.hasAttribute(CONFIG.ACCORDION_DATA_PREFIX_CLASS) ? `${accordion_node.getAttribute(CONFIG.ACCORDION_DATA_PREFIX_CLASS)}-` :
|
|
7260
|
+
const prefixClassName = accordion_node.hasAttribute(CONFIG.ACCORDION_DATA_PREFIX_CLASS) ? `${accordion_node.getAttribute(CONFIG.ACCORDION_DATA_PREFIX_CLASS)}-` : '';
|
|
7247
7261
|
const coolSelectors = CONFIG.ACCORDION_DATA_COOL_SELECTORS;
|
|
7248
|
-
const childClassName =
|
|
7262
|
+
const childClassName = 'first-level-btn';
|
|
7249
7263
|
|
|
7250
7264
|
// Init attributes accordion
|
|
7251
|
-
accordion_node.setAttribute(CONFIG.ATTR_MULTISELECTABLE, mobileView() ?
|
|
7265
|
+
accordion_node.setAttribute(CONFIG.ATTR_MULTISELECTABLE, mobileView() ? 'true' : 'false');
|
|
7252
7266
|
accordion_node.setAttribute(DATA_HASH_ID, HASH_ID);
|
|
7253
7267
|
accordion_node.classList.add(prefixClassName + CONFIG.ACCORDION_STYLE);
|
|
7254
7268
|
|
|
@@ -7264,18 +7278,20 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7264
7278
|
}
|
|
7265
7279
|
const indexHeaderLisible = index_header + 1;
|
|
7266
7280
|
const accordionPanel = header_node.nextElementSibling;
|
|
7267
|
-
if (!accordionPanel)
|
|
7281
|
+
if (!accordionPanel) {
|
|
7282
|
+
return;
|
|
7283
|
+
}
|
|
7268
7284
|
const accordionHeaderText = header_node.innerHTML;
|
|
7269
|
-
const accordionButton = document.createElement(
|
|
7270
|
-
const accordionOpenedAttribute = header_node.hasAttribute(CONFIG.ACCORDION_DATA_OPENED) ? header_node.getAttribute(CONFIG.ACCORDION_DATA_OPENED) :
|
|
7285
|
+
const accordionButton = document.createElement('BUTTON');
|
|
7286
|
+
const accordionOpenedAttribute = header_node.hasAttribute(CONFIG.ACCORDION_DATA_OPENED) ? header_node.getAttribute(CONFIG.ACCORDION_DATA_OPENED) : '';
|
|
7271
7287
|
|
|
7272
7288
|
// set button with attributes
|
|
7273
7289
|
accordionButton.innerHTML = accordionHeaderText;
|
|
7274
7290
|
accordionButton.classList.add(childClassName, prefixClassName + CONFIG.ACCORDION_HEADER_STYLE);
|
|
7275
|
-
setAttributes(accordionButton, (_setAttributes2 = {}, _defineProperty(_setAttributes2,
|
|
7291
|
+
setAttributes(accordionButton, (_setAttributes2 = {}, _defineProperty(_setAttributes2, 'id', CONFIG.ACCORDION_PREFIX_IDS + iLisible + CONFIG.ACCORDION_BUTTON_ID + indexHeaderLisible), _defineProperty(_setAttributes2, CONFIG.ATTR_CONTROLS, CONFIG.ACCORDION_PREFIX_IDS + iLisible + CONFIG.ACCORDION_PANEL_ID + indexHeaderLisible), _defineProperty(_setAttributes2, DATA_HASH_ID, HASH_ID), _setAttributes2));
|
|
7276
7292
|
|
|
7277
7293
|
// place button
|
|
7278
|
-
header_node.innerHTML =
|
|
7294
|
+
header_node.innerHTML = '';
|
|
7279
7295
|
header_node.appendChild(accordionButton);
|
|
7280
7296
|
|
|
7281
7297
|
// set title with attributes
|
|
@@ -7284,19 +7300,19 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7284
7300
|
|
|
7285
7301
|
// set attributes to panels
|
|
7286
7302
|
accordionPanel.classList.add(prefixClassName + CONFIG.ACCORDION_PANEL_STYLE);
|
|
7287
|
-
setAttributes(accordionPanel, (_setAttributes3 = {}, _defineProperty(_setAttributes3, CONFIG.ATTR_ROLE, CONFIG.ACCORDION_ROLE_TABPANEL), _defineProperty(_setAttributes3, CONFIG.ATTR_LABELLEDBY, CONFIG.ACCORDION_PREFIX_IDS + iLisible + CONFIG.ACCORDION_BUTTON_ID + indexHeaderLisible), _defineProperty(_setAttributes3,
|
|
7288
|
-
if (accordionOpenedAttribute ===
|
|
7289
|
-
accordionButton.setAttribute(CONFIG.ATTR_EXPANDED,
|
|
7303
|
+
setAttributes(accordionPanel, (_setAttributes3 = {}, _defineProperty(_setAttributes3, CONFIG.ATTR_ROLE, CONFIG.ACCORDION_ROLE_TABPANEL), _defineProperty(_setAttributes3, CONFIG.ATTR_LABELLEDBY, CONFIG.ACCORDION_PREFIX_IDS + iLisible + CONFIG.ACCORDION_BUTTON_ID + indexHeaderLisible), _defineProperty(_setAttributes3, 'id', CONFIG.ACCORDION_PREFIX_IDS + iLisible + CONFIG.ACCORDION_PANEL_ID + indexHeaderLisible), _defineProperty(_setAttributes3, DATA_HASH_ID, HASH_ID), _setAttributes3));
|
|
7304
|
+
if (accordionOpenedAttribute === 'true') {
|
|
7305
|
+
accordionButton.setAttribute(CONFIG.ATTR_EXPANDED, 'true');
|
|
7290
7306
|
header_node.removeAttribute(CONFIG.ACCORDION_DATA_OPENED);
|
|
7291
|
-
accordionPanel.setAttribute(CONFIG.ATTR_HIDDEN,
|
|
7292
|
-
accordionPanel.querySelectorAll(
|
|
7293
|
-
item.removeAttribute(
|
|
7307
|
+
accordionPanel.setAttribute(CONFIG.ATTR_HIDDEN, 'false');
|
|
7308
|
+
accordionPanel.querySelectorAll('.second-level-link').forEach(item => {
|
|
7309
|
+
item.removeAttribute('tabindex');
|
|
7294
7310
|
});
|
|
7295
7311
|
} else {
|
|
7296
|
-
accordionButton.setAttribute(CONFIG.ATTR_EXPANDED,
|
|
7297
|
-
accordionPanel.setAttribute(CONFIG.ATTR_HIDDEN,
|
|
7312
|
+
accordionButton.setAttribute(CONFIG.ATTR_EXPANDED, 'false');
|
|
7313
|
+
accordionPanel.setAttribute(CONFIG.ATTR_HIDDEN, 'true');
|
|
7298
7314
|
// making sure all second level links are not tabable
|
|
7299
|
-
accordionPanel.querySelectorAll(
|
|
7315
|
+
accordionPanel.querySelectorAll('.second-level-link').forEach(( /** @type {HTMLElement} **/item) => {
|
|
7300
7316
|
item.tabIndex = -1;
|
|
7301
7317
|
});
|
|
7302
7318
|
}
|
|
@@ -7309,25 +7325,25 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7309
7325
|
};
|
|
7310
7326
|
const main = function main() {
|
|
7311
7327
|
/* listeners for all configs */
|
|
7312
|
-
[
|
|
7328
|
+
['click', 'keydown', 'focus'].forEach(eventName => {
|
|
7313
7329
|
document.body.addEventListener(eventName, e => {
|
|
7314
7330
|
const hashId = searchParentHashId( /** @type {Element} */e.target, DATA_HASH_ID);
|
|
7315
7331
|
// search if click on button or on element in a button contains data-hash-id (it is needed to load config and know which class to search)
|
|
7316
7332
|
|
|
7317
|
-
if (hashId !==
|
|
7333
|
+
if (hashId !== '') {
|
|
7318
7334
|
(() => {
|
|
7319
7335
|
// loading config from element
|
|
7320
7336
|
const CONFIG = pluginConfig.get(hashId);
|
|
7321
7337
|
|
|
7322
7338
|
// click on button
|
|
7323
|
-
if ( /** @type {Element} */e.target.classList.contains(
|
|
7339
|
+
if ( /** @type {Element} */e.target.classList.contains('first-level-btn') && eventName === 'click') {
|
|
7324
7340
|
(() => {
|
|
7325
7341
|
const buttonTag = /** @type {HTMLInputElement} */e.target;
|
|
7326
7342
|
const accordionContainer = findById(searchParent(buttonTag, CONFIG.ACCORDION_JS, hashId), hashId);
|
|
7327
7343
|
const coolSelectors = CONFIG.ACCORDION_DATA_COOL_SELECTORS === true;
|
|
7328
7344
|
|
|
7329
7345
|
/**@type {Element[]} */
|
|
7330
|
-
let accordionAllHeaders = [].slice.call(accordionContainer.querySelectorAll(
|
|
7346
|
+
let accordionAllHeaders = [].slice.call(accordionContainer.querySelectorAll('.first-level-btn'));
|
|
7331
7347
|
const destination = findById(buttonTag.getAttribute(CONFIG.ATTR_CONTROLS), hashId);
|
|
7332
7348
|
const stateButton = buttonTag.getAttribute(CONFIG.ATTR_EXPANDED);
|
|
7333
7349
|
if (!coolSelectors) {
|
|
@@ -7335,18 +7351,18 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7335
7351
|
}
|
|
7336
7352
|
|
|
7337
7353
|
// if closed
|
|
7338
|
-
if (stateButton ===
|
|
7339
|
-
buttonTag.setAttribute(CONFIG.ATTR_EXPANDED,
|
|
7354
|
+
if (stateButton === 'false') {
|
|
7355
|
+
buttonTag.setAttribute(CONFIG.ATTR_EXPANDED, 'true');
|
|
7340
7356
|
destination.removeAttribute(CONFIG.ATTR_HIDDEN);
|
|
7341
|
-
destination.classList.add(
|
|
7357
|
+
destination.classList.add('open');
|
|
7342
7358
|
// making second level links tabbable if sub nav panel is opened
|
|
7343
|
-
destination.querySelectorAll(
|
|
7359
|
+
destination.querySelectorAll('.second-level-link').forEach(item => item.removeAttribute('tabindex'));
|
|
7344
7360
|
} else {
|
|
7345
|
-
buttonTag.setAttribute(CONFIG.ATTR_EXPANDED,
|
|
7346
|
-
destination.setAttribute(CONFIG.ATTR_HIDDEN,
|
|
7347
|
-
destination.classList.remove(
|
|
7361
|
+
buttonTag.setAttribute(CONFIG.ATTR_EXPANDED, 'false');
|
|
7362
|
+
destination.setAttribute(CONFIG.ATTR_HIDDEN, 'true');
|
|
7363
|
+
destination.classList.remove('open');
|
|
7348
7364
|
// adding tabindex to links to make sure they are not tabable if sub nav panel is closed
|
|
7349
|
-
destination.querySelectorAll(
|
|
7365
|
+
destination.querySelectorAll('.second-level-link').forEach(( /** @type {HTMLElement} **/item) => item.tabIndex = -1);
|
|
7350
7366
|
}
|
|
7351
7367
|
if (!mobileView()) {
|
|
7352
7368
|
accordionAllHeaders.forEach(header_node => {
|
|
@@ -7354,11 +7370,11 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7354
7370
|
|
|
7355
7371
|
const destinationPanel = findById(header_node.getAttribute(CONFIG.ATTR_CONTROLS), hashId);
|
|
7356
7372
|
if (header_node !== buttonTag) {
|
|
7357
|
-
header_node.setAttribute(CONFIG.ATTR_EXPANDED,
|
|
7358
|
-
destinationPanel.classList.remove(
|
|
7373
|
+
header_node.setAttribute(CONFIG.ATTR_EXPANDED, 'false');
|
|
7374
|
+
destinationPanel.classList.remove('open');
|
|
7359
7375
|
|
|
7360
7376
|
//Added fix to make closed panels non-tabbable
|
|
7361
|
-
destinationPanel.querySelectorAll(
|
|
7377
|
+
destinationPanel.querySelectorAll('.second-level-link').forEach(( /** @type {HTMLElement} **/item) => item.tabIndex = -1);
|
|
7362
7378
|
}
|
|
7363
7379
|
});
|
|
7364
7380
|
}
|
|
@@ -7379,33 +7395,35 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7379
7395
|
// reset navigation function
|
|
7380
7396
|
const NavReset = () => {
|
|
7381
7397
|
//RESET
|
|
7382
|
-
document.querySelectorAll(
|
|
7398
|
+
document.querySelectorAll('.first-level-btn').forEach(el => el.ariaExpanded = 'false'); //Must be false and not blank for CSS
|
|
7383
7399
|
|
|
7384
|
-
document.querySelectorAll(
|
|
7385
|
-
el.ariaHidden =
|
|
7386
|
-
el.classList.remove(
|
|
7400
|
+
document.querySelectorAll('.sub-nav').forEach(el => {
|
|
7401
|
+
el.ariaHidden = 'true';
|
|
7402
|
+
el.classList.remove('open');
|
|
7387
7403
|
});
|
|
7388
|
-
document.querySelectorAll(
|
|
7389
|
-
document.querySelectorAll(
|
|
7404
|
+
document.querySelectorAll('.second-level-link').forEach(( /**@type {HTMLElement} */el) => el.tabIndex = -1);
|
|
7405
|
+
document.querySelectorAll('.rotate').forEach(( /**@type {HTMLElement} */el) => el.style.display = isDesktopWidth() ? 'none' : 'block');
|
|
7390
7406
|
};
|
|
7391
7407
|
|
|
7392
7408
|
// Remove href if <a> has a link
|
|
7393
|
-
window.addEventListener(
|
|
7409
|
+
window.addEventListener('load', () => {
|
|
7394
7410
|
main()().attach(); //This is way more abstract than it needs to be
|
|
7395
7411
|
|
|
7396
|
-
const navigationJS = document.querySelector(
|
|
7397
|
-
if (!navigationJS)
|
|
7398
|
-
|
|
7412
|
+
const navigationJS = document.querySelector('.main-navigation');
|
|
7413
|
+
if (!navigationJS) {
|
|
7414
|
+
return;
|
|
7415
|
+
}
|
|
7416
|
+
const subnavbtnJS = document.querySelectorAll('.main-navigation .nav-item a.has-sub-btn');
|
|
7399
7417
|
subnavbtnJS.forEach(item => {
|
|
7400
7418
|
// Change <a> tag to div since you can't place button into <a> tag
|
|
7401
|
-
const newDiv = document.createElement(
|
|
7419
|
+
const newDiv = document.createElement('div');
|
|
7402
7420
|
newDiv.innerHTML = item.innerHTML;
|
|
7403
|
-
newDiv.classList.add(
|
|
7421
|
+
newDiv.classList.add('has-sub-btn');
|
|
7404
7422
|
item.replaceWith(newDiv);
|
|
7405
7423
|
});
|
|
7406
|
-
const setActiveLinkByFolder = navigationJS.classList.contains(
|
|
7407
|
-
const navItemsJS = document.querySelectorAll(
|
|
7408
|
-
const navItemsWithSubsJS = /** @type {Element[]} */[].slice.call(navItemsJS).filter(x => x.querySelector(
|
|
7424
|
+
const setActiveLinkByFolder = navigationJS.classList.contains('auto-highlight');
|
|
7425
|
+
const navItemsJS = document.querySelectorAll('.main-navigation .nav-item');
|
|
7426
|
+
const navItemsWithSubsJS = /** @type {Element[]} */[].slice.call(navItemsJS).filter(x => x.querySelector('.sub-nav'));
|
|
7409
7427
|
|
|
7410
7428
|
// HIGHLIGHT APPROPRIATE NAV ITEM
|
|
7411
7429
|
|
|
@@ -7414,30 +7432,30 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7414
7432
|
//TODO: Why is this always blank? History, we used to ask them to put a var like this in the root of their page to set default menu.
|
|
7415
7433
|
|
|
7416
7434
|
//Globally set var
|
|
7417
|
-
const reMainNav = typeof defaultActiveLink !==
|
|
7435
|
+
const reMainNav = typeof defaultActiveLink !== 'undefined' ? new RegExp(`^${defaultActiveLink}$`, 'i') : null; // Regex for finding the index of the default main list item
|
|
7418
7436
|
|
|
7419
7437
|
navItemsJS.forEach(navItem => {
|
|
7420
7438
|
/** @type {HTMLElement | null} */
|
|
7421
|
-
const link = navItem.querySelector(
|
|
7439
|
+
const link = navItem.querySelector('.first-level-btn, .first-level-link');
|
|
7422
7440
|
if (link) {
|
|
7423
7441
|
if (reMainNav) {
|
|
7424
7442
|
if (link.textContent && link.textContent.match(reMainNav)) {
|
|
7425
|
-
navItem.classList.add(
|
|
7443
|
+
navItem.classList.add('active');
|
|
7426
7444
|
}
|
|
7427
|
-
} else if (setActiveLinkByFolder && link.getAttribute(
|
|
7428
|
-
const arrNavLink = link.getAttribute(
|
|
7429
|
-
const arrCurrentURL = location.href.split(
|
|
7445
|
+
} else if (setActiveLinkByFolder && link.getAttribute('href')) {
|
|
7446
|
+
const arrNavLink = link.getAttribute('href')?.split('/');
|
|
7447
|
+
const arrCurrentURL = location.href.split('/');
|
|
7430
7448
|
if (arrNavLink && arrNavLink.length > 4 && arrCurrentURL[3] === arrNavLink[3]) {
|
|
7431
7449
|
// folder of current URL matches this nav link
|
|
7432
|
-
navItem.classList.add(
|
|
7450
|
+
navItem.classList.add('active');
|
|
7433
7451
|
}
|
|
7434
7452
|
}
|
|
7435
7453
|
}
|
|
7436
7454
|
});
|
|
7437
7455
|
|
|
7438
7456
|
// Reset if click outside of nav
|
|
7439
|
-
document.addEventListener(
|
|
7440
|
-
const navContainer = document.querySelector(
|
|
7457
|
+
document.addEventListener('mouseup', e => {
|
|
7458
|
+
const navContainer = document.querySelector('.main-navigation');
|
|
7441
7459
|
|
|
7442
7460
|
// if the target of the click isn't the navigation container nor a descendant of the navigation
|
|
7443
7461
|
if (navContainer !== e.target && !navContainer?.contains( /**@type {Node} */e.target)) {
|
|
@@ -7447,24 +7465,26 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7447
7465
|
|
|
7448
7466
|
// Nav items with subs
|
|
7449
7467
|
navItemsWithSubsJS.forEach(el => {
|
|
7450
|
-
const itemCount = el.querySelectorAll(
|
|
7468
|
+
const itemCount = el.querySelectorAll('.second-level-nav > li').length;
|
|
7451
7469
|
if (itemCount <= 2) {
|
|
7452
|
-
const subnav = el.querySelector(
|
|
7453
|
-
if (subnav)
|
|
7470
|
+
const subnav = el.querySelector('.sub-nav');
|
|
7471
|
+
if (subnav) {
|
|
7472
|
+
subnav.classList.add('with-few-items');
|
|
7473
|
+
}
|
|
7454
7474
|
}
|
|
7455
7475
|
});
|
|
7456
7476
|
|
|
7457
7477
|
// Add class has-sub, then add carrots
|
|
7458
|
-
if (!navigationJS.classList.contains(
|
|
7459
|
-
document.querySelectorAll(
|
|
7460
|
-
el.classList.add(
|
|
7461
|
-
const carrot = document.createElement(
|
|
7462
|
-
carrot.classList.add(
|
|
7463
|
-
carrot.ariaHidden =
|
|
7464
|
-
const toggleSubNav = document.createElement(
|
|
7465
|
-
toggleSubNav.classList.add(
|
|
7466
|
-
toggleSubNav.ariaHidden =
|
|
7467
|
-
toggleSubNav.style.display = mobileView() ?
|
|
7478
|
+
if (!navigationJS.classList.contains('singleLevel')) {
|
|
7479
|
+
document.querySelectorAll('.first-level-btn').forEach(el => {
|
|
7480
|
+
el.classList.add('has-sub');
|
|
7481
|
+
const carrot = document.createElement('span');
|
|
7482
|
+
carrot.classList.add('ca-gov-icon-caret-down', 'carrot');
|
|
7483
|
+
carrot.ariaHidden = 'true';
|
|
7484
|
+
const toggleSubNav = document.createElement('div');
|
|
7485
|
+
toggleSubNav.classList.add('ca-gov-icon-caret-right', 'rotate');
|
|
7486
|
+
toggleSubNav.ariaHidden = 'true';
|
|
7487
|
+
toggleSubNav.style.display = mobileView() ? 'block' : 'none';
|
|
7468
7488
|
el.appendChild(toggleSubNav);
|
|
7469
7489
|
el.appendChild(carrot);
|
|
7470
7490
|
});
|
|
@@ -7473,10 +7493,10 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7473
7493
|
});
|
|
7474
7494
|
|
|
7475
7495
|
// Reset on escape
|
|
7476
|
-
document.addEventListener(
|
|
7496
|
+
document.addEventListener('keyup', e => {
|
|
7477
7497
|
// keyCode has been deprecated
|
|
7478
7498
|
// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
|
|
7479
|
-
if (e.key ===
|
|
7499
|
+
if (e.key === 'Escape') {
|
|
7480
7500
|
NavReset();
|
|
7481
7501
|
}
|
|
7482
7502
|
});
|
|
@@ -7484,14 +7504,14 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7484
7504
|
// Add bold to current subnav link
|
|
7485
7505
|
const addActive = () => {
|
|
7486
7506
|
/** @type {NodeListOf<HTMLAnchorElement>} */
|
|
7487
|
-
const activeLink = document.querySelectorAll(
|
|
7507
|
+
const activeLink = document.querySelectorAll('.second-level-link'),
|
|
7488
7508
|
len = activeLink.length,
|
|
7489
|
-
full_path = location.href.split(
|
|
7509
|
+
full_path = location.href.split('#')[0]; //Ignore hashes?
|
|
7490
7510
|
|
|
7491
7511
|
// Loop through each link.
|
|
7492
7512
|
for (let i = 0; i < len; i++) {
|
|
7493
|
-
if (activeLink[i].href.split(
|
|
7494
|
-
activeLink[i].className +=
|
|
7513
|
+
if (activeLink[i].href.split('#')[0] === full_path) {
|
|
7514
|
+
activeLink[i].className += ' bold';
|
|
7495
7515
|
}
|
|
7496
7516
|
}
|
|
7497
7517
|
};
|
|
@@ -7520,14 +7540,14 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7520
7540
|
* @typedef {HTMLElement & ScrollCounter_Properties} ScrollCounter
|
|
7521
7541
|
*/
|
|
7522
7542
|
|
|
7523
|
-
document.addEventListener(
|
|
7543
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
7524
7544
|
// You can change this class to specify which elements are going to behave as counters.
|
|
7525
7545
|
/** @type {NodeListOf<ScrollCounter>} */
|
|
7526
|
-
const elements = document.querySelectorAll(
|
|
7546
|
+
const elements = document.querySelectorAll('.scroll-counter');
|
|
7527
7547
|
elements.forEach(item => {
|
|
7528
7548
|
// Add new attributes to the elements with the '.scroll-counter' HTML class
|
|
7529
7549
|
item.counterAlreadyFired = false;
|
|
7530
|
-
item.counterSpeed = Number(item.getAttribute(
|
|
7550
|
+
item.counterSpeed = Number(item.getAttribute('data-counter-time')) / 45;
|
|
7531
7551
|
item.counterTarget = +item.innerText;
|
|
7532
7552
|
item.counterCount = 0;
|
|
7533
7553
|
item.counterStep = item.counterTarget / item.counterSpeed;
|
|
@@ -7560,16 +7580,20 @@ document.addEventListener("DOMContentLoaded", () => {
|
|
|
7560
7580
|
// Funciton that will get fired uppon scrolling
|
|
7561
7581
|
const handleScroll = () => {
|
|
7562
7582
|
elements.forEach(item => {
|
|
7563
|
-
if (item.counterAlreadyFired)
|
|
7564
|
-
|
|
7583
|
+
if (item.counterAlreadyFired) {
|
|
7584
|
+
return;
|
|
7585
|
+
}
|
|
7586
|
+
if (!isElementVisible(item)) {
|
|
7587
|
+
return;
|
|
7588
|
+
}
|
|
7565
7589
|
item.updateCounter();
|
|
7566
7590
|
item.counterAlreadyFired = true;
|
|
7567
7591
|
});
|
|
7568
7592
|
};
|
|
7569
7593
|
|
|
7570
7594
|
// Fire the function on load and scroll
|
|
7571
|
-
window.addEventListener(
|
|
7572
|
-
window.addEventListener(
|
|
7595
|
+
window.addEventListener('load', handleScroll);
|
|
7596
|
+
window.addEventListener('scroll', handleScroll);
|
|
7573
7597
|
});
|
|
7574
7598
|
|
|
7575
7599
|
/***/ }),
|
|
@@ -7586,28 +7610,28 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7586
7610
|
/* -----------------------------------------
|
|
7587
7611
|
PAGE NAVIGATION - /source/js/cagov/page-navigation.js
|
|
7588
7612
|
----------------------------------------- */
|
|
7589
|
-
window.addEventListener(
|
|
7590
|
-
const headings = document.querySelectorAll(
|
|
7591
|
-
const h2heading = document.querySelector(
|
|
7592
|
-
const pagenav = document.querySelector(
|
|
7613
|
+
window.addEventListener('load', () => {
|
|
7614
|
+
const headings = document.querySelectorAll('h2');
|
|
7615
|
+
const h2heading = document.querySelector('h2');
|
|
7616
|
+
const pagenav = document.querySelector('.page-navigation');
|
|
7593
7617
|
// check if page navigation is empty and page has h2 headings
|
|
7594
7618
|
if (pagenav && pagenav.childNodes.length === 0 && h2heading) {
|
|
7595
|
-
const pagenavUL = document.createElement(
|
|
7619
|
+
const pagenavUL = document.createElement('ul');
|
|
7596
7620
|
headings.forEach(h2 => {
|
|
7597
7621
|
// find each h2 and their innter text
|
|
7598
7622
|
const innertext = h2.innerHTML;
|
|
7599
7623
|
|
|
7600
7624
|
// add dashes for inner text for IDs
|
|
7601
|
-
const innertextID = h2.innerHTML.replace(/\s+/g,
|
|
7625
|
+
const innertextID = h2.innerHTML.replace(/\s+/g, '-');
|
|
7602
7626
|
|
|
7603
7627
|
// set ID for each h2 based on inner taxt
|
|
7604
|
-
h2.setAttribute(
|
|
7628
|
+
h2.setAttribute('id', innertextID);
|
|
7605
7629
|
|
|
7606
7630
|
// Create anchor links
|
|
7607
7631
|
const anchorlinks = `<a href="#${innertextID}">${innertext}</a>`;
|
|
7608
7632
|
|
|
7609
7633
|
// create li element
|
|
7610
|
-
const listnav = document.createElement(
|
|
7634
|
+
const listnav = document.createElement('li');
|
|
7611
7635
|
|
|
7612
7636
|
// Add achor links into list item
|
|
7613
7637
|
listnav.innerHTML = anchorlinks;
|
|
@@ -7618,9 +7642,9 @@ window.addEventListener("load", () => {
|
|
|
7618
7642
|
// count number of h2 and add columns class to the ul if there are too many list items
|
|
7619
7643
|
const h2number = headings.length;
|
|
7620
7644
|
if (h2number > 8) {
|
|
7621
|
-
pagenavUL.classList.add(
|
|
7645
|
+
pagenavUL.classList.add('columns-3');
|
|
7622
7646
|
} else if (h2number > 5) {
|
|
7623
|
-
pagenavUL.classList.add(
|
|
7647
|
+
pagenavUL.classList.add('columns-2');
|
|
7624
7648
|
}
|
|
7625
7649
|
});
|
|
7626
7650
|
|
|
@@ -7630,7 +7654,7 @@ window.addEventListener("load", () => {
|
|
|
7630
7654
|
|
|
7631
7655
|
// add ul item to the nav and set aria labelledby
|
|
7632
7656
|
pagenav.appendChild(pagenavUL);
|
|
7633
|
-
pagenav.setAttribute(
|
|
7657
|
+
pagenav.setAttribute('aria-labelledby', 'on-this-page-navigation-label');
|
|
7634
7658
|
}
|
|
7635
7659
|
}); // call out the function on the page load
|
|
7636
7660
|
|
|
@@ -7648,7 +7672,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7648
7672
|
/* -----------------------------------------
|
|
7649
7673
|
PAGINATION - /src/js/cagov/pagination.js
|
|
7650
7674
|
----------------------------------------- */
|
|
7651
|
-
window.addEventListener(
|
|
7675
|
+
window.addEventListener('load', () => {
|
|
7652
7676
|
/**
|
|
7653
7677
|
* @param {string} label
|
|
7654
7678
|
* @param {number} number
|
|
@@ -7682,7 +7706,7 @@ window.addEventListener("load", () => {
|
|
|
7682
7706
|
* @param {number} totalPages
|
|
7683
7707
|
*/
|
|
7684
7708
|
function templateHTML(next, previous, page, currentPage, totalPages) {
|
|
7685
|
-
const unbounded = totalPages
|
|
7709
|
+
const unbounded = totalPages === -1;
|
|
7686
7710
|
return `<nav aria-label="Pagination" class="cagov-pagination">
|
|
7687
7711
|
<ul class="cagov-pagination__list">
|
|
7688
7712
|
<li class="cagov-pagination__item">
|
|
@@ -7691,15 +7715,15 @@ window.addEventListener("load", () => {
|
|
|
7691
7715
|
class="cagov-pagination__link cagov-pagination__previous-page"
|
|
7692
7716
|
aria-label="previous page"
|
|
7693
7717
|
>
|
|
7694
|
-
<span class="cagov-pagination__link-text ${currentPage > 1 ?
|
|
7718
|
+
<span class="cagov-pagination__link-text ${currentPage > 1 ? '' : 'cagov-pagination__link-inactive'}"> ${previous} </span>
|
|
7695
7719
|
</a>
|
|
7696
7720
|
</li>
|
|
7697
|
-
${currentPage > 2 ? pageListItem(page, 1) :
|
|
7721
|
+
${currentPage > 2 ? pageListItem(page, 1) : ''}
|
|
7698
7722
|
|
|
7699
|
-
${currentPage
|
|
7700
|
-
${currentPage > 4 ? pageOverflow() :
|
|
7723
|
+
${currentPage === 4 ? pageListItem(page, 2) : ''}
|
|
7724
|
+
${currentPage > 4 ? pageOverflow() : ''}
|
|
7701
7725
|
|
|
7702
|
-
${currentPage > 1 ? pageListItem(page, currentPage - 1) :
|
|
7726
|
+
${currentPage > 1 ? pageListItem(page, currentPage - 1) : ''}
|
|
7703
7727
|
|
|
7704
7728
|
<li class="cagov-pagination__item cagov-pagination-current">
|
|
7705
7729
|
<a
|
|
@@ -7713,13 +7737,13 @@ window.addEventListener("load", () => {
|
|
|
7713
7737
|
</a>
|
|
7714
7738
|
</li>
|
|
7715
7739
|
|
|
7716
|
-
${unbounded || currentPage < totalPages ? pageListItem(page, currentPage + 1) :
|
|
7740
|
+
${unbounded || currentPage < totalPages ? pageListItem(page, currentPage + 1) : ''}
|
|
7717
7741
|
|
|
7718
|
-
${!unbounded && currentPage < totalPages - 2 ? pageOverflow() :
|
|
7719
|
-
${unbounded ? pageListItem(page, currentPage + 2) :
|
|
7742
|
+
${!unbounded && currentPage < totalPages - 2 ? pageOverflow() : ''}
|
|
7743
|
+
${unbounded ? pageListItem(page, currentPage + 2) : ''}
|
|
7720
7744
|
|
|
7721
|
-
${currentPage < totalPages - 1 ? pageListItem(page, totalPages) :
|
|
7722
|
-
${unbounded ? pageOverflow() :
|
|
7745
|
+
${currentPage < totalPages - 1 ? pageListItem(page, totalPages) : ''}
|
|
7746
|
+
${unbounded ? pageOverflow() : ''}
|
|
7723
7747
|
|
|
7724
7748
|
<li class="cagov-pagination__item">
|
|
7725
7749
|
<a
|
|
@@ -7727,7 +7751,7 @@ window.addEventListener("load", () => {
|
|
|
7727
7751
|
class="cagov-pagination__link cagov-pagination__next-page"
|
|
7728
7752
|
aria-label="next page"
|
|
7729
7753
|
>
|
|
7730
|
-
<span class="cagov-pagination__link-text ${!unbounded && currentPage > totalPages - 1 ?
|
|
7754
|
+
<span class="cagov-pagination__link-text ${!unbounded && currentPage > totalPages - 1 ? 'cagov-pagination__link-inactive' : ''}"> ${next} </span>
|
|
7731
7755
|
</a>
|
|
7732
7756
|
</li>
|
|
7733
7757
|
</ul>
|
|
@@ -7784,82 +7808,82 @@ cagov-pagination .cagov-pagination__item:has(.cagov-pagination__link-inactive) {
|
|
|
7784
7808
|
*
|
|
7785
7809
|
* @fires paginationClick - custom event with object with detail value of current page: {detail: 1}
|
|
7786
7810
|
*
|
|
7787
|
-
* @attr {string} [data-yes] -
|
|
7788
|
-
* @attr {string} [data-no] -
|
|
7811
|
+
* @attr {string} [data-yes] - 'Yes';
|
|
7812
|
+
* @attr {string} [data-no] - 'No';
|
|
7789
7813
|
*
|
|
7790
7814
|
* @cssprop --primary-700 - Default value of #165ac2, used for text, border color
|
|
7791
7815
|
*/
|
|
7792
7816
|
class CAGovPagination extends HTMLElement {
|
|
7793
7817
|
constructor() {
|
|
7794
7818
|
super();
|
|
7795
|
-
if (!document.querySelector(
|
|
7796
|
-
const style = document.createElement(
|
|
7797
|
-
style.id =
|
|
7819
|
+
if (!document.querySelector('#cagov-pagination-styles')) {
|
|
7820
|
+
const style = document.createElement('style');
|
|
7821
|
+
style.id = 'cagov-pagination-styles';
|
|
7798
7822
|
style.textContent = styles;
|
|
7799
7823
|
document.head.appendChild(style);
|
|
7800
7824
|
}
|
|
7801
7825
|
}
|
|
7802
7826
|
connectedCallback() {
|
|
7803
|
-
this.currentPage = parseInt(this.dataset.currentPage ? this.dataset.currentPage :
|
|
7827
|
+
this.currentPage = parseInt(this.dataset.currentPage ? this.dataset.currentPage : '1', 10);
|
|
7804
7828
|
this.render();
|
|
7805
7829
|
}
|
|
7806
7830
|
render() {
|
|
7807
7831
|
//console.log(this.dataset);
|
|
7808
7832
|
const previous = this.dataset.previous ? this.dataset.previous : '<span class="ca-gov-icon-arrow-prev" aria-hidden="true"></span> Previous';
|
|
7809
7833
|
const next = this.dataset.next ? this.dataset.next : 'Next <span class="ca-gov-icon-arrow-next" aria-hidden="true"></span>';
|
|
7810
|
-
const page = this.dataset.page ? this.dataset.page :
|
|
7834
|
+
const page = this.dataset.page ? this.dataset.page : 'Page';
|
|
7811
7835
|
this.totalPages = this.dataset.totalPages ? Number(this.dataset.totalPages) : 1;
|
|
7812
7836
|
if (this.totalPages < 0 || this.totalPages > 1) {
|
|
7813
7837
|
const html = templateHTML(next, previous, page, this.currentPage, this.totalPages);
|
|
7814
7838
|
this.innerHTML = html;
|
|
7815
7839
|
this.applyListeners();
|
|
7816
7840
|
} else {
|
|
7817
|
-
this.innerHTML =
|
|
7841
|
+
this.innerHTML = '';
|
|
7818
7842
|
}
|
|
7819
7843
|
}
|
|
7820
7844
|
static get observedAttributes() {
|
|
7821
|
-
return [
|
|
7845
|
+
return ['data-current-page', 'data-total-pages'];
|
|
7822
7846
|
}
|
|
7823
7847
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
7824
|
-
if (name ===
|
|
7848
|
+
if (name === 'data-current-page') {
|
|
7825
7849
|
this.currentPage = parseInt(newValue, 10);
|
|
7826
7850
|
this.render();
|
|
7827
7851
|
}
|
|
7828
|
-
if (name ===
|
|
7852
|
+
if (name === 'data-total-pages') {
|
|
7829
7853
|
this.totalPages = parseInt(newValue, 10);
|
|
7830
7854
|
this.render();
|
|
7831
7855
|
}
|
|
7832
7856
|
}
|
|
7833
7857
|
applyListeners() {
|
|
7834
|
-
const pageLinks = this.querySelectorAll(
|
|
7858
|
+
const pageLinks = this.querySelectorAll('.cagov-pagination__button');
|
|
7835
7859
|
pageLinks.forEach(pl => {
|
|
7836
|
-
pl.addEventListener(
|
|
7860
|
+
pl.addEventListener('click', event => {
|
|
7837
7861
|
this.currentPage = parseInt( /** @type {CAGovPagination} */event.target.dataset.pageNum, 10);
|
|
7838
|
-
this.dispatchEvent(new CustomEvent(
|
|
7862
|
+
this.dispatchEvent(new CustomEvent('paginationClick', {
|
|
7839
7863
|
detail: this.currentPage
|
|
7840
7864
|
}));
|
|
7841
7865
|
this.dataset.currentPage = this.currentPage.toString();
|
|
7842
7866
|
});
|
|
7843
7867
|
});
|
|
7844
|
-
this.querySelector(
|
|
7845
|
-
if (!( /** @type {Element} */event.target.classList.contains(
|
|
7868
|
+
this.querySelector('.cagov-pagination__previous-page').addEventListener('click', event => {
|
|
7869
|
+
if (!( /** @type {Element} */event.target.classList.contains('cagov-pagination__link-inactive'))) {
|
|
7846
7870
|
this.currentPage -= 1;
|
|
7847
7871
|
if (this.currentPage < 1) {
|
|
7848
7872
|
this.currentPage = 1;
|
|
7849
7873
|
}
|
|
7850
|
-
this.dispatchEvent(new CustomEvent(
|
|
7874
|
+
this.dispatchEvent(new CustomEvent('paginationClick', {
|
|
7851
7875
|
detail: this.currentPage
|
|
7852
7876
|
}));
|
|
7853
7877
|
this.dataset.currentPage = this.currentPage.toString();
|
|
7854
7878
|
}
|
|
7855
7879
|
});
|
|
7856
|
-
this.querySelector(
|
|
7857
|
-
if (!( /** @type {Element} */event.target.classList.contains(
|
|
7880
|
+
this.querySelector('.cagov-pagination__next-page').addEventListener('click', event => {
|
|
7881
|
+
if (!( /** @type {Element} */event.target.classList.contains('cagov-pagination__link-inactive'))) {
|
|
7858
7882
|
this.currentPage += 1;
|
|
7859
|
-
if (this.totalPages
|
|
7883
|
+
if (this.totalPages !== -1 && this.currentPage > this.totalPages) {
|
|
7860
7884
|
this.currentPage = this.totalPages;
|
|
7861
7885
|
}
|
|
7862
|
-
this.dispatchEvent(new CustomEvent(
|
|
7886
|
+
this.dispatchEvent(new CustomEvent('paginationClick', {
|
|
7863
7887
|
detail: this.currentPage
|
|
7864
7888
|
}));
|
|
7865
7889
|
this.dataset.currentPage = this.currentPage.toString();
|
|
@@ -7867,7 +7891,7 @@ cagov-pagination .cagov-pagination__item:has(.cagov-pagination__link-inactive) {
|
|
|
7867
7891
|
});
|
|
7868
7892
|
}
|
|
7869
7893
|
}
|
|
7870
|
-
window.customElements.define(
|
|
7894
|
+
window.customElements.define('cagov-pagination', CAGovPagination);
|
|
7871
7895
|
});
|
|
7872
7896
|
|
|
7873
7897
|
/***/ }),
|
|
@@ -7881,14 +7905,14 @@ cagov-pagination .cagov-pagination__item:has(.cagov-pagination__link-inactive) {
|
|
|
7881
7905
|
"use strict";
|
|
7882
7906
|
__webpack_require__.r(__webpack_exports__);
|
|
7883
7907
|
//@ts-check
|
|
7884
|
-
window.addEventListener(
|
|
7885
|
-
document.querySelectorAll(
|
|
7908
|
+
window.addEventListener('load', () => {
|
|
7909
|
+
document.querySelectorAll('.return-top').forEach(returnTop => returnTop.addEventListener('click', () => {
|
|
7886
7910
|
document.body.scrollTop = 0; // For Safari
|
|
7887
7911
|
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
|
|
7888
7912
|
}));
|
|
7889
7913
|
|
|
7890
7914
|
// Back to top link in the global footer
|
|
7891
|
-
document.querySelectorAll(
|
|
7915
|
+
document.querySelectorAll('a[href="#skip-to-content"]').forEach(backToTop => backToTop.addEventListener('click', backToTopFunction));
|
|
7892
7916
|
|
|
7893
7917
|
/**
|
|
7894
7918
|
* @param {Event} event
|
|
@@ -7903,37 +7927,41 @@ window.addEventListener("load", () => {
|
|
|
7903
7927
|
// othervise keep it invisible
|
|
7904
7928
|
let timer = 0;
|
|
7905
7929
|
let lastScrollTop = 0;
|
|
7906
|
-
window.addEventListener(
|
|
7907
|
-
const returnTopButton = document.querySelector(
|
|
7908
|
-
if (!returnTopButton)
|
|
7930
|
+
window.addEventListener('scroll', () => {
|
|
7931
|
+
const returnTopButton = document.querySelector('.return-top');
|
|
7932
|
+
if (!returnTopButton) {
|
|
7933
|
+
return;
|
|
7934
|
+
}
|
|
7909
7935
|
const st = window.pageYOffset || document.documentElement.scrollTop;
|
|
7910
7936
|
if (st > lastScrollTop) {
|
|
7911
7937
|
// downscroll code
|
|
7912
|
-
returnTopButton.classList.remove(
|
|
7938
|
+
returnTopButton.classList.remove('is-visible');
|
|
7913
7939
|
} else if (document.body.scrollTop >= 400 || document.documentElement.scrollTop >= 400) {
|
|
7914
7940
|
// upscroll code
|
|
7915
7941
|
|
|
7916
7942
|
if (timer) {
|
|
7917
7943
|
window.clearTimeout(timer);
|
|
7918
7944
|
}
|
|
7919
|
-
returnTopButton.classList.add(
|
|
7945
|
+
returnTopButton.classList.add('is-visible');
|
|
7920
7946
|
timer = window.setTimeout(() => {
|
|
7921
|
-
returnTopButton.classList.remove(
|
|
7947
|
+
returnTopButton.classList.remove('is-visible');
|
|
7922
7948
|
}, 2000); //Back to top removes itself after 2 sec of inactivity
|
|
7923
7949
|
}
|
|
7924
7950
|
// bottom of the page
|
|
7925
7951
|
else {
|
|
7926
|
-
returnTopButton.classList.remove(
|
|
7952
|
+
returnTopButton.classList.remove('is-visible');
|
|
7927
7953
|
}
|
|
7928
7954
|
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
|
7929
7955
|
}, false);
|
|
7930
7956
|
|
|
7931
7957
|
// Hittin' rock bottom
|
|
7932
|
-
window.addEventListener(
|
|
7933
|
-
const returnTopButton = document.querySelector(
|
|
7934
|
-
if (!returnTopButton)
|
|
7958
|
+
window.addEventListener('scroll', () => {
|
|
7959
|
+
const returnTopButton = document.querySelector('.return-top');
|
|
7960
|
+
if (!returnTopButton) {
|
|
7961
|
+
return;
|
|
7962
|
+
}
|
|
7935
7963
|
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
|
|
7936
|
-
returnTopButton.classList.add(
|
|
7964
|
+
returnTopButton.classList.add('is-visible');
|
|
7937
7965
|
}
|
|
7938
7966
|
});
|
|
7939
7967
|
});
|
|
@@ -7953,73 +7981,77 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
7953
7981
|
SEARCH - /source/js/cagov/search.js
|
|
7954
7982
|
----------------------------------------- */
|
|
7955
7983
|
|
|
7956
|
-
window.addEventListener(
|
|
7984
|
+
window.addEventListener('load', () => {
|
|
7957
7985
|
const setSearchContainerAriaHidden = () => {
|
|
7958
7986
|
if (searchContainer) {
|
|
7959
7987
|
if (featuredsearch) {
|
|
7960
|
-
searchContainer.removeAttribute(
|
|
7961
|
-
document.querySelector(
|
|
7962
|
-
document.querySelector(
|
|
7988
|
+
searchContainer.removeAttribute('aria-hidden');
|
|
7989
|
+
document.querySelector('[name="q"]')?.removeAttribute('tabindex');
|
|
7990
|
+
document.querySelector('.gsc-search-button')?.removeAttribute('tabindex');
|
|
7963
7991
|
} else {
|
|
7964
|
-
searchContainer.setAttribute(
|
|
7992
|
+
searchContainer.setAttribute('aria-hidden', 'true');
|
|
7965
7993
|
}
|
|
7966
7994
|
}
|
|
7967
7995
|
};
|
|
7968
7996
|
const mobileControlVisible = () => {
|
|
7969
|
-
const mobileElement = document.querySelector(
|
|
7997
|
+
const mobileElement = document.querySelector('.global-header .mobile-controls');
|
|
7970
7998
|
if (mobileElement) {
|
|
7971
|
-
return getComputedStyle(mobileElement)
|
|
7999
|
+
return getComputedStyle(mobileElement).display !== 'none';
|
|
7972
8000
|
} else {
|
|
7973
8001
|
return false; // or whatever is supposed to be returned when there is no header
|
|
7974
8002
|
}
|
|
7975
8003
|
};
|
|
7976
8004
|
const removeSearchResults = () => {
|
|
7977
|
-
document.body.classList.remove(
|
|
7978
|
-
if (searchText)
|
|
7979
|
-
|
|
7980
|
-
|
|
7981
|
-
|
|
7982
|
-
|
|
8005
|
+
document.body.classList.remove('active-search');
|
|
8006
|
+
if (searchText) {
|
|
8007
|
+
searchText.value = '';
|
|
8008
|
+
}
|
|
8009
|
+
searchContainer?.classList.remove('active');
|
|
8010
|
+
searchContainer?.setAttribute('aria-hidden', 'true');
|
|
8011
|
+
document.querySelector('.search-results-container')?.classList.remove('visible');
|
|
8012
|
+
document.querySelectorAll('.ask-group').forEach(a => a.classList.remove('fade-out'));
|
|
7983
8013
|
if (!featuredsearch) {
|
|
7984
8014
|
// added aria expaned attr for accessibility
|
|
7985
|
-
document.querySelector(
|
|
8015
|
+
document.querySelector('button.first-level-link')?.setAttribute('aria-expanded', 'false');
|
|
7986
8016
|
setSearchAttr();
|
|
7987
8017
|
}
|
|
7988
8018
|
// fire a scroll event to help update headers if need be
|
|
7989
|
-
window.dispatchEvent(new CustomEvent(
|
|
8019
|
+
window.dispatchEvent(new CustomEvent('scroll'));
|
|
7990
8020
|
|
|
7991
8021
|
// document.dispatchEvent('cagov.searchresults.hide'); // ???
|
|
7992
8022
|
|
|
7993
|
-
if (mobileControlVisible())
|
|
8023
|
+
if (mobileControlVisible()) {
|
|
8024
|
+
setSearchContainerAriaHidden();
|
|
8025
|
+
}
|
|
7994
8026
|
};
|
|
7995
8027
|
|
|
7996
8028
|
/** @type {HTMLInputElement | null} */
|
|
7997
|
-
const searchText = document.querySelector(
|
|
7998
|
-
const searchInput = document.querySelector(
|
|
8029
|
+
const searchText = document.querySelector('.search-textfield'); // search textfield, unique
|
|
8030
|
+
const searchInput = document.querySelector('#head-search #Search .search-textfield'); // search textfield -- same as searchText ?
|
|
7999
8031
|
|
|
8000
|
-
const searchSubmit = document.querySelector(
|
|
8032
|
+
const searchSubmit = document.querySelector('#head-search #Search .gsc-search-button'); // search button, unique
|
|
8001
8033
|
|
|
8002
|
-
const searchReset = document.querySelector(
|
|
8034
|
+
const searchReset = document.querySelector('#head-search #Search .close-search'); // hide search form on subpages, unique
|
|
8003
8035
|
|
|
8004
|
-
const searchContainer = document.querySelector(
|
|
8005
|
-
const featuredsearch = searchContainer?.classList.contains(
|
|
8006
|
-
const searchactive = searchContainer?.classList.contains(
|
|
8036
|
+
const searchContainer = document.querySelector('#head-search'); // contains the search form
|
|
8037
|
+
const featuredsearch = searchContainer?.classList.contains('featured-search'); // only exists on the home page (featured search) layout, and /sample/navigation-full-width-utility.html
|
|
8038
|
+
const searchactive = searchContainer?.classList.contains('active'); // 'active' is applied on subpages when search form is visible
|
|
8007
8039
|
|
|
8008
|
-
const searchlabel = document.querySelector(
|
|
8040
|
+
const searchlabel = document.querySelector('#SearchInput'); // label for textfield
|
|
8009
8041
|
|
|
8010
8042
|
/** @type {HTMLElement | null} */
|
|
8011
|
-
const searchbox = document.querySelector(
|
|
8043
|
+
const searchbox = document.querySelector('.search-container:not(.featured-search)'); // only on subpages, unique, same as #head-search
|
|
8012
8044
|
|
|
8013
8045
|
// header, contains nav, search form, etc, unique
|
|
8014
|
-
const headerHeight = /** @type {HTMLElement} */document.querySelector(
|
|
8046
|
+
const headerHeight = /** @type {HTMLElement} */document.querySelector('.global-header')?.offsetHeight; // header height
|
|
8015
8047
|
|
|
8016
8048
|
/** @type {HTMLElement | null} */
|
|
8017
|
-
const utility = document.querySelector(
|
|
8049
|
+
const utility = document.querySelector('.utility-header'); // utility header, unique
|
|
8018
8050
|
const utilityHeight = utility?.offsetHeight || 0;
|
|
8019
8051
|
// utility header height
|
|
8020
8052
|
|
|
8021
8053
|
/** @type {NodeListOf<HTMLElement>} */
|
|
8022
|
-
const alertBanner = document.querySelectorAll(
|
|
8054
|
+
const alertBanner = document.querySelectorAll('.alert-banner'); // page can have multiple
|
|
8023
8055
|
|
|
8024
8056
|
let alertbannerHeight = 0;
|
|
8025
8057
|
// taking into account multiple alert banners
|
|
@@ -8027,31 +8059,31 @@ window.addEventListener("load", () => {
|
|
|
8027
8059
|
alertbannerHeight += oneBanner.offsetHeight;
|
|
8028
8060
|
});
|
|
8029
8061
|
|
|
8030
|
-
//const fullnav = document.querySelector(
|
|
8062
|
+
//const fullnav = document.querySelector('.top-level-nav'); // navigation ul tag, unique
|
|
8031
8063
|
|
|
8032
8064
|
// contains navigation and search form, unique
|
|
8033
8065
|
// Full width navigation
|
|
8034
|
-
const navigationHeight = document.querySelector(
|
|
8066
|
+
const navigationHeight = document.querySelector('.navigation-search')?.classList.contains('full-width-nav') ? 82 : 0;
|
|
8035
8067
|
if (searchText && searchContainer) {
|
|
8036
8068
|
// Unfreeze search width when blured.
|
|
8037
8069
|
const unfreezeSearchWidth = () => {
|
|
8038
|
-
searchContainer.classList.remove(
|
|
8039
|
-
document.querySelector(
|
|
8070
|
+
searchContainer.classList.remove('focus');
|
|
8071
|
+
document.querySelector('.search-container')?.classList.add('focus'); // search-container is unique
|
|
8040
8072
|
};
|
|
8041
|
-
searchText.addEventListener(
|
|
8042
|
-
searchText.addEventListener(
|
|
8073
|
+
searchText.addEventListener('blur', unfreezeSearchWidth, false);
|
|
8074
|
+
searchText.addEventListener('focus', unfreezeSearchWidth, false);
|
|
8043
8075
|
const chgHandler = function () {
|
|
8044
8076
|
if (this.value) {
|
|
8045
|
-
document.body.classList.add(
|
|
8077
|
+
document.body.classList.add('active-search');
|
|
8046
8078
|
}
|
|
8047
8079
|
};
|
|
8048
|
-
searchText.addEventListener(
|
|
8049
|
-
searchText.addEventListener(
|
|
8050
|
-
searchText.addEventListener(
|
|
8080
|
+
searchText.addEventListener('change', chgHandler, false);
|
|
8081
|
+
searchText.addEventListener('keyup', chgHandler, false);
|
|
8082
|
+
searchText.addEventListener('paste', chgHandler, false);
|
|
8051
8083
|
}
|
|
8052
8084
|
if (!featuredsearch) {
|
|
8053
8085
|
// added aria expaned attr for accessibility
|
|
8054
|
-
document.querySelector(
|
|
8086
|
+
document.querySelector('button.first-level-link')?.setAttribute('aria-expanded', 'false');
|
|
8055
8087
|
}
|
|
8056
8088
|
|
|
8057
8089
|
// search box top position
|
|
@@ -8066,73 +8098,75 @@ window.addEventListener("load", () => {
|
|
|
8066
8098
|
|
|
8067
8099
|
// have the close button remove search results and the applied classes
|
|
8068
8100
|
//resultsContainer.find('.close').on('click', removeSearchResults);
|
|
8069
|
-
document.querySelector(
|
|
8101
|
+
document.querySelector('.search-results-container .close')?.addEventListener('click', removeSearchResults, false);
|
|
8070
8102
|
|
|
8071
8103
|
//searchContainer.find('.close').on('click', removeSearchResults);
|
|
8072
|
-
document.querySelector(
|
|
8104
|
+
document.querySelector('#head-search .close')?.addEventListener('click', removeSearchResults, false);
|
|
8073
8105
|
|
|
8074
8106
|
// Our special nav icon which we need to hook into for starting the search
|
|
8075
8107
|
// $('#nav-item-search')
|
|
8076
8108
|
|
|
8077
8109
|
// so instead we are binding to what I'm assuming will always be the search
|
|
8078
|
-
const searchButton = document.querySelector(
|
|
8110
|
+
const searchButton = document.querySelector('#nav-item-search');
|
|
8079
8111
|
if (searchButton && searchText) {
|
|
8080
|
-
searchButton.addEventListener(
|
|
8112
|
+
searchButton.addEventListener('click', function (e) {
|
|
8081
8113
|
e.preventDefault();
|
|
8082
8114
|
searchText.focus();
|
|
8083
|
-
//
|
|
8115
|
+
//'.search-container:not(.featured-search)'
|
|
8084
8116
|
if (!featuredsearch && searchbox) {
|
|
8085
|
-
searchbox.classList.toggle(
|
|
8117
|
+
searchbox.classList.toggle('active');
|
|
8086
8118
|
}
|
|
8087
8119
|
|
|
8088
8120
|
// hide Search form if it's not active
|
|
8089
8121
|
if (searchactive) {
|
|
8090
8122
|
// added aria expanded attr for accessibility
|
|
8091
|
-
this.querySelector(
|
|
8123
|
+
this.querySelector('button')?.setAttribute('aria-expanded', 'true');
|
|
8092
8124
|
removeSearchAttr();
|
|
8093
8125
|
} else {
|
|
8094
8126
|
// added aria expaned attr for accessibility
|
|
8095
|
-
this.querySelector(
|
|
8127
|
+
this.querySelector('button')?.setAttribute('aria-expanded', 'false');
|
|
8096
8128
|
setSearchAttr();
|
|
8097
8129
|
}
|
|
8098
|
-
if (featuredsearch)
|
|
8130
|
+
if (featuredsearch) {
|
|
8131
|
+
removeSearchAttr();
|
|
8132
|
+
}
|
|
8099
8133
|
|
|
8100
8134
|
// let the user know the input box is where they should search
|
|
8101
8135
|
if (searchContainer) {
|
|
8102
|
-
searchContainer.classList.add(
|
|
8103
|
-
searchContainer.addEventListener(
|
|
8104
|
-
this.classList.remove(
|
|
8136
|
+
searchContainer.classList.add('play-animation');
|
|
8137
|
+
searchContainer.addEventListener('animationend', () => {
|
|
8138
|
+
this.classList.remove('play-animation');
|
|
8105
8139
|
});
|
|
8106
8140
|
}
|
|
8107
8141
|
}, false);
|
|
8108
8142
|
}
|
|
8109
8143
|
|
|
8110
8144
|
// Close search when close icon is clicked
|
|
8111
|
-
searchReset?.addEventListener(
|
|
8145
|
+
searchReset?.addEventListener('click', removeSearchResults);
|
|
8112
8146
|
const removeSearchAttr = () => {
|
|
8113
|
-
searchInput?.removeAttribute(
|
|
8114
|
-
searchInput?.removeAttribute(
|
|
8115
|
-
searchSubmit?.removeAttribute(
|
|
8116
|
-
searchSubmit?.removeAttribute(
|
|
8117
|
-
searchReset?.removeAttribute(
|
|
8118
|
-
searchReset?.removeAttribute(
|
|
8119
|
-
searchlabel?.removeAttribute(
|
|
8120
|
-
searchContainer?.removeAttribute(
|
|
8147
|
+
searchInput?.removeAttribute('tabindex');
|
|
8148
|
+
searchInput?.removeAttribute('aria-hidden');
|
|
8149
|
+
searchSubmit?.removeAttribute('tabindex');
|
|
8150
|
+
searchSubmit?.removeAttribute('aria-hidden');
|
|
8151
|
+
searchReset?.removeAttribute('tabindex');
|
|
8152
|
+
searchReset?.removeAttribute('aria-hidden');
|
|
8153
|
+
searchlabel?.removeAttribute('aria-hidden');
|
|
8154
|
+
searchContainer?.removeAttribute('aria-hidden');
|
|
8121
8155
|
};
|
|
8122
8156
|
const setSearchAttr = () => {
|
|
8123
|
-
searchInput?.setAttribute(
|
|
8124
|
-
searchInput?.setAttribute(
|
|
8125
|
-
searchSubmit?.setAttribute(
|
|
8126
|
-
searchSubmit?.setAttribute(
|
|
8127
|
-
searchReset?.setAttribute(
|
|
8128
|
-
searchReset?.setAttribute(
|
|
8129
|
-
searchlabel?.setAttribute(
|
|
8130
|
-
searchContainer?.setAttribute(
|
|
8157
|
+
searchInput?.setAttribute('tabindex', '-1');
|
|
8158
|
+
searchInput?.setAttribute('aria-hidden', 'true');
|
|
8159
|
+
searchSubmit?.setAttribute('tabindex', '-1');
|
|
8160
|
+
searchSubmit?.setAttribute('aria-hidden', 'true');
|
|
8161
|
+
searchReset?.setAttribute('tabindex', '-1');
|
|
8162
|
+
searchReset?.setAttribute('aria-hidden', 'true');
|
|
8163
|
+
searchlabel?.setAttribute('aria-hidden', 'true');
|
|
8164
|
+
searchContainer?.setAttribute('aria-hidden', 'true');
|
|
8131
8165
|
};
|
|
8132
8166
|
|
|
8133
8167
|
// Make Search form tabable if it's featured
|
|
8134
8168
|
if (searchContainer) {
|
|
8135
|
-
if (searchContainer.classList.contains(
|
|
8169
|
+
if (searchContainer.classList.contains('featured-search')) {
|
|
8136
8170
|
removeSearchAttr();
|
|
8137
8171
|
} else {
|
|
8138
8172
|
setSearchAttr();
|
|
@@ -8147,30 +8181,30 @@ window.addEventListener("load", () => {
|
|
|
8147
8181
|
};
|
|
8148
8182
|
|
|
8149
8183
|
// on alert close event
|
|
8150
|
-
document.querySelectorAll(
|
|
8151
|
-
oneClose.addEventListener(
|
|
8184
|
+
document.querySelectorAll('.alert-banner .close').forEach(oneClose => {
|
|
8185
|
+
oneClose.addEventListener('click', setSearchTop);
|
|
8152
8186
|
});
|
|
8153
8187
|
|
|
8154
8188
|
// Calculation search box top property on the scroll for the fixed nav
|
|
8155
|
-
window.addEventListener(
|
|
8189
|
+
window.addEventListener('scroll', () => {
|
|
8156
8190
|
if (!mobileControlVisible()) {
|
|
8157
8191
|
// setting timeout before calculating the search box top property otherwise it can take into account transitional values.
|
|
8158
8192
|
setTimeout(setSearchTop, 400);
|
|
8159
8193
|
|
|
8160
8194
|
// remove featured search on scroll in desktop
|
|
8161
|
-
const FeaturedSearch = document.querySelector(
|
|
8195
|
+
const FeaturedSearch = document.querySelector('nav ~ #head-search');
|
|
8162
8196
|
if (FeaturedSearch) {
|
|
8163
8197
|
if (document.body.scrollTop >= 100 || document.documentElement.scrollTop >= 100) {
|
|
8164
|
-
FeaturedSearch.classList.add(
|
|
8198
|
+
FeaturedSearch.classList.add('hidden-up');
|
|
8165
8199
|
} else {
|
|
8166
|
-
FeaturedSearch.classList.remove(
|
|
8200
|
+
FeaturedSearch.classList.remove('hidden-up');
|
|
8167
8201
|
}
|
|
8168
8202
|
}
|
|
8169
8203
|
}
|
|
8170
8204
|
});
|
|
8171
8205
|
|
|
8172
8206
|
// search box top position if browser window is resized
|
|
8173
|
-
window.addEventListener(
|
|
8207
|
+
window.addEventListener('resize', () => {
|
|
8174
8208
|
setSearchTop();
|
|
8175
8209
|
setSearchContainerAriaHidden();
|
|
8176
8210
|
});
|
|
@@ -8195,19 +8229,23 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
8195
8229
|
SIDE NAVIGATION - /source/js/cagov/side-navigation.js
|
|
8196
8230
|
----------------------------------------- */
|
|
8197
8231
|
|
|
8198
|
-
window.addEventListener(
|
|
8199
|
-
const siteHeader = document.querySelector(
|
|
8200
|
-
const sidenavigation = document.querySelector(
|
|
8201
|
-
if (!sidenavigation || !siteHeader)
|
|
8202
|
-
|
|
8203
|
-
|
|
8204
|
-
sidenavigation.
|
|
8205
|
-
const
|
|
8206
|
-
|
|
8207
|
-
|
|
8232
|
+
window.addEventListener('load', () => {
|
|
8233
|
+
const siteHeader = document.querySelector('header');
|
|
8234
|
+
const sidenavigation = document.querySelector('.side-navigation');
|
|
8235
|
+
if (!sidenavigation || !siteHeader) {
|
|
8236
|
+
return;
|
|
8237
|
+
}
|
|
8238
|
+
const allSidenavLinks = sidenavigation.querySelectorAll('.side-navigation a');
|
|
8239
|
+
const mainContentSideNavCont = sidenavigation.closest('div');
|
|
8240
|
+
sidenavigation.setAttribute('id', 'side-navigation');
|
|
8241
|
+
const topposition = localStorage.getItem('sidebar-scroll');
|
|
8242
|
+
const mobileCntls = document.querySelector('.global-header .mobile-controls');
|
|
8243
|
+
if (!mobileCntls) {
|
|
8244
|
+
return;
|
|
8245
|
+
}
|
|
8208
8246
|
let mobileControlsDisplay = window.getComputedStyle(mobileCntls).display; // Side nav height vs viewport
|
|
8209
8247
|
const siteHeaderHeight = siteHeader ? siteHeader.clientHeight : 0;
|
|
8210
|
-
const mobileView$3 = () => getComputedStyle(mobileCntls)
|
|
8248
|
+
const mobileView$3 = () => getComputedStyle(mobileCntls).display !== 'none';
|
|
8211
8249
|
let timeout = 0;
|
|
8212
8250
|
const delay = 250; // delay between calls
|
|
8213
8251
|
/** @type {HTMLElement} */
|
|
@@ -8215,41 +8253,41 @@ window.addEventListener("load", () => {
|
|
|
8215
8253
|
const createMobileSideNavButton = () => {
|
|
8216
8254
|
// get first side nav element
|
|
8217
8255
|
/** @type {HTMLAnchorElement | null} */
|
|
8218
|
-
const sidenavTItle = document.querySelector(
|
|
8256
|
+
const sidenavTItle = document.querySelector('.side-navigation a, .sidenav');
|
|
8219
8257
|
if (sidenavTItle) {
|
|
8220
8258
|
// get text for the button for first side nav element
|
|
8221
8259
|
let btnText = sidenavTItle.innerText;
|
|
8222
|
-
const btnTextSpan = sidenavTItle.querySelector(
|
|
8223
|
-
btnText = btnText.replace(btnTextSpan,
|
|
8260
|
+
const btnTextSpan = sidenavTItle.querySelector('span')?.innerText || ''; // removing the sr-only span and it's content
|
|
8261
|
+
btnText = btnText.replace(btnTextSpan, '').trim();
|
|
8224
8262
|
// create button container
|
|
8225
|
-
const sidenavMobile = document.createElement(
|
|
8226
|
-
sidenavMobile.setAttribute(
|
|
8227
|
-
const sidenavMobileCont = document.createElement(
|
|
8228
|
-
sidenavMobileCont.setAttribute(
|
|
8263
|
+
const sidenavMobile = document.createElement('aside');
|
|
8264
|
+
sidenavMobile.setAttribute('class', 'sidenav-mobile-btn');
|
|
8265
|
+
const sidenavMobileCont = document.createElement('div');
|
|
8266
|
+
sidenavMobileCont.setAttribute('class', 'container');
|
|
8229
8267
|
sidenavMobile.append(sidenavMobileCont);
|
|
8230
8268
|
// create button
|
|
8231
|
-
sidenavToggleBtn = document.createElement(
|
|
8232
|
-
sidenavToggleBtn.setAttribute(
|
|
8233
|
-
sidenavToggleBtn.setAttribute(
|
|
8234
|
-
sidenavToggleBtn.setAttribute(
|
|
8269
|
+
sidenavToggleBtn = document.createElement('button');
|
|
8270
|
+
sidenavToggleBtn.setAttribute('class', 'sidenav-toggle');
|
|
8271
|
+
sidenavToggleBtn.setAttribute('aria-expanded', 'false');
|
|
8272
|
+
sidenavToggleBtn.setAttribute('aria-controls', 'side-navigation');
|
|
8235
8273
|
sidenavToggleBtn.innerText = btnText;
|
|
8236
8274
|
// create icon
|
|
8237
|
-
const arrowIcon = document.createElement(
|
|
8238
|
-
arrowIcon.setAttribute(
|
|
8239
|
-
arrowIcon.setAttribute(
|
|
8275
|
+
const arrowIcon = document.createElement('span');
|
|
8276
|
+
arrowIcon.setAttribute('aria-hidden', 'true');
|
|
8277
|
+
arrowIcon.setAttribute('class', 'ca-gov-icon-caret-down');
|
|
8240
8278
|
sidenavToggleBtn.append(arrowIcon);
|
|
8241
8279
|
// append button into the header
|
|
8242
8280
|
sidenavMobileCont.append(sidenavToggleBtn);
|
|
8243
8281
|
siteHeader.after(sidenavMobile);
|
|
8244
8282
|
// add click event
|
|
8245
|
-
sidenavToggleBtn.addEventListener(
|
|
8283
|
+
sidenavToggleBtn.addEventListener('click', toggleSideNav);
|
|
8246
8284
|
}
|
|
8247
8285
|
};
|
|
8248
8286
|
const createmobileSideNavDiv = () => {
|
|
8249
|
-
mobileSideNavDiv = document.createElement(
|
|
8250
|
-
mobileSideNavDiv.setAttribute(
|
|
8251
|
-
mobileSideNavCont = document.createElement(
|
|
8252
|
-
mobileSideNavCont.setAttribute(
|
|
8287
|
+
mobileSideNavDiv = document.createElement('aside');
|
|
8288
|
+
mobileSideNavDiv.setAttribute('class', 'mobile-sidenav');
|
|
8289
|
+
mobileSideNavCont = document.createElement('div');
|
|
8290
|
+
mobileSideNavCont.setAttribute('class', 'container');
|
|
8253
8291
|
mobileSideNavDiv.append(mobileSideNavCont);
|
|
8254
8292
|
siteHeader.after(mobileSideNavDiv);
|
|
8255
8293
|
};
|
|
@@ -8259,40 +8297,41 @@ window.addEventListener("load", () => {
|
|
|
8259
8297
|
if (mobileSideNavCont) {
|
|
8260
8298
|
mobileSideNavCont.append(sidenavigation);
|
|
8261
8299
|
}
|
|
8262
|
-
sidenavigation.setAttribute(
|
|
8300
|
+
sidenavigation.setAttribute('aria-hidden', 'true');
|
|
8263
8301
|
allSidenavLinks?.forEach(el => {
|
|
8264
|
-
el.setAttribute(
|
|
8302
|
+
el.setAttribute('tabindex', '-1');
|
|
8265
8303
|
});
|
|
8266
8304
|
};
|
|
8267
8305
|
|
|
8268
8306
|
// DESKTOP Side nav
|
|
8269
8307
|
const moveSideNavToMainContent = () => {
|
|
8270
|
-
if (sidenavigation === mainContentSideNavCont)
|
|
8271
|
-
|
|
8308
|
+
if (sidenavigation === mainContentSideNavCont) {
|
|
8309
|
+
return; //Prevents an error if sidenav is not set up correctly
|
|
8310
|
+
}
|
|
8272
8311
|
mainContentSideNavCont?.append(sidenavigation);
|
|
8273
|
-
sidenavigation.removeAttribute(
|
|
8312
|
+
sidenavigation.removeAttribute('aria-hidden');
|
|
8274
8313
|
allSidenavLinks?.forEach(el => {
|
|
8275
|
-
el.removeAttribute(
|
|
8314
|
+
el.removeAttribute('tabindex');
|
|
8276
8315
|
});
|
|
8277
8316
|
};
|
|
8278
8317
|
|
|
8279
8318
|
// Mobile Side Nav Button click function
|
|
8280
8319
|
const toggleSideNav = () => {
|
|
8281
|
-
mobileSideNavDiv.classList.toggle(
|
|
8320
|
+
mobileSideNavDiv.classList.toggle('visible');
|
|
8282
8321
|
// Open
|
|
8283
|
-
if (mobileSideNavDiv.classList.contains(
|
|
8284
|
-
sidenavigation.removeAttribute(
|
|
8285
|
-
sidenavToggleBtn.setAttribute(
|
|
8322
|
+
if (mobileSideNavDiv.classList.contains('visible')) {
|
|
8323
|
+
sidenavigation.removeAttribute('aria-hidden');
|
|
8324
|
+
sidenavToggleBtn.setAttribute('aria-expanded', 'true');
|
|
8286
8325
|
allSidenavLinks?.forEach(el => {
|
|
8287
|
-
el.removeAttribute(
|
|
8326
|
+
el.removeAttribute('tabindex');
|
|
8288
8327
|
});
|
|
8289
8328
|
|
|
8290
8329
|
// Closed
|
|
8291
8330
|
} else {
|
|
8292
|
-
sidenavToggleBtn.setAttribute(
|
|
8293
|
-
sidenavigation.setAttribute(
|
|
8331
|
+
sidenavToggleBtn.setAttribute('aria-expanded', 'false');
|
|
8332
|
+
sidenavigation.setAttribute('aria-hidden', 'true');
|
|
8294
8333
|
allSidenavLinks?.forEach(el => {
|
|
8295
|
-
el.setAttribute(
|
|
8334
|
+
el.setAttribute('tabindex', '-1');
|
|
8296
8335
|
});
|
|
8297
8336
|
}
|
|
8298
8337
|
};
|
|
@@ -8300,33 +8339,37 @@ window.addEventListener("load", () => {
|
|
|
8300
8339
|
// Set active class on nav-heading links
|
|
8301
8340
|
function addActiveClass() {
|
|
8302
8341
|
/** @type {NodeListOf<HTMLAnchorElement>} */
|
|
8303
|
-
const active_link = document.querySelectorAll(
|
|
8342
|
+
const active_link = document.querySelectorAll('a.nav-heading'),
|
|
8304
8343
|
len = active_link.length,
|
|
8305
|
-
full_path = location.href.split(
|
|
8306
|
-
for (let i = 0; i < len; i++)
|
|
8344
|
+
full_path = location.href.split('#')[0]; //Ignore hashes? // Loop through each link.
|
|
8345
|
+
for (let i = 0; i < len; i++) {
|
|
8346
|
+
if (active_link[i].href.split('#')[0] === full_path) {
|
|
8347
|
+
active_link[i].className += ' active';
|
|
8348
|
+
}
|
|
8349
|
+
}
|
|
8307
8350
|
}
|
|
8308
8351
|
const sidenavOverflow = () => {
|
|
8309
8352
|
if (!mobileView$3()) {
|
|
8310
8353
|
const viewportheight = document.documentElement.clientHeight;
|
|
8311
8354
|
const viewportMinusHeader = viewportheight - siteHeaderHeight - 100;
|
|
8312
|
-
if (viewportMinusHeader <= (document.querySelector(
|
|
8313
|
-
sidenavigation.classList.add(
|
|
8355
|
+
if (viewportMinusHeader <= (document.querySelector('.side-navigation')?.clientHeight || 0)) {
|
|
8356
|
+
sidenavigation.classList.add('overflow-auto'); // sidenavigation.setAttribute('style', 'max-height:' + viewportMinusHeader + 'px')
|
|
8314
8357
|
} else {
|
|
8315
|
-
sidenavigation.classList.remove(
|
|
8316
|
-
sidenavigation.removeAttribute(
|
|
8358
|
+
sidenavigation.classList.remove('overflow-auto');
|
|
8359
|
+
sidenavigation.removeAttribute('style');
|
|
8317
8360
|
}
|
|
8318
|
-
if ([...sidenavigation.classList].includes(
|
|
8319
|
-
sidenavigation.setAttribute(
|
|
8361
|
+
if ([...sidenavigation.classList].includes('overflow-auto')) {
|
|
8362
|
+
sidenavigation.setAttribute('style', `max-height:${viewportMinusHeader}px`);
|
|
8320
8363
|
}
|
|
8321
8364
|
} else {
|
|
8322
|
-
sidenavigation.classList.remove(
|
|
8323
|
-
sidenavigation.removeAttribute(
|
|
8365
|
+
sidenavigation.classList.remove('overflow-auto');
|
|
8366
|
+
sidenavigation.removeAttribute('style');
|
|
8324
8367
|
} // Remebemering scrolling position
|
|
8325
8368
|
if (topposition !== null) {
|
|
8326
8369
|
sidenavigation.scrollTop = parseInt(topposition, 10);
|
|
8327
8370
|
}
|
|
8328
|
-
window.addEventListener(
|
|
8329
|
-
localStorage.setItem(
|
|
8371
|
+
window.addEventListener('beforeunload', () => {
|
|
8372
|
+
localStorage.setItem('sidebar-scroll', sidenavigation.scrollTop.toString());
|
|
8330
8373
|
});
|
|
8331
8374
|
};
|
|
8332
8375
|
|
|
@@ -8334,16 +8377,16 @@ window.addEventListener("load", () => {
|
|
|
8334
8377
|
addActiveClass();
|
|
8335
8378
|
createmobileSideNavDiv();
|
|
8336
8379
|
createMobileSideNavButton();
|
|
8337
|
-
if (mobileControlsDisplay
|
|
8380
|
+
if (mobileControlsDisplay === 'block') {
|
|
8338
8381
|
moveSideNavToHeader();
|
|
8339
8382
|
}
|
|
8340
8383
|
// on resize
|
|
8341
|
-
window.addEventListener(
|
|
8384
|
+
window.addEventListener('resize', () => {
|
|
8342
8385
|
mobileControlsDisplay = getComputedStyle(mobileCntls).display; // clear the timeout
|
|
8343
8386
|
|
|
8344
|
-
window.clearTimeout(timeout); // start timing for event
|
|
8387
|
+
window.clearTimeout(timeout); // start timing for event 'completion'
|
|
8345
8388
|
timeout = window.setTimeout(sidenavOverflow, delay); // if mobile
|
|
8346
|
-
if (mobileControlsDisplay
|
|
8389
|
+
if (mobileControlsDisplay === 'block') {
|
|
8347
8390
|
moveSideNavToHeader(); // if desctop
|
|
8348
8391
|
} else {
|
|
8349
8392
|
moveSideNavToMainContent();
|
|
@@ -8371,20 +8414,20 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
8371
8414
|
// Displaying HTML Source code in HTML Page
|
|
8372
8415
|
(() => {
|
|
8373
8416
|
const entityMap = {
|
|
8374
|
-
|
|
8375
|
-
|
|
8376
|
-
|
|
8377
|
-
'"':
|
|
8378
|
-
|
|
8379
|
-
|
|
8417
|
+
'&': '&',
|
|
8418
|
+
'<': '<',
|
|
8419
|
+
'>': '>',
|
|
8420
|
+
'"': '"',
|
|
8421
|
+
'\'': ''',
|
|
8422
|
+
'/': '/'
|
|
8380
8423
|
};
|
|
8381
8424
|
const escapeHtml = ( /** @type {string} */string) => string.replace(/[&<>"'/]/g, s => entityMap[s]);
|
|
8382
8425
|
function copyCode( /** @type {Element} */btnElem) {
|
|
8383
8426
|
const codeblock = btnElem.previousElementSibling;
|
|
8384
8427
|
if (codeblock) {
|
|
8385
8428
|
// copy the text
|
|
8386
|
-
if (codeblock.tagName.toLowerCase()
|
|
8387
|
-
const code = codeblock.querySelector(
|
|
8429
|
+
if (codeblock.tagName.toLowerCase() === 'pre') {
|
|
8430
|
+
const code = codeblock.querySelector('code')?.innerText;
|
|
8388
8431
|
if (code) {
|
|
8389
8432
|
navigator.clipboard.writeText(code);
|
|
8390
8433
|
}
|
|
@@ -8398,28 +8441,29 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
8398
8441
|
window.getSelection()?.removeAllRanges();
|
|
8399
8442
|
window.getSelection()?.addRange(range);
|
|
8400
8443
|
// replace the button icon
|
|
8401
|
-
//btnElem.querySelector(
|
|
8402
|
-
//btnElem.querySelector(
|
|
8444
|
+
//btnElem.querySelector('span').classList.remove('ca-gov-icon-copy');
|
|
8445
|
+
//btnElem.querySelector('span').classList.add('ca-gov-icon-check-mark');
|
|
8403
8446
|
btnElem.innerHTML = '<span class="ca-gov-icon-check-mark"></span> Code copied';
|
|
8404
8447
|
}
|
|
8405
8448
|
}
|
|
8406
|
-
window.addEventListener(
|
|
8407
|
-
const codeblock = document.querySelectorAll(
|
|
8449
|
+
window.addEventListener('load', () => {
|
|
8450
|
+
const codeblock = document.querySelectorAll('pre code, textarea.sourcecode');
|
|
8451
|
+
const clickEvent = function () {
|
|
8452
|
+
copyCode( /** @type {HTMLElement} */this);
|
|
8453
|
+
};
|
|
8408
8454
|
for (let i = 0, len = codeblock.length; i < len; i++) {
|
|
8409
8455
|
const dom = codeblock[i];
|
|
8410
|
-
if (dom.tagName.toLowerCase()
|
|
8456
|
+
if (dom.tagName.toLowerCase() === 'code') {
|
|
8411
8457
|
let html = dom.innerHTML;
|
|
8412
8458
|
html = escapeHtml(html);
|
|
8413
8459
|
dom.innerHTML = html;
|
|
8414
8460
|
}
|
|
8415
8461
|
// Create a 'copy code' button, insert it after the <pre> tag
|
|
8416
|
-
const newDiv = document.createElement(
|
|
8417
|
-
newDiv.onclick =
|
|
8418
|
-
|
|
8419
|
-
|
|
8420
|
-
|
|
8421
|
-
newDiv.innerHTML = "<span class='ca-gov-icon-copy'></span> Copy code";
|
|
8422
|
-
if (dom.tagName.toLowerCase() == "code") {
|
|
8462
|
+
const newDiv = document.createElement('button');
|
|
8463
|
+
newDiv.onclick = clickEvent;
|
|
8464
|
+
newDiv.classList.add('btn', 'btn-outline-primary');
|
|
8465
|
+
newDiv.innerHTML = '<span class="ca-gov-icon-copy"></span> Copy code';
|
|
8466
|
+
if (dom.tagName.toLowerCase() === 'code') {
|
|
8423
8467
|
dom.parentElement?.after(newDiv);
|
|
8424
8468
|
} else {
|
|
8425
8469
|
dom.after(newDiv);
|
|
@@ -8444,13 +8488,15 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
8444
8488
|
TABS -- custom accessible tabs
|
|
8445
8489
|
----------------------------------------- */
|
|
8446
8490
|
|
|
8447
|
-
window.addEventListener(
|
|
8491
|
+
window.addEventListener('load', () => {
|
|
8448
8492
|
// Get relevant elements and collections
|
|
8449
|
-
const allTabs = document.querySelectorAll(
|
|
8493
|
+
const allTabs = document.querySelectorAll('.tabs');
|
|
8450
8494
|
allTabs.forEach(tabbed => {
|
|
8451
|
-
const tablist = tabbed.querySelector(
|
|
8452
|
-
if (!tablist)
|
|
8453
|
-
|
|
8495
|
+
const tablist = tabbed.querySelector('ul');
|
|
8496
|
+
if (!tablist) {
|
|
8497
|
+
return;
|
|
8498
|
+
}
|
|
8499
|
+
const tabs = tablist.querySelectorAll('a');
|
|
8454
8500
|
/** @type {NodeListOf<HTMLElement>} */
|
|
8455
8501
|
const panels = tabbed.querySelectorAll('[id^="section"]');
|
|
8456
8502
|
|
|
@@ -8463,11 +8509,11 @@ window.addEventListener("load", () => {
|
|
|
8463
8509
|
const switchTab = (oldTab, newTab) => {
|
|
8464
8510
|
newTab.focus();
|
|
8465
8511
|
// Make the active tab focusable by the user (Tab key)
|
|
8466
|
-
newTab.removeAttribute(
|
|
8512
|
+
newTab.removeAttribute('tabindex');
|
|
8467
8513
|
// Set the selected state
|
|
8468
|
-
newTab.setAttribute(
|
|
8469
|
-
oldTab.removeAttribute(
|
|
8470
|
-
oldTab.setAttribute(
|
|
8514
|
+
newTab.setAttribute('aria-selected', 'true');
|
|
8515
|
+
oldTab.removeAttribute('aria-selected');
|
|
8516
|
+
oldTab.setAttribute('tabindex', '-1');
|
|
8471
8517
|
// Get the indices of the new and old tabs to find the correct
|
|
8472
8518
|
// tab panels to show and hide
|
|
8473
8519
|
const index = Array.prototype.indexOf.call(tabs, newTab);
|
|
@@ -8477,52 +8523,52 @@ window.addEventListener("load", () => {
|
|
|
8477
8523
|
};
|
|
8478
8524
|
|
|
8479
8525
|
// Add the tablist role to the first <ul> in the .tabbed container
|
|
8480
|
-
tablist.setAttribute(
|
|
8526
|
+
tablist.setAttribute('role', 'tablist');
|
|
8481
8527
|
|
|
8482
8528
|
// Add semantics are remove user focusability for each tab
|
|
8483
8529
|
|
|
8484
8530
|
tabs.forEach((tab, i) => {
|
|
8485
|
-
tab.setAttribute(
|
|
8486
|
-
tab.setAttribute(
|
|
8531
|
+
tab.setAttribute('role', 'tab');
|
|
8532
|
+
tab.setAttribute('tabindex', '-1');
|
|
8487
8533
|
/** @type {Element} */
|
|
8488
|
-
tab.parentNode.setAttribute(
|
|
8534
|
+
tab.parentNode.setAttribute('role', 'presentation');
|
|
8489
8535
|
|
|
8490
8536
|
// Handle clicking of tabs for mouse users
|
|
8491
|
-
tab.addEventListener(
|
|
8537
|
+
tab.addEventListener('click', e => {
|
|
8492
8538
|
e.preventDefault();
|
|
8493
|
-
const currentTab = tablist.querySelector(
|
|
8539
|
+
const currentTab = tablist.querySelector('[aria-selected]');
|
|
8494
8540
|
if (currentTab && e.currentTarget !== currentTab) {
|
|
8495
8541
|
switchTab(currentTab, /** @type {HTMLElement} */e.currentTarget);
|
|
8496
8542
|
}
|
|
8497
8543
|
});
|
|
8498
8544
|
|
|
8499
8545
|
// Handle keydown events for keyboard users
|
|
8500
|
-
tab.addEventListener(
|
|
8546
|
+
tab.addEventListener('keydown', e => {
|
|
8501
8547
|
// Get the index of the current tab in the tabs node list
|
|
8502
8548
|
const index = Array.prototype.indexOf.call(tabs, e.currentTarget);
|
|
8503
8549
|
// Work out which key the user is pressing and
|
|
8504
8550
|
// Calculate the new tab's index where appropriate
|
|
8505
|
-
const dir = [
|
|
8551
|
+
const dir = ['ArrowLeft', 'Left'].includes(e.key) ? index - 1 : ['ArrowRight', 'Right'].includes(e.key) ? index + 1 : ['ArrowDown', 'Down'].includes(e.key) ? 'down' : null;
|
|
8506
8552
|
if (dir !== null) {
|
|
8507
8553
|
e.preventDefault();
|
|
8508
8554
|
// If the down key is pressed, move focus to the open panel,
|
|
8509
8555
|
// otherwise switch to the adjacent tab
|
|
8510
|
-
dir ===
|
|
8556
|
+
dir === 'down' ? panels[i].focus() : tabs[dir] ? switchTab( /** @type {Element} */e.currentTarget, tabs[dir]) : void 0;
|
|
8511
8557
|
}
|
|
8512
8558
|
});
|
|
8513
8559
|
});
|
|
8514
8560
|
|
|
8515
8561
|
// Add tab panel semantics and hide them all
|
|
8516
8562
|
panels.forEach((panel, i) => {
|
|
8517
|
-
panel.setAttribute(
|
|
8518
|
-
panel.setAttribute(
|
|
8519
|
-
panel.setAttribute(
|
|
8563
|
+
panel.setAttribute('role', 'tabpanel');
|
|
8564
|
+
panel.setAttribute('tabindex', '-1');
|
|
8565
|
+
panel.setAttribute('aria-label', tabs[i].innerText);
|
|
8520
8566
|
panel.hidden = true;
|
|
8521
8567
|
});
|
|
8522
8568
|
|
|
8523
8569
|
// Initially activate the first tab and reveal the first tab panel
|
|
8524
|
-
tabs[0].removeAttribute(
|
|
8525
|
-
tabs[0].setAttribute(
|
|
8570
|
+
tabs[0].removeAttribute('tabindex');
|
|
8571
|
+
tabs[0].setAttribute('aria-selected', 'true');
|
|
8526
8572
|
panels[0].hidden = false;
|
|
8527
8573
|
});
|
|
8528
8574
|
});
|
|
@@ -8600,7 +8646,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
8600
8646
|
!*** ./src/scripts/index.js ***!
|
|
8601
8647
|
\******************************/
|
|
8602
8648
|
__webpack_require__.r(__webpack_exports__);
|
|
8603
|
-
/* harmony import */ var bootstrap_dist_js_bootstrap_bundle_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! bootstrap/dist/js/bootstrap.bundle.js */ "
|
|
8649
|
+
/* harmony import */ var bootstrap_dist_js_bootstrap_bundle_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! bootstrap/dist/js/bootstrap.bundle.js */ "./node_modules/bootstrap/dist/js/bootstrap.bundle.js");
|
|
8604
8650
|
/* harmony import */ var _components_fixed_header_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/fixed-header.js */ "./src/scripts/components/fixed-header.js");
|
|
8605
8651
|
/* harmony import */ var _components_accordion_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/accordion.js */ "./src/scripts/components/accordion.js");
|
|
8606
8652
|
/* harmony import */ var _components_accordion_list_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/accordion-list.js */ "./src/scripts/components/accordion-list.js");
|