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.
{ title: "your_title", content: "your_content" }
object. Feel free to put some
HTML
in it.
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);
});
});