JSFiddle - React, Tailwind, and code Playground
HTML
<button id="foo">Sin fondo</button>
<button id="bar">Con fondo</button>
<button id="bin">Por 5 segundos</button>
<button id="baz">Permanentemente</button>
<button id="a">Mensaje al mostrar</button>
<button id="b">Mensaje al ocultar</button>
CSS
button{
display: block;
width: max-content;
margin-bottom: .1in;
}
JavaScript
/**
* NOTIFICACIONES MINIMALISTAS
*
* Plugin que genera notificaciones personalizadas de estilo minimalista
*
* MODO DE USO:
*
* Notification.msg("Texto de ejemplo");
* Notification.msg({
* text: "Texto de ejemplo",
* background: true,
* time: 3000,
* keep: false,
* onShow: _ => {
* //Esto se ejecutará luego de haberse mostrado la notificación
* },
* onHide: _ => {
* //Esto se ejecutará luego de haberse ocultado la notificación
* }
* });
*
* @param {options} Object/String
* @author Alexis López Espinoza
* @version 1.0
* @date 2023-06-04
*/
"use strict";
const Notification = {
/**
* options.text: Texto a mostrar
* options.background: Establece un fondo oscuro detrás de la notificación
* options.time: Tiempo en el que permanecerá visible la notificación
* options.keep: Establece que la notificación se muestre permanentemente
* options.onShow: Llamada de retorno a ejecutarse luego de mostrarse la notificación
* options.onHide: Llamada de retorno a ejecutarse luego de ocultarse la notificación
*/
msg(options){
if (!options || !["[object String]", "[object Object]"].includes(Notification.type(options)) || (Notification.type(options, "object") && !Object.keys(options).length)){
throw new Error("Tiene que establecer un contenido para la notificación");
}
Notification.options = {};
Notification.options.id = `notificationID-${new Date().getTime()}`;
if (Notification.type(options) == "[object String]"){
Notification.options.text = options;
Notification.options.background = false;
Notification.options.time = 3000;
Notification.options.keep = false;
Notification.options.onShow = null;
Notification.options.onHide = null;
}
else{
Notification.options.text = Notification.type(options.text, "string") ? options.text : "No se ha establecido un mensaje";
Notification.options.background = Notification.type(options.background, "boolean") ? options.background :...