Yahoo! UI Library

gallery-accordion  1.10

Yahoo! UI Library > gallery-accordion > Accordion
Search:
 
Filters

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.

Properties

_animations - protected Object

Contains currently running animations

_forCollapsing - protected Object

Contains items for collapsing

_forExpanding - protected Object

Contains items for expanding

Accordion.ATTRS - static Object

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

Accordion.NAME - static String

Static property provides a string to identify the class.

Methods

_afterContentHeight

protected void _afterContentHeight ( params )
Handles the change of "contentHeight" property of given item
Parameters:
params <EventFacade> The event facade for the attribute change

_afterContentUpdate

protected void _afterContentUpdate ( params )
Handles the change of "contentUpdate" property of given item
Parameters:
params <EventFacade> The event facade for the attribute change

_afterDragEnd

protected void _afterDragEnd ( dd , e )
Set drophit to false in dragdrop instance's custom value (if there has been drophit) and fires itemReordered event
Parameters:
dd <Y.DD.Drag> The drag instance of the item
e <Event> the DD instance's drag:end custom event

_afterItemAlwaysVisible

protected void _afterItemAlwaysVisible ( params )
Handles the change of "alwaysVisible" property of given item
Parameters:
params <EventFacade> The event facade for the attribute change

_afterItemExpand

protected void _afterItemExpand ( params )
Handles the change of "expand" property of given item
Parameters:
params <EventFacade> The event facade for the attribute change

_afterRender

protected void _afterRender ( e )
Sets listener to resize event
Parameters:
e <Event> after render custom event

_afterResizeEventChange

protected void _afterResizeEventChange ( params )
Set up resizing with the new value provided
Parameters:
params <Event> after resizeEventChange custom event

_collapseItem

protected void _collapseItem ( item )
Collapse an item and update its user interface
Parameters:
item <Y.AccordionItem> The item, which should be collapsed

_expandItem

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

_findStdModSection

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.

_getHeightPerStretchItem

protected Number _getHeightPerStretchItem ( )
Calculates the height per strech item.
Returns: Number
The calculated height per strech item

_getItemContentHeight

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

_getNodeOffsetHeight

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

_initItemDragDrop

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

_onCollapseComplete

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

_onDragEnd

protected void _onDragEnd ( dd , e )
Restores HTML structure of the drag proxy. Fires beforeEndItemReorder event - returning false will cancel reordering
Parameters:
dd <Y.DD.Drag> The drag instance of the item
e <Event> the DD instance's drag:end custom event

_onDragStart

protected void _onDragStart ( dd , e )
Sets the label of the item being dragged on the drag proxy. Fires beforeItemReorder event - returning false will cancel reordering
Parameters:
dd <Y.DD.Drag> The drag instance of the item
e <Event> the DD instance's drag:start custom event

_onDropHit

protected void _onDropHit ( dd , e )
Moves the source item before or after target item.
Parameters:
dd <Y.DD.Drag> The drag instance of the item
e <Event> the DD instance's drag:drophit custom event

_onExpandComplete

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

_onItemChosen

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

_onItemChosenEvent

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

_processCollapsing

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

_processExpanding

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

_processItems

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

_removeItemHandles

protected void _removeItemHandles ( item )
Removes all handles, attched to given item
Parameters:
item <Y.AccordionItem> The item, which handles to remove

_setItemProperties

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

_setItemsProperties

protected void _setItemsProperties ( )
Update properties of items, which were stored in the lists for collapsing or expanding

_setItemUI

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

_setUpResizing

protected void _setUpResizing ( value )
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:
value <String|Object> String "default" or object with the following properties:
sourceObject
An abbitrary object
resizeEvent
The name of its resize event

_storeItemsForCollapsing

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

Boolean 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

adjustStretchItems

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

bindUI

protected void bindUI ( )
Add listener to itemChosen event in Accordion's content box

destructor

protected void destructor ( )
Destructor lifecycle implementation for the Accordion class. Removes and destroys all registered items.

getItem

Y.AccordionItem 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

Number 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

initializer

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

Y.AccordionItem 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

renderUI

protected void renderUI ( )
Creates one or more items found in Accordion's contentBox

Events

animationChange

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 - Object

Animation config values, see Y.Animation
Default Value: { duration: 1, easing: Easing.easeOutStrong }

collapseOthersOnExpand - Boolean

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

itemChosen - String

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

items - Array

Contains the items, currently added to Accordion
Default Value: []

reorderItems - Boolean

Boolean indicating that items can be reordered via drag and drop.
Enabling items reordering requires also including the optional drag and drop modules in YUI instance:
'dd-constrain', 'dd-proxy', 'dd-drop', or just 'dd'
Default Value: false

resizeEvent - String or Object

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"

useAnimation - Boolean

Boolean indicating that Accordion should use animation when expanding or collapsing items.
Default Value: true
Copyright © 2010 Yahoo! Inc. All rights reserved.