Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AEM Touch UI, Granite UI Multifield adapter
/**
* 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.$);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.