Toast - Documentation | www.HtmlElements.com

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.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.toast.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class
    • smart.toast.js - the JS file containing the element definition

    Usage

    • Import a module

      With this approach, we import a module and create the web component by using the Smart function. The #toast is a smart-toast tag.

      import {smartToast} from "../../source/modules/smart.toast.js";
      
      Smart('#toast', class {
      get properties() {
      	return {
      		checked: true
      	}
      }
      });
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      
      }
      
      Using the Smart function is optional. You can use const toast = document.querySelector("#toast"); and set the properties like that:
      const toast = document.querySelector("#toast");
      
      toast.autoOpen = true;
      

    • Import a module, Init on Demand

      The following imports the web component's module and creates it on demand, when the document is ready. The #toast is a DIV tag.

      import {smartToast} from "../../source/modules/smart.toast.js";
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      const toast = new smartToast('#toast', {
         	autoOpen: true
      });
      }
      
    • Load scripts

      The following code adds the custom element to the page.

      <!DOCTYPE html>
      <html lang="en">
      <head>
       <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
       <script type="text/javascript" src="../../source/smart.element.js"></script>
       <script type="text/javascript" src="../../source/smart.toast.js"></script>
      </head>
      <body>
       <smart-toast auto-open class="animation blink">Alert!</smart-toast>
      </body>
      </html>

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

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const toast = document.createElement('smart-toast');

Append it to the DOM:
document.body.appendChild(toast);

Remove it from the DOM:
toast.parentNode.removeChild(toast);

Set a property:
toast.propertyName = propertyValue;

Get a property value:
const propertyValue = toast.propertyName;

Invoke a method:
toast.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

toast.addEventListener(eventName, eventHandler);

Remove Event Listener:
toast.removeEventListener(eventName, eventHandler, true);

Appearance

By default smartToast's instance has text(set by value property), icon(set via CSS) and close button( it's visibility is controlled 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">Alert!</smart-toast>
 <div class="toast-container" id="toastContainer2"></div>

Demo

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

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

Demo

Behavior

smartToast could be modal. It's controlled by "modal" boolean property.

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

Demo



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

 <smart-toast auto-open class="animation">Alert!</smart-toast>

Demo



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

 <smart-toast auto-open type="error" class="blink">Alert!</smart-toast>

Demo

Manipulating the content

smartToast allows updating the content of the last opened 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>