JointJS+ SelectButtonGroup

ui.SelectButtonGroup

ui.SelectButtonGroup is a UI widget for displaying groups of buttons with both single and multi selection support. The buttons can contain arbitrary HTML.

Installation

Include joint.ui.selectButtonGroup.js and joint.ui.selectButtonGroup.css files to your HTML:

<link rel="stylesheet" type="text/css" href="joint.ui.selectButtonGroup.css">
<script src="joint.ui.selectButtonGroup.js"></script>

Usage

Create an object of ui.SelectButtonGroup type, render it with the render() method and append the generated HTML element anywhere in your DOM:

var buttonGroup = new joint.ui.SelectButtonGroup({
    multi: true,
    selected: [1, 3],
    options: [
        { value: 'line-through', content: 'S' },
        { value: 'underline', content: 'U' },
        { value: 'italic', content: 'I' },
        { value: 'bold', content: 'B' }
    ]
});
document.body.appendChild(buttonGroup.render().el);

More examples

`ui.SelectButtonGroup` with icons

Configuration

The following table lists options that you can pass to the ui.SelectButtonGroup constructor function:

options

Object[]

Optional. An array of items (the buttons). Each item is an object with the following properties:

content	string	Optional. The content of the item. It can be either a plain string or a string containing HTML code.
value	any	Optional. The value of the item. It can be a string, a number or any other JavaScript object. By default, the value is considered to be equal to the `content` property.
attrs	Object	Optional. A hierarchical object that adds styling to component HTML elements of the option. For example, the following `attrs` object would add a tooltip to the option: `{ '.select-button-group-button': { 'data-tooltip': 'My tooltip' } }`
selected	boolean	Optional. Should this item be selected by default? Default is `false`.
icon	string	Optional. A path to an image to be added to the option's button.
iconSelected	string	Optional. A path to an image to be added to the option's button when it is selected. By default, the selected state uses `icon` (if provided).
buttonWidth	number	Optional. The width of the button in pixels.
buttonHeight	number	Optional. The height of the button in pixels.
iconWidth	number	Optional. The width of `icon` in pixels (if provided).
iconHeight	number	Optional. The height of `icon` in pixels (if provided).

disabled boolean Optional. Is the user prevented from interacting with this ui.SelectButtonGroup? Default is false.

multi boolean Optional. Is this a multiple-choice set? (That is, is it allowed for multiple buttons to be selected at the same time?) Default is false.

selected number | number[] Optional. Which options should be selected by default?
If multi === false, expects a number - the index of the selected option.
If multi === true, expects an array of numbers - indices of all selected options.
By default, this property is undefined. In that case, the widget determines selected items according to individual options' selected property.

singleDeselect boolean Optional. If multi === false, is the user allowed to deselect the currently-selected icon by clicking on it? Default is false (radio-button-like behavior).

noSelectionValue any Optional. If nothing is selected, what value should be reported by the getSelectionValue() function? Default is undefined.

width number Optional. The width of the whole widget in pixels.

buttonWidth number Optional. The width of each button in pixels. Overridden by individual options' buttonWidth property (if provided).

buttonHeight number Optional. The height of each button in pixels. Overridden by individual options' buttonHeight property (if provided).

iconWidth number Optional. The width of each icon in pixels (for options with an icon property). Overridden by individual options' iconWidth property (if provided).

iconHeight number Optional. The height of each icon in pixels (for options with an icon property). Overridden by individual options' iconHeight property (if provided).

API

render()	Render the button group. Note that once you render the button group, you can use the `el` property that points to the container HTML element and append it anywhere in the DOM (e.g. `document.body.appendChild(selectButtonGroup.el)`).
getSelection()	Get the current selection. The selection points to an item(s) from the `options` array.
getSelectionValue()	Get the current selection value(s). If nothing is selected, `noSelectionValue` is returned (default is `undefined`).
select(index, opt)	Select an item. `index` is the index to the `options` array. `opt` is optional and can be an arbitrary object that will be passed to the `option:select` event handler.
selectByValue(value)	Select an item by value. The selected item will be chosen based on a strict equality of the `value` passed an a `value` (`content`) of any of the items.
deselect()	Deselect all selected items.
remove()	Remove the button group from the DOM.
on(event, handler [, context])	Register a `handler` function that will be called whenever `event` is triggered. The optional `context` is an object that will be the context of the handler function (the `this`).
disable()	Prevent to the user's interactions.
enable()	Make the button group available to the user's interactions.
isDisabled()	Check if the button group is prevented to the user's interactions.

Events

The ui.SelectButtonGroup object triggers various events that you can react on. Events can be handled by using the on() method (see above).

option:hover	Triggered when the user hovers over one of the items. The handler is passed the option object and the index of the option in the `options` array.
option:select	Triggered when the user selects an item. The handler is passed the option object and the index of the option in the `options` array. If you selected the item with the `select(index, opt)` method, the third argument to the event handler will be your `opt` object.
mouseout	Triggered when the user leaves the entire button group with mouse cursor. The handler is passed an event object as the only argument.