Browse Source

Updated toastr to 2.1.0

pull/156/head
Simon Eisenmann 11 years ago
parent
commit
5a3ac20110
  1. 44
      src/styles/libs/toastr/toastr.scss
  2. 68
      static/js/libs/toastr.js

44
src/styles/libs/toastr/toastr.scss

@ -1,12 +1,13 @@
/* /*
* Toastr * Toastr
* Version 2.0.1 * Copyright 2012-2014
* Copyright 2012 John Papa and Hans Fjällemark. * Authors: John Papa, Hans Fjällemark, and Tim Ferrell.
* All Rights Reserved. * All Rights Reserved.
* Use, reproduction, distribution, and modification of this code is subject to the terms and * Use, reproduction, distribution, and modification of this code is subject to the terms and
* conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php * conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
* *
* Author: John Papa and Hans Fjällemark * ARIA Support: Greta Krafsig
*
* Project: https://github.com/CodeSeven/toastr * Project: https://github.com/CodeSeven/toastr
*/ */
.toast-title { .toast-title {
@ -24,7 +25,6 @@
color: #cccccc; color: #cccccc;
text-decoration: none; text-decoration: none;
} }
.toast-close-button { .toast-close-button {
position: relative; position: relative;
right: -0.3em; right: -0.3em;
@ -48,7 +48,6 @@
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: alpha(opacity=40); filter: alpha(opacity=40);
} }
/*Additional properties for button version /*Additional properties for button version
iOS requires the button element instead of an anchor tag. iOS requires the button element instead of an anchor tag.
If you want the anchor version, it requires `href="#"`.*/ If you want the anchor version, it requires `href="#"`.*/
@ -59,6 +58,16 @@ button.toast-close-button {
border: 0; border: 0;
-webkit-appearance: none; -webkit-appearance: none;
} }
.toast-top-center {
top: 0;
right: 0;
width: 100%;
}
.toast-bottom-center {
bottom: 0;
right: 0;
width: 100%;
}
.toast-top-full-width { .toast-top-full-width {
top: 0; top: 0;
right: 0; right: 0;
@ -97,6 +106,8 @@ button.toast-close-button {
box-sizing: border-box; box-sizing: border-box;
} }
#toast-container > div { #toast-container > div {
position: relative;
overflow: hidden;
margin: 0 0 6px; margin: 0 0 6px;
padding: 15px 15px 15px 50px; padding: 15px 15px 15px 50px;
width: 300px; width: 300px;
@ -134,6 +145,11 @@ button.toast-close-button {
#toast-container > .toast-warning { #toast-container > .toast-warning {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
} }
#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
width: 300px;
margin: auto;
}
#toast-container.toast-top-full-width > div, #toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div { #toast-container.toast-bottom-full-width > div {
width: 96%; width: 96%;
@ -154,8 +170,20 @@ button.toast-close-button {
.toast-warning { .toast-warning {
background-color: #f89406; background-color: #f89406;
} }
.toast-progress {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
background-color: #000000;
opacity: 0.4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: alpha(opacity=40);
}
/*Responsive Design*/ /*Responsive Design*/
@media all and (max-width: 239px) { @media all and (max-width: 240px) {
#toast-container > div { #toast-container > div {
padding: 8px 8px 8px 50px; padding: 8px 8px 8px 50px;
width: 11em; width: 11em;
@ -165,7 +193,7 @@ button.toast-close-button {
top: -0.2em; top: -0.2em;
} }
} }
@media all and (min-width: 240px) and (max-width: 479px) { @media all and (min-width: 241px) and (max-width: 480px) {
#toast-container > div { #toast-container > div {
padding: 8px 8px 8px 50px; padding: 8px 8px 8px 50px;
width: 18em; width: 18em;
@ -175,7 +203,7 @@ button.toast-close-button {
top: -0.2em; top: -0.2em;
} }
} }
@media all and (min-width: 480px) and (max-width: 767px) { @media all and (min-width: 481px) and (max-width: 768px) {
#toast-container > div { #toast-container > div {
padding: 15px 15px 15px 50px; padding: 15px 15px 15px 50px;
width: 25em; width: 25em;

68
static/js/libs/toastr.js

@ -1,12 +1,13 @@
/* /*
* Toastr * Toastr
* Copyright 2012-2014 John Papa and Hans Fjällemark. * Copyright 2012-2014
* Authors: John Papa, Hans Fjällemark, and Tim Ferrell.
* All Rights Reserved. * All Rights Reserved.
* Use, reproduction, distribution, and modification of this code is subject to the terms and * Use, reproduction, distribution, and modification of this code is subject to the terms and
* conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php * conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
* *
* Author: John Papa and Hans Fjällemark
* ARIA Support: Greta Krafsig * ARIA Support: Greta Krafsig
*
* Project: https://github.com/CodeSeven/toastr * Project: https://github.com/CodeSeven/toastr
*/ */
; (function (define) { ; (function (define) {
@ -31,10 +32,12 @@
options: {}, options: {},
subscribe: subscribe, subscribe: subscribe,
success: success, success: success,
version: '2.0.3', version: '2.1.0',
warning: warning warning: warning
}; };
var previousToast;
return toastr; return toastr;
//#region Accessible Methods //#region Accessible Methods
@ -54,7 +57,7 @@
if ($container.length) { if ($container.length) {
return $container; return $container;
} }
if(create) { if (create) {
$container = createContainer(options); $container = createContainer(options);
} }
return $container; return $container;
@ -117,14 +120,14 @@
//#region Internal Methods //#region Internal Methods
function clearContainer(options){ function clearContainer (options) {
var toastsToClear = $container.children(); var toastsToClear = $container.children();
for (var i = toastsToClear.length - 1; i >= 0; i--) { for (var i = toastsToClear.length - 1; i >= 0; i--) {
clearToast($(toastsToClear[i]), options); clearToast($(toastsToClear[i]), options);
}; }
} }
function clearToast($toastElement, options){ function clearToast ($toastElement, options) {
if ($toastElement && $(':focus', $toastElement).length === 0) { if ($toastElement && $(':focus', $toastElement).length === 0) {
$toastElement[options.hideMethod]({ $toastElement[options.hideMethod]({
duration: options.hideDuration, duration: options.hideDuration,
@ -172,12 +175,14 @@
}, },
iconClass: 'toast-info', iconClass: 'toast-info',
positionClass: 'toast-top-right', positionClass: 'toast-top-right',
timeOut: 5000, // Set timeOut and extendedTimeout to 0 to make it sticky timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
titleClass: 'toast-title', titleClass: 'toast-title',
messageClass: 'toast-message', messageClass: 'toast-message',
target: 'body', target: 'body',
closeHtml: '<button>&times;</button>', closeHtml: '<button>&times;</button>',
newestOnTop: true newestOnTop: true,
preventDuplicates: false,
progressBar: false
}; };
} }
@ -190,6 +195,14 @@
var options = getOptions(), var options = getOptions(),
iconClass = map.iconClass || options.iconClass; iconClass = map.iconClass || options.iconClass;
if (options.preventDuplicates) {
if (map.message === previousToast) {
return;
} else {
previousToast = map.message;
}
}
if (typeof (map.optionsOverride) !== 'undefined') { if (typeof (map.optionsOverride) !== 'undefined') {
options = $.extend(options, map.optionsOverride); options = $.extend(options, map.optionsOverride);
iconClass = map.optionsOverride.iconClass || iconClass; iconClass = map.optionsOverride.iconClass || iconClass;
@ -202,7 +215,13 @@
$toastElement = $('<div/>'), $toastElement = $('<div/>'),
$titleElement = $('<div/>'), $titleElement = $('<div/>'),
$messageElement = $('<div/>'), $messageElement = $('<div/>'),
$progressElement = $('<div/>'),
$closeElement = $(options.closeHtml), $closeElement = $(options.closeHtml),
progressBar = {
intervalId: null,
hideEta: null,
maxHideTime: null
},
response = { response = {
toastId: toastId, toastId: toastId,
state: 'visible', state: 'visible',
@ -226,24 +245,32 @@
} }
if (options.closeButton) { if (options.closeButton) {
$closeElement.addClass('toast-close-button').attr("role", "button"); $closeElement.addClass('toast-close-button').attr('role', 'button');
$toastElement.prepend($closeElement); $toastElement.prepend($closeElement);
} }
if (options.progressBar) {
$progressElement.addClass('toast-progress');
$toastElement.prepend($progressElement);
}
$toastElement.hide(); $toastElement.hide();
if (options.newestOnTop) { if (options.newestOnTop) {
$container.prepend($toastElement); $container.prepend($toastElement);
} else { } else {
$container.append($toastElement); $container.append($toastElement);
} }
$toastElement[options.showMethod]( $toastElement[options.showMethod](
{ duration: options.showDuration, easing: options.showEasing, complete: options.onShown } {duration: options.showDuration, easing: options.showEasing, complete: options.onShown}
); );
if (options.timeOut > 0) { if (options.timeOut > 0) {
intervalId = setTimeout(hideToast, options.timeOut); intervalId = setTimeout(hideToast, options.timeOut);
progressBar.maxHideTime = parseFloat(options.timeOut);
progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
if (options.progressBar) {
progressBar.intervalId = setInterval(updateProgress, 10);
}
} }
$toastElement.hover(stickAround, delayedHideToast); $toastElement.hover(stickAround, delayedHideToast);
@ -253,9 +280,9 @@
if (options.closeButton && $closeElement) { if (options.closeButton && $closeElement) {
$closeElement.click(function (event) { $closeElement.click(function (event) {
if( event.stopPropagation ) { if (event.stopPropagation) {
event.stopPropagation(); event.stopPropagation();
} else if( event.cancelBubble !== undefined && event.cancelBubble !== true ) { } else if (event.cancelBubble !== undefined && event.cancelBubble !== true) {
event.cancelBubble = true; event.cancelBubble = true;
} }
hideToast(true); hideToast(true);
@ -281,6 +308,7 @@
if ($(':focus', $toastElement).length && !override) { if ($(':focus', $toastElement).length && !override) {
return; return;
} }
clearTimeout(progressBar.intervalId);
return $toastElement[options.hideMethod]({ return $toastElement[options.hideMethod]({
duration: options.hideDuration, duration: options.hideDuration,
easing: options.hideEasing, easing: options.hideEasing,
@ -299,16 +327,24 @@
function delayedHideToast() { function delayedHideToast() {
if (options.timeOut > 0 || options.extendedTimeOut > 0) { if (options.timeOut > 0 || options.extendedTimeOut > 0) {
intervalId = setTimeout(hideToast, options.extendedTimeOut); intervalId = setTimeout(hideToast, options.extendedTimeOut);
progressBar.maxHideTime = parseFloat(options.extendedTimeOut);
progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
} }
} }
function stickAround() { function stickAround() {
clearTimeout(intervalId); clearTimeout(intervalId);
progressBar.hideEta = 0;
/* Disabled to support custom jQuery without animations. /* Disabled to support custom jQuery without animations.
$toastElement.stop(true, true)[options.showMethod]( $toastElement.stop(true, true)[options.showMethod](
{ duration: options.showDuration, easing: options.showEasing } {duration: options.showDuration, easing: options.showEasing}
);*/ );*/
} }
function updateProgress() {
var percentage = ((progressBar.hideEta - (new Date().getTime())) / progressBar.maxHideTime) * 100;
$progressElement.width(percentage + '%');
}
} }
function getOptions() { function getOptions() {

Loading…
Cancel
Save