[APORTE] Notificaciones minimalistas

[Alexis88]

¡Hola a todos!

En ánimo de querer inyectar una pequeña cuota de actividad al foro, quiero compartir un pequeño plugin que elaboré completamente con JavaScript nativo, el cual genera pequeños cuadros que se muestran a manera de notificaciones.

Son ideales para emplear en entornos no seguros, que es lo que, por ejemplo, exige la API Notification, nativa de JavaScript. De hecho, la idea de elaborar esto surgió a raíz de un trabajo que hice para una entidad, la cual requería una aplicación web interna que muestre notificaciones en pantalla al producirse determinados eventos.

Sin más, el código fuente: Enlace al repositorio (originalmente lo mostré aquí, pero se superponía al texto de más abajo y no se podía distinguir nada, de manera que decidí dejar el enlace para que puedan verlo en la página de GitHub)

En esencia, el cuadro de notificación es un <div> al cual se le asigna un texto para mostrar y que, por defecto, se oculta pasados tres segundos o cuando se pulse sobre el cuadro.

La forma más sencilla de generar una notificación es la siguiente:

Código Javascript:

Notification.msg("¡Hola, Foros del Web!");
 

Se invoca al método estático msg() del objeto Notification y se le pasa una cadena de caracteres como mensaje a visualizar. Esta cadena también puede contener etiquetas HTML, como un <img> por si se desea mostrar un ícono o algo más grande. Dado que la intención de este plugin es la de generar notificaciones de estilo minimalista, no he considerado la inclusión de un ícono, título o botón de cerrado como elementos externos al mensaje que se va a mostrar.

Asimismo, existe una segunda forma de generar notificaciones estableciendo una configuración que alterará algunos aspectos de la forma preestablecida:

Código Javascript:

Notification.msg({
    text: "¡Hola, Foros del Web!",
    background: true,
    time: 5000,
    keep: false,
    onShow: _ => console.log("La notificación se está mostrando"),
    onHide: _ => console.log("La notificación se ha ocultado")
});
 

Esta segunda forma permite establecer ciertas cosas, como un fondo oscuro del tamaño de la pantalla, un tiempo mayor o menor al que viene por defecto (tres segundos), determinar si la notificación se mostrará permanentemente (se ignora el tiempo establecido), y ejecutar llamadas de retorno tanto al momento de mostrar la notificación como luego de ocultarse.

Advertencia: En caso de invocar al método Notification.msg() sin pasarle argumentos o bien que el argumento no sea una cadena de caracteres ni un objeto literal, se producirá un error.

Pueden mostrarse varias notificaciones sin que se solapen unas sobre otras. Las notificaciones subsiguientes se ubicarán justo por encima de la primera, la cual se encontrará en la esquina inferior izquierda de la pantalla. Conforme se vayan ocultando, ya sea por haberse cumplido el tiempo establecido o porque el usuario las ocultó pulsándolas, las notificaciones restantes irán tomando el lugar de las anteriores.

Aquí pueden ver una demostración: Enlace a JSFiddle

Para más ejemplos y explicaciones, pueden leer la presentación en mi repositorio de GitHub.

Cualquier duda, consulta o sugerencia será bienvenida.

Un saludo

[Panino5001]

¡Felicitaciones, Alexis88! Hay varias cosas interesantes en tu código, como el uso de plantillas literales y el método animate de element. Además, muy buenas todas las opciones de configuración.

[Alexis88]

¡Muchas gracias, Andrés! He estado pasando estos últimos meses aprendiendo un poco más sobre ES6 y he quedado fascinado con la cantidad de cosas interesantes que encontré. Algo de ello procuré trasladar a ese código y me gustó tanto que lo quise compartir por aquí.

Un gran abrazo, Andrés.