OOUI/Toolbars

Toolbars
Toolbars are complex interface components that permit users to easily access a variety of tools (e.g., formatting commands) and actions, which are additional commands that are part of the toolbar, but not configured as tools.

Developers create and customize the individual tools, which are then registered with a tool factory, which creates the tools on demand. Each tool has a symbolic name (used when registering the tool), a title (e.g., ‘Insert picture’), and an icon.

Individual tools are organized in tool groups, which are displayed as menus of tools, lists of tools, or as a single bar of tools. The arrangement and order of the tool groups is customized when the toolbar is set up. Tools can be presented in any order, but each can only appear once in the toolbar.

The following is an example of a basic toolbar. We will be looking more closely at each of the components making up this example later in this documentation. To see this demo live, please see the code-generated documentation.

Tools
Tools are created by extending the abstract Tool class or one of its subclasses, PopupTool or ToolGroupTool. Each tool must be configured with a static name, title, and icon property: In addition to the static properties, tools must also specify the following method: If any of the tools are used in a MenuToolGroup, each tool must additionally specify an onUpdateState method:
 * name: The static name is used internally to register the tool with a ToolFactory. Tools must be registered with a tool factory before they can be used in a toolbar.
 * title: The title text is used in different ways depending on the type of group the tool is placed inside (ToolBarGroup, ToolMenuGroup, or ToolListGroup). For ‘bar’ groups, where only an icon is displayed to identify the tool, the title text is used as a tooltip that is displayed when a user moves the mouse over the tool. For ‘list’ groups, the title text is used to identify the tool in the dropdown menus used in the user interface. If a keyboard shortcut has been defined for the tool, the shortcut will automatically be displayed. For tools in ‘bar’ groups, the keyboard shortcut is displayed in a tooltip; for tools in ‘menu’ and 'list' groups, the shortcut appears to the right of each item in the dropdown menu.
 * icon: The icon is also used in different ways depending on the type of group that the tool is inside. For ‘bar’ groups, the icon is displayed in the toolbar to identify the tool. For ‘list’ groups, the icon is displayed beside the title text in the dropdown menu. For ‘menu’ groups, the icon is ignored.
 * onSelect, used to specify the action the tool will carry out when it is selected
 * onUpdateState, used to synchronize the state of the tool with the state of its larger context. For example, this method could be used to select the ‘bold’ tool in the toolbar when the text cursor is moved inside an area of bolded text.

Tools can also be configured with a static 'group' property, which can later be used when adding the tool to a bar, menu, or list group (see ToolGroups for an example of how this is done):

For a complete list of supported methods and configuration options, please see the code-level documentation for the Tool class.

PopupTool
Popup tools open a popup window when they are selected from the toolbar. Unlike standard tools, popup tools do not require that developers specify an onSelect or onUpdateState method, as these methods have been implemented already.

For a complete list of supported methods and configuration options, please see the code-level documentation for the PopupTool class.

ToolGroupTool
A ToolGroupTool is a special sort of tool that can contain other tools and tool groups. The ToolGroupTool was specifically designed to be used inside a ‘bar’ tool group to provide access to additional tools from the bar item.

For a complete list of supported methods and configuration options, please see the code-level documentation for the ToolGroupTool class.

ToolGroups
Tools are organized into tool groups, which are created by a ToolGroupFactory and then added to the toolbar when the toolbar is set up. Individual tools can be added to any type of group (bar, list, or menu). The type of group determines how the included tools are arranged in the toolbar:
 * bar: Tools are displayed by icon in a single row.
 * list: Tools are displayed with a label and icon in a dropdown menu. The tool's title is used as the label text. The list can be configured to be collapsed and expanded with the allowCollapse config.
 * menu: Tools are displayed by label in a dropdown menu. The tool's title is used as the label text. ‘menu’ tool groups are generally used for sets of mutually exclusive tools, such as a group of text formatting commands (paragraph, heading, etc).

Tools can be added to a tool group in one of several ways: by symbolic name, by group name, or with the ' * ' (asterisk) catch-all:

Add tools by name: Add tools by group. A tool's group name is specified with the tool's static 'group' property (see Tools for an example). Add tools with the catch-all: Developers can further curate the arrangement of the tools using the tool group’s promote and demote configuration options, which will arrange the tools at the top of the tool list (or front of the toolbar) or end, respectively. These settings are particularly useful when tools have been added to the toolbar en masse (e.g., with the asterisk catch-all or when a group of tools is added to another group) to manage their priority.

BarToolGroup
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. For a complete list of supported methods and configuration options, please see the code-level documentation for the BarToolGroup class.

ListToolGroup
Tools in a ListToolGroup are displayed by icon and label in a dropdown menu. The tool's title is used as the label text. List groups can be configured to be expanded and collapsed. Collapsed lists will have a ‘More’ option that users can select to see the full list of tools. If a collapsed group is expanded, a ‘Fewer’ option permits users to collapse the list again.

In addition to a label, ListToolGroups can also be configured with a header and title: Use the allowCollapse config to designate tools as collapsible (‘help’ and ‘stuff’, in the following example). By default, the list opens in its collapsed state, and users must click the 'More' option to see the collapsed tools:

To display a collapsible list in its expanded state when the list is opened, set the expanded config to ‘true’: Alternatively, you may wish to specify the names of tools that should never be collapsed. This is done with the forceExpand config. In the following example, only the ‘help’ tool has been designated as expanded; all other tools are collapsed by default.

For a complete list of supported methods and configuration options, please see the code-level documentation for the ListToolGroup class.

MenuToolGroup
Tools in MenuToolGroups are displayed by label in a dropdown menu. The tool's title is used as the label text, and the menu label is updated to reflect which tool or tools are currently selected. Note that all tools must define an onUpdateState method if a MenuToolGroup is used.

Configuring the toolbar
In addition to containing tool groups, the toolbar can be configured with actions, CSS, accelerator keys, and/or an optional shadow.

Note that ‘actions’ in the context of the toolbar are different from ActionWidgets. For toolbars, ‘actions’ refers to an empty container that is right-aligned and can contain whatever you’d like.

Adding tool groups
Tool groups are added to the toolbar with the toolbar's setup method:

Adding actions
Toolbars have an optional 'actions' area, which contains commands that are available to users but are not configured as tools. In the following example, the toolbar has been configured to use actions, in this case two additional buttons, ‘Action’ and ‘Disabled’. For the purpose of brevity, only the action-specific code is included in the example (the rest is just the same as the basic toolbar).

Adding shadows
Toolbars can also be configured with an optional shadow. Note that the shadow is only displayed for the Apex theme. The shadow is never displayed when using the MediaWiki theme:

Using CSS to style tool labels
Tool labels can be styled with built-in CSS classes that are named after each tool: oo-ui-tool-name- (e.g., oo-ui-tool-name-picture). The following example uses CSS classes to customize the appearance of the 'picture' and the 'help' tool labels.



Using accelerator keys
The OOjs UI library does not contain an accelerator system, but the Toolbar class does contain a hook for one. To use an accelerator system, subclass the toolbar and override the getToolAccelerator method, which is meant to return a label that describes the accelerator keys for the tool passed (by symbolic name) to the method.

Accelerator labels (e.g., 'Ctrl + M') are displayed in different ways depending on the type of tool group used:
 * For bar groups, the accelerator label appears in the tooltip displayed when users move the mouse over the tool.
 * For menu and list groups, the accelerator label is right-aligned and rendered in light gray text.

Building the toolbar
The toolbar must be appended to the document before it can be built. Once it is appended, the toolbar can be initialized:

For a complete list of supported methods and configuration options, please see the code-level documentation for Toolbars.