/**
* The Form Builder Field Types Modal Component
*
* @module aui-form-builder
* @submodule aui-form-builder-field-types-modal
*/
var CSS_FIELD_TYPE = A.getClassName('field', 'type'),
CSS_FIELD_TYPES_LIST = A.getClassName('form', 'builder', 'field', 'types', 'list'),
CSS_FIELD_TYPES_MODAL_TITLE = A.getClassName('modal', 'title');
/**
* `A.FormBuilder` extension, which is responsible for all the logic related
* to displaying the field types for the user.
*
* @class A.FormBuilderFieldTypesModal
* @param {Object} config Object literal specifying layout builder configuration
* properties.
* @constructor
*/
A.FormBuilderFieldTypesModal = A.Base.create('form-builder-field-types-modal', A.Modal, [], {
TPL_HEADER_LABEL: '<h4 class="' + CSS_FIELD_TYPES_MODAL_TITLE + '">{addField}</h4>',
TPL_TYPES_LIST: '<div class="clearfix ' + CSS_FIELD_TYPES_LIST + '" role="main"></div>',
/**
* Construction logic executed during the `A.FormBuilderFieldTypesModal`
* instantiation. Lifecycle.
*
* @method initializer
* @protected
*/
initializer: function() {
this.after('fieldTypesChange', this._afterFieldTypesChange);
},
/**
* Bind the events on the FormBuilderFieldTypesModal UI. Lifecycle.
*
* @method bindUI
* @protected
*/
bindUI: function() {
var bodyNode = this.getStdModNode('body');
A.FormBuilderFieldTypesModal.superclass.bindUI.apply(this, arguments);
this._eventHandles.push(
bodyNode.delegate('click', this._onClickFieldType, '.' + CSS_FIELD_TYPE, this),
bodyNode.delegate('key', A.bind(this._onKeyPressFieldType, this), 'enter', '.' + CSS_FIELD_TYPE)
);
},
/**
* Renders the FormBuilderFieldTypesModal component instance. Lifecycle.
*
* @method renderUI
* @protected
*/
renderUI: function() {
A.FormBuilderFieldTypesModal.superclass.renderUI.apply(this, arguments);
this._uiSetFieldTypes(this.get('fieldTypes'));
},
/**
* Fires after `fieldTypes` attribute changes.
*
* @method _afterFieldTypesChange
* @protected
*/
_afterFieldTypesChange: function() {
this._uiSetFieldTypes(this.get('fieldTypes'));
},
/**
* Fired when a field type is clicked.
*
* @method _onClickFieldType
* @param {EventFacade} event
* @protected
*/
_onClickFieldType: function(event) {
var fieldType = event.currentTarget.getData('fieldType');
this.hide();
this.fire('selectFieldType', {
fieldType: fieldType
});
},
/**
* Fired when the close button for the field types modal is clicked.
*
* @method _onFieldTypesModalCloseClick
* @protected
*/
_onFieldTypesModalCloseClick: function() {
this.hide();
},
/**
* Fired when a field type is keypressed.
*
* @method _onKeyPressFieldType
* @param {EventFacade} event
* @protected
*/
_onKeyPressFieldType: function(event) {
this._onClickFieldType(event);
},
/**
* Updates the ui according to the value of the `fieldTypes` attribute.
*
* @method _uiSetFieldTypes
* @param {Array} fieldTypes
* @protected
*/
_uiSetFieldTypes: function(fieldTypes) {
var fieldTypesListNode = A.Node.create(this.TPL_TYPES_LIST);
fieldTypesListNode.get('children').remove();
A.Array.each(fieldTypes, function(type) {
fieldTypesListNode.append(type.get('node'));
});
this.set('bodyContent', fieldTypesListNode);
},
/**
* Returns the template of the modal header.
*
* @method _valueHeaderContent
* @return {Object}
* @protected
*/
_valueHeaderContent: function() {
return A.Lang.sub(this.TPL_HEADER_LABEL, {
addField: this.get('strings').addField
});
},
/**
* Returns the configuration object for the field types modal
* toolbar.
*
* @method _valueToolbars
* @return {Object}
* @protected
*/
_valueToolbars: function() {
return {
header: [
{
cssClass: 'close',
discardDefaultButtonCssClasses: true,
labelHTML: '<span> \u00D7 </span>',
on: {
click: A.bind(this._onFieldTypesModalCloseClick, this)
}
}
]
};
}
}, {
ATTRS: {
/**
* The collection of field types that can be selected as fields for
* this form builder.
*
* @attribute fieldTypes
* @default []
* @type Array
*/
fieldTypes: {
validator: A.Lang.isArray,
value: []
},
/**
* The content displayed in the modal header.
*
* @attribute headerContent
* @type String
*/
headerContent: {
valueFn: '_valueHeaderContent'
},
/**
* The text strings displayed by this component.
*
* @attribute strings
* @type Object
*/
strings: {
value: {
addField: 'Add Field'
}
},
/**
* The toolbar configuration object.
*
* @attribute toolbar
* @type Object
*/
toolbars: {
validator: A.Lang.isObject,
valueFn: '_valueToolbars'
}
},
CSS_PREFIX: 'modal-dialog'
});