sus-toast

A library for displaying toast notifications. (CSS theme facultative)

Demo: https://codepen.io/archeoprog/pen/dyoLaKK

Getting started

Install as a package

npm i sus-toast

import SUSToast from 'sus-toast';

or use a CDN

Javascript
<script src="https://unpkg.com/sus-toast/src/sustoast.js"></script>
<script src="https://unpkg.com/sus-toast/src/sustoast.min.js"></script>

Functionnal CSS (essential)
<link rel="stylesheet" href="https://unpkg.com/sus-toast/src/toast-core.css"></link>
<link rel="stylesheet" href="https://unpkg.com/sus-toast/src/toast-core.min.css"></link>

Theme CSS (facultative)
<link rel="stylesheet" href="https://unpkg.com/sus-toast/src/toast-theme.css"></link>
<link rel="stylesheet" href="https://unpkg.com/sus-toast/src/toast-theme.min.css"></link>

There is two main ways for using this library : by using the property toastType or not.

If you use the toastType property, a class "sustoast-<value of toastType>" will be added to the element that contains the class "toast-content" during the construction of the toast.

  <div  id="my-toast" class="sustoast">
  
    // library add the class here
    <div class="sustoast-content sustoast-<value of toastType>"> 

    </div>
  </div>

Then in this element, the library will check if there is an img that contains the class "sustoast-svg" and then it will replace the string "resolve" in src attribute by the toastType value.

  <div class="sustoast-content sustoast-<value of toastType>"> 
  
    // the library replaces resolve by the toastType value
     <img class="sustoast-svg" src="<package path>/src/svg/resolve-toast.svg" alt="svg-toast">
     
     // you can also use your own path with your own svg.
     //Just pay attention that only "resolve" changes in src;
  </div>

If you use the CSS theme of the library, you can define 4 values ("info", "success", "warning", "danger") for toastType property and/or create your own toasts.

Example of basic toast-info configuration:

  <!-- Choose an id and don't remove the class sustoast -->
  <div  id="my-toast" class="sustoast">
  
      <!-- Don't remove the class sustoast-content -->
      <div class="sustoast-content">
      
          <!-- Facultative but you can use the class "sustoast-close-btn" among the elements 
            you want define to close the toast -->
          <span type="button" class="sustoast-close-btn"> </span>
          
          <div class="sustoast-body"> 
              <div class="sustoast-logo">
                  <img class="sustoast-svg" src="src/svg/resolve-toast.svg" alt="info-toast">
              </div>
              <div class="sustoast-message">
                  Hey! This is an info toast!
              </div>
          </div>
      </div>
  </div>
  
  <script>
    
    const MySUSToast = new SUSToast( {
            toast: document.getElementById('my-toast'),
            toastType: "info" // here the toastType configuration
        }
    );

    let btnSUSToast = document.getElementsById("display-toast"); // you can test with button

    btnSUSToast.addEventListener('click', () => {
        MySUSToast.show();
    });
  
  </script>

For a really basic usage, thats'it. You can consult the list of properties and methods just after the "injection" topic.

The injection

You can inject properties into the html of the toast by passing an object. The object must have #ids or .classes of elements that you want to modify as keys. The keys must have an object of attributes and/or innerText and/or innerHTML functions as values.

Just see this example :

  let injection = { 
  
        // define the key of the element by its id, add HTML and two classes
        "#sustoast-header": { 
            "innerHTML": "<p>Hello, i am injected html!</p>", // you can inject html
            "class": "bg-dark text-success" set class attribute and its value
        },
        
        // define the key of the element by its class, set two classes and style
        ".sustoast-close-btn": {"class": "btn btn-danger", "style": "padding: 10px"}
    }

    // you can also use innerText 

For attributes, the method used behind is setAttribute(), so pay attention to define everything you want for each attribute. I'll add a more complex configuration if you need. You can also "Pull request" me to suggesting a new implementation.

Ideally, the injection property should be used with the update() method to allow attributes and datas dynamically.

Methods

Name | description ------------ | ------------- instance.show() | Display the modal instance.hide() | Hide the modal instance.update(elements = {}) | Update the instance by passing an object with properties you want to update instance.unmount() | Reset the html of toast object like it was before its first instance

The other methods only have an internal role and you should not use them directly.

Properties

Name | Default | description ------------ | ------- | -------------- toast | null | The html toast toastType | null | Type of your toast as explained at the begining of the doc slideFrom | "right" | Availables : "right", "top", "left", "bottom". You also can pass an array with 2nd param to indicate the X or Y origin depending on the first param origin. For example ["top", "100px"] (just try and you'll understand) slideTo | "0px" | Continue the slide from slideFrom origin to the distance you configure (you can use an other unit than "px") dimensions | ["400px", "auto"] | Width and height of the toast (you can use an other unit than "px") animationDuration | 400 | Duration of the slide animation (ms) lifeTime | 3000 | Lifetime of the toast before hide() method call (ms) injection | null | For inject attributes, text, html in html elements of the toast. See the injection topic just above