Adding the toast notification
This commit is contained in:
Tony Lea
parent
959d2c4af0
commit
367f96dbd4
@ -76,7 +76,7 @@
|
||||
"textarea-auto-resize" : "A textarea form input element that automatically resizes to fit the content.",
|
||||
"text-animation" : "Simple text animation elements.",
|
||||
"text-input" : "A form input element that can be used to collect user input.",
|
||||
"toast": "A toast notification that can be used to show a message.",
|
||||
"toast": "A toast notification that can be used to show a message. Click a button below to show the toast notification.",
|
||||
"tooltip": "A simple tooltip element that can be used to show additional information.",
|
||||
"typing-effect" : "This is an element that can be used to type text on to the screen.",
|
||||
"video" : "A customized video element that can be used to display a video."
|
||||
|
||||
@ -1,15 +1,48 @@
|
||||
<div x-data
|
||||
class="relative w-auto h-auto">
|
||||
<div class="relative w-auto h-auto">
|
||||
<div
|
||||
x-data="{
|
||||
title: 'Default Toast Notification',
|
||||
description: '',
|
||||
type: 'default',
|
||||
position: 'top-center',
|
||||
popToast (){
|
||||
toast(this.title, { description: this.description, type: this.type, position: this.position })
|
||||
expanded: false,
|
||||
popToast (custom){
|
||||
let html = '';
|
||||
if(typeof custom != 'undefined'){
|
||||
html = custom;
|
||||
}
|
||||
}" class="relative space-y-5">
|
||||
toast(this.title, { description: this.description, type: this.type, position: this.position, html: html })
|
||||
}
|
||||
}"
|
||||
x-init="
|
||||
window.toast = function(message, options = {}){
|
||||
let description = '';
|
||||
let type = 'default';
|
||||
let position = 'top-center';
|
||||
let html = '';
|
||||
if(typeof options.description != 'undefined') description = options.description;
|
||||
if(typeof options.type != 'undefined') type = options.type;
|
||||
if(typeof options.position != 'undefined') position = options.position;
|
||||
if(typeof options.html != 'undefined') html = options.html;
|
||||
|
||||
window.dispatchEvent(new CustomEvent('toast-show', { detail : { type: type, message: message, description: description, position : position, html: html }}));
|
||||
}
|
||||
|
||||
window.customToastHTML = `
|
||||
<div class='relative flex items-start justify-center p-4'>
|
||||
<img src='https://cdn.devdojo.com/images/august2023/headshot-new.jpeg' class='w-10 h-10 mr-2 rounded-full'>
|
||||
<div class='flex flex-col'>
|
||||
<p class='text-sm font-medium text-gray-800'>New Friend Request</p>
|
||||
<p class='mt-1 text-xs leading-none text-gray-800'>Friend request from John Doe.</p>
|
||||
<div class='flex mt-3'>
|
||||
<button type='button' @click='burnToast(toast.id)' class='inline-flex items-center px-2 py-1 text-xs font-semibold text-white bg-indigo-600 rounded shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'>Accept</button>
|
||||
<button type='button' @click='burnToast(toast.id)' class='inline-flex items-center px-2 py-1 ml-3 text-xs font-semibold text-gray-900 bg-white rounded shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50'>Decline</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
"
|
||||
class="relative space-y-5">
|
||||
<div class="relative">
|
||||
<p class="mb-2 text-xs font-medium text-gray-500">Types</p>
|
||||
<div class="relative flex space-x-5">
|
||||
@ -22,6 +55,19 @@
|
||||
<button @click="title='Success Notification'; type='success'; popToast()"
|
||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='success' }"
|
||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Success</button>
|
||||
<button @click="title='Info Notification'; type='info'; popToast()"
|
||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='info' }"
|
||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Info</button>
|
||||
<button @click="title='Warning Notification'; type='warning'; popToast()"
|
||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='warning' }"
|
||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Warning</button>
|
||||
<button @click="title='Danger Notification'; type='danger'; popToast()"
|
||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='danger' }"
|
||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Danger</button>
|
||||
|
||||
<button @click="popToast(customToastHTML)"
|
||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='success' }"
|
||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Custom</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
@ -48,6 +94,17 @@
|
||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Bottom Left</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<p class="mb-2 text-xs font-medium text-gray-500">Layout</p>
|
||||
<div class="relative flex space-x-5">
|
||||
<button @click="expanded=false; window.dispatchEvent(new CustomEvent('set-toasts-layout', { detail: { layout: 'default' }}));"
|
||||
:class="{ 'ring-2 ring-neutral-200/60' : !expanded }"
|
||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Default</button>
|
||||
<button @click="expanded=true; window.dispatchEvent(new CustomEvent('set-toasts-layout', { detail: { layout: 'expanded' }}));"
|
||||
:class="{ 'ring-2 ring-neutral-200/60' : expanded }"
|
||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Expanded</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template x-teleport="body">
|
||||
<ul
|
||||
@ -66,16 +123,49 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
popToast(id){
|
||||
this.deleteToastWithId(id);
|
||||
this.stackToasts();
|
||||
this.calculateHeightOfToastsContainer();
|
||||
burnToast(id){
|
||||
burnToast = this.getToastWithId(id);
|
||||
burnToastElement = document.getElementById(burnToast.id);
|
||||
if(burnToastElement){
|
||||
if(this.toasts.length == 1){
|
||||
if(this.layout=='default'){
|
||||
this.expanded = false;
|
||||
}
|
||||
burnToastElement.classList.remove('translate-y-0');
|
||||
if(this.position.includes('bottom')){
|
||||
burnToastElement.classList.add('translate-y-full');
|
||||
} else {
|
||||
burnToastElement.classList.add('-translate-y-full');
|
||||
}
|
||||
burnToastElement.classList.add('-translate-y-full');
|
||||
}
|
||||
burnToastElement.classList.add('opacity-0');
|
||||
let that = this;
|
||||
setTimeout(function(){
|
||||
that.deleteToastWithId(id);
|
||||
setTimeout(function(){
|
||||
that.stackToasts();
|
||||
}, 1)
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
getBottomPositionOfElement(el){
|
||||
elementRectangle = el.getBoundingClientRect();
|
||||
return elementRectangle.height;
|
||||
getToastWithId(id){
|
||||
for(let i = 0; i < this.toasts.length; i++){
|
||||
if(this.toasts[i].id === id){
|
||||
return this.toasts[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
stackToasts(){
|
||||
console.log('stacking...');
|
||||
this.positionToasts();
|
||||
this.calculateHeightOfToastsContainer();
|
||||
let that = this;
|
||||
setTimeout(function(){
|
||||
that.calculateHeightOfToastsContainer();
|
||||
}, 300);
|
||||
},
|
||||
positionToasts(){
|
||||
if(this.toasts.length == 0) return;
|
||||
let topToast = document.getElementById( this.toasts[0].id );
|
||||
topToast.style.zIndex = 100;
|
||||
@ -112,7 +202,6 @@
|
||||
} else {
|
||||
middleToast.style.scale = '94%';
|
||||
if(this.position.includes('bottom')){
|
||||
this.alignTop(topToast, middleToast);
|
||||
middleToast.style.transform = 'translateY(-16px)';
|
||||
} else {
|
||||
this.alignBottom(topToast, middleToast);
|
||||
@ -142,7 +231,6 @@
|
||||
} else {
|
||||
bottomToast.style.scale = '88%';
|
||||
if(this.position.includes('bottom')){
|
||||
this.alignTop(top, bottomToast);
|
||||
bottomToast.style.transform = 'translateY(-32px)';
|
||||
} else {
|
||||
this.alignBottom(topToast, bottomToast);
|
||||
@ -150,6 +238,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(this.toasts.length == 3) return;
|
||||
let burnToast = document.getElementById( this.toasts[3].id );
|
||||
burnToast.style.zIndex = 70;
|
||||
@ -185,6 +275,12 @@
|
||||
that.toasts.pop();
|
||||
}, 300);
|
||||
|
||||
if(this.position.includes('bottom')){
|
||||
middleToast.style.top = 'auto';
|
||||
}
|
||||
|
||||
console.log(middleToast.style.top);
|
||||
|
||||
return;
|
||||
},
|
||||
alignBottom(element1, element2) {
|
||||
@ -205,41 +301,37 @@
|
||||
// Get the top position of the first element
|
||||
let top1 = element1.offsetTop;
|
||||
|
||||
// if(top1 == 0 && this.position.includes('bottom')){
|
||||
// top1 = 'auto';
|
||||
// }
|
||||
|
||||
// Apply the same top position to the second element
|
||||
element2.style.top = top1 + 'px';
|
||||
},
|
||||
// alignTop(element1, element2) {
|
||||
// // Get the top position of both elements
|
||||
// let top1 = element1.offsetTop;
|
||||
// let top2 = element2.offsetTop;
|
||||
|
||||
// // Get the height of both elements
|
||||
// let height1 = element1.offsetHeight;
|
||||
// let height2 = element2.offsetHeight;
|
||||
|
||||
// // Calculate the bottom property for the second element
|
||||
// let bottom2 = top2 - top1 + (height2 - height1);
|
||||
|
||||
// // Apply the calculated bottom property to the second element
|
||||
// element2.style.bottom = bottom2 + 'px';
|
||||
// },
|
||||
unstackToasts(){
|
||||
resetBottom(){
|
||||
for(let i = 0; i < this.toasts.length; i++){
|
||||
if(document.getElementById( this.toasts[i].id )){
|
||||
let toastElement = document.getElementById( this.toasts[i].id );
|
||||
if(this.position.includes('bottom')){
|
||||
toastElement.style.bottom = '0px';
|
||||
} else {
|
||||
toastElement.style.top = '0px';
|
||||
}
|
||||
}
|
||||
},
|
||||
resetTop(){
|
||||
for(let i = 0; i < this.toasts.length; i++){
|
||||
if(document.getElementById( this.toasts[i].id )){
|
||||
let toastElement = document.getElementById( this.toasts[i].id );
|
||||
toastElement.style.top = '0px';
|
||||
}
|
||||
}
|
||||
},
|
||||
getBottomPositionOfElement(el){
|
||||
return (el.getBoundingClientRect().height + el.getBoundingClientRect().top);
|
||||
},
|
||||
calculateHeightOfToastsContainer(){
|
||||
if(this.toasts.length == 0) return;
|
||||
if(this.toasts.length == 0){
|
||||
$el.style.height = '0px';
|
||||
return;
|
||||
}
|
||||
|
||||
lastToast = this.toasts[this.toasts.length - 1];
|
||||
lastToastRectangle = document.getElementById(lastToast.id).getBoundingClientRect();
|
||||
@ -247,27 +339,32 @@
|
||||
firstToast = this.toasts[0];
|
||||
firstToastRectangle = document.getElementById(firstToast.id).getBoundingClientRect();
|
||||
|
||||
if(this.toastsHovered){
|
||||
console.log( lastToastRectangle.top );
|
||||
if(this.position.includes('bottom')){
|
||||
$el.style.height = ((firstToastRectangle.top + firstToastRectangle.height) - lastToastRectangle.top) + 'px';
|
||||
} else {
|
||||
$el.style.height = ((lastToastRectangle.top + lastToastRectangle.height) - firstToastRectangle.top) + 'px';
|
||||
}
|
||||
} else {
|
||||
$el.style.height = firstToastRectangle.height + 'px';
|
||||
|
||||
// if(this.position.includes('bottom')){
|
||||
// if(this.expanded){
|
||||
// $el.style.height = ((firstToastRectangle.top + firstToastRectangle.height) - lastToastRectangle.top) + 'px';
|
||||
// }
|
||||
|
||||
|
||||
// } else {
|
||||
// $el.style.height = lastToastRectangle.top + lastToastRectangle.height + 'px';
|
||||
// }
|
||||
}
|
||||
}
|
||||
}"
|
||||
@set-toasts-layout.window="
|
||||
console.log(event.detail);
|
||||
layout=event.detail.layout;
|
||||
if(layout == 'expanded'){
|
||||
expanded=true;
|
||||
} else {
|
||||
expanded=false;
|
||||
}
|
||||
stackToasts();
|
||||
"
|
||||
@toast-show.window="
|
||||
event.stopPropagation();
|
||||
if(event.detail.position){
|
||||
// if(event.detail.data.position != position){
|
||||
// toasts = [];
|
||||
// }
|
||||
position = event.detail.position;
|
||||
|
||||
}
|
||||
toasts.unshift({
|
||||
id: 'toast-' + Math.random().toString(16).slice(2),
|
||||
@ -275,34 +372,42 @@
|
||||
message: event.detail.message,
|
||||
description: event.detail.description,
|
||||
type: event.detail.type,
|
||||
top: 0
|
||||
html: event.detail.html
|
||||
});
|
||||
"
|
||||
@mouseover="toastsHovered=true;"
|
||||
@mouseout="toastsHovered=false"
|
||||
@mouseenter="toastsHovered=true;"
|
||||
@mouseleave="toastsHovered=false"
|
||||
x-init="
|
||||
if(layout == 'expanded'){
|
||||
expanded = true;
|
||||
}
|
||||
stackToasts();
|
||||
calculateHeightOfToastsContainer();
|
||||
$watch('toastsHovered', function(value){
|
||||
console.log('hovered value: ' + value);
|
||||
|
||||
if(layout == 'default'){
|
||||
if(position.includes('bottom')){
|
||||
resetBottom();
|
||||
} else {
|
||||
resetTop();
|
||||
}
|
||||
|
||||
if(value){
|
||||
// calculate the new positions
|
||||
expanded = true;
|
||||
if(layout == 'default'){
|
||||
unstackToasts();
|
||||
stackToasts();
|
||||
setTimeout(function(){
|
||||
calculateHeightOfToastsContainer();
|
||||
}, 10);
|
||||
}
|
||||
|
||||
} else {
|
||||
if(layout == 'default'){
|
||||
unstackToasts();
|
||||
calculateHeightOfToastsContainer();
|
||||
expanded = false;
|
||||
//setTimeout(function(){
|
||||
stackToasts();
|
||||
//}, 10);
|
||||
setTimeout(function(){
|
||||
stackToasts();
|
||||
}, 10)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -337,7 +442,6 @@
|
||||
|
||||
setTimeout(function(){
|
||||
stackToasts();
|
||||
calculateHeightOfToastsContainer();
|
||||
}, 10);
|
||||
}, 5);
|
||||
}, 50);
|
||||
@ -362,14 +466,32 @@
|
||||
:class="{ 'toast-no-description': !toast.description }"
|
||||
>
|
||||
<span
|
||||
class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.08)] w-full p-4 transition-all duration-300 ease-out bg-white border border-gray-100 rounded-md sm:max-w-xs group"
|
||||
class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.08)] w-full transition-all duration-300 ease-out bg-white border border-gray-100 rounded-md sm:max-w-xs group"
|
||||
:class="{ 'p-4' : !toast.html, 'p-0' : toast.html }"
|
||||
>
|
||||
<template x-if="!toast.html">
|
||||
<div class="relative">
|
||||
<div class="flex items-center"
|
||||
:class="{ 'text-green-500' : toast.type=='success', 'text-blue-500' : toast.type=='info', 'text-orange-400' : toast.type=='warning', 'text-red-500' : toast.type=='danger', 'text-gray-800' : toast.type=='default' }">
|
||||
|
||||
<svg x-show="toast.type=='success'" class="w-[18px] h-[18px] mr-1.5 -ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM16.7744 9.63269C17.1238 9.20501 17.0604 8.57503 16.6327 8.22559C16.2051 7.87615 15.5751 7.93957 15.2256 8.36725L10.6321 13.9892L8.65936 12.2524C8.24484 11.8874 7.61295 11.9276 7.248 12.3421C6.88304 12.7566 6.92322 13.3885 7.33774 13.7535L9.31046 15.4903C10.1612 16.2393 11.4637 16.1324 12.1808 15.2547L16.7744 9.63269Z" fill="currentColor"></path></svg>
|
||||
<svg x-show="toast.type=='info'" class="w-[18px] h-[18px] mr-1.5 -ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9ZM13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V12Z" fill="currentColor"></path></svg>
|
||||
<svg x-show="toast.type=='warning'" class="w-[18px] h-[18px] mr-1.5 -ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.44829 4.46472C10.5836 2.51208 13.4105 2.51168 14.5464 4.46401L21.5988 16.5855C22.7423 18.5509 21.3145 21 19.05 21L4.94967 21C2.68547 21 1.25762 18.5516 2.4004 16.5862L9.44829 4.46472ZM11.9995 8C12.5518 8 12.9995 8.44772 12.9995 9V13C12.9995 13.5523 12.5518 14 11.9995 14C11.4473 14 10.9995 13.5523 10.9995 13V9C10.9995 8.44772 11.4473 8 11.9995 8ZM12.0009 15.99C11.4486 15.9892 11.0003 16.4363 10.9995 16.9886L10.9995 16.9986C10.9987 17.5509 11.4458 17.9992 11.9981 18C12.5504 18.0008 12.9987 17.5537 12.9995 17.0014L12.9995 16.9914C13.0003 16.4391 12.5532 15.9908 12.0009 15.99Z" fill="currentColor"></path></svg>
|
||||
<svg x-show="toast.type=='danger'" class="w-[18px] h-[18px] mr-1.5 -ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9996 7C12.5519 7 12.9996 7.44772 12.9996 8V12C12.9996 12.5523 12.5519 13 11.9996 13C11.4474 13 10.9996 12.5523 10.9996 12V8C10.9996 7.44772 11.4474 7 11.9996 7ZM12.001 14.99C11.4488 14.9892 11.0004 15.4363 10.9997 15.9886L10.9996 15.9986C10.9989 16.5509 11.446 16.9992 11.9982 17C12.5505 17.0008 12.9989 16.5537 12.9996 16.0014L12.9996 15.9914C13.0004 15.4391 12.5533 14.9908 12.001 14.99Z" fill="currentColor"></path></svg>
|
||||
<p class="text-[13px] font-medium leading-none text-gray-800" x-text="toast.message"></p>
|
||||
<p x-show="toast.description" class="mt-1.5 text-xs leading-none opacity-90" x-text="toast.description"></p>
|
||||
</div>
|
||||
<p x-show="toast.description"
|
||||
:class="{ 'pl-5' : toast.type!='default' }"
|
||||
class="mt-1.5 text-xs leading-none opacity-70" x-text="toast.description"></p>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="toast.html">
|
||||
<div x-html="toast.html"></div>
|
||||
</template>
|
||||
<span
|
||||
@click="popToast(toast.id)"
|
||||
@click="burnToast(toast.id)"
|
||||
class="absolute right-0 p-1.5 mr-2.5 text-gray-400 duration-100 ease-in-out rounded-full opacity-0 cursor-pointer hover:bg-gray-50 hover:text-gray-500"
|
||||
:class="{ 'top-1/2 -translate-y-1/2' : !toast.description, 'top-0 mt-2.5' : toast.description, 'opacity-100' : toastHovered, 'opacity-0' : !toastHovered }"
|
||||
:class="{ 'top-1/2 -translate-y-1/2' : !toast.description && !toast.html, 'top-0 mt-2.5' : (toast.description || toast.html), 'opacity-100' : toastHovered, 'opacity-0' : !toastHovered }"
|
||||
>
|
||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
@ -378,16 +500,4 @@
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
toast = function(message, options = {}){
|
||||
let description = '';
|
||||
let type = 'default';
|
||||
let position = 'top-center';
|
||||
if(typeof options.description != 'undefined') description = options.description;
|
||||
if(typeof options.type != 'undefined') type = options.type;
|
||||
if(typeof options.position != 'undefined') position = options.position;
|
||||
|
||||
window.dispatchEvent(new CustomEvent('toast-show', { detail : { type: type, message: message, description: description, position : position }}));
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
30
elements/toast.json
Normal file
30
elements/toast.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"data" : {
|
||||
"toasts[]" : "An array of toast objects (see toast object below)",
|
||||
"toastsHovered": "When the toasts are hovered, this will be sent to true.",
|
||||
"expanded" : "A boolean value that indicates whether or not the toasts are expanded",
|
||||
"layout" : "You can choose the 'default' layout or have them 'expanded' by default",
|
||||
"position": "The position of the toast notifications",
|
||||
"paddingBetweenToasts": "When expanded the padding to add between the toasts",
|
||||
"deleteToastWithId(id)": "Delete a toast with the given id",
|
||||
"burnToast(id)": "This method will add the exit animation to the last toast and delete it",
|
||||
"getToastWithId(id)": "Get the toast with the given id",
|
||||
"stackToasts()" : "Stack the toasts on top of each other",
|
||||
"positionToasts()" : "Position the toasts based on their index and the current layout",
|
||||
"alignBottom()" : "Align element2 to be at the bottom of element1",
|
||||
"alignTop()" : "Align element2 to be at the top of element1",
|
||||
"resetBottom()" : "Reset all toasts to bottom of 0px",
|
||||
"resetTop()" : "Reset all toasts to top of 0px",
|
||||
"getBottomPositionOfElement(el)": "Get the bottom position of the given element",
|
||||
"calculateHeightOfToastsContainer()": "Calculate the height of the toasts container",
|
||||
"@set-toasts-layout.window": "This is an event listener to change the layout of the toasts",
|
||||
"@toast-show.window": "This is an event listener to show a toast notification"
|
||||
},
|
||||
"alert_notification" : {
|
||||
"title" : "Usage",
|
||||
"description" : "<p>Copy the code from inside the <strong><code><template x-teleport=\"body\">..</template></code></strong> tags and add it to your project. You may want to add the <strong>window.toast</strong> global function to your site to make it easily pop a <strong>toast('Message')</strong>. This global function is located inside the <strong>x-init</strong> method on the root element.</p>"
|
||||
},
|
||||
"additional" : {
|
||||
"description" : "Here is the default structure of a toast object: <ul><li><strong>id</strong> - Unique ID for the toast</li><li><strong>show</strong> - a boolean value to show or hide the toast</li><li><strong>message</strong> - The title message of the toast</li><li><strong>description</strong> - The description text for the toast</li><li><strong>type</strong> - The type of the toast (default, success, info, warning, danger)</li><li><strong>html</strong> - Custom HTML to be used inside of the toast</li></ul><p>When using the <strong>toast()</strong> global function you can create a simple toast with the following syntax: <strong>toast('Message')</strong> or you can pass in an object to create a more complex toast: <strong>toast('Message', {type: 'success', description: 'short description', position: 'top-right', html: ''})</strong></p>"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user