@ithaka/bonsai/js/bonsai.offcanvas.js

ITHAKA core styling

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

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

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

        this._initializeOffCanvases();
    }

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

            if(elementID) {
                Bonsai.offCanvases.members[elementID] = theOffCanvas;
            }
        });
    }

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

export {BonsaiOffCanvas};