@ithaka/bonsai/js/bonsai.dropdown.js

ITHAKA core styling

"use strict";

import $ from "jquery";
import { Dropdown } from "foundation-sites/js/foundation.dropdown";
import { BonsaiBase } from "./bonsai.base";

/** Dropdown module
 * @class
 * @param {jQuery} elements - jQuery object to use for initializing the dropdowns.
 * @param {Object} options - Optional parameters.
 *
 * @example
 * const dropdown = new BonsaiDropdown($(".dropdown-pane"));
 *
 * @returns Returns object that has initialized each dropdown matching the incoming `element`
 *
 */
class BonsaiDropdown extends BonsaiBase {
    constructor(elements, options = {}) {
        super(elements, options);

        Bonsai.Dropdowns = Bonsai.hasOwnProperty("Dropdowns") ? Bonsai.Dropdowns : {members: {}, reflow: this.reflow};

        this._initializeDropdowns();
    }

    /**
     * Iterates through all elements of the jQuery selector and creates a Dropdown object. If the tab element has an ID, it
     * is added to the global Bonsai.Dropdowns Object for global event listening
     *
     * @private
     */
    _initializeDropdowns() {
        this.elements.each((index, element) => {
            $(element).data("close-on-click", true);

            let elementID = $(element).attr("id"),
                theDropdown = new Dropdown($(element), this.options);

            theDropdown.$element.attr("tabindex", 0);

            theDropdown.$currentAnchor.on("click", (event) => {
                event.preventDefault();
            });

            theDropdown.$element.on("hide.zf.dropdown", function() {
                theDropdown.$currentAnchor.focus();
            });

            theDropdown.$element.on("show.zf.dropdown", function() {
                theDropdown.$element.focus();
            });

            if (elementID) {
                Bonsai.Dropdowns.members[elementID] = theDropdown;
            }
        });
    }

    /**
     * Reflow method to re-bind jQuery element to a Dropdown object
     *
     * @public
     */
    reflow() {
        $.each(Bonsai.Dropdowns.members, (elementID, theDropdown) => {
            Bonsai.Dropdowns.members[elementID] = new Dropdown($(`#${elementID}`));
        });
    }
}

export { BonsaiDropdown };