JointJS+ ContextToolbar

ui.ContextToolbar

ui.ContextToolbar is a UI widget for displaying context toolbars (usually a set of buttons) below a certain target element (HTML or SVG). There can always be only one context toolbar opened at a time. This is automatically handled by the ui.ContextToolbar component which simplifies the process and makes sure you don't have to keep track of opened context toolbars yourself.

Installation

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

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

Usage

Create an object of joint.ui.ContextToolbar type, add tool buttons and call the render() method in order to open the context toolbar.

var ct = new joint.ui.ContextToolbar({
    tools: [
        { action: 'yes', content: 'Yes' },
        { action: 'no', content: 'No' },
        { action: 'maybe', content: 'Maybe' },
        { action: 'sure', content: 'Sure' }
    ],
    target: this
});

ct.on('action:yes', function() { alert('Yes') });
ct.on('action:no', function() { alert('No') });
ct.on('action:maybe', function() { alert('Maybe') });
ct.on('action:sure', function() { alert('Sure') });

ct.render();

A common usage is to open the context toolbar on click on a certain element (either HTML or SVG):

$('circle').on('click', function() {

    var circle = this;

    var ct = new joint.ui.ContextToolbar({
	tools: [
	    { action: 'hide', content: 'Hide' },
	    { action: 'info', content: 'Info' },
	    { action: 'remove', content: 'Remove' }
	],
        target: circle
    });

    ct.on('action:hide', ct.remove, ct);
    ct.on('action:remove', function() {
        V(circle).remove();
    });
    ct.on('action:info', function() {
        alert('This is an SVG circle');
    });

    ct.render();
});

Configuration

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

tools

An array of tools. Each tool is an object that can have the following properties:

action	The name of the action. This action is then triggered on the context toolbar object so that you can react on it later.
content	The content of the button. It can be a text or an arbitrary HTML.
icon	Optionally, instead of passing a `content`, you can just pass a path to an image.
attrs	An object with attributes that will be applied on the generated button. Useful for adding your own custom attributes such as `{ 'data-tooltip': 'My Tooltip'}`.

target The target element (either HTML or SVG).

padding The gap between the target element an the context toolbar. Default is 20.

autoClose Determines if the context toolbar should be closed if the user clicked outside of the area of the context toolbar. Default is true.

vertical When set to true the toolbar arrange tools from top to bottom instead of left to right. Default is false.

API

render()	Render the context toolbar onto the screen.
remove()	Remove the context toolbar. Usually, you don't have to call this method as the context toolbar is closed automatically if the user clicked outside of the area of the context toolbar (unless you set the `autoClose` option to `false`).
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`).
joint.ui.ContextToolbar.close()	This is a static method that closes any context toolbar that is currently open.
joint.ui.ContextToolbar.update()	This is a static method that updates the position of the opened context toolbar (if any). Call this method if you `target` element changes its position while you still want to keep the context toolbar opened.

Events

The ui.ContextToolbar object triggers events that correspond to the actions that you defined in the tools array. Events can be handled by using the on() method (see above).

action:[action]	Triggered when the user clicks on one of the buttons in the context toolbar.