showToast.js

showToast.js

// https://codepen.io/uffou/pen/JNVWVy
function showToast(_title='', _text=''){
    window.toast.create({
     title: _title,
     text: _text
  });
}
window.showToast = showToast; 

(function(root, factory) {
  try {
    // commonjs
    if (typeof exports === 'object') {
      module.exports = factory();
    // global
    } else {
      root.toast = factory();
    }
  } catch(error) {
    console.log('Isomorphic compatibility is not supported at this time for toast.');
  }
})(this, function() {
   // Create toast object
  const toast = {
    // In case toast creation is attempted before dom has finished loading!
    create: function() {
      console.error([
        'DOM has not finished loading.',
        '\tInvoke create method when DOM\s readyState is complete',
      ].join('\n'));
    }
  };
  window.toast = toast;
  var autoincrement = 0;


  // We need DOM to be ready
  if (document.readyState === 'complete') {
    init();
  } else {
    window.addEventListener('DOMContentLoaded', init);
  }


  // Initialize library
  function init() {
    // Toast container
    var container = document.createElement('div');
    container.id = 'cooltoast-container';
    document.body.appendChild(container);

    // @Override
    // Replace create method when DOM has finished loading
    toast.create = function(options) {
      var toast = document.createElement('div');
      toast.id = ++autoincrement;
      toast.id = 'toast-' + toast.id;
      toast.className = 'cooltoast-toast';

      // title
      if (options.title) {
        var h4 = document.createElement('h4');
        h4.className = 'cooltoast-title';
        h4.innerHTML = options.title;
        toast.appendChild(h4);
      }

      // text
      if (options.text) {
        var p = document.createElement('p');
        p.className = 'cooltoast-text';
        p.innerHTML = options.text;
        toast.appendChild(p);
      }

      // icon
      if (options.icon) {
        var img = document.createElement('img');
        img.src = options.icon;
        img.className = 'cooltoast-icon';
        toast.appendChild(img);
      }

      // click callback
      if (typeof options.callback === 'function') {
        toast.addEventListener('click', options.callback);
      }

      // toast api
      toast.hide = function() {
        toast.className += ' cooltoast-fadeOut';
        toast.addEventListener('animationend', removeToast, false);
      };

      // autohide
      if (options.timeout) {
        setTimeout(toast.hide, options.timeout);
      }
      // else setTimeout(toast.hide, 2000);

      if (options.type) {
        toast.className += ' cooltoast-' + options.type;
      }

      toast.addEventListener('click', toast.hide);


      function removeToast() {
        document.getElementById('cooltoast-container').removeChild(toast);
      }

      document.getElementById('cooltoast-container').appendChild(toast);
      return toast;
    };
  }

  return toast;

});

(function() {
    var css = 'relative{position:relative;padding-right: 1em;}#cooltoast-container{position:fixed;top:0;right:0;width:auto}.cooltoast-toast{position:relative;padding:8px 12px;margin:16px;border-radius:8px;background:#f5f5f5;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.19);animation-duration:.3s;animation-name:cooltoast;animation-timing-function:cubic-bezier(.215,.61,.355,1)}.cooltoast-fadeOut{animation-name:cooltoastFadeOut;animation-duration:.3s;animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-fill-mode:forwards}#cooltoast-container h4,#cooltoast-container p{margin:3px 0!important}.cooltoast-title{font-weight:700;font-size:15px;margin-bottom:10px}.cooltoast-text{font-size:14px;color:#777}.cooltoast-icon{position:absolute;top:5px;left:-40px;width:50px;height:50px;border-radius:100%;background:#fff}.cooltoast-toast a,.cooltoast-toast a:hover{color:#549edb!important;text-decoration:none!important}.cooltoast-success{border-bottom:2px solid #51c625}.cooltoast-warning{border-bottom:2px solid #db9215}.cooltoast-error{border-bottom:2px solid #db2b1d}.cooltoast-info{border-bottom:2px solid #27abdb}@keyframes cooltoast{from{transform:translate3d(400px,0,0);opacity:0}to{transform:translate3d(0,0,0);opacity:1}}@keyframes cooltoastFadeOut{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(400px,0,0);opacity:0}}',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

    head.appendChild(style);

    style.type = 'text/css';
    if (style.styleSheet){
      // This is required for IE8 and below.
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
    window.toast = toast;
});