Class YAHOO.widget.Toolbar
- extends YAHOO.util.Element
Provides a rich toolbar widget based on the button and menu widgets
Constructor
YAHOO.widget.Toolbar
(
el
,
attrs
)
- Parameters:
-
el
<String/HTMLElement>
The element to turn into a toolbar.
-
attrs
<Object>
Object liternal containing configuration parameters.
Properties
Internal property list of current button groups in the toolbar
Internal property list of current buttons in the toolbar
Object reference containing colors hex and text values.
The HTML Element containing the colorPicker
_keyNav
- private Boolean
Flag to determine if the arrow nav listeners have been attached
Internal counter for walking the buttons in the toolbar with the arrow keys
_sep
- protected HTMLElement
Internal reference to the separator HTML Element for cloning
_sepCount
- protected Number
Internal refernce for counting separators, so we can give them a useful class name for styling
Object reference to the titlebar
Standard browser detection
The default button to use
Default CSS class to apply to the toolbar container element
Default CSS class to apply when the toolbar is disabled
Default CSS class to apply to the toolbar's drag handle element
Default prefix for dynamically created class names
Default CSS class to apply to all separators in the toolbar
dd
- Object
The DragDrop instance associated with the Toolbar
String for Toolbar Collapse Button
String for spinbutton down
String for spinbutton dynamic label. Note the {VALUE} will be replaced with YAHOO.lang.substitute
Methods
private
void
_addMenuClasses
(
ev
,
na
,
o
)
This method is called from Menu's renderEvent to add a few more classes to the menu items
- Parameters:
-
ev
<String>
The event that fired.
-
na
<Array>
Array of event information.
-
o
<Object>
Button config object.
- Returns:
void
protected
void
_buttonClick
(
ev
,
info
)
Click handler for all buttons in the toolbar.
- Parameters:
-
ev
<String>
The event that was passed in.
-
info
<Object>
Object literal of information about the button that was clicked.
- Returns:
void
private
void
_createColorPicker
(
id
)
Creates the core DOM reference to the color picker menu item.
- Parameters:
-
id
<String>
the id of the toolbar to prefix this DOM container with.
- Returns:
void
private
void
_handleFocus
(
)
Sets up the listeners for the arrow key navigation
private
void
_makeColorButton
(
_oButton
)
Called to turn a "color" button into a menu button with an Overlay for the menu.
private
void
_makeSpinButton
(
_button
,
oButton
)
Create a button similar to an OS Spin button.. It has an up/down arrow combo to scroll through a range of int values.
- Parameters:
-
_button
<Object>
YAHOO.widget.ToolbarButton reference
-
oButton
<Object>
Object literal containing the buttons initial config
- Returns:
void
private
void
_navigateButtons
(
ev
)
Handles the navigation/focus of toolbar buttons with the Arrow Keys
- Parameters:
-
ev
<Event>
The Key Event
- Returns:
void
private
void
_resetColorPicker
(
)
Clears the currently selected color or mouseover color in the color picker.
void
addButton
(
oButton
,
after
)
Add a new button to the toolbar. Buttons supported:
push, split, menu, select, color, spin
- Parameters:
-
oButton
<Object>
Object literal reference to the Button's Config
-
after
<HTMLElement>
Optional HTML element to insert this button after in the DOM.
- Returns:
void
void
addButtonGroup
(
oGroup
)
Add a new button group to the toolbar. (uses addButton)
- Parameters:
-
oGroup
<Object>
Object literal reference to the Groups Config (contains an array of button configs as well as the group label)
- Returns:
void
void
addButtonToGroup
(
oButton
,
group
,
after
)
Add a new button to a toolbar group. Buttons supported:
push, split, menu, select, color, spin
- Parameters:
-
oButton
<Object>
Object literal reference to the Button's Config
-
group
<String>
The Group identifier passed into the initial config
-
after
<HTMLElement>
Optional HTML element to insert this button after in the DOM.
- Returns:
void
void
addSeparator
(
cont
,
after
)
Add a new button separator to the toolbar.
- Parameters:
-
cont
<HTMLElement>
Optional HTML element to insert this button into.
-
after
<HTMLElement>
Optional HTML element to insert this button after in the DOM.
- Returns:
void
void
collapse
(
collapse
)
Programatically collapse the toolbar.
- Parameters:
-
collapse
<Boolean>
True to collapse, false to expand.
- Returns:
void
Boolean
deselectAllButtons
(
)
Deselects all buttons in the toolbar.
Boolean
deselectButton
(
id
)
Deselects a button in the toolbar.
- Parameters:
-
id
<String/Number>
Deselect a button by it's id, index or value.
- Returns:
Boolean
Boolean
destroy
(
)
Destroys the toolbar, all of it's elements and objects.
Boolean
destroyButton
(
id
)
Destroy a button in the toolbar.
- Parameters:
-
id
<String/Number>
Destroy a button by it's id or index.
- Returns:
Boolean
Boolean
disableAllButtons
(
)
Disables all buttons in the toolbar.
Boolean
disableButton
(
id
)
Disables a button in the toolbar.
- Parameters:
-
id
<String/Number>
Disable a button by it's id, index or value.
- Returns:
Boolean
Boolean
enableAllButtons
(
)
Enables all buttons in the toolbar.
Boolean
enableButton
(
id
)
Enables a button in the toolbar.
- Parameters:
-
id
<String/Number>
Enable a button by it's id, index or value.
- Returns:
Boolean
Array
getButtons
(
)
Returns an array of buttons in the current toolbar
void
init
(
)
The Toolbar class's initialization method
void
initAttributes
(
attr
)
Initializes all of the configuration attributes used to create
the toolbar.
- Parameters:
-
attr
<Object>
Object literal specifying a set of
configuration attributes used to create the toolbar.
- Returns:
void
Boolean
isSelected
(
id
)
Tells if a button is selected or not.
- Parameters:
-
id
<String/Number>
A button by it's id, index or value.
- Returns:
Boolean
Boolean
resetAllButtons
(
_ex
)
Resets all buttons to their initial state.
- Parameters:
-
_ex
<Object>
Except these buttons
- Returns:
Boolean
Boolean
selectButton
(
id
,
value
)
Selects a button in the toolbar.
- Parameters:
-
id
<String/Number>
Select a button by it's id, index or value.
-
value
<String>
If this is a Menu Button, check this item in the menu
- Returns:
Boolean
String
toString
(
)
Returns a string representing the toolbar.
_setHTMLAttrConfig,
addClass,
addListener,
appendChild,
appendTo,
fireQueue,
getElementsByClassName,
getElementsByTagName,
getStyle,
hasChildNodes,
hasClass,
initAttributes,
insertBefore,
on,
removeChild,
removeClass,
removeListener,
replaceChild,
replaceClass,
setStyle,
subscribe
configureAttribute,
fireBeforeChangeEvent,
fireChangeEvent,
get,
getAttributeConfig,
getAttributeKeys,
refresh,
register,
resetAttributeConfig,
resetValue,
set,
setAttributeConfig,
setAttributes
Events
beforeButtonsChange
(
event
)
Fires before the value for the configuration attribute 'buttons' changes. Return false to cancel the attribute change.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
beforeButtonTypeChange
(
event
)
Fires before the value for the configuration attribute 'buttonType' changes. Return false to cancel the attribute change.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
beforeCollapseChange
(
event
)
Fires before the value for the configuration attribute 'collapse' changes. Return false to cancel the attribute change.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
beforeDisabledChange
(
event
)
Fires before the value for the configuration attribute 'disabled' changes. Return false to cancel the attribute change.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
beforeDraggableChange
(
event
)
Fires before the value for the configuration attribute 'draggable' changes. Return false to cancel the attribute change.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
beforeGrouplabelsChange
(
event
)
Fires before the value for the configuration attribute 'grouplabels' changes. Return false to cancel the attribute change.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
beforeTitlebarChange
(
event
)
Fires before the value for the configuration attribute 'titlebar' changes. Return false to cancel the attribute change.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
buttonClick
(
o
)
Fires when any botton receives a click event. Passes back a single object representing the buttons config object. See
Element.addListener for more information on listening for this event.
- Parameters:
-
o
<Object>
The object passed to this handler is the button config used to create the button.
buttonsChange
(
event
)
Fires when the value for the configuration attribute 'buttons' changes.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
buttonTypeChange
(
event
)
Fires when the value for the configuration attribute 'buttonType' changes.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
collapseChange
(
event
)
Fires when the value for the configuration attribute 'collapse' changes.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
disabledChange
(
event
)
Fires when the value for the configuration attribute 'disabled' changes.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
draggableChange
(
event
)
Fires when the value for the configuration attribute 'draggable' changes.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
grouplabelsChange
(
event
)
Fires when the value for the configuration attribute 'grouplabels' changes.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
titlebarChange
(
event
)
Fires when the value for the configuration attribute 'titlebar' changes.
- Parameters:
-
event
<{oldValue: any, newValue: any}>
An object containing the previous attribute value and the new value.
toolbarCollapsed
(
)
Fires when the toolbar is collapsed via the collapse button. See
Element.addListener for more information on listening for this event.
toolbarExpanded
(
)
Fires when the toolbar is expanded via the collapse button. See
Element.addListener for more information on listening for this event.
valueClick
(
o
)
This is a special dynamic event that is created and dispatched based on the value property
of the button config. See
Element.addListener for more information on listening for this event.
Example:
buttons : [
{ type: 'button', value: 'test', value: 'testButton' }
]
With the valueClick event you could subscribe to this buttons click event with this:
tbar.in('testButtonClick', function() { alert('test button clicked'); })
- Parameters:
-
o
<Object>
The object passed to this handler is the button config used to create the button.
Configuration Attributes
Object specifying the buttons to include in the toolbar
Example:
{
{ id: 'b3', type: 'button', label: 'Underline', value: 'underline' },
{ type: 'separator' },
{ id: 'b4', type: 'menu', label: 'Align', value: 'align',
menu: [
{ text: "Left", value: 'alignleft' },
{ text: "Center", value: 'aligncenter' },
{ text: "Right", value: 'alignright' }
]
}
}
The buttonType to use (advanced or basic)
Boolean indicating if the the titlebar should have a collapse button.
The collapse button will not remove the toolbar, it will minimize it to the titlebar
Default Value: false
cont
- HTMLElement
The container for the toolbar.
Boolean indicating if the toolbar should be disabled. It will also disable the draggable attribute if it is on.
Default Value: false
Boolean indicating if the toolbar should be draggable.
Default Value: false
Boolean indicating if the toolbar should show the group label's text string.
Default Value: true
titlebar
- Boolean or String
Boolean indicating if the toolbar should have a titlebar. If
passed a string, it will use that as the titlebar text
Default Value: false