Overview

The smart-toast represents an element which displays an unobtrusive notification to the user. Multiple instances of the same toast can be shown at the same time. In case with multiple instances, they are stacked vertically into special containers positioned ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’, in center(in modal mode) or in custom container, defined by the user.

To initialize an toast element the user has to include the following files to the head of the page:

  • smart.base.css – the CSS file containing the styles for element
  • smart.element.js – the base class
  • smart.toast.js – the JS file containing the element definition

The following code adds an toast to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script>
 <script type="text/javascript" src="webcomponents-loader.js">
</script>
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.toast.js"></script>
</head>
<body>
 <smart-toast id="toast1" auto-open show-close-button class="animation blink">Toast!</smart-toast>
</body>
</html>

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Appearance

By default Smart.Toast instance has text(set by value property), icon(set via CSS) and close button( it’s visibility is conntrolled by showCloseButton property). This may be changed by applying custom template via itemTemplate property

By default newly opened toast instances are opened in the browsers top-right corner. This can be changed by setting the position property. There are four available options:

  • ‘top-left’ – renders newly opened toasts in the top-left browser’s corner
  • ‘top-right’ – renders newly opened toasts in the top-right browser’s corner
  • ‘bottom-left’ – renders newly opened toasts in the bottom-left browser’s corner
  • ‘bottom-right’ – renders newly opened toasts in the bottom-right browser’s corner

Demo

All toast instances are stored vertically in these common containers. The vertical order corresponds to the order of opening.

Another property, responsible about toast’s positioning is appendTo. It allows toast rendering in custom container chosen by the user. If appendTo is set, then the position settings are disregarded.

 <smart-toast id="toast1" auto-open show-close-button class="animation blink">Toast!</smart-toast>
 <div class="toast-container" id="toastContainer2"></div>

The different toast type styling cane be set via set type property. Allowed values are ‘info’, ‘warning’, ‘success’, ‘error’, ‘mail’, ‘time’.

 <smart-toast id="toast" auto-open show-close-button append-to="toastContainer" type="info">Toast!</smart-toast>
 <smart-toast id="toast" auto-open show-close-button append-to="toastContainer" type="warning">Toast!</smart-toast>
 <smart-toast id="toast" auto-open show-close-button append-to="toastContainer" type="success">Toast!</smart-toast>
 <smart-toast id="toast" auto-open show-close-button append-to="toastContainer" type="error">Toast!</smart-toast>
 <smart-toast id="toast" auto-open show-close-button append-to="toastContainer" type="mail">Toast!</smart-toast>
 <smart-toast id="toast" auto-open show-close-button append-to="toastContainer" type="time">Toast!</smart-toast>
 <div class="toast-container" id="toastContainer"></div>

Demo

Behavior

Smart.Toast could be modal. It’s controlled by the “modal” boolean property.

 <smart-toast id="toast" modal type="success">Toast!</smart-toast>

Demo



The animation class added in Smart.Toast, produces smooth animation on open/close.

 <smart-toast auto-open show-close-button class="animation">Toast!</smart-toast>


The blink class added in Smart.Toast, produces blinking effect when an instance is opened.

 <smart-toast auto-open show-close-button type="error" class="blink">Toast!</smart-toast>

Demo

Manipulating the content

Smart.Toast allows updating the content of the last openned item by changing toast’s value

 <script>
     window.onload = function () {
         var toast = document.getElementById('toast');
         toast.value = 'Toast\'s value is updated !!!';
     }
 </script>

Methods

open – opens a new toast instance

 <script>
     window.onload = function () {
         var toast = document.getElementById('toast');
         toast.open();
     }
 </script>

closeAll – closes all opened toast instances

 <script>
     window.onload = function () {
         var toast = document.getElementById('toast');
         toast.closeAll();
     }
 </script>

closeItem – closes particular toast instance

 <script>
     window.onload = function () {
         var toast = document.getElementById('toast');
         toast.closeItem('itemId');
     }
 </script>

closeLast – closes last opened instance

 <script>
     window.onload = function () {
         var toast = document.getElementById('toast');
         toast.closeLast();
     }
 </script>