Class AccordionItem
- extends Widget
Create an AccordionItem widget.
Properties
Static property used to define the default attribute
configuration for the Accordion.
HTML_PARSER
- protected static Object
Static Object hash used to capture existing markup for progressive
enhancement. Keys correspond to config attribute names and values
are selectors used to inspect the srcNode for an existing node
structure.
NAME
- static String
Static property provides a string to identify the class.
The template HTML strings for each of header components.
e.g.
{
icon : '<a class="yui3-accordion-item-icon"></a>',
label: '<a href="#" class="yui3-accordion-item-label"></a>',
iconsContainer: '<div class="yui3-accordion-item-icons"></div>',
iconAlwaysVisible: '<a href="#" class="yui3-accordion-item-iconalwaysvisible"></a>',
iconExpanded: '<a href="#" class="yui3-accordion-item-iconexpanded"></a>',
iconClose: '<a href="#" class="yui3-accordion-item-iconclose yui3-accordion-item-iconclose-hidden"></a>'
}
Methods
protected
void
_addHeaderComponents
(
)
Add label and icons in the header. Also, it creates header in if not set from markup
protected
void
_applyParser
(
config
)
Overwrites Widget's _applyParser method in order to parse yuiConfig attribute before entering in HTML_PARSER attributes
- Parameters:
-
config
<Object>
User configuration object (will be populated with values from Node)
protected
void
_closableChanged
(
params
)
Handles the change of "closableChanged" property. Hides or shows close icon
- Parameters:
-
params
<EventFacade>
The event facade for the attribute change
protected
void
_createHeader
(
)
Creates the header content
protected
Number
_extractFixedMethodValue
(
value
)
Parses and returns the value of contentHeight property, if set method "fixed".
The value must be in this format: fixed-X, where X is integer
- Parameters:
-
value
<String>
The value to be parsed
- Returns:
Number
- The parsed value or null
protected
Node
_findStdModSection
(
section
)
Overwrites Y.WidgetStdMod fuction in order to resolve Widget 3.1 issue:
If CONTENT_TEMPLATE is null, in renderUI the result of the following code:
this.getStdModNode( Y.WidgetStdMod.HEADER );
is null.
The same is with this.getStdModNode( Y.WidgetStdMod.BODY );
.
- Parameters:
-
section
<String>
The section for which the render Node is to be found. Either WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER.
- Returns:
Node
- The rendered node for the given section, or null if not found.
protected
void
_labelChanged
(
params
)
Handles the change of "labelChanged" property. Updates item's UI with the label provided
- Parameters:
-
params
<EventFacade>
The event facade for the attribute change
protected
void
_onLinkClick
(
e
)
Prevent default action on clicking the link in the label
- Parameters:
-
e
<Event>
The click event
protected
Node
_setIcon
(
value
)
Setter applied to the input when updating the icon attribute. Input can
be a Node, raw HTMLElement, or a selector string to locate it.
- Parameters:
-
value
<Node|HTMLElement|String>
The icon element Node or selector
- Returns:
Node
- The Node if found, null otherwise.
protected
Node
_setIconAlwaysVisible
(
value
)
Setter applied to the input when updating the iconAlwaysVisible attribute. Input can
be a Node, raw HTMLElement, or a selector string to locate it.
- Parameters:
-
value
<Node|HTMLElement|String>
The iconAlwaysVisible element Node or selector
- Returns:
Node
- The Node if found, null otherwise.
protected
Node
_setIconClose
(
value
)
Setter applied to the input when updating the iconClose attribute. Input can
be a Node, raw HTMLElement, or a selector string to locate it.
- Parameters:
-
value
<Node|HTMLElement|String>
The iconClose element Node or selector
- Returns:
Node
- The Node if found, null otherwise.
protected
Node
_setIconExpanded
(
value
)
Setter applied to the input when updating the iconExpanded attribute. Input can
be a Node, raw HTMLElement, or a selector string to locate it.
- Parameters:
-
value
<Node|HTMLElement|String>
The iconExpanded element Node or selector
- Returns:
Node
- The Node if found, null otherwise.
protected
Node
_setIconsContainer
(
value
)
Setter applied to the input when updating the iconsContainer attribute. Input can
be a Node, raw HTMLElement, or a selector string to locate it.
- Parameters:
-
value
<Node|HTMLElement|String>
The iconsContainer element Node or selector
- Returns:
Node
- The Node if found, null otherwise.
protected
Node
_setNodeLabel
(
value
)
Setter applied to the input when updating the nodeLabel attribute. Input can
be a Node, raw HTMLElement, or a selector string to locate it.
- Parameters:
-
value
<Node|HTMLElement|String>
The nodeLabel element Node or selector
- Returns:
Node
- The Node if found, null otherwise.
protected
Boolean
_validateIcon
(
value
)
Validator applied to the icon attribute. Setting new value is not allowed if Accordion has been rendered.
- Parameters:
-
value
<MIXED>
the value for the icon attribute
protected
Boolean
_validateIconAlwaysVisible
(
value
)
Validator applied to the iconAlwaysVisible attribute. Setting new value is not allowed if Accordion has been rendered.
- Parameters:
-
value
<MIXED>
the value for the iconAlwaysVisible attribute
protected
Boolean
_validateIconClose
(
value
)
Validator applied to the iconClose attribute. Setting new value is not allowed if Accordion has been rendered.
- Parameters:
-
value
<MIXED>
the value for the iconClose attribute
protected
Boolean
_validateIconExpanded
(
value
)
Validator applied to the iconExpanded attribute. Setting new value is not allowed if Accordion has been rendered.
- Parameters:
-
value
<MIXED>
the value for the iconExpanded attribute
protected
Boolean
_validateIconsContainer
(
value
)
Validator applied to the iconsContainer attribute. Setting new value is not allowed if Accordion has been rendered.
- Parameters:
-
value
<MIXED>
the value for the iconsContainer attribute
protected
Boolean
_validateNodeLabel
(
value
)
Validator applied to the nodeLabel attribute. Setting new value is not allowed if Accordion has been rendered.
- Parameters:
-
value
<MIXED>
the value for the nodeLabel attribute
protected
void
bindUI
(
)
Configures/Sets up listeners to bind Widget State to UI/DOM
protected
void
destructor
(
)
Destructor lifecycle implementation for the AccordionItem class.
protected
void
initializer
(
config
)
Initializer lifecycle implementation for the AccordionItem class.
- Parameters:
-
config
<Object>
Configuration object literal for the AccordionItem
Boolean
markAsAlwaysVisible
(
alwaysVisible
)
Marks the item as always visible by adding class to always visible icon.
The icon will be updated only if needed.
- Parameters:
-
alwaysVisible
<Boolean>
If true, the item should be marked as always visible.
- Returns:
Boolean
- Return true if the icon has been updated, false if there was no need to update
Boolean
markAsCollapsing
(
collapsing
)
Marks the item as collapsing by adding class to expand icon.
The method will update icon only if needed.
- Parameters:
-
collapsing
<Boolean>
Boolean indicating that the item should be marked as collapsing.
- Returns:
Boolean
- Return true if the icon has been updated, false if there was no need to update
Boolean
markAsExpanded
(
expanded
)
Marks the item as expanded by adding class to expand icon.
The icon will be updated only if needed.
- Parameters:
-
expanded
<Boolean>
Boolean indicating that item should be marked as expanded.
- Returns:
Boolean
- Return true if the icon has been updated, false if there was no need to update
Boolean
markAsExpanding
(
expanding
)
Marks the item as expanding by adding class to expand icon.
The method will update icon only if needed.
- Parameters:
-
expanding
<Boolean>
Boolean indicating that the item should be marked as expanding.
- Returns:
Boolean
- Return true if the icon has been updated, false if there was no need to update
protected
void
renderUI
(
)
Creates AccordionItem's header.
void
resize
(
)
Forces the item to resize as result of direct content manipulation (via 'innerHTML').
This method should be invoked if 'contentHeight' property has been set to 'auto'.
Events
alwaysVisibleChange
(
event
)
Fires when the value for the configuration attribute 'alwaysVisible' 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
animationChange
(
event
)
Fires when the value for the configuration attribute 'animation' 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
closableChange
(
event
)
Fires when the value for the configuration attribute 'closable' 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
contentHeightChange
(
event
)
Fires when the value for the configuration attribute 'contentHeight' 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
expandedChange
(
event
)
Fires when the value for the configuration attribute 'expanded' 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
iconAlwaysVisibleChange
(
event
)
Fires when the value for the configuration attribute 'iconAlwaysVisible' 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
iconChange
(
event
)
Fires when the value for the configuration attribute 'icon' 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
iconCloseChange
(
event
)
Fires when the value for the configuration attribute 'iconClose' 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
iconExpandedChange
(
event
)
Fires when the value for the configuration attribute 'iconExpanded' 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
iconsContainerChange
(
event
)
Fires when the value for the configuration attribute 'iconsContainer' 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
labelChange
(
event
)
Fires when the value for the configuration attribute 'label' 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
nodeLabelChange
(
event
)
Fires when the value for the configuration attribute 'nodeLabel' 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
stringsChange
(
event
)
Fires when the value for the configuration attribute 'strings' 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
Configuration Attributes
Get/Set always visible status of the item
Default Value: false
Get/Set the animaton specific settings. By default there are no any settings.
If set, they will overwrite Accordion's animation settings
Default Value: {}
Boolean indicating that the item can be closed by user.
If true, there will be placed close icon, otherwise not
Default Value: false
Describe the method, which will be used when expanding/collapsing
the item. The value should be an object with at least one property ("method"):
- method
- The method can be one of these: "auto", "fixed" and "stretch"
- height
- Must be set only if method's value is "fixed"
Default Value: auto
Get/Set expanded status of the item
Default Value: false
The Node, representing item's icon
Default Value: null
The Node, representing icon always visible
Default Value: null
The Node, representing icon close, or null if the item is not closable
Default Value: null
The Node, representing icon expanded
Default Value: null
The container of iconAlwaysVisible, iconExpanded and iconClose
Default Value: null
The node, which contains item's label
Default Value: null
Provides client side string localization support.
Default Value: Object English messages