Web Component Site Notifier


En este nuevo web component de ejemplo vamos a combinar la posibilidad de presentar notificaciones de la librería Vanilla Notify (https://github.com/MLaritz/Vanilla-Notify) con la generación dinámica de las propias notificaciones (ya sea en base a un archivo de texto plano o a un servicio web que las genera).

Site Notifier añade a tu sitio web la posibilidad de presentar esas notificaciones al usuario mientras navega. Para evitar repetir dichas notificaciones estas se crearán con un identificador único y se presentarán una única vez por sesión.

El notificador se despertará a intervalos para comprobar si hay nuevas notificaciones. Si encuentra alguna nueva la presentará al usuario y guardará una referencia de la misma para evitar que aparezca de nuevo.

Declaración de notificaciones

Primero veamos cual es el formato para generar dichas notificaciones. Este será un JSON que contendrá un array de notificaciones. Para cada una de ellas deberemos indicar al menos un identificador, un título, un texto y un tipo.

Los posibles tipos son info, success, warning, error, y notify.

Opcionalmente podemos indicar:

  • En qué posición presentarla utilizando la opción position con alguno de estos valores: topLeft, topRight, bottomLeft, bottomRight o center
  • Si mantenemos (o no) la notificación en vez de ocultarla pasado un tiempo. Para ello usaremos la opción sticky con el valor true (o false).
  • Si presentamos (o no) un icono para cerrarla. Para ello usaremos la opción showClose con el valor true (o false).

Un ejemplo completo sería:

{
     "notifications": [
        {"id": 1,"type": "info", "title": "title #1", "text": "Text #1"},
        {"id": 2,"type": "notify", "title": "title #2", "text": "Text #2", "position": "bottomLeft"},
        {"id": 3,"type": "warning", "title": "title #3", "text": "Text #3", "sticky": true},
        {"id": 4,"type": "success", "title": "title #4", "text": "Text #4", "showClose": true}
     ]
 }

Uso del componente

La url de este cloud web component es http://www.wpiece.com/p/16_35

No olvides incluir antes de la importación del componente el polyfill para web components.

Para usarlo con su configuración básica debes incluirlo en el html indicando la url de donde debe leerse la lista de notificaciones.

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://www.wpiece.com/js/webcomponents.min.js"></script>
	<link  rel="import" href="http://www.wpiece.com/p/16_35" />
</head>

<body>
	<site-notifier href="http://url.notification.list"></site-notifier>
</body>
</html>

Opciones adicionales

<site-notifier
	href="http://url.notification.list"
	interval="3000">
</site-notifier>

Intervalo de tiempo

El atributo interval permite indicar al notificador cada cuanto tiempo (en milisegundos) debe leer la lista de notificaciones para ver si hay alguna nueva. Por defecto el valor es 1000.

<site-notifier
	href="http://url.notification.list"
	fadeInDuration="3000"
	fadeInDuration="3000">
</site-notifier>

Tiempo de aparición/desaparición

Los atributos fadeInDuration/fadeOutDuration permiten indicar al notificador la duración (en milisegundos) del efecto de entrada/salida de la notificación. Por defecto el valor es 2000.

<site-notifier
	href="http://url.notification.list"
	visibleDuration="8000">
</site-notifier>

Tiempo de visibilidad

El atributo visibleDuration permiten indicar al notificador cuanto tiempo (en milisegundos) debe presentarse una notificación. Por defecto el valor es 5000.

<site-notifier
	href="http://url.notification.list"
	postHoverVisibleDuration="2000">
</site-notifier>

Tiempo de visibilidad despúes de un hover

El atributo postHoverVisibleDuration permiten indicar al notificador cuanto tiempo (en milisegundos) debe presentarse una notificación después de haber pasado sobre la misma. Por defecto el valor es 500.

<site-notifier
	href="http://url.notification.list"
	position="center">
</site-notifier>

Posición por defecto

El atributo position indica al notificador la posición inicial de todas las notificaciones. Los posibles valores solo los mismos que para una notificación individual: topLeft, topRight, bottomLeft, bottomRight o center. Si no se indica posición para una notificación se usará la inicial. Por defecto el valor es bottomRight.

<site-notifier
	href="http://url.notification.list"
	sticky="true">
</site-notifier>

Fijar notificación

Si se añade el atributo sticky con el valor true (o false) hará que todas las notificaciones permanezcan (o no) siempre visibles en vez de ocultarlas después de un tiempo (visibleDuration). Si se indica también a nivel notificación sera el valor de esta el que prevalecerá. Por defecto el valor es false.

<site-notifier
	href="http://url.notification.list"
	showClose="true">
</site-notifier>

Icono de cerrar notificación

Si se añade el atributo showClose con el valor true (o false) hará que todas las notificaciones presenten un icono (o no) que permite cerrar la notificación. Si se indica también a nivel notificación sera el valor de esta el que prevalecerá. Por defecto el valor es true.