/**
* The Data Editor Component
*
* @module aui-data-editor
*/
var CSS_EDITOR = A.getClassName('data', 'editor'),
CSS_EDITOR_CONTENT_INNER = A.getClassName('data', 'editor', 'content', 'inner'),
CSS_EDITOR_LABEL = A.getClassName('data', 'editor', 'label'),
CSS_EDITOR_REQUIRED_LABEL = A.getClassName('data', 'editor', 'required', 'label'),
TPL_EDITOR = '<div class="' + CSS_EDITOR + '">' +
'<div><label class="' + CSS_EDITOR_LABEL + ' control-label"></label>' +
'<label class="' + CSS_EDITOR_REQUIRED_LABEL + ' control-label">{required}</label></div>' +
'<div class="' + CSS_EDITOR_CONTENT_INNER + '"></div>' +
'</div>';
/**
* A base class for Data Editor. All data editors should extend from this.
*
* @class A.DataEditor
* @extends A.Base
* @param {Object} config Object literal specifying widget configuration
* properties.
* @constructor
*/
A.DataEditor = A.Base.create('data-editor', A.Base, [], {
TPL_EDITOR_CONTENT: '<div></div>',
/**
* Constructor for the `A.DataEditor`. Lifecycle.
*
* @method initializer
* @protected
*/
initializer: function() {
var contentNode,
node = this.get('node');
contentNode = A.Lang.sub(this.TPL_EDITOR_CONTENT, this.get('strings'));
node.one('.' + CSS_EDITOR_CONTENT_INNER).setHTML(contentNode);
this._uiSetLabel(this.get('label'));
this._uiSetRequired(this.get('required'));
this._uiSetVisible(this.get('visible'));
this.after({
labelChange: this._afterLabelChange,
requiredChange: this._afterRequiredChange,
visibleChange: this._afterVisibleChange
});
},
/**
* Destructor lifecycle implementation for the `A.DataEditor` class.
* Lifecycle.
*
* @method destructor
* @protected
*/
destructor: function() {
this.get('node').remove(true);
},
/**
* Returns `true` if this edited value has no elements.
* This should be overridden by subclasses, otherwise it always returns `false`.
*
* @method isEmpty
*/
isEmpty: function() {
return false;
},
/**
* If the data editor is required and empty this will return false.
*
* @method isValid
* @return {Boolean}
*/
isValid: function() {
if(!this.get('required')) {
return true;
}
return !this.isEmpty();
},
/**
* Fired after the `label` attribute is set.
*
* @method _afterLabelChange
* @protected
*/
_afterLabelChange: function() {
this._uiSetLabel(this.get('label'));
},
/**
* Fired after the `required` attribute is set.
*
* @method _afterRequiredChange
* @protected
*/
_afterRequiredChange: function() {
this._uiSetRequired(this.get('required'));
},
/**
* Fired after the `visible` attribute is set.
*
* @method _afterVisibleChange
* @protected
*/
_afterVisibleChange: function() {
this._uiSetVisible(this.get('visible'));
},
/**
* Updates the ui according to the value of the `label` attribute.
*
* @method _uiSetLabel
* @param {String} label
* @protected
*/
_uiSetLabel: function(label) {
var labelNode = this.get('node').one('label');
labelNode.set('text', label);
labelNode.toggleView(A.Lang.trim(label) !== '');
},
/**
* Updates the ui according to the value of the `required` attribute.
*
* @method _uiSetRequired
* @param required
* @protected
*/
_uiSetRequired: function(required) {
var requiredNode = this.get('node').one('.' + CSS_EDITOR_REQUIRED_LABEL);
if (required) {
requiredNode.show();
}
else {
requiredNode.hide();
}
},
/**
* Updates the ui according to the value of the `visible` attribute.
*
* @method _uiSetVisible
* @param visible
* @protected
*/
_uiSetVisible: function(visible) {
if (visible) {
this.get('node').show();
}
else {
this.get('node').hide();
}
}
}, {
/**
* Static property used to define the default attribute configuration
* for the `A.DataEditor`.
*
* @property ATTRS
* @type Object
* @static
*/
ATTRS: {
/**
* The value after edition.
*
* @attribute editedValue
* @default null
* @type *
*/
editedValue: {
value: null
},
/**
* The label to be used by this boolean editor.
*
* @attribute label
* @default ''
* @type String
*/
label: {
value: ''
},
/**
* The node where the editor UI is rendered.
*
* @attribute node
* @type Node
*/
node: {
readOnly: true,
valueFn: function() {
return A.Node.create(A.Lang.sub(TPL_EDITOR, {
required: this.get('strings').required
}));
}
},
/**
* The value to be edited.
*
* @attribute originalValue
* @default null
* @type *
*/
originalValue: {
value: null
},
/**
* Defines if the data editor is required or not.
*
* @attribute required
* @default false
*/
required: {
validator: A.Lang.isBoolean,
value: false
},
/**
* Collection of strings used to label elements of the UI.
*
* @attribute strings
* @type {Object}
*/
strings: {
value: {
required: 'REQUIRED'
},
writeOnce: true
},
/**
* Determines if `DataEditor` is visible or not.
*
* @attribute visible
* @default false
* @type Boolean
*/
visible: {
validator: A.Lang.isBoolean,
value: true
}
}
});