ui.Popup is a UI widget for displaying contextual information (or even other diagrams) below
a certain target element (HTML or SVG). There can always be only one popup opened at a time.
This is automatically handled by the ui.Popup component which simplifies the
process and makes sure you don't have to keep track of opened popups yourself.
This component is very similar to the ui.ContextToolbar
component (in fact, it inherits from it) with the only difference that ui.Popup
does not contain a set of buttons but an arbitrary HTML (which might even contain another diagram).
Include joint.ui.popup.js and joint.ui.popup.css files and
the joint.ui.contextToolbar.js and joint.ui.contextToolbar.css dependencies to your HTML:
<link rel="stylesheet" type="text/css" href="joint.ui.contextToolbar.css">
<link rel="stylesheet" type="text/css" href="joint.ui.popup.css">
<script src="joint.ui.contextToolbar.js"></script>
<script src="joint.ui.popup.js"></script>Create an object of joint.ui.Popup type, specify content and call the render() method in order to open the popup.
(new joint.ui.Popup({
content: 'I am a ui.Popup',
target: this
})).render();A common usage is to open the popup on click on a certain element (either HTML or SVG) and display either an image or another diagram:
$('#btn-open-image').on('click', function() {
(new joint.ui.Popup({
content: '',
target: this
})).render();
});
$('#btn-open-diagram').on('click', function() {
(new joint.ui.Popup({
content: function(el) {
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
width: 200,
height: 100,
gridSize: 1,
model: graph
});
$(el).append(paper.el);
var r1 = new joint.shapes.basic.Rect({ position: { x: 10, y: 10 }, size: { width: 50, height: 30 }, attrs: { text: { text: 'r1' }, rect: { fill: '#FE854F' } } });
var r2 = new joint.shapes.basic.Rect({ position: { x: 90, y: 40 }, size: { width: 50, height: 30 }, attrs: { text: { text: 'r2' }, rect: { fill: '#7C68FC' } } });
var l = new joint.dia.Link({ source: { id: r1.id }, target: { id: r2.id } });
graph.addCells([r1, r2, l]);
},
target: this
})).render();
});
$('circle').on('click', function() {
var popup = new joint.ui.Popup({
events: {
'click .btn-cancel': 'remove',
'click .btn-change': function() {
var strokeWidth = parseInt(this.$('.inp-stroke-width').val(), 10);
var fill = this.$('.inp-fill').val();
V(this.options.target).attr({ fill: fill, 'stroke-width': strokeWidth });
}
},
content: [
'<div>',
'Fill: <input class="inp-fill" type="color" value="#FEB663"> <br><br>',
'Stroke width: <input class="inp-stroke-width" type="number" value="5"> <br><br>',
'<button class="btn-cancel">Cancel</button>',
'<button class="btn-change">Change</button>',
'</div>'
].join(''),
target: this
});
});The following table lists options that you can pass to the ui.Popup
constructor function:
| content | The content of the popup. It can be a text or an arbitrary HTML. |
|---|---|
| target | The target element (either HTML or SVG). |
| padding | The gap between the target element an the popup. Default is 20.
|
| autoClose | Determines if the popup should be closed if the user clicked outside of the area of the popup.
Default is true.
|
| render() | Render the popup onto the screen. |
|---|---|
| remove() | Remove the popup. Usually, you don't have to call this method
as the popup is closed automatically if the user clicked outside
of the area of the popup (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.Popup.close() | This is a static method that closes any poup that is currently open. |
| joint.ui.Popup.update() | This is a static method that updates the position of the opened popup (if any).
Call this method if you target element changes its position while you still want to keep the
popup opened.
|