Toasts allows you to create popup notifications that are less intrusive than Fandom's BannerNotifications.
Installation
Usage
The script's function won't be immediately available, but it will call a hook through mw.hook. To ensure it's available you can use:
mw.hook('dev.toasts').add(function(Toasts) {
/**
* The `Toasts` parameter is the same as `window.dev.toasts`
* Run your code here
*/
});
Each toast has its own color and the non-default toasts have their own icons, which can be displayed using their own methods:
show- Type: Method
- Description: Displays a toast.
- Parameters:
content- Notification content.options- An options object for tailoring the notification.
type- Possible values include:default,info,warning,error, andsuccess.icon- What type of icon to use, possible values include:info,warning,error, andsuccess.timeout- How long to display the notification for in milliseconds. Defaults to 3000ms.
info- Type: Method
- Description: Displays a toast using the
infotype. - Parameters:
content- Notification content.options- An options object for tailoring the notification.
icon- What type of icon to use, possible values include:info,warning,error, andsuccess.timeout- How long to display the notification for in milliseconds. Defaults to 3000ms.
error- Type: Method
- Description: Displays a toast using the
errortype. - Parameters:
content- Notification content.options- An options object for tailoring the notification.
icon- What type of icon to use, possible values include:info,warning,error, andsuccess.timeout- How long to display the notification for in milliseconds. Defaults to 3000ms.
warning- Type: Method
- Description: Displays a toast using the
warningtype. - Parameters:
content- Notification content.options- An options object for tailoring the notification.
icon- What type of icon to use, possible values include:info,warning,error, andsuccess.timeout- How long to display the notification for in milliseconds. Defaults to 3000ms.
success- Type: Method
- Description: Displays a toast using the
successtype. - Parameters:
content- Notification content.options- An options object for tailoring the notification.
icon- What type of icon to use, possible values include:info,warning,error, andsuccess.timeout- How long to display the notification for in milliseconds. Defaults to 3000ms.
Examples
Creates a standard toast and displays it for 5 seconds:
// default toasts
Toasts.show('Hello world.', { timeout: 5000 });
Toasts('Hello again, world.', { timeout: 5000 });
Creates various types of toasts:
// info toast with the warning icon, display for 10 seconds
Toasts.info('3.1415926...', { icon: 'warning', timeout: 10000 });
// error toast with no icon
Toasts.error('Oh no, something went wrong!', { icon: 'default' });
// success toast
Toasts.success('Congratulations, you did it!');
Text above can be found here (edit)