Alert

Flash alerts like a baws.

Arguments

  • container - selector for alert container
  • isSubtle - boolean for alert appearance

    • Usage

    Use success() / error() / warning() / announcement() methods for rendering alerts.

  • Pass message as a { title: "your_title", content: "your_content" } object. Feel free to put some HTML in it.
  • You can change isSubtle per alert. Just pass true as a second argument if you want it to be subtle.

    • Alerts will never stack (if fired one after another), but if you need to clear one manually, simply use clear()

    Screen will scroll to alert container automatically, but if you want to scroll again yourself use scrollTo()

    Example 

    define([ "jquery", "lib/utils/alert" ], function($, Alert) {

  "use strict";

  var alert = new Alert({
        container: ".js-alert-container"
      }),
      defaultContent =
        "<div class='alert alert--subtle'><code class='language-markup'>" +
        alert.config.container + "</code></div>",
      $goSubtleCheckbox = $(".input--checkbox");

  alert.$container.append(defaultContent);

  $(".js-alert-success").on("click", function() {
    alert.success(
      { title: "Congratulations! ", content: "This is so cool!" },
      $goSubtleCheckbox.is(":checked")
    );
  });

  $(".js-alert-error").on("click", function() {
    alert.error(
      { title: "Woah! This message is title only!" },
      $goSubtleCheckbox.is(":checked")
    );
  });

  $(".js-alert-warning").on("click", function() {
    alert.warning(
      { content: "Warning - this one is content only." },
      $goSubtleCheckbox.is(":checked")
    );
  });

  $(".js-alert-announcement").on("click", function() {
    alert.announcement(
      { title: "Yes! ", content: "You are the alert message god." },
      $goSubtleCheckbox.is(":checked")
    );
  });

  $(".js-alert-clear").on("click", function() {
    alert.clear();
    alert.$container.append(defaultContent);
  });
});