Alloy UI

aui-editable  1.0.1

 
Filters
Classes

Class Editable - extends Component

A base class for Editable, providing:
  • Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
  • Edit in place elements
Quick Example:
var instance = new A.Editable({
node: '#editor'
}).render();
Check the list of Configuration Attributes available for Editable.

Constructor

Editable ( config )
Parameters:
config <Object> Object literal specifying widget configuration properties.

Properties

Editable.ATTRS - static Object

Static property used to define the default attribute configuration for the Editable.

Editable.NAME - static String

Static property provides a string to identify the class.

Properties inherited from Attribute:

Properties inherited from Base:

Properties inherited from Component:

Configuration Attributes

cancelButton - String

ButtonItem constructor Object for the cancelButton.
Default Value: Button constructor Object.

contentText - String

Content text.
Default Value: ''

eventType - String

Event type to initialize the editable.
Default Value: 'click'

formatInput - function

Function to format the input text displayed on the input.
Default Value: null

formatOutput - function

Function to format the output text displayed on the input.
Default Value: null

icons - Array

Array with icons for the Toolbar.
Default Value: []

inputType - String

Type of the input used to edit the node.
Default Value: 'text'

node - Node

Node to setup the editable.

renderTo - String | Node

Node to render the editable.

saveButton - String

ButtonItem constructor Object for the saveButton.
Default Value: Button constructor Object.

Configuration attributes inherited from Widget:

Configuration attributes inherited from Base:

Configuration attributes inherited from Component:

Methods

_afterFocusedChangeEditable

protected void _afterFocusedChangeEditable ( event )
Fires the stopEditing event.
Parameters:
event <EventFacade>

_createEvents

protected void _createEvents ( )
Create the Events.

_defCancelFn

protected void _defCancelFn ( event )
Fires the cancel event.
Parameters:
event <EventFacade> cancel event facade

_defSaveFn

protected void _defSaveFn ( event )
Fires the save event.
Parameters:
event <EventFacade> save event facade

_defStartEditingFn

protected void _defStartEditingFn ( event )
Fires the startEditing event.
Parameters:
event <EventFacade> startEditing event facade

_defStopEditingFn

protected void _defStopEditingFn ( event )
Fires the stopEditing event.
Parameters:
event <EventFacade> stopEditing event facade

_onKeypressEditable

protected void _onKeypressEditable ( event )
Fires onkeypress occurs on the editable element.
Parameters:
event <EventFacade>

_onMouseEnterEditable

protected void _onMouseEnterEditable ( event )
Fires onmouseenter occurs on the editable element.
Parameters:
event <EventFacade>

_onMouseLeaveEditable

protected void _onMouseLeaveEditable ( event )
Fires onmouseleave occurs on the editable element.
Parameters:
event <EventFacade>

_setInput

protected void _setInput ( value )
Set the value of the inputNode.
Parameters:
value <String> Value of the input.

_setOutput

protected void _setOutput ( value )
Set the innerHTML of the node.
Parameters:
value <String>

_startEditing

protected void _startEditing ( event )
Fires when start editing.
Parameters:
event <EventFacade>

_syncContentText

protected void _syncContentText ( event )
Sync the content text.
Parameters:
event <EventFacade>

_toHTML

protected String _toHTML ( text )
Converts the new lines \n to
(i.e., nl2br).
Parameters:
text <String> Input text.

_toText

protected String _toText ( text )
Converts HTML to text.
Parameters:
text <String> HTML input.

bindUI

protected void bindUI ( )
Bind the events on the Editable UI. Lifecycle.

cancel

void cancel ( )
Cancel the editable. Return to the original state.

initializer

protected void initializer ( )
Construction logic executed during Editable instantiation. Lifecycle.

renderUI

protected void renderUI ( )
Create the DOM structure for the Editable. Lifecycle.

save

void save ( )
Save the editable. Fires the save event.

syncUI

protected void syncUI ( )
Sync the Editable UI. Lifecycle.

Methods inherited from Plugin.Host:

Events

cancel

cancel ( event )
Handles the cancel event.
Parameters:
event<Event.Facade> The cancel event.
Preventable: This event is preventable by method e.preventDefault(). The default function executed by this event is _defCancelFn.

cancelButtonChange

cancelButtonChange ( event )
Fires when the value for the configuration attribute 'cancelButton' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

contentTextChange

contentTextChange ( event )
Fires when the value for the configuration attribute 'contentText' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

eventTypeChange

eventTypeChange ( event )
Fires when the value for the configuration attribute 'eventType' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

formatInputChange

formatInputChange ( event )
Fires when the value for the configuration attribute 'formatInput' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

formatOutputChange

formatOutputChange ( event )
Fires when the value for the configuration attribute 'formatOutput' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

iconsChange

iconsChange ( event )
Fires when the value for the configuration attribute 'icons' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

inputTypeChange

inputTypeChange ( event )
Fires when the value for the configuration attribute 'inputType' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

nodeChange

nodeChange ( event )
Fires when the value for the configuration attribute 'node' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

renderToChange

renderToChange ( event )
Fires when the value for the configuration attribute 'renderTo' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

save

save ( event )
Handles the save event.
Parameters:
event<Event.Facade> The save event.
Preventable: This event is preventable by method e.preventDefault(). The default function executed by this event is _defSaveFn.

saveButtonChange

saveButtonChange ( event )
Fires when the value for the configuration attribute 'saveButton' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

startEditing

startEditing ( event )
Handles the startEditing event.
Parameters:
event<Event.Facade> The startEditing event.
Preventable: This event is preventable by method e.preventDefault(). The default function executed by this event is _defStartEditingFn.

stopEditing

stopEditing ( event )
Handles the stopEditing event.
Parameters:
event<Event.Facade> The stopEditing event.
Preventable: This event is preventable by method e.preventDefault(). The default function executed by this event is _defStopEditingFn.