JSFiddle - React, Tailwind, and code Playground

Growl Web Notifications

by Jennifer Perrin

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<h4>Basic Demos</h4>
<p>
  <button id="basic-demo" class="waves-effect waves-button waves-light">Basic Demo</button>
  <button id="icon-demo" class="waves-effect waves-button waves-light">Custom Icon</button>
  <button id="custom-timeout-demo" class="waves-effect waves-button waves-light">Custom Timeout</button>
</p>

<h4>No Timeout</h4>
<p>
  <button id="no-timeout-open" class="waves-effect waves-button waves-light">Open Notification</button>
  <button id="no-timeout-close" class="waves-effect waves-button waves-light close-button">Close Notification</button>
</p>

<h4>Action: String/Url</h4>
<p><button id="snarl-callback-string" class="waves-effect waves-button waves-light">Open Notification</button></p>

<h4>Action: Callback Function</h4>
<p><button id="snarl-callback-function" class="waves-effect waves-button waves-light">Open Notification</button></p>

CSS

/*!
 * Snarl - Web Notifications based on Growl
 * @version v0.3.3
 * @link https://hoxxep.github.io/snarl
 *
 * Copyright 2014-2015 Liam Gray <[email protected]>
 * Released under the MIT license
 * @license https://github.com/hoxxep/Snarl/blob/master/LICENSE 
 */

#snarl-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  bottom: auto;
  left: auto;
  width: 380px;
  z-index: 100;
  pointer-events: none
}

.snarl-notification {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 15px;
  padding-left: 80px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  pointer-events: all;
  background: #f2f2f2;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25), 0 0 15px rgba(0, 0, 0, 0.05) inset;
  border-radius: 5px;
  opacity: 0;
  left: 400px;
  transition: opacity .21s ease, left .35s ease-in, margin .35s ease
}

.snarl-notification.snarl-in {
  opacity: 1;
  left: 0;
  transition: opacity .28s ease-out .07s, left .35s ease-out
}

.snarl-notification.no-hover:not(.not-dismissable) {
  padding-right: 95px
}

.snarl-notification.no-hover:not(.not-dismissable) .snarl-close {
  opacity: 1;
  box-shadow: none
}

.snarl-notification.not-dismissable {
  padding-right: 15px
}

.snarl-notification.not-dismissable .snarl-close {
  display: none
}

.snarl-notification .snarl-close {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  vertical-align: middle;
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  background: #f2f2f2;
  box-shadow: -30px 0 30px #f2f2f2;
  opacity: 0;
  transition: opacity .25s ease-out;
  cursor: pointer
}

.snarl-notification .snarl-close svg {
  position: relative;
  width: 18px;
  height: 18px;
  margin: -9px;
  top: 50%;
  vertical-align: top;
  fill: #ccc;
  pointer-events: none;
  transition: fill .25s ease
}

.snarl-notification .snarl-close:hover svg {
  fill: #aaa
}

.snarl-notification:hover .snarl-close {
  opacity:...

JavaScript

/*!
 * Snarl - Web Notifications based on Growl
 * @version v0.3.3
 * @link https://hoxxep.github.io/snarl
 *
 * Copyright 2014-2015 Liam Gray <[email protected]>
 * Released under the MIT license
 * @license https://github.com/hoxxep/Snarl/blob/master/LICENSE 
 */

;
(function(window, document) {
  'use strict';
  var Snarl = Snarl || {};

  /** 
   * Public object
   */
  Snarl = {
    count: 0,
    notifications: {},
    defaultOptions: {
      title: '',
      text: '',
      icon: '',
      timeout: 5000,
      action: null,
      dismissable: true
    },

    setDefaultOptions: function(options) {
      Snarl.defaultOptions = mergeOptions(Snarl.defaultOptions, options);
    },

    setNotificationHTML: function(html_string) {
      // turn string into HTML element
      var temp = document.createElement('div');
      temp.innerHTML = html_string;
      var notificationHTML = temp.firstChild;
      temp.removeChild(notificationHTML);

      notificationHtmlTemplate = notificationHTML;
    },

    addNotification: function(options) {
      Snarl.count += 1;
      var id = makeID();

      addNotificationHTML(id);
      Snarl.editNotification(id, options);

      return id;
    },

    editNotification: function(id, options) {
      if (Snarl.notifications[id].removeTimer !== null) {
        clearTimeout(Snarl.notifications[id].removeTimer);
        Snarl.notifications[id].removeTimer = null;
      }

      addNotificationHTML(id);

      options = options || {};

      // use default options for merging
      if (Snarl.notifications[id].options === undefined) {
        Snarl.notifications[id].options = Snarl.defaultOptions;
      }
      options = mergeOptions(Snarl.notifications[id].options, options);

      var element = Snarl.notifications[id].element;

      //** Title
      var title = element.getElementsByClassName('snarl-title')[0];
      if (options.title) {
        title.textContent = options.title;
        removeClass(element, 'snarl-no-title');
    ...