<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>toast.js Examples</title>
<link href="toast.css" rel="stylesheet" media="screen">
</head>
<body style="font-family: Helvetica, Arial, sans-serif;">
<h1>toast.js Examples</h1>
<p>Project home on <a href="https://github.com/srackham/toast.js">Github</a>.</p>
<ul class="list">
<li><a href="#" onclick="Toast.success('Message')">Success</a></li>
<li><a href="#" onclick="Toast.success('Message', 'Title', {displayDuration: 0})">Sticky success
with title</a></li>
<li><a href="#" onclick="Toast.info('Message', '', {displayDuration: 0})">Sticky info</a></li>
<li><a href="#"
onclick="Toast.defaults.displayDuration=500; Toast.info('Default displayDuration 500ms', 'Title')">Info:
Change displayDuration to 200ms</a></li>
<li><a href="#"
onclick="Toast.defaults.displayDuration=2000; Toast.warning('Default displayDuration 2000ms')">Warning:
Change displayDuration to 2000ms</a></li>
<li><a href="#" onclick="Toast.warning('Message', 'Title')">Warning with title</a></li>
<li><a href="#" onclick="Toast.error('Message')">Error</a></li>
<li><a href="#" onclick="Toast.error('Message', 'Title')">Error with title</a></li>
<li><a href="#" onclick="Toast.defaults.width='600px'; Toast.info('Message', 'Title')">Info with
title: Changed default width to 600px</a></li>
<li><a href="#" onclick="Toast.defaults.width='200px'; Toast.info('Message', 'Title')">Info with
title: Changed default width to 200px</a></li>
</ul>
<script type="text/javascript" src="toast.js"></script>
</body>
</html>
toast.js version that doesnt use jquery
//
// Toast popup notifier
//
// By: Stuart Rackham
// https://github.com/srackham/toast.js
//
// Inspired by: https://github.com/Srirangan/notifer.js
// https://github.com/CodeSeven/toastr
//
// PAEz - removed need for jquery
// Needs to be latest version of browsers due to transitioned
//
// / <reference path="jquery.d.ts" />
var Toast;
(function(Toast) {
// Modifiable defaults.
Toast.defaults = {
width: '',
displayDuration: 2000,
fadeOutDuration: 800
};
/* Popup functions */
/**
* Popup informational message.
* @param message A message string.
* @param title An optional title string.
* @param options An optional map of {@link Options}.
*/
function info(message, title, options) {
_toast('info', message, title, options);
}
Toast.info = info;
/**
* Popup warning message.
* @param message A message string.
* @param title An optional title string.
* @param options An optional map of {@link Options}.
*/
function warning(message, title, options) {
_toast('warning', message, title, options);
}
Toast.warning = warning;
/**
* Popup error message.
* @param message A message string.
* @param title An optional title string.
* @param options An optional map of {@link Options}.
*/
function error(message, title, options) {
_toast('error', message, title, options);
}
Toast.error = error;
/**
* Popup success message.
* @param message A message string.
* @param title An optional title string.
* @param options An optional map of {@link Options}.
*/
function success(message, title, options) {
_toast('success', message, title, options);
}
Toast.success = success;
/* Private variables and functions */
var _container; // Toast container DOM element.
function _toast(type, // 'info', 'success', 'error', 'warning'
message, title, options) {
if (options === void 0) {
options = {};
}
Object.keys(Toast.defaults).forEach(function(key) {
if (options[key] === undefined) options[key] = Toast.defaults[key];
});
if (!_container) {
_container = document.querySelector('#toast-container');
if (!_container) {
// Create container element if it is not in the static HTML.
_container = document.createElement('DIV');
_container.setAttribute('id', 'toast-container');
document.body.appendChild(_container);
}
}
if (options.width) {
_container.style.width = options.width;
}
var toastElement = document.createElement('DIV');
toastElement.classList.add('toast');
toastElement.classList.add('toast-' + type);
if (title) {
var titleElement = document.createElement('DIV');
titleElement.classList.add('toast-title');
titleElement.textContent = title;
toastElement.appendChild(titleElement);
}
if (message) {
var messageElement = document.createElement('DIV');
messageElement.classList.add('toast-message');
messageElement.textContent = message;
toastElement.appendChild(messageElement);
}
if (options.displayDuration > 0) {
function fadeOut() {
var fadeOut = function(e) {
if (e.propertyName == 'opacity' && window.getComputedStyle(this, null).getPropertyValue('opacity') == 0) {
toastElement.parentElement.removeChild(toastElement);
// toastElement.removeEventListener('transitionend', fadeOut);
}
};
toastElement.addEventListener('transitionend', fadeOut);
toastElement.style.transition = 'opacity ' + options.fadeOutDuration + 'ms linear';
toastElement.style.opacity = 0;
}
setTimeout(function() {
fadeOut();
}, options.displayDuration);
}
toastElement.addEventListener('click', function() {
fadeOut();
});
_container.insertBefore(toastElement, _container.firstChild);
}
})(Toast || (Toast = {}));
/*
* toast.js CSS
*/
.toast {
padding: 8px 35px 8px 14px;
margin-bottom: 8px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border: 2px solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow:#999 0 0 8px;
}
.toast:hover {
cursor: pointer;
box-shadow:#666 0 0 8px;
}
#toast-container {
width: 300px;
top: 12px;
left: 12px;
position: fixed;
z-index: 9999;
}
.toast-title {
font-weight: bold;
}
.toast-message {
}
.toast-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.toast-error {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.toast-info {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
.toast-warning {
color: #c09853;
background-color: #fcf8e3;
border-color: #fbeed5;
}