Class Accordion
- extends Widget
Accordion creates an widget, consists of one or more items, which can be collapsed, expanded,
set as always visible and reordered by using Drag&Drop. Collapsing/expanding might be animated.
Constructor
Accordion
(
config
)
- Parameters:
-
config
<Object>
Object literal specifying Accordion configuration properties.
Properties
Static property used to define the default attribute
configuration for the Accordion.
Static property provides a string to identify the class.
Methods
protected
void
_afterContentHeight
(
params
)
Handles the change of "contentHeight" property of given item
- Parameters:
-
params
<EventFacade>
The event facade for the attribute change
protected
void
_afterDragEnd
(
The
,
e
)
Set drophit to false in dragdrop instance's custom value (if there has been drophit) and fires itemReordered event
- Parameters:
-
The
<Y.DD.Drag>
drag instance of the item
-
e
<Event>
the DD instance's drag:end custom event
protected
void
_afterItemAlwaysVisible
(
params
)
Handles the change of "alwaysVisible" property of given item
- Parameters:
-
params
<EventFacade>
The event facade for the attribute change
protected
void
_afterItemExpand
(
params
)
Handles the change of "expand" property of given item
- Parameters:
-
params
<EventFacade>
The event facade for the attribute change
protected
void
_afterRender
(
e
)
Sets listener to resize event
- Parameters:
-
e
<Event>
after render custom event
protected
void
_afterResizeEventChange
(
params
)
Set up resizing with the new value provided
- Parameters:
-
params
<Event>
after resizeEventChange custom event
protected
void
_collapseItem
(
item
)
Collapse an item and update its user interface
- Parameters:
-
item
<Y.AccordionItem>
The item, which should be collapsed
protected
void
_expandItem
(
item
,
height
)
Expands an item to given height. This includes also an update to item's user interface
- Parameters:
-
item
<Y.AccordionItem>
The item, which should be expanded
-
height
<Number>
The height to which we should expand the item
protected
Number
_getHeightPerStretchItem
(
)
Calculates the height per strech item.
- Returns:
Number
- The calculated height per strech item
protected
Number
_getItemContentHeight
(
item
)
Calculates the height of given item depending on its "contentHeight" property.
- Parameters:
-
item
<Y.AccordionItem>
The item, which height should be calculated
- Returns:
Number
- The calculated item's height
protected
Number
_getNodeOffsetHeight
(
node
)
Obtains the precise height of the node provided, including padding and border.
- Parameters:
-
node
<Node|HTMLElement>
The node to gather the height from
- Returns:
Number
- The calculated height or zero in case of failure
protected
void
_initEvents
(
)
Publishes Accordion's events
protected
void
_initItemDragDrop
(
item
)
Make an item draggable. The item can be reordered later.
- Parameters:
-
item
<Y.AccordionItem>
An Y.AccordionItem instance to be set as draggable
protected
void
_onCollapseComplete
(
item
,
notifyOthers
)
Executes when animated collapsing completes
- Parameters:
-
item
<Y.AccordionItem>
An Y.AccordionItem instance which has been collapsed
-
notifyOthers
<Boolean>
If true, itemCollapsed event will be fired
protected
void
_onDragEnd
(
The
,
e
)
Restores HTML structure of the drag proxy.
Fires beforeEndItemReorder event - returning false will cancel reordering
- Parameters:
-
The
<Y.DD.Drag>
drag instance of the item
-
e
<Event>
the DD instance's drag:end custom event
protected
void
_onDragStart
(
The
,
e
)
Sets the label of the item being dragged on the drag proxy.
Fires beforeItemReorder event - returning false will cancel reordering
- Parameters:
-
The
<Y.DD.Drag>
drag instance of the item
-
e
<Event>
the DD instance's drag:start custom event
protected
void
_onDropHit
(
The
,
e
)
Moves the source item before or after target item.
- Parameters:
-
The
<Y.DD.Drag>
drag instance of the item
-
e
<Event>
the DD instance's drag:drophit custom event
protected
void
_onExpandComplete
(
item
,
notifyOthers
)
Executes when animated expanding completes
- Parameters:
-
item
<Y.AccordionItem>
An Y.AccordionItem instance which has been expanded
-
notifyOthers
<Boolean>
If true, itemExpanded event will be fired
protected
void
_onItemChosen
(
item
,
srcIconAlwaysVisible
,
srcIconClose
)
Distributes the involved items as result of user interaction on item header.
Some items might be stored in the list for collapsing, other in the list for expanding.
Finally, invokes _processItems function, except if item has been expanded and
user has clicked on always visible icon.
If the user clicked on close icon, the item will be closed.
- Parameters:
-
item
<Y.AccordionItem>
The item on which user has clicked or pressed key
-
srcIconAlwaysVisible
<Boolean>
True if the user has clicked on always visible icon
-
srcIconClose
<Boolean>
True if the user has clicked on close icon
protected
void
_onItemChosenEvent
(
e
)
Listening for itemChosen event, determines the source (is that iconClose, iconAlwaysVisisble, etc.) and
invokes this._onItemChosen for further processing
- Parameters:
-
e
<Event>
The itemChosen event
protected
void
_processCollapsing
(
item
,
height
,
forceSkipAnimation
)
Collapse an item to given height. Depending on the useAnimation setting,
the process of collapsing might be animated. This setting will be ignored, if forceSkipAnimation param
is true.
- Parameters:
-
item
<Y.AccordionItem>
An Y.AccordionItem instance to be collapsed
-
height
<Number>
The height to which item should be collapsed
-
forceSkipAnimation
<Boolean>
If true, the animation will be skipped,
without taking in consideration Accordion's useAnimation setting
protected
void
_processExpanding
(
item
,
forceSkipAnimation
,
height
)
Expands an item to given height. Depending on the useAnimation setting,
the process of expanding might be animated. This setting will be ignored, if forceSkipAnimation param
is true.
- Parameters:
-
item
<Y.AccordionItem>
An Y.AccordionItem instance to be expanded
-
forceSkipAnimation
<Boolean>
If true, the animation will be skipped,
without taking in consideration Accordion's useAnimation setting
-
height
<Number>
The height to which item should be expanded
protected
void
_processItems
(
)
Process items as result of user interaction or properties change.
This includes four steps:
1. Update the properties of the items
2. Collapse all items stored in the list for collapsing
3. Adjust all stretch items
4. Expand items stored in the list for expanding
protected
void
_removeItemHandles
(
item
)
Removes all handles, attched to given item
- Parameters:
-
item
<Y.AccordionItem>
The item, which handles to remove
protected
void
_setItemProperties
(
item
,
expanding
,
alwaysVisible
)
Updates expand and alwaysVisible properties of given item with the values provided.
The properties will be updated only if needed.
- Parameters:
-
item
<Y.AccordionItem>
The item, which properties should be updated
-
expanding
<boolean>
The new value of "expanded" property
-
alwaysVisible
<boolean>
The new value of "alwaysVisible" property
protected
void
_setItemsProperties
(
)
Update properties of items, which were stored in the lists for collapsing or expanding
protected
void
_setItemUI
(
item
,
expanding
,
alwaysVisible
)
Updates user interface of an item and marks it as expanded, alwaysVisible or both
- Parameters:
-
item
<Y.AccordionItem>
The item, which user interface should be updated
-
expanding
<boolean>
If true, the item will be marked as expanded.
If false, the item will be marked as collapsed
-
alwaysVisible
<boolean>
If true, the item will be marked as always visible.
If false, the always visible mark will be removed
protected
void
_setUpResizing
(
String
)
Subscribe for resize event, which could be provided from the browser or from an arbitrary object.
For example, if there is LayoutManager in the page, it is preferable to subscribe to its resize event,
instead to those, which browser provides.
- Parameters:
-
String
<String|Object>
"default" or object with the following properties:
- sourceObject
- An abbitrary object
- resizeEvent
- The name of its resize event
protected
void
_storeItemsForCollapsing
(
itemsToBeExcluded
)
Stores all items, which are expanded and not set as always visible in list
in order to be collapsed later.
- Parameters:
-
itemsToBeExcluded
<Object>
(optional) Contains one or more Y.AccordionItem instances,
which should be not included in the list
addItem
(
item
,
parentItem
)
Add an item to Accordion. Items could be added/removed multiple times and they
will be rendered in the process of adding, if not.
The item will be expanded, collapsed, or set as always visible depending on the
settings. Item's properties will be also updated, if they are incomplete.
For example, if alwaysVisible is true, but expanded
property is false, it will be set to true also.
If the second param, parentItem is an Y.AccordionItem instance,
registered in Accordion, the item will be added as child of the parentItem
- Parameters:
-
item
<Y.AccordionItem>
The item to be added in Accordion
-
parentItem
<Y.AccordionItem>
(optional) This item will be the parent of the item being added
- Returns:
- Boolean True in case of successfully added item, false otherwise
protected
Number
adjustStretchItems
(
)
Helper method to adjust the height of all items, which contentHeight property is set as "stretch".
If some item has animation running, it will be stopped before running another one.
- Returns:
Number
- The calculated height per strech item
protected
void
bindUI
(
)
Add listener to itemChosen event in Accordion's content box
protected
void
destructor
(
)
Destructor lifecycle implementation for the Accordion class.
Removes and destroys all registered items.
getItem
(
param
)
Searching for item, previously registered in Accordion
- Parameters:
-
param
<Number|Y.Node>
If number, this must be item's index.
If Node, it should be the value of item's contentBox or boundingBox properties
- Returns:
- Y.AccordionItem The found item or null
getItemIndex
(
item
)
Looking for the index of previously registered item
- Parameters:
-
item
<Y.AccordionItem>
The item which index should be returned
- Returns:
- Number Item index or
-1 if item has been not found
protected
void
initializer
(
config
)
Initializer lifecycle implementation for the Accordion class. Publishes events,
initializes internal properties and subscribes for resize event.
- Parameters:
-
config
<Object>
Configuration object literal for the Accordion
removeItem
(
p_item
)
Removes an previously registered item in Accordion
- Parameters:
-
p_item
<Y.AccordionItem|Number>
The item to be removed, or its index
- Returns:
- Y.AccordionItem The removed item or null if not found
protected
void
renderUI
(
)
Creates one or more items found in Accordion's contentBox
Events
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
beforeEndItemReorder
(
event
)
Fires before the end of item reordering
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item being reordered
beforeItemAdd
(
event
)
Signals the beginning of adding an item to the Accordion.
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item being added
beforeItemCollapse
(
event
)
Signals the beginning of collapsing an item
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item being collapsed
beforeItemExpand
(
event
)
Signals the beginning of expanding an item
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item being expanded
beforeItemRemove
(
event
)
Signals the beginning of removing an item.
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item being removed
beforeItemReorder
(
event
)
Signals the beginning of reordering an item
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item being reordered
beforeItemResized
(
event
)
Signals the beginning of resizing an item.
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item being resized
collapseOthersOnExpandChange
(
event
)
Fires when the value for the configuration attribute 'collapseOthersOnExpand' 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
itemAdded
(
event
)
Signals an item has been added to the Accordion.
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item that has been added
itemChosenChange
(
event
)
Fires when the value for the configuration attribute 'itemChosen' 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
itemCollapsed
(
event
)
Signals an item has been collapsed
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item that has been collapsed
itemExpanded
(
event
)
Signals an item has been expanded
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item that has been expanded
itemRemoved
(
event
)
Signals an item has been removed from Accordion.
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item that has been removed
itemReordered
(
event
)
Signals an item has been reordered
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item that has been reordered
itemResized
(
event
)
Signals an item has been resized.
- Parameters:
-
event
<Event.Facade>
An Event Facade object with the following attribute specific properties added:
- item
- An
AccordionItem instance of the item that has been resized
itemsChange
(
event
)
Fires when the value for the configuration attribute 'items' 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
reorderItemsChange
(
event
)
Fires when the value for the configuration attribute 'reorderItems' 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
resizeEventChange
(
event
)
Fires when the value for the configuration attribute 'resizeEvent' 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
useAnimationChange
(
event
)
Fires when the value for the configuration attribute 'useAnimation' 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
Animation config values, see Y.Animation
Default Value: {
duration: 1,
easing: Easing.easeOutStrong
}
If true, on item expanding, all other expanded and not set as always visible items, will be collapsed
Otherwise, they will stay open
Default Value: true
The event on which Accordion should listen for user interactions.
The value can be also mousedown or mouseup. Mousedown event can be used if
drag&drop is not enabled
Default Value: click
Contains the items, currently added to Accordion
Default Value: []
Whether or not the items in Accordion can be reordered by using drag&drop
Default Value: true
resizeEvent
- String or Object, see the description above
The event on which Accordion should listen for resizing.
The value must be one of these:
- String "default" - the Accordion will subscribe to Y.windowresize event
- An object in the following form:
{
sourceObject: some_javascript_object,
resizeEvent: an_event_to_subscribe
}
For example, if we are using LayoutManager's instance as sourceObject, we will have to use its "resize" event as resizeEvent
Default Value: "default"
Whether or not Accordion should use animation when expand or collapse some item
The animation in Accordion is slow in IE6
Default Value: : true