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 in 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 to it later.
content	The content of the button. It can be a text or an arbitrary HTML.
icon	Optionally, instead of passing `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) or an object representing a point with properties x and y representing client coordinates.

padding The gap between the anchor of the target element and the context toolbar. The default is 20.

position The name of the position on the target element to which the toolbar is attached. The default is 'bottom'.

anchor The name of the position on the toolbar, where it is attached to the target. The default is 'top'.

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

vertical When set to true the toolbar arranges tools from top to bottom instead of left to right. The default is false.

scale Optional parameter that sets the scale of the context toolbar.

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 your `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.
close	Triggered when the context toolbar gets closed.