toggler.js

/**
 * @file
 *
 * Module: Toggle.
 *
 * @author Jason D. Moss <jason@jdmlabs.com>
 * @copyright 2024 Jason D. Moss. All rights reserved.
 */

import { Exists } from "./exists.js";

export class Toggler {
    constructor (event) {
        this.event = event;
        this.element = this.event.target;
        this.key = this.event.key;
    }

    /**
     * Toggle ARIA 'expanded' state.
     */
    toggleARIAState (toggle) {
        let expandedState = toggle.getAttribute("aria-expanded");

        if (new Exists(expandedState)) {
            toggle.setAttribute("aria-expanded", (
                expandedState === "false" ?? "true"
            ));
        }
    }

    /**
     * Toggle 'hidden' attribute on target element.
     */
    toggleButton () {
        this.toggleARIAState(this.element);

        // Toggle visibility.
        let targetElem = document.getElementById(
            this.element.getAttribute("aria-controls")
        );

        if (new Exists(targetElem)) {
            targetElem.toggleAttribute("hidden");
            targetElem.scrollIntoView();
        }
    }

    /**
     * Handle button toggle 'click' action,
     */
    handleClick () {
        this.event.preventDefault();

        this.toggleButton(this.element);
    }

    /**
     * Handle button toggle 'key' action,
     */
    handleKeyboard () {
        this.event.preventDefault();

        if (this.key === " " ||
            this.key === "Enter" ||
            this.key === "Spacebar"
        ) {
            this.toggleButton(this.element);
        }
    }
}

/* <> */