@hydrogen-design-system/component-accordion
Version:
Hydrogen's accordion component.
175 lines (148 loc) • 7.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.h2AccordionToggleHandler0043 = h2AccordionToggleHandler0043;
exports.h2AccordionToggleEvent0043 = h2AccordionToggleEvent0043;
exports.h2AccordionToggle0043 = h2AccordionToggle0043;
// Hydrogen / Component / Module JS
// This file is designed to be the location in which all scripting for the component's functionality exists. This file should export all relevant functionality so that it can be imported by Hydrogen and other systems.
// Development Notes:
// - please ensure all functions are defined with "0043" at the end of their name.
// - please ensure all references to the parent component's selector also include "0043" (e.g. [data-h2-accordion-0043])
// This is so that when the component is built, it produces a version-locked set of code that can me manually imported to override newer versions.
// - please ensure that when event listeners are added to a trigger, that the script is checking for the system variable (see an example below).
// System Check Script
function h2AccordionSystemCheck0043(version, target, targetComponentType, targetComponentTrigger, errorMessage) {
var triggers = [];
if (target == "all") {
// Determine where the module is being loaded from. If the module is being loaded from the system, the event should only be applied to the component when it exists within the system's enabler selector (data-h2-system). This check ensures that any code that is loaded by the system is instanced and can be overridden by previous versions if need be.
if (version == "latest") {
if (targetComponentTrigger != null) {
triggers = document.querySelectorAll(targetComponentType + " " + targetComponentTrigger);
return triggers;
} else {
triggers = document.querySelectorAll(targetComponentType);
return triggers;
}
} else if (version == null || version == false || version == "") {
console.log("Hydrogen (" + errorMessage + "): no version value has been specified. Please specify \"latest\" or a version number.");
return false;
} else {
var components = [];
if (targetComponentTrigger != null) {
components = document.querySelectorAll(targetComponentType + " " + targetComponentTrigger);
} else {
components = document.querySelectorAll(targetComponentType);
}
components.forEach(function (component) {
if (component.closest("[data-h2-system]").getAttribute("data-h2-system") == version) {
triggers.push(component);
}
});
if (triggers.length == 0) {
console.log("Hydrogen (" + errorMessage + "): no components were found within the system version you've specified. Please double check the version value being passed matches the version of the system installation on your project.");
return false;
} else {
return triggers;
}
}
} else if (target == null || target == false || target == "") {
console.log("Hydrogen (" + errorMessage + "): no target has been specified. Please pass an HTMLelement object, a NodeList of elements, or \"all\".");
return false;
} else {
// Check to see if the target is an HTMLelement object.
if (target.nodeType == Node.ELEMENT_NODE) {
if (targetComponentTrigger != null) {
triggers.push(target.querySelector(targetComponentTrigger));
return triggers;
} else {
triggers.push(target);
return triggers;
}
} else {
// Check to see if the target is a NodeList.
if (NodeList.prototype.isPrototypeOf(target) == true) {
target.forEach(function (trigger) {
if (targetComponentTrigger != null) {
triggers.push(trigger.querySelector(targetComponentTrigger));
} else {
triggers.push(trigger);
}
});
return triggers;
} else {
// The target isn't a usable value.
console.log("Hydrogen (" + errorMessage + "): you've passed an invalid target format. Targets must be a valid HTMLelement object or NodeList of elements.");
return false;
}
}
}
} // Toggle Scripts
// Handler
function h2AccordionToggleHandler0043(accordion) {
// Get the trigger from the accordion - make sure we're not getting nested accordions.
var children = accordion.children;
var trigger = "";
var content = "";
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.hasAttribute("data-h2-accordion-trigger")) {
trigger = child;
} else if (child.hasAttribute("data-h2-accordion-content")) {
content = child;
}
} // Set the trigger as the default focus target. This will be manually checked later in the event the user has specified one.
var focusTarget = trigger; // Check to see if the accordion is active or not.
if (accordion.classList.contains("h2-active") == false) {
// Open the accordion and set the proper accessibility features.
trigger.setAttribute("aria-expanded", true);
accordion.classList.add("h2-active");
content.setAttribute("aria-hidden", false); // Check for a manual focus target and ensure it's focusable, and then focus it.
if (content.querySelector("[data-h2-focus]") != null) {
focusTarget = content.querySelector("[data-h2-focus]");
focusTarget.setAttribute("tabindex", "0");
} else {
// Find the focusable items in the content and focus the first item.
var focusList = content.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])"); // Ensure that there are in fact items to be focused in the content.
if (focusList.length != 0) {
focusTarget = focusList[0];
}
}
focusTarget.focus();
return true;
} else {
// Check for a manual focus target and ensure it's removed from the tab order.
if (content.querySelector("[data-h2-focus]") != null) {
content.querySelector("[data-h2-focus]").setAttribute("tabindex", "-1");
} // Close the accordion and remove accessibility values.
trigger.setAttribute("aria-expanded", false);
accordion.classList.remove("h2-active");
content.setAttribute("aria-hidden", true);
return false;
}
} // Event
function h2AccordionToggleEvent0043(e) {
// Get the accordion's trigger.
var trigger = e.currentTarget; // Get the accordion itself.
var accordion = trigger.closest("[data-h2-accordion-0043]"); // Prevent the trigger's default behaviour.
e.preventDefault(); // Check to see if the accordion has been manually disabled.
if (accordion.hasAttribute("data-h2-no-js") == false) {
// Activate the accordion.
h2AccordionToggleHandler0043(accordion);
}
} // Event Listener
function h2AccordionToggle0043(targetAccordions) {
var systemVersion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "latest";
// Set the system version check variables.
var targetComponentType = "[data-h2-accordion-0043]";
var targetComponentTrigger = "[data-h2-accordion-trigger]";
var errorMessage = "Accordion / Event Listener Script"; // Run the system version check.
var accordions = h2AccordionSystemCheck0043(systemVersion, targetAccordions, targetComponentType, targetComponentTrigger, errorMessage); // Loop through the triggers, and add the event trigger script.
if (accordions != false) {
accordions.forEach(function (accordion) {
accordion.removeEventListener("click", h2AccordionToggleEvent0043);
accordion.addEventListener("click", h2AccordionToggleEvent0043);
});
}
} // Exports