File alloy-ui/src/aui-form-builder/js/aui-form-builder-field-list.js
/**
* The Form Builder Field List Component
*
* @module aui-form-builder-field-list
*/
var CSS_FIELD_LIST = A.getClassName('form', 'builder', 'field', 'list'),
CSS_FIELD_LIST_ADD_BUTTON =
A.getClassName('form', 'builder', 'field', 'list', 'add', 'button'),
CSS_FIELD_LIST_ADD_BUTTON_ICON =
A.getClassName('form', 'builder', 'field', 'list', 'add', 'button', 'icon'),
CSS_FIELD_LIST_ADD_BUTTON_LABEL =
A.getClassName('form', 'builder', 'field', 'list', 'add', 'button', 'label'),
CSS_FIELD_LIST_ADD_BUTTON_LARGE =
A.getClassName('form', 'builder', 'field', 'list', 'add', 'button', 'large'),
CSS_FIELD_LIST_ADD_BUTTON_PLUS_ICON =
A.getClassName('form', 'builder', 'field', 'list', 'add', 'button', 'plus', 'icon'),
CSS_FIELD_LIST_ADD_BUTTON_VISIBLE =
A.getClassName('form', 'builder', 'field', 'list', 'add', 'button', 'visible'),
CSS_FIELD_LIST_ADD_CONTAINER =
A.getClassName('form', 'builder', 'field', 'list', 'add', 'container'),
CSS_FIELD_LIST_CONTAINER =
A.getClassName('form', 'builder', 'field', 'list', 'container'),
CSS_FIELD_LIST_EMPTY = A.getClassName('form', 'builder', 'field', 'list', 'empty'),
CSS_FIELD_MOVE_TARGET =
A.getClassName('form', 'builder', 'field', 'move', 'target'),
CSS_FIELD_MOVE_TARGET_LABEL =
A.getClassName('form', 'builder', 'field', 'move', 'target', 'label'),
CSS_LIST_MOVE_TARGET =
A.getClassName('form', 'builder', 'list', 'move', 'target');
/**
* A base class for `A.FormBuilderFieldList`.
*
* @class A.FormBuilderFieldList
* @extends A.Base
* @param {Object} config Object literal specifying widget configuration
* properties.
* @constructor
*/
A.FormBuilderFieldList = A.Base.create('form-builder-field-list', A.Base, [], {
TPL_ADD_FIELD: '<div class="' + CSS_FIELD_LIST_ADD_CONTAINER + '">' +
'<a class="btn ' + CSS_FIELD_LIST_ADD_BUTTON + '" href="javascript:;">' +
'<span class="' + CSS_FIELD_LIST_ADD_BUTTON_ICON + ' ' + CSS_FIELD_LIST_ADD_BUTTON_PLUS_ICON + '">+</span>' +
'<label class="' + CSS_FIELD_LIST_ADD_BUTTON_LABEL + '">' +
'{addField}' +
'</label>' +
'</a></div>',
TPL_FIELD_LIST: '<div class="' + CSS_FIELD_LIST + '">' +
'<div class="' + CSS_FIELD_LIST_CONTAINER + '"></div>' +
'</div>',
TPL_FIELD_MOVE_TARGET: '<button type="button" class="' + CSS_FIELD_MOVE_TARGET + ' ' + CSS_LIST_MOVE_TARGET +
' layout-builder-move-target layout-builder-move-col-target">' +
'<label class="' + CSS_FIELD_MOVE_TARGET_LABEL + '">{pasteHere}</label></button>',
/**
* Construction logic executed during the `A.FormBuilderFieldList`
* instantiation. Lifecycle.
*
* @method initializer
* @protected
*/
initializer: function() {
var content = this.get('content');
this._uiSetFields(this.get('fields'));
content.delegate('click', this._onClickAddField, '.' + CSS_FIELD_LIST_ADD_BUTTON, this);
content.delegate('mouseenter', this._onMouseEnterAddButton, '.' + CSS_FIELD_LIST_ADD_CONTAINER, this);
content.delegate('mouseleave', this._onMouseLeaveAddButton, '.' + CSS_FIELD_LIST_ADD_CONTAINER, this);
this.after('fieldsChange', A.bind(this._afterFieldsChange, this));
this.after('enableAddFieldsChange', A.bind(this._afterEnableAddFieldsChange, this));
},
/**
* Adds a new field to the `A.FormBuilderFieldList`.
*
* @method addField
* @param {A.FormBuilderFieldBase} field
* @param {Number} index
*/
addField: function(field, index) {
var fields = this.get('fields');
if (!this.get('enableAddFields')) {
return;
}
if (A.Lang.isNumber(index)) {
fields.splice(index, 0, field);
}
else {
fields.splice(this._newFieldIndex, 0, field);
}
this.set('fields', fields);
},
/**
* Removes the given field from the `A.FormBuilderFieldList`.
*
* @method removeField
* @param {A.FormBuilderFieldBase} field
*/
removeField: function(field) {
var fields = this.get('fields'),
indexOf = fields.indexOf(field);
fields.splice(indexOf, 1);
this.set('fields', fields);
},
/**
* Executed to the last empty column.
*
* @method _addEmptyColumnFieldClasses
* @param {Node} content
* @protected
*/
_addEmptyColumnFieldClasses: function(content) {
content.one('.' + CSS_FIELD_LIST_ADD_CONTAINER).addClass(CSS_FIELD_LIST_ADD_BUTTON_VISIBLE);
content.one('.' + CSS_FIELD_LIST_ADD_BUTTON).addClass(CSS_FIELD_LIST_ADD_BUTTON_LARGE);
},
/**
* Fired after the `enableAddFields` attribute change.
*
* @method _afterEnableAddFieldsChange
* @protected
*/
_afterEnableAddFieldsChange: function() {
this._uiToggleDisableAddField();
},
/**
* Fired after the `fields` attribute is set.
*
* @method _afterFieldsChange
* @protected
*/
_afterFieldsChange: function() {
var fields = this.get('fields');
this._uiSetFields(fields);
this._updateRemovableLayoutColProperty();
},
/**
* Appends add field on the given container.
*
* @method _appendAddFieldNode
* @param {Node} container
* @protected
*/
_appendAddFieldNode: function(container) {
var addFieldNode;
addFieldNode = A.Node.create(A.Lang.sub(this.TPL_ADD_FIELD, {
addField: this.get('strings').addField
}));
container.append(addFieldNode);
return addFieldNode;
},
/**
* Appends move target button on the given container.
*
* @method _appendAddMoveTargetNode
* @param {Node} container
* @param {Number} index
* @protected
*/
_appendAddMoveTargetNode: function(container, index) {
var moveTargetNode;
moveTargetNode = A.Node.create(A.Lang.sub(this.TPL_FIELD_MOVE_TARGET, {
pasteHere: this.get('strings').pasteHere
}));
moveTargetNode.setData('field-list-index', index);
container.append(moveTargetNode);
return moveTargetNode;
},
/**
* Fired when the button for adding a new field is clicked.
*
* @method _onClickAddField
* @param {EventFacade} event
* @protected
*/
_onClickAddField: function(event) {
var emptyFieldList = this.get('content').all('.' + CSS_FIELD_LIST_ADD_BUTTON);
this._newFieldIndex = emptyFieldList.indexOf(event.currentTarget);
},
/**
* Fired when mouse enters the button for adding a new field.
*
* @method _onMouseEnterAddButton
* @param {EventFacade} event
* @protected
*/
_onMouseEnterAddButton: function(event) {
var addButtonNode = event.currentTarget;
if (this.get('fields').length > 0) {
addButtonNode.addClass(CSS_FIELD_LIST_ADD_BUTTON_VISIBLE);
}
},
/**
* Fired when mouse leaves the button for adding a new field.
*
* @method _onMouseLeaveAddButton
* @param {EventFacade} event
* @protected
*/
_onMouseLeaveAddButton: function(event) {
var addButtonNode = event.currentTarget;
if (this.get('fields').length > 0) {
addButtonNode.removeClass(CSS_FIELD_LIST_ADD_BUTTON_VISIBLE);
}
},
/**
* Append a field and its necessaries elements into a given container.
*
* @method _uiSetField
* @param {Node} container
* @param {Node} field
* @param {Number} index
* @protected
*/
_uiSetField: function(container, field, index) {
this._appendAddFieldNode(container);
this._appendAddMoveTargetNode(container, index);
container.append(field.get('content'));
},
/**
* Updates the ui according to the value of the `fields` attribute.
*
* @method _uiSetFields
* @param {Array} fields
* @protected
*/
_uiSetFields: function(fields) {
var content = this.get('content'),
container = content.one('.' + CSS_FIELD_LIST_CONTAINER),
index;
container.empty();
for (index = 0; index < fields.length; index++) {
this._uiSetField(container, fields[index], index);
}
this._appendAddFieldNode(container);
this._appendAddMoveTargetNode(container, index);
content.toggleClass(CSS_FIELD_LIST_EMPTY, !fields.length);
if (fields.length === 0) {
this._addEmptyColumnFieldClasses(content);
}
},
/**
* Toggle disabled class to the add field button.
*
* @method _uiToggleDisableAddField
* @protected
*/
_uiToggleDisableAddField: function() {
this.get('content').one('.' + CSS_FIELD_LIST_ADD_BUTTON).toggleClass('disabled', !this.get('enableAddFields'));
},
/**
* Update removable property for layout cols.
*
* @method _updateRemovableLayoutColProperty
* @protected
*/
_updateRemovableLayoutColProperty: function() {
var fields = this.get('fields'),
content = this.get('content'),
col = content.ancestor('.col'),
layoutCol;
if (col) {
layoutCol = col.getData('layout-col');
layoutCol.set('removable', fields.length === 0);
}
}
}, {
/**
* Static property used to define the default attribute
* configuration for the `A.FormBuilderFieldList`.
*
* @property ATTRS
* @type Object
* @static
*/
ATTRS: {
/**
* Node containing the contents of this field list.
*
* @attribute content
* @type Node
*/
content: {
validator: function(val) {
return A.instanceOf(val, A.Node);
},
valueFn: function() {
return A.Node.create(this.TPL_FIELD_LIST);
},
writeOnce: 'initOnly'
},
/**
* Attribute responsible for enabling or disabling the feature of adding fields.
*
* @attribute enableAddFields
* @type {Boolean}
*/
enableAddFields: {
validator: A.Lang.isBoolean,
value: true
},
/**
* List of field.
*
* @attribute fields
* @type {Array}
*/
fields: {
validator: A.Lang.isArray,
value: []
},
/**
* Collection of strings used to label elements of the UI.
*
* @attribute strings
* @type {Object}
*/
strings: {
value: {
addField: 'Add Field',
pasteHere: 'Paste here'
},
writeOnce: true
}
}
});