foundation-adapter

Adapter is mechanism to adapt an object—usually HTMLElement—to different object, which is inspired by Sling Adapter.

It is typically used to enhance existing functionality of the element according to a certain vocabulary.

Registering Adapter

An adapter is registered by registering to foundation-registry using foundation.adapters name and config satisfying FoundationAdaptersAdapter interface.

interface FoundationAdaptersAdapter {
  type: string;
  selector: string;
  adapter: Function;
}

AdaptTo jQuery Plugin

AdaptTo is a jQuery plugin to expose the adapter mechanism.

/**
 * Exposes the API of the given type for the first element in the set of matched elements.
 * An element can be adapted only when it satisfies the condition of the corresponding type.
 * If it cannot be adapted, <code>undefined</code> is returned.
 *
 * @param type The target type the adaptor will expose
 * @returns The API object
 */
jQuery.fn.adaptTo: (type: string) => any;

Example

// Registering an adapter that exposes "foundation-selections" API of ".foundation-collection" element
$(window).adaptTo("foundation-registry").register("foundation.adapters", {
    type: "foundation-selections",
    selector: ".foundation-collection",
    adapter: function(el) {
        var collection = $(el);

        return {
            count: function() {
                return collection.find(".foundation-selections-item").length;
            },

            clear: function(suppressEvent) {
                var length = collection.find(".foundation-selections-item").removeClass("foundation-selections-item").length;

                if (!suppressEvent && length) {
                    collection.trigger("foundation-selections-change");
                }

                return this;
            }
        };
    }
});

// Then use it using adaptTo plugin
var selectionAPI = $(".foundation-collection").adaptTo("foundation-selections");
selectionAPI.count();
selectionAPI.clear();