JointJS+ FlashMessage

ui.FlashMessage is a UI component for displaying flash messages. This is very useful for informing the user that something has happened. As you will see later on on this page, ui.FlashMessage plugin provides a quick way of displaying messages without you having to worry about closing the message boxes or cascading them on top of each other.

Installation

Include joint.ui.flashMessage.js and joint.ui.flashMessage.css files and joint.ui.dialog.js and joint.ui.dialog.css dependencies (ui.FlashMessage inherits from ui.Dialog) to your HTML:

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

Usage

There are two ways to display flash messages. One is by creating an object of joint.ui.FlashMessage type and call the open() method on it. However, for convenience, there is also a static method joint.ui.FlashMessage.open() that is much shorter:

// The longer method of displaying a flash message.
(new joint.ui.FlashMessage({
    title: 'Message',
    type: 'alert',
    content: 'An error occurred. Try again later.'
})).open();

// A shorter alternative.
joint.ui.FlashMessage.open('I am a flash message.');

Couple more examples of common usage:

document.getElementById('btn-display').addEventListener('click', () => {
    (new joint.ui.FlashMessage({
        title: 'Message',
        type: 'alert',
        content: 'An error occurred. Try again later.'
    })).open();
});

document.getElementById('btn-display-width').addEventListener('click', () => {
    (new joint.ui.FlashMessage({
        width: 150,
        title: 'Message',
        content: 'An error occurred. Try again later.'
    })).open();
});

document.getElementById('btn-display-modal').addEventListener('click', () => {
    (new joint.ui.FlashMessage({
        type: 'alert',
        closeAnimation: false,
        modal: true,
        title: 'Modal Message',
        content: 'This is a modal Flash message requiring the user to close the message manually.'
    })).open();
});

document.getElementById('btn-close-all').addEventListener('click', () => {
    joint.ui.FlashMessage.close();
});

joint.ui.FlashMessage.open('ui.FlashMessage 1');
joint.ui.FlashMessage.open('ui.FlashMessage alert', '', { type: 'alert', closeAnimation: { delay: 1000 } });
joint.ui.FlashMessage.open('ui.FlashMessage warning', '', { type: 'warning', closeAnimation: { delay: 2000 } });
joint.ui.FlashMessage.open('ui.FlashMessage success', '', { type: 'success', closeAnimation: { delay: 3000 } });
joint.ui.FlashMessage.open('ui.FlashMessage neutral', '', { type: 'neutral' });
joint.ui.FlashMessage.open('ui.FlashMessage info', '', { type: 'info' });
joint.ui.FlashMessage.open('ui.FlashMessage close delay 3s', '', { type: 'neutral', closeAnimation: { delay: 3000 } });
joint.ui.FlashMessage.open('ui.FlashMessage with title', 'Title');
joint.ui.FlashMessage.open('ui.FlashMessage without close animation', '', { closeAnimation: false });

Configuration

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

title	The title of the flash message.
type	The type of the flash message. One of 'alert' (default), 'warning', 'success', 'neutral'.
content	The content of the flash message. It can be either a text or an arbitrary HTML.
modal	Set to true if you want your flash message to be modal.
closeAnimation	Set to false if you don't want the flash message to be closed in an animated fashion. It can also be an object of the form { delay: Number, duration: Number } specifying properties of the close animation.

API

open()	Open the flash message.
joint.ui.FlashMessage.open(content, title, opt)	Open a flash message (the shorter way). opt can contain any option that you can pass to the joint.ui.FlashMessage constructor function (see the Configuration section for details).
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).

Events

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

close:animation:complete	Triggered when the flash message is actually removed from the DOM, i.e. when the close animation finishes.
close	Triggered when the flash message gets closed.