A helper class to fire some <burnt-toast>
web components in queue
npm install electric-toaster --save
Import ElectricToaster in your main javascript file
import 'electric-toaster/ElectricToaster.js'
Create a new instance of the ElectricToaster
class, it takes two parameters, a ToastTemplateKey
and a Toast
object
that defines a first ToastTemplate
, ToastType
and ToastAnimation
The ToastTemplateKey
provided will be used as a css class
name to set specific styles(see more below)
const electricToaster = new ElectricToaster("simple-toast", {
template: simpleToast,
type: 'simple',
animation: simpleAnimation
})
A template is a function
that takes in parameter whatever datas you want to use in your toast. It returns html string
This will be the content of the <burnt-toast>
element (see more below).
You need to use at least one slot
out of the three available to display some content.
const simpleToast: ToastTemplate = ({title,content,avatar,date}: ToastTemplateData) => `
<header slot="header" class="avatar">
<img src="${avatar}"></img>
</header>
<main slot="main">
<div class="title">${title}</div>
<div class="content">${content}</div>
</main>
<footer slot="footer" class="footer">${date}</footer>
`
An Object
with two keys : enter
and leave
, each are of type [Keyframe[], KeyframeAnimationOptions]
(basically the parameters of the Element.animate()
method from the web animation API)
const simpleAnimation: ToastAnimation = {
enter: [
[
{ transform: 'translateX(25px)',opacity: '0' },
{ transform: 'translateX(0px)',opacity: '1' }
],
{ duration: 250, endDelay: 2500 }
],
leave: [
[
{ transform: 'translateX(0px)',opacity: '1' },
{ transform: 'translateX(25px)',opacity: '0' }
],
{ duration: 250 }
]
}
Type can be either "simple"
or "action"
.
If your toast won't contains any input
If you want to have inputs and listen for events in your toast (see more below)
Burn your toast when you feel it's time to eat some !
The burn()
method takes two parameters, a ToastTemplateKey
to let know the toaster which template to use for this particular toast and a ToastTemplateData
defining the values of the keys you used in your ToastTemplate
definition
electricToaster.burn("simple-toast",{
title:`Notification`,
content:"lorem ipsum dolor sit amet lorem ipsum dolor sit amet",
avatar: somePic,
date: someDate
})
You can define a new template with the registerTemplate()
method. It takes the same parameters as the constructor.
electricToaster.registerTemplate('action-toast', {
template: actionToast,
type: 'action',
animation: actionAnimation
})
If you have inputs in an "action"
type toast and want to handle their events, you can do it inside the registerToastEvent()
method. It takes a callback
that receives an instance of the current displayed <burnt-toast>
element.
electricToaster.registerToastEvent( $burntToast => {
$burntToast.querySelector('#toast-btn')
.addEventListener('click', () =>
$burntToast.initiateLeaveAnimation()
)
})
<slot name="header"></slot>
<slot name="main"></slot>
<slot name="footer"></slot>
Set the onfinish callback
to invoke initiateLeaveAnimation()
method
Set the onfinish callback
to invoke the remove()
super method
:host {
bottom: 5px;
right: 5px;
position: fixed;
padding: 15px;
background-color: #fafafafa;
display: grid;
grid-template-columns: min-content 300px;
grid-template-rows: auto;
grid-template-areas:
"header main"
"header footer";
grid-gap: 15px;
transition: box-shadow 0.2s;
}
:host(:hover) {
box-shadow: 2px 2px 5px 5px #25252579;
}
::slotted(header) {
grid-area: header;
}
::slotted(main) {
grid-area: main;
}
::slotted(footer) {
grid-area: footer;
}
In your main css file
burnt-toast {
/*
Custom styles
*/
}
burnt-toast.simple-toast {
/*
Custom styles
*/
}