@ithaka/bonsai/js/bonsai.sticky.js

ITHAKA core styling

"use strict";

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

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

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

        this._initializeStickies();
    }

    /**
     * Iterates through all elements of the jQuery selector and creates a Sticky object. If the Sticky element has an ID, it
     * is added to the global Bonsai.Stickies Object for global event listening
     *
     * @private
     */
    _initializeStickies() {
        this.elements.each((index, element) => {
            let $element = $(element),
                theSticky = new Sticky($element, this.options),
                elementID = $element.attr("id"); // Use Foundation assigned id as element id

            if (elementID) {
                Bonsai.Stickies.members[elementID] = theSticky;
            }
        });
    }

    /**
     * Reflow method to re-bind jQuery element to a Sticky object
     *
     * @public
     */
    reflow() {
        $.each(Bonsai.Stickies.members, (elementID, theSticky) => {
            Bonsai.Stickies.members[elementID] = new Sticky($(`#${elementID}`));
        });
        $(window).trigger("load.zf.sticky");
        // Due to a bug in Foundation, "load.zf.sticky" event is not fired again when sticky is reinitialized in AJAX reload.
        // Thus have to manually trigger the event
        // Bug: https://github.com/zurb/foundation-sites/issues/8394
    }
}

export { BonsaiSticky };