@graupl/graupl 1.0.0-alpha.15 → 1.0.0-alpha.16

package/src/js/accordion/AccordionItem.js

@@ -0,0 +1,496 @@
+/**
+ * @file
+ * The Accordion Item class.
+ */
+
+/* global Accordion */
+
+import { isTag, isValidType } from "../validate.js";
+import { addClass, removeClass } from "../domHelpers.js";
+
+/**
+ * Creates a new accordion item.
+ *
+ * @class
+ */
+class AccordionItem {
+  /**
+   * The HTML elements for the accordion item in the DOM.
+   *
+   * @protected
+   *
+   * @type {Object<HTMLElement>}
+   *
+   * @property {HTMLElement} item    - The accordion item element.
+   * @property {HTMLElement} toggle  - The controller element.
+   * @property {HTMLElement} header  - The header element.
+   * @property {HTMLElement} content - The content element.
+   */
+  _dom = {
+    item: null,
+    toggle: null,
+    header: null,
+    content: null,
+  };
+
+  /**
+   * The declared graupl accordion elements within the accordion item.
+   *
+   * @protected
+   *
+   * @type {Object<Accordion>}
+   *
+   * @property {Accordion} parentAccordion - The parent accordion containing this item.
+   */
+  _elements = {
+    parentAccordion: null,
+  };
+
+  /**
+   * The open state of the accordion.
+   *
+   * @protected
+   *
+   * @type {boolean}
+   */
+  _open = false;
+
+  /**
+   * The locked state of the accordions item.
+   *
+   * If locked, the accordion item cannot be closed.
+   *
+   * @protected
+   *
+   * @type {boolean}
+   */
+  _locked = false;
+
+  /**
+   * The event that is triggered when the accordion item is shown.
+   *
+   * @protected
+   *
+   * @event grauplAccordionItemExpand
+   *
+   * @type {CustomEvent}
+   *
+   * @property {boolean}               bubbles - A flag to bubble the event.
+   * @property {Object<AccordionItem>} detail  - The details object containing the Accordion item itself.
+   */
+  _expandEvent = new CustomEvent("grauplAccordionItemExpand", {
+    bubbles: true,
+    detail: { item: this },
+  });
+
+  /**
+   * The event that is triggered when the accordion item is hidden.
+   *
+   * @protected
+   *
+   * @event grauplAccordionItemCollapse
+   *
+   * @type {CustomEvent}
+   *
+   * @property {boolean}               bubbles - A flag to bubble the event.
+   * @property {Object<AccordionItem>} detail  - The details object containing the Accordion item itself.
+   */
+  _collapseEvent = new CustomEvent("grauplAccordionItemCollapse", {
+    bubbles: true,
+    detail: { item: this },
+  });
+
+  /**
+   * Constructs a new Accordion item object.
+   *
+   * @class
+   *
+   * @param {object}               options                             - The options object.
+   * @param {HTMLElement}          options.accordionItemElement        - The accordion item element.
+   * @param {HTMLElement}          options.accordionItemToggleElement  - The toggle element.
+   * @param {HTMLElement}          options.accordionItemHeaderElement  - The header element.
+   * @param {HTMLElement}          options.accordionItemContentElement - The content element.
+   * @param {Accordion}            [options.parentAccordion = null]    - The accordion containing this item.
+   */
+  constructor({
+    accordionItemElement,
+    accordionItemToggleElement,
+    accordionItemHeaderElement,
+    accordionItemContentElement,
+    parentAccordion = null,
+  }) {
+    // Set DOM elements.
+    this._dom.item = accordionItemElement;
+    this._dom.toggle = accordionItemToggleElement;
+    this._dom.header = accordionItemHeaderElement;
+    this._dom.content = accordionItemContentElement;
+
+    // Set the accordion elements.
+    this._elements.parentAccordion = parentAccordion;
+  }
+
+  /**
+   * Initializes the accordion item.
+   */
+  initialize() {
+    // Set the IDs for the accordion item and it's elements if they don't exist.
+    this._setIds();
+
+    // Set the ARIA attributes for the accordion item and it's elements.
+    this._setAriaAttributes();
+
+    // Set the initial state of the accordion item.
+    if (this.dom.toggle.getAttribute("aria-expanded") === "true") {
+      this.show(false, false);
+    } else {
+      this.hide(false, false);
+    }
+  }
+
+  /**
+   * The HTML elements for the accordion item in the DOM.
+   *
+   * @readonly
+   *
+   * @type {object}
+   *
+   * @see _dom
+   */
+  get dom() {
+    return this._dom;
+  }
+
+  /**
+   * The declared graupl accordion elements within the accordion item.
+   *
+   * @readonly
+   *
+   * @type {Object<Accordion>}
+   *
+   * @see _elements
+   */
+  get elements() {
+    return this._elements;
+  }
+
+  /**
+   * The open state of the accordion.
+   *
+   * @readonly
+   *
+   * @type {object}
+   *
+   * @see _open
+   */
+  get isOpen() {
+    return this._open;
+  }
+
+  /**
+   * The locked state of the accordions item.
+   *
+   * If locked, the accordion item cannot be closed.
+   *
+   * @readonly
+   *
+   * @type {boolean}
+   *
+   * @see _locked
+   */
+  get isLocked() {
+    return this._locked;
+  }
+
+  set isOpen(value) {
+    isValidType("boolean", { value });
+
+    if (this._open !== value) {
+      this._open = value;
+    }
+  }
+
+  /**
+   * Sets the IDs for the accordion item and it's elements if they don't exist.
+   *
+   * The generated IDs use the parent accordion's key and follows the pattern:
+   *  - Accordion item: `accordion-item-{key}-{index}`
+   *  - Accordion item toggle: `accordion-item-toggle-{key}-{index}`
+   *  - Accordion item content: `accordion-item-content-{key}-{index}`
+   */
+  _setIds() {
+    // Get the required information for IDs.
+    const { key } = this.elements.parentAccordion;
+    const index = this.elements.parentAccordion.dom.accordionItems.indexOf(
+      this.dom.item
+    );
+
+    this.dom.item.id = this.dom.item.id || `accordion-item-${key}-${index}`;
+    this.dom.toggle.id =
+      this.dom.toggle.id || `accordion-item-toggle-${key}-${index}`;
+    this.dom.header.id =
+      this.dom.header.id || `accordion-item-header-${key}-${index}`;
+    this.dom.content.id =
+      this.dom.content.id || `accordion-item-content-${key}-${index}`;
+  }
+
+  /**
+   * Sets the ARIA attributes for the accordion item and it's elements.
+   */
+  _setAriaAttributes() {
+    // Set the ARIA attributes for the accordion item toggle.
+    // If the toggle is not a button, then set the role to "button".
+    if (!isTag("button", { toggle: this.dom.toggle })) {
+      this.dom.toggle.setAttribute("role", "button");
+    }
+
+    // If aria-expanded is not explicitly set to "true", then set it to "false".
+    if (this.dom.toggle.getAttribute("aria-expanded") !== "true") {
+      this.dom.toggle.setAttribute("aria-expanded", "false");
+    }
+
+    // Set the aria-controls attribute for the toggle.
+    this.dom.toggle.setAttribute("aria-controls", this.dom.content.id);
+
+    // Set the ARIA attributes for the accordion item content.
+    // If the content is not a section, then set the role to "region".
+    if (!isTag("section", { content: this.dom.content })) {
+      this.dom.content.setAttribute("role", "region");
+    }
+
+    // Set the aria-labelledby attribute for the content.
+    this.dom.content.setAttribute("aria-labelledby", this.dom.toggle.id);
+  }
+
+  /**
+   * Shows the accordion item.
+   *
+   * @public
+   *
+   * @fires grauplAccordionItemExpand
+   *
+   * @param {boolean} [emit = true]       - Emit the show event once shown.
+   * @param {boolean} [transition = true] - Respect the transition class.
+   */
+  show(emit = true, transition = true) {
+    if (this._open) {
+      return;
+    }
+
+    const { closeClass, openClass, transitionClass, openDuration } =
+      this.elements.parentAccordion;
+
+    // Set aria-expanded to true when hiding accordion item.
+    this.dom.toggle.setAttribute("aria-expanded", "true");
+
+    // If we're dealing with transition classes, then we need to utilize
+    // requestAnimationFrame to add the transition class, remove the hide class,
+    // add the show class, and finally remove the transition class.
+    //
+    // If `transition` is false, then it doesn't matter if the transition class
+    // is set. Do not use the transition.
+    if (transition && transitionClass !== "") {
+      addClass(transitionClass, this.dom.item);
+
+      requestAnimationFrame(() => {
+        removeClass(closeClass, this.dom.item);
+
+        this.dom.item.style.height = `${this.dom.header.getBoundingClientRect().height}px`;
+
+        requestAnimationFrame(() => {
+          addClass(openClass, this.dom.item);
+
+          this.dom.item.style.height = `${this.dom.header.getBoundingClientRect().height + this.dom.content.getBoundingClientRect().height}px`;
+
+          requestAnimationFrame(() => {
+            setTimeout(() => {
+              removeClass(transitionClass, this.dom.item);
+
+              this.dom.item.style.height = "";
+            }, openDuration);
+          });
+        });
+      });
+    } else {
+      // Add the show class
+      addClass(openClass, this.dom.item);
+
+      // Remove the hide class.
+      removeClass(closeClass, this.dom.item);
+    }
+
+    this._open = true;
+
+    // If the parent accordion only allows a single item to be open at a time,
+    // then close all other items.
+    if (!this.elements.parentAccordion.allowMultipleExpand) {
+      this.unlockSiblings();
+      this.closeSiblings();
+    }
+
+    // If the parent accordion requires at least one item to be open, and this
+    // is the only open item, then lock it. Otherwise, unlock all siblings.
+    if (!this.elements.parentAccordion.allowNoExpand) {
+      if (this.elements.parentAccordion.openAccordionItems.length <= 1) {
+        this.lock();
+      } else {
+        this.unlockSiblings();
+      }
+    }
+
+    if (emit) {
+      this.dom.item.dispatchEvent(this._expandEvent);
+    }
+  }
+
+  /**
+   * Hides the accordion item.
+   *
+   * @public
+   *
+   * @fires grauplAccordionItemCollapse
+   *
+   * @param {boolean} [emit = true]       - Emit the show event once shown.
+   * @param {boolean} [transition = true] - Respect the transition class.
+   */
+  hide(emit = true, transition = true) {
+    if (!this._open) {
+      return;
+    }
+
+    if (
+      !this.elements.parentAccordion.allowNoExpand &&
+      this.elements.parentAccordion.openAccordionItems.length <= 1
+    ) {
+      return;
+    }
+
+    const { closeClass, openClass, transitionClass, closeDuration } =
+      this.elements.parentAccordion;
+
+    // Set aria-expanded to false when hiding accordion item.
+    this.dom.toggle.setAttribute("aria-expanded", "false");
+
+    // If we're dealing with transition classes, then we need to utilize
+    // requestAnimationFrame to add the transition class, remove the show class,
+    // add the hide class, and finally remove the transition class.
+    //
+    // If `transition` is false, then it doesn't matter if the transition class
+    // is set. Do not use the transition.
+    if (transition && transitionClass !== "") {
+      addClass(transitionClass, this.dom.item);
+      this.dom.item.style.height = `${this.dom.item.getBoundingClientRect().height}px`;
+
+      requestAnimationFrame(() => {
+        removeClass(openClass, this.dom.item);
+        this.dom.item.style.height = `${this.dom.header.getBoundingClientRect().height}px`;
+
+        requestAnimationFrame(() => {
+          addClass(closeClass, this.dom.item);
+
+          requestAnimationFrame(() => {
+            setTimeout(() => {
+              removeClass(transitionClass, this.dom.item);
+
+              this.dom.item.style.height = "";
+            }, closeDuration);
+          });
+        });
+      });
+    } else {
+      // Add the hide class
+      addClass(closeClass, this.dom.item);
+
+      // Remove the show class.
+      removeClass(openClass, this.dom.item);
+    }
+
+    this._open = false;
+
+    // If the parent accordion requires at least one item to be open, and this was
+    // the second to last open item, then lock to last open item.
+    if (
+      !this.elements.parentAccordion.allowNoExpand &&
+      this.elements.parentAccordion.openAccordionItems.length === 1
+    ) {
+      this.elements.parentAccordion.openAccordionItems[0].lock();
+    }
+
+    if (emit) {
+      this.dom.item.dispatchEvent(this._collapseEvent);
+    }
+  }
+
+  /**
+   * Toggle the accordion item.
+   *
+   * @public
+   */
+  toggle() {
+    this.isOpen ? this.hide() : this.show();
+  }
+
+  /**
+   * Focuses the accordion item.
+   *
+   * @public
+   */
+  focus() {
+    this.dom.toggle.focus();
+  }
+
+  /**
+   * Blurs the accordion item.
+   *
+   * @public
+   */
+  blur() {
+    this.dom.toggle.blur();
+  }
+
+  /**
+   * Locks the accordion item.
+   *
+   * @public
+   */
+  lock() {
+    this._locked = true;
+    this.dom.toggle.setAttribute("disabled", "true");
+  }
+
+  /**
+   * Unlocks the accordion item.
+   *
+   * @public
+   */
+  unlock() {
+    this._locked = false;
+    this.dom.toggle.removeAttribute("disabled");
+  }
+
+  closeSiblings() {
+    if (this.elements.parentAccordion) {
+      this.elements.parentAccordion.elements.accordionItems.forEach((item) => {
+        if (item !== this) {
+          item.hide();
+        }
+      });
+    }
+  }
+
+  /**
+   * Unlocks the siblings of the accordion item.
+   *
+   * @public
+   */
+  unlockSiblings() {
+    if (this.elements.parentAccordion) {
+      this.elements.parentAccordion.elements.accordionItems.forEach((item) => {
+        if (item !== this) {
+          item.unlock();
+        }
+      });
+    }
+  }
+}
+
+export default AccordionItem;

package/src/js/accordion/index.js

@@ -0,0 +1,10 @@
+import Accordion from "./Accordion.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".accordion").forEach((accordionElement) => {
+    new Accordion({
+      accordionElement,
+      initialize: true,
+    });
+  });
+});

package/src/js/alert/Alert.js

@@ -6,6 +6,7 @@
 import { isValidClassList, isValidInstance, isValidType } from "../validate.js";
 import { addClass, removeClass } from "../domHelpers.js";
 import { keyPress, preventEvent } from "../eventHandlers.js";
+import storage from "../storage.js";
 
 class Alert {
   /**
@@ -65,6 +66,15 @@ class Alert {
    */
   _transitionTimer = 150;
 
+  /**
+   * The key used to generate IDs throughout the carousel.
+   *
+   * @protected
+   *
+   * @type {string}
+   */
+  _key = "";
+
   /**
    * An array of error messages generated by the alert.
    *
@@ -83,7 +93,7 @@ class Alert {
    *
    * @type {CustomEvent}
    *
-   * @property {boolean}       bubbles - A flag to buggle the event.
+   * @property {boolean}       bubbles - A flag to bubble the event.
    * @property {Object<Alert>} detail  - The details object container the Alert itself.
    */
   _showEvent = new CustomEvent("grauplAlertShow", {
@@ -119,6 +129,7 @@ class Alert {
    * @param {string|string[]|null} [options.transitionClass = transitioning] - The class to add when the alert is transitioning between shown and hidden.
    * @param {number}               [options.transitionTimer = 150]           - The time in milliseconds the transition will take.
    * @param {boolean}              [options.isHidden = false]                - A flag to determine the initial state of the alert.
+   * @param {?string}              [options.key = null]                      - The key used to generate IDs throughout the alert.
    * @param {boolean}              [options.initialize = false]              - AA flag to initialize the alert immediately upon creation.
    */
   constructor({
@@ -129,6 +140,7 @@ class Alert {
     transitionClass = "transitioning",
     transitionTimer = 150,
     isHidden = false,
+    key = null,
     initialize = false,
   }) {
     this._dom.alert = alertElement;
@@ -139,6 +151,9 @@ class Alert {
     this._transitionTimer = transitionTimer;
     this._hidden = isHidden;
 
+    // Set the key.
+    this._key = key || "";
+
     if (initialize) {
       this.initialize();
     }
@@ -157,9 +172,18 @@ class Alert {
         );
       }
 
+      // Set up the DOM.
+      this._generateKey();
+      this._setIds();
+
+      // Handle events.
       this._handleClick();
       this._handleKeydown();
       this._handleKeyup();
+
+      // Set up the storage.
+      storage.initializeStorage("alerts");
+      storage.pushToStorage("alerts", this.dom.alert.id, this);
     } catch (error) {
       console.error(error);
     }
@@ -222,6 +246,17 @@ class Alert {
     return this._transitionTimer;
   }
 
+  /**
+   * The key used to generate IDs throughout the accordion.
+   *
+   * @type {string}
+   *
+   * @see _key
+   */
+  get key() {
+    return this._key;
+  }
+
   set showClass(value) {
     isValidClassList({ showClass: value });
 
@@ -254,6 +289,14 @@ class Alert {
     }
   }
 
+  set key(value) {
+    isValidType("string", { value });
+
+    if (this._key !== value) {
+      this._key = value;
+    }
+  }
+
   /**
    * Validates all aspects of the alert to ensure proper functionality.
    *
@@ -334,6 +377,33 @@ class Alert {
     return check;
   }
 
+  /**
+   * Generates a key for the alert.
+   *
+   * @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated.
+   */
+  _generateKey(regenerate = false) {
+    if (this.key === "" || regenerate) {
+      this.key = Math.random()
+        .toString(36)
+        .replace(/[^a-z]+/g, "")
+        .substring(0, 10);
+    }
+  }
+
+  /**
+   * Sets the IDs of the alert and it's children if they do not already exist.
+   *
+   * The generated IDs use the key and follow the format:
+   *  - alert: `alert-${key}`
+   *  - controller: `alert-controller-${key}`
+   */
+  _setIds() {
+    this.dom.alert.id = this.dom.alert.id || `alert-${this.key}`;
+    this.dom.controller.id =
+      this.dom.controller.id || `alert-controller-${this.key}`;
+  }
+
   /**
    * Shows the alert.
    *

package/src/js/alert/index.js

@@ -1,21 +1,11 @@
 import Alert from "./Alert.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-  const alerts = [];
-
   document.querySelectorAll(".alert").forEach((alertElement) => {
-    const alert = new Alert({
+    new Alert({
       alertElement,
       controllerElement: alertElement.querySelector(".alert-dismisser") || null,
       initialize: true,
     });
-
-    alerts.push(alert);
   });
-
-  const graupl = window.Graupl || {};
-
-  graupl.alerts = alerts;
-
-  window.Graupl = graupl;
 });