/**
* The Boolean Data Editor Component
*
* @module aui-boolean-data-editor
*/
var CSS_BOOLEAN_DATA_EDITOR = A.getClassName('boolean', 'data', 'editor'),
CSS_BOOLEAN_DATA_EDITOR_CONTENT = A.getClassName('boolean', 'data', 'editor', 'content'),
CSS_BOOLEAN_DATA_EDITOR_SWITCH_BUTTON = A.getClassName('boolean', 'data', 'editor', 'switch', 'button');
/**
* A base class for Boolean Data Editor.
*
* @class A.BooleanDataEditor
* @extends A.DataEditor
* @param {Object} config Object literal specifying widget configuration
* properties.
* @constructor
*/
A.BooleanDataEditor = A.Base.create('boolean-data-editor', A.DataEditor, [], {
TPL_EDITOR_CONTENT: '<div class="' + CSS_BOOLEAN_DATA_EDITOR + '">' +
'<div><div class="' + CSS_BOOLEAN_DATA_EDITOR_CONTENT + '"></div>' +
'<div class="' + CSS_BOOLEAN_DATA_EDITOR_SWITCH_BUTTON + '"></div></div></div>',
/**
* Constructor for the `A.BooleanDataEditor`. Lifecycle.
*
* @method initializer
* @protected
*/
initializer: function() {
this._createSwitchButton();
this._uiSetEditedValue(this.get('editedValue'));
this._buttonSwitch.on('activatedChange', A.bind(this._afterButtonSwitchActivatedChange, this));
this.after({
checkedContentChange: this._afterCheckedContentChange,
editedValueChange: this._afterEditedValueChange,
innerLabelLeftChange: this._afterInnerLabelLeftChange,
innerLabelRightChange: this._afterInnerLabelRightChange,
uncheckedContentChange: this._afterUncheckedContentChange
});
},
/**
* Fired after the checkbox is clicked.
*
* @method _afterButtonSwitchActivatedChange
* @param {CustomEvent} event The fired event
* @protected
*/
_afterButtonSwitchActivatedChange: function(event) {
this.set('editedValue', event.newVal);
},
/**
* Fired after the `checkedContent` attribute is set.
*
* @method _afterCheckedContentChange
* @protected
*/
_afterCheckedContentChange: function() {
if (this.get('editedValue')) {
this._updateContent(this.get('checkedContent'));
}
},
/**
* Fired after the `editedValue` attribute is set.
*
* @method _afterEditedValueChange
* @param {CustomEvent} event The fired event
* @protected
*/
_afterEditedValueChange: function() {
this._uiSetEditedValue(this.get('editedValue'));
},
/**
* Fired after the `innerLabelLeft` attribute is set.
*
* @method _afterInnerLabelLeftChange
* @param {CustomEvent} event The fired event
* @protected
*/
_afterInnerLabelLeftChange: function(event) {
this._buttonSwitch.set('innerLabelLeft', event.newVal);
},
/**
* Fired after the `innerLabelRight` attribute is set.
*
* @method _afterInnerLabelRightChange
* @param {CustomEvent} event The fired event
* @protected
*/
_afterInnerLabelRightChange: function(event) {
this._buttonSwitch.set('innerLabelRight', event.newVal);
},
/**
* Fired after the `uncheckedContent` attribute is set.
*
* @method _afterUncheckedContentChange
* @protected
*/
_afterUncheckedContentChange: function() {
if (!this.get('editedValue')) {
this._updateContent(this.get('uncheckedContent'));
}
},
/**
* Returns the switch button instance.
*
* @method _createSwitchButton
* @return {Object}
* @protected
*/
_createSwitchButton: function () {
this._buttonSwitch = new A.ButtonSwitch({
innerLabelLeft: this.get('innerLabelLeft'),
innerLabelRight: this.get('innerLabelRight')
}).render(this.get('node').one('.' + CSS_BOOLEAN_DATA_EDITOR_SWITCH_BUTTON));
},
/**
* Sets content attributes like `checkedContent` and `uncheckedContent`.
*
* @method _setContent
* @param {String | Node} val
* @return {Node}
* @protected
*/
_setContent: function(val) {
if (A.Lang.isString(val)) {
val = A.Node.create(val);
}
return val;
},
/**
* Updates the ui according to the value of the `editedValue` attribute.
*
* @method _uiSetEditedValue
* @param editedValue
* @protected
*/
_uiSetEditedValue: function(editedValue) {
this._buttonSwitch.set('activated', editedValue);
if (editedValue) {
this._updateContent(this.get('checkedContent'));
}
else {
this._updateContent(this.get('uncheckedContent'));
}
},
/**
* Updates the boolean data editor with the given content.
*
* @method _updateContent
* @protected
*/
_updateContent: function(content) {
this.get('node').one('.' + CSS_BOOLEAN_DATA_EDITOR_CONTENT).setHTML(content);
},
/**
* Validates content attributes like `checkedContent` and `uncheckedContent`.
*
* @method _validateContent
* @param {*} val
* @return {Boolean}
* @protected
*/
_validateContent: function(val) {
return A.Lang.isString(val) || A.instanceOf(val, A.Node);
}
}, {
/**
* Static property used to define the default attribute configuration
* for the `A.BooleanDataEditor`.
*
* @property ATTRS
* @type Object
* @static
*/
ATTRS: {
/**
* Optional content that should show up when the data editor is in the
* checked state.
*
* @attribute checkedContent
* @default null
* @type String | Node
*/
checkedContent: {
setter: '_setContent',
validator: '_validateContent',
value: ''
},
/**
* The value after edition.
*
* @attribute editedValue
* @default false
* @type Boolean
*/
editedValue: {
value: false
},
/**
* The label to be used on button left side.
*
* @attribute innerLabelLeft
* @type String
*/
innerLabelLeft: {
validator: A.Lang.isString,
value: ''
},
/**
* The label to be used on button right side.
*
* @attribute innerLabelRight
* @type String
*/
innerLabelRight: {
validator: A.Lang.isString,
value: ''
},
/**
* The value to be edited.
*
* @attribute originalValue
* @default false
* @type Boolean
*/
originalValue: {
value: false
},
/**
* Optional content that should show up when the data editor is in the
* unchecked state.
*
* @attribute uncheckedContent
* @default null
* @type String | Node
*/
uncheckedContent: {
setter: '_setContent',
validator: '_validateContent',
value: ''
}
}
});