@ithaka/bonsai/js/bonsai.dropdownmenu.js

ITHAKA core styling

"use strict";

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

/** DropdownMenu Module
 *
 * @class
 * @param {jQuery} elements - jQuery object to use for initializing the dropdownmenu component.
 * @param {Object} options - Optional parameters
 *
 * @example
 * const dropdownmenu = new BonsaiDropdownMenu($("ul.dropdown"));
 *
 * @return Returns object that has initialized each dropdownmenu given the incoming `options`.
 */

class BonsaiDropdownMenu extends BonsaiBase {
    constructor(elements, options = {}) {
        super(elements, options);

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

        this._initializeDropdownMenus();
    }

    /**
     * Iterates through all elements of the jQuery selector and creates a DropdownMenu object. If the tab element has an ID, it
     * is added to the global Bonsai.DropdownMenus Object for global event listening
     *
     * @private
     */
    _initializeDropdownMenus() {
        this.elements.each((index, element) => {
            let $element = $(element),
                elementID = $element.attr("id"),
                theDropdownMenu = new DropdownMenu($element, this.options);

            if(elementID) {
                Bonsai.DropdownMenus.members[elementID] = theDropdownMenu;
            }
        });
    }

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

export { BonsaiDropdownMenu };