@ithaka/bonsai/js/bonsai.accordionmenu.js

ITHAKA core styling

"use strict";

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

/** Class for creating a Bonsai Accordion Menu component
 * @class
 *
 * @param {jQuery} elements - jQuery object of the elements to create the component from
 * @param {Object} options - Object containing Foundation plugin options {@link http://foundation.zurb.com/sites/docs/javascript.html#configuring-plugins}
*
* @example
* const accordionMenu = new BonsaiAccordionMenu($(".accordion-menu"));
*
* @returns Returns object that has initialized each accordionMenu matching the incoming `element`
*
*/
class BonsaiAccordionMenu extends BonsaiBase {
    constructor(elements, options = {}) {
        super(elements, options);

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

        this._initializeAccordionMenus();
    }

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

            if (elementID) {
                Bonsai.AccordionMenus.members[elementID] = theAccordionMenu;
            }
        });
    }

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

export { BonsaiAccordionMenu };