new BarToolGroup(toolbar, configopt)
BarToolGroups are one of three types of toolgroups that are used to
create toolbars (the other types of groups are MenuToolGroup
and ListToolGroup). The tools in a BarToolGroup are
displayed by icon in a single row. The title of the tool is displayed when users move the mouse over
the tool.
BarToolGroups are created by a tool group factory when the toolbar is
set up.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
toolbar |
OO.ui.Toolbar | ||
config |
Object |
<optional> |
Configuration options |
- Source:
Example
// Example of a BarToolGroup with two tools
var toolFactory = new OO.ui.ToolFactory();
var toolGroupFactory = new OO.ui.ToolGroupFactory();
var toolbar = new OO.ui.Toolbar( toolFactory, toolGroupFactory );
// We will be placing status text in this element when tools are used
var $area = $( '<p>' ).text( 'Example of a BarToolGroup with two tools.' );
// Define the tools that we're going to place in our toolbar
// Create a class inheriting from OO.ui.Tool
function SearchTool() {
SearchTool.parent.apply( this, arguments );
}
OO.inheritClass( SearchTool, OO.ui.Tool );
// Each tool must have a 'name' (used as an internal identifier, see later) and at least one
// of 'icon' and 'title' (displayed icon and text).
SearchTool.static.name = 'search';
SearchTool.static.icon = 'search';
SearchTool.static.title = 'Search...';
// Defines the action that will happen when this tool is selected (clicked).
SearchTool.prototype.onSelect = function () {
$area.text( 'Search tool clicked!' );
// Never display this tool as "active" (selected).
this.setActive( false );
};
SearchTool.prototype.onUpdateState = function () {};
// Make this tool available in our toolFactory and thus our toolbar
toolFactory.register( SearchTool );
// This is a PopupTool. Rather than having a custom 'onSelect' action, it will display a
// little popup window (a PopupWidget).
function HelpTool( toolGroup, config ) {
OO.ui.PopupTool.call( this, toolGroup, $.extend( { popup: {
padded: true,
label: 'Help',
head: true
} }, config ) );
this.popup.$body.append( '<p>I am helpful!</p>' );
}
OO.inheritClass( HelpTool, OO.ui.PopupTool );
HelpTool.static.name = 'help';
HelpTool.static.icon = 'help';
HelpTool.static.title = 'Help';
toolFactory.register( HelpTool );
// Finally define which tools and in what order appear in the toolbar. Each tool may only be
// used once (but not all defined tools must be used).
toolbar.setup( [
{
// 'bar' tool groups display tools by icon only
type: 'bar',
include: [ 'search', 'help' ]
}
] );
// Create some UI around the toolbar and place it in the document
var frame = new OO.ui.PanelLayout( {
expanded: false,
framed: true
} );
var contentFrame = new OO.ui.PanelLayout( {
expanded: false,
padded: true
} );
frame.$element.append(
toolbar.$element,
contentFrame.$element.append( $area )
);
$( 'body' ).append( frame.$element );
// Here is where the toolbar is actually built. This must be done after inserting it into the
// document.
toolbar.initialize();
For more information about how to add tools to a bar tool group, please see toolgroup.
For more information about toolbars in general, please see the [OOUI documentation on MediaWiki][1].
[1]: https://www.mediawiki.org/wiki/OOUI/Toolbars
Extends
Methods
destroy()
Destroy toolgroup.
- Inherited From:
- Source:
getClosestScrollableElementContainer() → {HTMLElement}
Get closest scrollable container.
- Inherited From:
- Source:
Returns:
Closest scrollable container
- Type
- HTMLElement
getData() → {Mixed}
Get element data.
- Inherited From:
- Source:
Returns:
Element data
- Type
- Mixed
getElementDocument() → {HTMLDocument}
Get the DOM document.
- Inherited From:
- Source:
Returns:
Document object
- Type
- HTMLDocument
getElementGroup() → {OO.ui.mixin.GroupElement|null}
Get group element is in.
- Inherited From:
- Source:
Returns:
Group element, null if none
- Type
- OO.ui.mixin.GroupElement | null
getElementId() → {string}
Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing,
and return its value.
- Inherited From:
- Source:
Returns:
- Type
- string
getElementWindow() → {Window}
Get the DOM window.
- Inherited From:
- Source:
Returns:
Window object
- Type
- Window
getInputId() → {string|null}
Get an ID of a labelable node which is part of this widget, if any, to be used for `
- Inherited From:
- Source:
Returns:
The ID of the labelable element
- Type
- string | null
getTagName() → {string}
Get the HTML tag name.
Override this method to base the result on instance information.
- Inherited From:
- Source:
Returns:
HTML tag name
- Type
- string
getToolbar() → {OO.ui.Toolbar}
Get the toolbar that contains the toolgroup.
- Inherited From:
- Source:
Returns:
Toolbar that contains the toolgroup
- Type
- OO.ui.Toolbar
isDisabled() → {boolean}
Check if the widget is disabled.
- Inherited From:
- Source:
Returns:
Widget is disabled
- Type
- boolean
isElementAttached() → {boolean}
Check if the element is attached to the DOM
- Inherited From:
- Source:
Returns:
The element is attached to the DOM
- Type
- boolean
isVisible() → {boolean}
Check if element is visible.
- Inherited From:
- Source:
Returns:
element is visible
- Type
- boolean
(protected) onCapturedMouseKeyUp(e)
Handle captured mouse up and key up events.
Parameters:
Name | Type | Description |
---|---|---|
e |
MouseEvent | KeyboardEvent | Mouse up or key up event |
- Inherited From:
- Source:
(protected) onMouseKeyDown(e)
Handle mouse down and key down events.
Parameters:
Name | Type | Description |
---|---|---|
e |
jQuery.Event | Mouse down or key down event |
- Inherited From:
- Source:
(protected) onMouseKeyUp(e)
Handle mouse up and key up events.
Parameters:
Name | Type | Description |
---|---|---|
e |
MouseEvent | KeyboardEvent | Mouse up or key up event |
- Inherited From:
- Source:
(protected) onMouseOutBlur(e)
Handle mouse out and blur events.
Parameters:
Name | Type | Description |
---|---|---|
e |
jQuery.Event | Mouse out or blur event |
- Inherited From:
- Source:
(protected) onMouseOverFocus(e)
Handle mouse over and focus events.
Parameters:
Name | Type | Description |
---|---|---|
e |
jQuery.Event | Mouse over or focus event |
- Inherited From:
- Source:
(protected) onToolFactoryRegister(name)
Handle tool registry register events.
If a tool is registered after the group is created, we must repopulate the list to account for:
- a tool being added that may be included
- a tool already included being overridden
Parameters:
Name | Type | Description |
---|---|---|
name |
string | Symbolic name of tool |
- Inherited From:
- Source:
populate()
Add and remove tools based on configuration.
- Inherited From:
- Source:
(protected) restorePreInfuseState(state)
Restore the pre-infusion dynamic state for this widget.
This method is called after #$element has been inserted into DOM. The parameter is the return
value of #gatherPreInfuseState.
Parameters:
Name | Type | Description |
---|---|---|
state |
Object |
- Inherited From:
- Source:
scrollElementIntoView(configopt) → {jQuery.Promise}
Scroll element into view.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
config |
Object |
<optional> |
Configuration options |
- Inherited From:
- Source:
Returns:
Promise which resolves when the scroll is complete
- Type
- jQuery.Promise
setData(data)
Set element data.
Parameters:
Name | Type | Description |
---|---|---|
data |
Mixed | Element data |
- Inherited From:
- Source:
setDisabled(disabled)
Set the 'disabled' state of the widget.
When a widget is disabled, it cannot be used and its appearance is updated to reflect this state.
Parameters:
Name | Type | Description |
---|---|---|
disabled |
boolean | Disable widget |
- Inherited From:
- Source:
setElementGroup(group)
Set group element is in.
Parameters:
Name | Type | Description |
---|---|---|
group |
OO.ui.mixin.GroupElement | null | Group element, null if none |
- Inherited From:
- Source:
setElementId(id)
Set the element has an 'id' attribute.
Parameters:
Name | Type | Description |
---|---|---|
id |
string |
- Inherited From:
- Source:
simulateLabelClick()
Simulate the behavior of clicking on a label (a HTML `
- Inherited From:
- Source:
supports(methods) → {boolean}
Check if element supports one or more methods.
Parameters:
Name | Type | Description |
---|---|---|
methods |
string | Array.<string> | Method or list of methods to check |
- Inherited From:
- Source:
Returns:
All methods are supported
- Type
- boolean
toggle(showopt)
Toggle visibility of an element.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
show |
boolean |
<optional> |
Make element visible, omit to toggle visibility |
- Inherited From:
- Source:
Fires:
- event:visible
updateDisabled()
Update the disabled state, in case of changes in parent widget.
- Inherited From:
- Source:
updateThemeClasses()
Update the theme-provided classes.
- Inherited From:
- Source: