AEM Touch UI, Granite UI Multifield adapter

aemMultifieldAdapter.js

/**
 * Granite UI Multifield adapter
 *
 * Has improved setDisabled method which disables all form input fields, the
 * delete buttons, the reorder buttons and the add button within the Multifield.
 * The adapter also contains a new method to enable and disable just the add
 * button which can be used to limit the size of the multifield.
 *
 * Usage:
 * var field = $('.coral-Multifield').adaptTo('nateyolles-field');
 * field.setDisabled(true|false);
 * field.setDisabledAdd(true|false);
 */
 (function(window, $, undefined) {
    'use strict';

    /**
     * Register button adapter to disable and enable buttons.
     */
    $(window).adaptTo('foundation-registry').register('foundation.adapters', {
        type: 'nateyolles-field',
        selector: '.coral-Button',
        adapter: function(el) {
            var $button = $(el);

            return {
                setDisabled: function(disabled) {
                    $button.attr('disabled', disabled);
                }
            };
        }
    });

    /**
     * Register multifield move adapter that disables and enables the button and
     * prevents drag-and-drop reordering.
     */
    $(window).adaptTo('foundation-registry').register('foundation.adapters', {
        type: 'nateyolles-field',
        selector: '.coral-Multifield-move',
        adapter: function(el) {
            var $button = $(el);

            return {
                setDisabled: function(disabled) {
                    $button.attr('disabled', disabled);
                    $button.toggleClass('js-coral-Multifield-move', !disabled)
                }
            };
        }
    });

    /**
     * Register Multifield adapter to disable and enable the entire multifield
     * component. Since the multifield component is essentially a composite of
     * other components, this adapter simply finds the children components and
     * uses their adapter APIs to enable and disable fields.
     */
    $(window).adaptTo('foundation-registry').register('foundation.adapters', {
        type: 'nateyolles-field',
        selector: '.coral-Multifield',
        adapter: function(el) {
            var $multifield,
                $addButton,
                $reorderButtons,
                $removeButtons,
                $fields;

            $multifield = $(el);
            $addButton = $multifield.children('.coral-Multifield-add');

            /**
             * Disable or enable a jQuery object or collection of objects by
             * adapting it to the provided vocabulary.
             *
             * @param {JQuery} jQuery object or collection to adapt and act upon
             * @param {String} vocabulary to adapt objects to
             * @param {Boolean} true to disable, false to enable
             * @private
             */
            function disable($fields, vocabulary, disabled){
                $fields.each(function(){
                    var api = $(this).adaptTo(vocabulary);

                    if (api && api.setDisabled) {
                        api.setDisabled(disabled);
                    }
                });
            }

            /**
             * Public API methods to disable and enable the entire component or
             * the add button separately.
             *
             * @public
             */
            return {
                setDisabled: function(disabled) {
                    $fields = $multifield.find('.js-coral-Multifield-list > .js-coral-Multifield-input > *:first-child');
                    $reorderButtons = $multifield.find('.coral-Multifield-move');
                    $removeButtons = $multifield.find('.coral-Multifield-remove');

                    disable($addButton, 'nateyolles-field', disabled);
                    disable($reorderButtons, 'nateyolles-field', disabled);
                    disable($removeButtons, 'nateyolles-field', disabled);
                    disable($fields, 'foundation-field', disabled);
                },
                setDisabledAdd: function(disabled) {
                    disable($addButton, 'nateyolles-field', disabled);
                }
            };
        }
    });
})(window, Granite.$);