55 lines
2.1 KiB
JavaScript
55 lines
2.1 KiB
JavaScript
|
import getIcon from './icons';
|
||
|
|
import { genId } from './helpers';
|
||
|
|
|
||
|
|
export function renderToaster() {
|
||
|
|
const toaster = document.createElement("div");
|
||
|
|
document.body.appendChild(toaster);
|
||
|
|
toaster.outerHTML = `
|
||
|
|
<div
|
||
|
|
aria-label="Notifications alt+T"
|
||
|
|
tabindex="-1"
|
||
|
|
data-expanded="false"
|
||
|
|
class="fixed right-4 top-4 z-50 w-80"
|
||
|
|
id="toaster"
|
||
|
|
></div>`;
|
||
|
|
return toaster;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function renderToast(list, msg, type) {
|
||
|
|
const toast = document.createElement("div");
|
||
|
|
const id = genId();
|
||
|
|
const count = list.children.length;
|
||
|
|
const icon = getIcon(type);
|
||
|
|
|
||
|
|
list.prepend(toast);
|
||
|
|
|
||
|
|
toast.outerHTML = `
|
||
|
|
<div
|
||
|
|
aria-live="polite"
|
||
|
|
aria-atomic="true"
|
||
|
|
role="alert"
|
||
|
|
class="absolute select-none transition-opacity transition-transform flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||
|
|
tabindex="0"
|
||
|
|
data-toast-id="${id}"
|
||
|
|
data-removed="false"
|
||
|
|
data-hidden="true"
|
||
|
|
data-index="${0}"
|
||
|
|
data-front="true"
|
||
|
|
data-swiping="false"
|
||
|
|
data-swipe-out="false"
|
||
|
|
style="--index: 0; --offset: 0px; --initial-height: 0px;"
|
||
|
|
>
|
||
|
|
${ icon ? icon : ""}
|
||
|
|
<div class="ms-3 text-sm font-normal">
|
||
|
|
${msg}
|
||
|
|
</div>
|
||
|
|
<button onclick="ToastinTakin.remove('${id}')" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-success" aria-label="Close">
|
||
|
|
<span class="sr-only">Close</span>
|
||
|
|
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
||
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>`;
|
||
|
|
|
||
|
|
return {id, toast};
|
||
|
|
}
|