Toasts

If you want to show quick notifications in the corner of the screen (or at the bottom on mobile), you can create Admin2.Toast objects.

The toasts all appear in a container (#toasts-container) created when the plugin is loaded.

Showing a toast to the user is pretty straight-forward:

new Admin2.Toast('I am a toast');
			

If you want to make the toast a little longer or make it disappear more quickly, you can use the second parameter:

new Admin2.Toast('I am a loooooong toast', 10000); // The toasts will appear for 10 seconds
			

Default values

3 values are defined by default

Admin2.Toast.DURATION_SHORT = 1000;
Admin2.Toast.DURATION_MEDIUM = 3000;
Admin2.Toast.DURATION_LONG = 5000;
			

Feel free to use these constants if you need. You can also override them if you need.

Note: Admin2.Toast.DURATION_MEDIUM is used by default when you don't manually set a duration for the toast.

Transition time

The script allows for a transition before deleting the toasts when it is dismissed. You can define or override the duration of this transition

Admin2.Toast.TRANSITION_TIME = 300; // Transition will last 300 milliseconds
			

If you can to remove this delay, you can just set it to zero.

The Admin2.Toast constructor admits a third parameter to pass some other options as an object.

Adding some styles

If you need to customize some toasts, you can either set a class of apply some hard-coded CSS:

// Applying a single class
new Admin2.Toast('Howdy!', Admin.Toast.DURATION_LONG, {
	className: 'some-class'
});

// Applying several classes
new Admin2.Toast('Howdy!', Admin.Toast.DURATION_LONG, {
	className: ['some-class', 'an-other-class']
});
new Admin2.Toast('Howdy!', Admin.Toast.DURATION_LONG, {
	className: 'some-class an-other-class' // Strings work too!
});
			

// Applying some style using a string
new Admin2.Toast('Howdy!', Admin.Toast.DURATION_LONG, {
	style: 'color: magenta; font-variant: uppercase;'
});

// Applying then using an object
new Admin2.Toast('Howdy!', Admin.Toast.DURATION_LONG, {
	style: {
		color: 'magenta',
		fontVariant: 'uppercase'
	}
});