Flash messages

Flash messages alert the user when things happen, this may be to confirm that something has occurred successfully, like saving a document, or when something goes wrong. Flash messages may also highlight problems with the system that the user may need to know about, like a loss of network connectivity which is preventing auto-save.

Dependencies

Javascript

You will need the FlashMessageComponent to be included in your browserify configuration.

Depending on your setup, this will probably need to be in be in a file called index.js or main.js.

// index.js

var FlashMessageComponent = require('/path/to/pulsar/FlashMessageComponent');

module.exports = {
    FlashMessageComponent: FlashMessageComponent
}

// main.js

var $html = $('html');

pulsar.flash = new pulsar.FlashMessageComponent($html);

$(function () {
    pulsar.flash.init();
});

// Example usage: pulsar.flash.success('Ermahgherd!');

HTML/Twig

Your main view should have a container with the classes of flash-container js-flash-container. Any flash messages you choose to generate on page load should be placed here, and any that you subsequently create through the JS methods will also be placed here.

<div class="flash-container js-flash-container">
{{ 
    flash.message({
        'message': 'You did something right!',
        'type': 'success'
    }) 
}}
</div>

See the Pen docs - component - flash success by Pulsar (@pulsar) on CodePen.

Options

Variations

{{ 
    flash.message({
        'message': 'This is a success message',
        'type': 'success'
    }) 
}}

See the Pen docs - component - flash success by Pulsar (@pulsar) on CodePen.

{{ 
    flash.message({
        'message': 'This is a warning message',
        'type': 'warning'
    }) 
}}

See the Pen docs - component - flash warning by Pulsar (@pulsar) on CodePen.

{{ 
    flash.message({
        'message': 'This is an error message',
        'type': 'error'
    }) 
}}

See the Pen docs - component - flash error by Pulsar (@pulsar) on CodePen.

{{ 
    flash.message({
        'message': 'This is an info message',
        'type': 'info'
    }) 
}}

See the Pen docs - component - flash success by Pulsar (@pulsar) on CodePen.

Icons

These are set by the flash message handler and can’t be overridden.

Remove dismiss icon

If you want to disable the ability to close a flash message (useful when you have flash messages in modals, for example), use the dismissable option.

{
    'dismissable': false
}

See the Pen docs - component - flash not dismissable by Pulsar (@pulsar) on CodePen.

Triggering with Javascript

You can throw Flash messages with JS, and like the Twig helper your styles and icons will be defined automatically.

pulsar.flash.success('Something great happened!');

pulsar.flash.error('Oh no! Something bad happened');

pulsar.flash.warning('Something kinda bad happened, but it’s not critical...');

pulsar.flash.info('Something interesting happened that we need to tell you about');