Editable Class
<p><img src="assets/images/aui-editable/main.png"/></p>
A base class for Editable, providing: <ul> <li>Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)</li> <li>Edit in place elements</li> </ul>
Quick Example:<br/>
<pre><code>var instance = new A.Editable({ node: '#editor' }).render(); </code></pre>
Check the list of <a href="Editable.html#configattributes">Configuration Attributes</a> available for Editable.
Constructor
Editable
-
config
Parameters:
-
configObjectObject literal specifying widget configuration properties.
Index
Methods
- _afterFocusedChangeEditable
- _createDropdown
- _createEvents
- _defCancelFn
- _defSaveFn
- _defStartEditingFn
- _defStopEditingFn
- _onKeypressEditable
- _onMouseEnterEditable
- _onMouseLeaveEditable
- _setInput
- _setOutput
- _startEditing
- _syncContentText
- _toHTML
- _toText
- _uiSetNode
- bindUI
- cancel
- initializer
- renderUI
- save
- syncUI
Properties
- Editable.ATTRS static
- Editable.NAME static
Attributes
Events
Methods
_afterFocusedChangeEditable
-
event
Fires the <a href="Editable.html#event_stopEditing">stopEditing</a> event.
Parameters:
-
eventEventFacade
_createDropdown
-
Optional
Creates a Dropdown instance.
Parameters:
-
OptionalObjectconfig params to override the default values.
_createEvents
()
protected
Create the Events.
_defCancelFn
-
event
Fires the cancel event.
Parameters:
-
eventEventFacadecancel event facade
_defSaveFn
-
event
Fires the save event.
Parameters:
-
eventEventFacadesave event facade
_defStartEditingFn
-
event
Fires the startEditing event.
Parameters:
-
eventEventFacadestartEditing event facade
_defStopEditingFn
-
event
Fires the stopEditing event.
Parameters:
-
eventEventFacadestopEditing event facade
_onKeypressEditable
-
event
Fires <code>onkeypress</code> occurs on the editable element.
Parameters:
-
eventEventFacade
_onMouseEnterEditable
-
event
Fires <code>onmouseenter</code> occurs on the editable element.
Parameters:
-
eventEventFacade
_onMouseLeaveEditable
-
event
Fires <code>onmouseleave</code> occurs on the editable element.
Parameters:
-
eventEventFacade
_setInput
-
value
Set the value of the <a href="Editable.html#property_inputNode">inputNode</a>.
Parameters:
-
valueStringValue of the input.
_setOutput
-
value
Set the <code>innerHTML</code> of the <a href="Editable.html#config_node">node</a>.
Parameters:
-
valueString
_toHTML
-
text
Converts the new lines <code>\n</code> to <code><br/></code> (i.e., nl2br).
Parameters:
-
textStringInput text.
Returns:
_toText
-
text
Converts HTML to text.
Parameters:
-
textStringHTML input.
Returns:
_uiSetNode
-
node.
Handles the updating of the UI when the node is set.
Parameters:
-
node.Node
bindUI
()
protected
Bind the events on the Editable UI. Lifecycle.
cancel
()
Cancel the editable. Return to the original state.
initializer
()
protected
Construction logic executed during Editable instantiation. Lifecycle.
renderUI
()
protected
Create the DOM structure for the Editable. Lifecycle.
save
()
Save the editable. Fires the <a href="Editable.html#event_save">save</a> event.
syncUI
()
protected
Sync the Editable UI. Lifecycle.
Properties
Editable.ATTRS
Object
static
Static property used to define the default attribute configuration for the Editable.
Editable.NAME
String
static
Static property provides a string to identify the class.
Attributes
cancelButton
String
<a href="ButtonItem.html">ButtonItem</a> constructor Object for the cancelButton.
Default: Button constructor Object.
Events
startEditing
Event.Custom
Handles the startEditing event.
Event Payload:
-
eventEvent.FacadeThe startEditing event.
stopEditing
Event.Custom
Handles the stopEditing event.
Event Payload:
-
eventEvent.FacadeThe stopEditing event.