Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/wpiece.com/home/html/comun/configuracion.php on line 24
Cloud Web Component example: Site Notifier

Web Component Site Notifier


In this new web component example we will combine the possibility of submitting notifications using Vanilla Notify library (https://github.com/MLaritz/Vanilla-Notify) with the dynamic generation of the notifications themselves (either based on a plain text file or a web service that generates them).

Site Notifier adds to your website the ability to submit those notifications to the user while browsing. To avoid repeating such notifications, they will be created with a unique identifier and presented only once per session.

The notifier wakes up at intervals to check for new notifications. If it finds a new one it will present it to the user and will save a reference of the same one to avoid that it appears again.

Declaration of notifications

Let's first look at the format for generating such notifications. This will be a JSON that will contain an array of notifications. For each of them, you must indicate at least an identifier, a title, a text and a type.

Possible types ar info, success, warning, error, y notify.

Optionally we can indicate:

  • What position to present it using the position option with any of these values: topLeft, topRight, bottomLeft, bottomRight o center
  • If we keep visible (or not) the notification instead of hiding it after a while. For this we will use the sticky option with the value true (or false).
  • If we present (or not) an icon to close it. For this we will use the showClose option with the value true (or false).

A complete example would be:

{
     "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}
     ]
 }

Use of component

This web component url is http://www.wpiece.com/p/16_35

Do not forget to include before the component's import the polyfill for web components.

To use it with a basic configuration you must include it in the html indicating the url where the list of notifications should be read.

<!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>

additional options

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

Time interval

The interval attribute lets you tell the notifier how time (in milliseconds) it should read the notification list to see if there is a new one. By default the value is 1000.

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

Fade In/Fade Out time

The fadeInDuration/fadeOutDuration attributes allow the notifier to indicate the duration (in milliseconds) of the notification input/output effect. By default the value is 2000.

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

Visible duration

The visibleDuration attribute allows you to tell the notifier how long (in milliseconds) a notification must be visible. By default the value is 5000.

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

Visibility time after hover

The postHoverVisibleDuration attribute allows you to tell the notifier how long (in milliseconds) a notification must be visible after user has passed over it. By default the value is 500.

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

Default position

The position attribute tells the notifier the initial position of all notifications. The possible values are the same as for an individual notification: topLeft, topRight, bottomLeft, bottomRight or center. If no position is indicated for a notification the initial position will be used. By default the value is bottomRight.

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

Keep visible notification

Adding the sticky attribute with true (or false) will cause all notifications to remain (or not) always visible instead of Hide them after a while (visibleDuration). If it is also indicated at the notification level, it will be the value of the one that will prevail. By default the value is false.

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

Icon close notification

Adding the showClose attribute with the value true (or false) will cause all notifications to display a icon (or not) to close it. If it is also indicated at the notification level, it will be the value of the one that will prevail. By default the value is true.