Flash Message Queue Service
The service is a singleton that controls the message queue and centralizes all functionality for adding and removing messages from the queue. It also enables you to define multiple queues should the need arise.
The flashMessageQueue service is injected into all routes, components, controllers, and views in your app. You can interact with the service by getting the flashMessageQueue property. For example:
// app/routes/index.js
export default Ember.Route.extend({
checkMessageExists() {
const flashMessageQueue = this.get('flashMessageQueue');
return !!flashMessageQueue.get('content').length;
},
});animationDuration is the duration of the hide and show animations you use to animate messages (whether JS or CSS animations). This property is added to flash message durations to correctly calculate the time to display messages.
This defaults to 500ms. To change the default, extend the service in your app:
// app/services/flash-message-queue.js
import FlashMessageQueueService from 'ember-flash-messages/services/flash-message-queue`;
export default FlashMessageQueueService.extend({
animationDuration: 1000, // in milliseconds
});interval is the default duration to show timed messages for. This defaults to 3000ms. To change the default, extend the service in your app:
// app/services/flash-message-queue.js
import FlashMessageQueueService from 'ember-flash-messages/services/flash-message-queue`;
export default FlashMessageQueueService.extend({
interval: 5000, // in milliseconds
});content is an Ember array that contains every message currently visible or waiting to be shown to the user. The messages in the array are added in chronological order.
currentMessage is the timed message currently visible to the user. It will show for the length of it's duration or, if that is not specified, the default message interval.
timedMessages is an Ember array that contains every message passed with a duration. These are the messages that will automatically disappear after 'x' milliseconds.
untimedMessages is an Ember array that contains every message passed with a duration equal to zero. These are the messages shown in the {{flash-message-queue}} component that require the user to click on the message to hide it.
Several public methods are made available to you:
The clear() method will immediately remove all messages from the queue. Every flash message in the queue, timed and non-timed (i.e. except static components not), will be removed from the {{flash-message-queue}} component.
Whilst you will usually add messages to the queue using the this.flashMessage() helper, the service has a pushMessage method that acts in the same way. The main difference is that pushMessage() always requires an object to be passed.
// app/components/some-component.js
export default Ember.Component.extend({
save() {
this.get('content').save().then(function() {
this.get('flashMessageQueue').pushMessage({
content: 'Saved!',
type: 'success',
});
}.bind(this);
}
});Use removeMessage() with caution. It expects a FlashMessage object to be passed - not just an option with the message properties set correctly.
When a message is added to the queue, the options passed are set on an extension of an Ember object found at ember-flash-messages/models/flash-message. Messages are created like:
FlashMessaage.create({
content: 'Congratulations!',
type: 'congratulations',
});As such, you cannot simply pass this new message to removeMessage() - it will not be found in the queue! Instead, you should pass either the message property of a {{flash-message}} component or an object found in this services's content array.
Use with caution
When the flash message queue is about to empty because all remaining messages are about to be hidden, the willHideQueue event will be triggered. You can listen for this event in any class the service was injected into:
// app/components/some-component.js
export default Ember.Component.extend({
listenForEndOfQueue() {
this.get('flashMessageQueue').on('willHideQueue', function() {
console.log('All messages completed!');
});
}.on('willInsertElement'),
});