Growler

Bootstrap Growler

by AlexJsh02

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container body-content">
    <div class="upper-right">
      <div id="growler-container"></div>
    </div>
  <div class="row">
    <div class="col-md-5">
      <h4>Growler tests (5) second timeout):</h4>
      <div class="btn-group">
        <button type="button" class="btn btn-lg btn-info" onclick='createGrowl("info", { timeout: 5000, title: "Attention:", message: "This alert needs...

CSS

.upper-right {
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 40;
  width: 300px;
}

/*
 * jQuery Growler Plugin v0.0.1 stylesheet
 *
 * Note: style sheet requires div for the Growler container
 *      Growler container's id is 'growler-container',
 *      and embedded as second children element
 *      Update the first style's rule name as necessary
 *
*/

#growler-container div.alert {
  /* do not change div.alert in rule name */
  cursor: pointer;
  font-size: 0.9em;
  margin-right: 1px;
  margin-bottom: 20px;
  padding: 8px 14px 8px 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 4px;
  border-radius: 4px;
  top: inherit;
  left: inherit;
  position: relative;
}

.alert-remove {
  /* do not change */
  opacity: 0;
  transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
}

JavaScript

function createGrowl(type, options) {
  let g = $("#growler-container").growler();
  if (options) {
    switch (type) {
      case "info":
        g.info(options);
        break;
      case "success":
        g.success(options);
        break;
      case "warning":
        g.warning(options);
        break;
      case "danger":
        g.danger(options);
        break;
    }
  }
}

/*
 * jQuery Growler Plugin v0.0.1
 *
 * Note: Growler is BootStrap 3.0.0 dependant
 *       The jQuery plugin's parent element is assumed to be
 *       a div that will act as container for the child 
 *       UI notification elements
 *       The style sheet growler is provided as a separate file
 */
(function($, win) {

  // GROWLER CLASS DEFINITION
  // ======================
  var Growler = function(element) {
    this.$element = element;

    this.AppendElement = function(growl, level) {
      // append jQuery object to append
      if (growl && level) {
        try {
          let el = $.parseHTML(growl.getHtml());
          $(el).addClass(level);
          this.$element.append($(el));
          return true;
        } catch (e) {
          return false;
        }
      } else {
        return false;
      }
    }
    return this;
  }

  Growler.prototype.success = function(options) {
    let g = new Growl(this.$element, options);
    if (this.AppendElement(g, "alert-success")) {
      g.setTimeout();
    }
  }

  Growler.prototype.info = function(options) {
    let g = new Growl(this.$element, options);
    if (this.AppendElement(g, "alert-info")) {
      g.setTimeout();
    }
  }

  Growler.prototype.warning = function(options) {
    let g = new Growl(this.$element, options);
    if (this.AppendElement(g, "alert-warning")) {
      g.setTimeout();
    }
  }

  Growler.prototype.danger = function(options) {
    let g = new Growl(this.$element, options);
    if (this.AppendElement(g, "alert-danger")) {
      g.setTimeout();
    }
  }

  var Growl = function(parent, options) {
   ...