notice.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
  1. (function(define) {
  2. define(['jquery'], function($) {
  3. return (function() {
  4. var $container;
  5. var listener;
  6. var toastId = 0;
  7. var toastType = {
  8. error: 'error',
  9. info: 'info',
  10. success: 'success',
  11. warning: 'warning'
  12. };
  13. var cssStyle = $(
  14. '<style type="text/css"> .toast-title{font-weight:bold}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}.toast-message a,.toast-message label{color:#fff}.toast-message a:hover{color:#ccc;text-decoration:none}.toast-close-button{position:relative;right:-0.3em;top:-0.3em;float:right;font-size:20px;font-weight:bold;color:#fff;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8;-ms-filter:alpha(opacity=80);filter:alpha(opacity=80);line-height:1}.toast-close-button:hover,.toast-close-button:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.4;-ms-filter:alpha(opacity=40);filter:alpha(opacity=40)}.rtl .toast-close-button{left:-0.3em;float:left;right:.3em}button.toast-close-button{padding:0;cursor:pointer;background:transparent;border:0;-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{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:12px}.toast-bottom-right{right:12px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}#toast-container{position:fixed;z-index:999999;pointer-events:none}#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#toast-container>div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;border-radius:3px 3px 3px 3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#fff;opacity:.8;-ms-filter:alpha(opacity=80);filter:alpha(opacity=80)}#toast-container>div.rtl{direction:rtl;padding:15px 50px 15px 15px;background-position:right 15px center}#toast-container>div:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;-ms-filter:alpha(opacity=100);filter:alpha(opacity=100);cursor:pointer}#toast-container>.toast-info{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=")!important}#toast-container>.toast-error{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=")!important}#toast-container>.toast-success{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==")!important}#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}#toast-container.toast-top-center>div,#toast-container.toast-bottom-center>div{width:300px;margin-left:auto;margin-right:auto}#toast-container.toast-top-full-width>div,#toast-container.toast-bottom-full-width>div{width:96%;margin-left:auto;margin-right:auto}.toast{background-color:#030303}.toast-success{background-color:#51a351}.toast-error{background-color:#bd362f}.toast-info{background-color:#2f96b4}.toast-warning{background-color:#f89406}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4;-ms-filter:alpha(opacity=40);filter:alpha(opacity=40)}@media all and (max-width:240px){#toast-container>div{padding:8px 8px 8px 50px;width:11em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-0.2em;top:-0.2em}#toast-container .rtl .toast-close-button{left:-0.2em;right:.2em}}@media all and (min-width:241px) and (max-width:480px){#toast-container>div{padding:8px 8px 8px 50px;width:18em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-0.2em;top:-0.2em}#toast-container .rtl .toast-close-button{left:-0.2em;right:.2em}}@media all and (min-width:481px) and (max-width:768px){#toast-container>div{padding:15px 15px 15px 50px;width:25em}#toast-container>div.rtl{padding:15px 50px 15px 15px}}</style>'
  15. );
  16. $("body").append(cssStyle);
  17. var toastr = {
  18. clear: clear,
  19. remove: remove,
  20. error: error,
  21. getContainer: getContainer,
  22. info: info,
  23. options: {},
  24. subscribe: subscribe,
  25. success: success,
  26. version: '2.1.4',
  27. warning: warning
  28. };
  29. var previousToast;
  30. return toastr;
  31. function error(message, title, optionsOverride) {
  32. return notify({
  33. type: toastType.error,
  34. iconClass: getOptions().iconClasses.error,
  35. message: message,
  36. optionsOverride: optionsOverride,
  37. title: title
  38. });
  39. }
  40. function getContainer(options, create) {
  41. if (!options) {
  42. options = getOptions();
  43. }
  44. $container = $('#' + options.containerId);
  45. if ($container.length) {
  46. return $container;
  47. }
  48. if (create) {
  49. $container = createContainer(options);
  50. }
  51. return $container;
  52. }
  53. function info(message, title, optionsOverride) {
  54. return notify({
  55. type: toastType.info,
  56. iconClass: getOptions().iconClasses.info,
  57. message: message,
  58. optionsOverride: optionsOverride,
  59. title: title
  60. });
  61. }
  62. function subscribe(callback) {
  63. listener = callback;
  64. }
  65. function success(message, title, optionsOverride) {
  66. return notify({
  67. type: toastType.success,
  68. iconClass: getOptions().iconClasses.success,
  69. message: message,
  70. optionsOverride: optionsOverride,
  71. title: title
  72. });
  73. }
  74. function warning(message, title, optionsOverride) {
  75. return notify({
  76. type: toastType.warning,
  77. iconClass: getOptions().iconClasses.warning,
  78. message: message,
  79. optionsOverride: optionsOverride,
  80. title: title
  81. });
  82. }
  83. function clear($toastElement, clearOptions) {
  84. var options = getOptions();
  85. if (!$container) {
  86. getContainer(options);
  87. }
  88. if (!clearToast($toastElement, options, clearOptions)) {
  89. clearContainer(options);
  90. }
  91. }
  92. function remove($toastElement) {
  93. var options = getOptions();
  94. if (!$container) {
  95. getContainer(options);
  96. }
  97. if ($toastElement && $(':focus', $toastElement).length === 0) {
  98. removeToast($toastElement);
  99. return;
  100. }
  101. if ($container.children().length) {
  102. $container.remove();
  103. }
  104. }
  105. // internal functions
  106. function clearContainer(options) {
  107. var toastsToClear = $container.children();
  108. for (var i = toastsToClear.length - 1; i >= 0; i--) {
  109. clearToast($(toastsToClear[i]), options);
  110. }
  111. }
  112. function clearToast($toastElement, options, clearOptions) {
  113. var force = clearOptions && clearOptions.force ? clearOptions.force : false;
  114. if ($toastElement && (force || $(':focus', $toastElement).length === 0)) {
  115. $toastElement[options.hideMethod]({
  116. duration: options.hideDuration,
  117. easing: options.hideEasing,
  118. complete: function() {
  119. removeToast($toastElement);
  120. }
  121. });
  122. return true;
  123. }
  124. return false;
  125. }
  126. function createContainer(options) {
  127. $container = $('<div/>')
  128. .attr('id', options.containerId)
  129. .addClass(options.positionClass);
  130. $container.appendTo($(options.target));
  131. return $container;
  132. }
  133. function getDefaults() {
  134. return {
  135. tapToDismiss: true,
  136. toastClass: 'toast',
  137. containerId: 'toast-container',
  138. debug: false,
  139. showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
  140. showDuration: 300,
  141. showEasing: 'swing', //swing and linear are built into jQuery
  142. onShown: undefined,
  143. hideMethod: 'fadeOut',
  144. hideDuration: 1000,
  145. hideEasing: 'swing',
  146. onHidden: undefined,
  147. closeMethod: false,
  148. closeDuration: false,
  149. closeEasing: false,
  150. closeOnHover: true,
  151. extendedTimeOut: 1000,
  152. iconClasses: {
  153. error: 'toast-error',
  154. info: 'toast-info',
  155. success: 'toast-success',
  156. warning: 'toast-warning'
  157. },
  158. iconClass: 'toast-info',
  159. positionClass: 'toast-top-right',
  160. timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
  161. titleClass: 'toast-title',
  162. messageClass: 'toast-message',
  163. escapeHtml: false,
  164. target: 'body',
  165. closeHtml: '<button type="button">&times;</button>',
  166. closeClass: 'toast-close-button',
  167. newestOnTop: true,
  168. preventDuplicates: false,
  169. progressBar: false,
  170. progressClass: 'toast-progress',
  171. rtl: false
  172. };
  173. }
  174. function publish(args) {
  175. if (!listener) {
  176. return;
  177. }
  178. listener(args);
  179. }
  180. function notify(map) {
  181. var options = getOptions();
  182. var iconClass = map.iconClass || options.iconClass;
  183. if (typeof(map.optionsOverride) !== 'undefined') {
  184. options = $.extend(options, map.optionsOverride);
  185. iconClass = map.optionsOverride.iconClass || iconClass;
  186. }
  187. if (shouldExit(options, map)) {
  188. return;
  189. }
  190. toastId++;
  191. $container = getContainer(options, true);
  192. var intervalId = null;
  193. var $toastElement = $('<div/>');
  194. var $titleElement = $('<div/>');
  195. var $messageElement = $('<div/>');
  196. var $progressElement = $('<div/>');
  197. var $closeElement = $(options.closeHtml);
  198. var progressBar = {
  199. intervalId: null,
  200. hideEta: null,
  201. maxHideTime: null
  202. };
  203. var response = {
  204. toastId: toastId,
  205. state: 'visible',
  206. startTime: new Date(),
  207. options: options,
  208. map: map
  209. };
  210. personalizeToast();
  211. displayToast();
  212. handleEvents();
  213. publish(response);
  214. if (options.debug && console) {
  215. console.log(response);
  216. }
  217. return $toastElement;
  218. function escapeHtml(source) {
  219. if (source == null) {
  220. source = '';
  221. }
  222. return source
  223. .replace(/&/g, '&amp;')
  224. .replace(/"/g, '&quot;')
  225. .replace(/'/g, '&#39;')
  226. .replace(/</g, '&lt;')
  227. .replace(/>/g, '&gt;');
  228. }
  229. function personalizeToast() {
  230. setIcon();
  231. setTitle();
  232. setMessage();
  233. setCloseButton();
  234. setProgressBar();
  235. setRTL();
  236. setSequence();
  237. setAria();
  238. }
  239. function setAria() {
  240. var ariaValue = '';
  241. switch (map.iconClass) {
  242. case 'toast-success':
  243. case 'toast-info':
  244. ariaValue = 'polite';
  245. break;
  246. default:
  247. ariaValue = 'assertive';
  248. }
  249. $toastElement.attr('aria-live', ariaValue);
  250. }
  251. function handleEvents() {
  252. if (options.closeOnHover) {
  253. $toastElement.hover(stickAround, delayedHideToast);
  254. }
  255. if (!options.onclick && options.tapToDismiss) {
  256. $toastElement.click(hideToast);
  257. }
  258. if (options.closeButton && $closeElement) {
  259. $closeElement.click(function(event) {
  260. if (event.stopPropagation) {
  261. event.stopPropagation();
  262. } else if (event.cancelBubble !== undefined && event.cancelBubble !== true) {
  263. event.cancelBubble = true;
  264. }
  265. if (options.onCloseClick) {
  266. options.onCloseClick(event);
  267. }
  268. hideToast(true);
  269. });
  270. }
  271. if (options.onclick) {
  272. $toastElement.click(function(event) {
  273. options.onclick(event);
  274. hideToast();
  275. });
  276. }
  277. }
  278. function displayToast() {
  279. $toastElement.hide();
  280. $toastElement[options.showMethod]({
  281. duration: options.showDuration,
  282. easing: options.showEasing,
  283. complete: options.onShown
  284. });
  285. if (options.timeOut > 0) {
  286. intervalId = setTimeout(hideToast, options.timeOut);
  287. progressBar.maxHideTime = parseFloat(options.timeOut);
  288. progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
  289. if (options.progressBar) {
  290. progressBar.intervalId = setInterval(updateProgress, 10);
  291. }
  292. }
  293. }
  294. function setIcon() {
  295. if (map.iconClass) {
  296. $toastElement.addClass(options.toastClass).addClass(iconClass);
  297. }
  298. }
  299. function setSequence() {
  300. if (options.newestOnTop) {
  301. $container.prepend($toastElement);
  302. } else {
  303. $container.append($toastElement);
  304. }
  305. }
  306. function setTitle() {
  307. if (map.title) {
  308. var suffix = map.title;
  309. if (options.escapeHtml) {
  310. suffix = escapeHtml(map.title);
  311. }
  312. $titleElement.append(suffix).addClass(options.titleClass);
  313. $toastElement.append($titleElement);
  314. }
  315. }
  316. function setMessage() {
  317. if (map.message) {
  318. var suffix = map.message;
  319. if (options.escapeHtml) {
  320. suffix = escapeHtml(map.message);
  321. }
  322. $messageElement.append(suffix).addClass(options.messageClass);
  323. $toastElement.append($messageElement);
  324. }
  325. }
  326. function setCloseButton() {
  327. if (options.closeButton) {
  328. $closeElement.addClass(options.closeClass).attr('role', 'button');
  329. $toastElement.prepend($closeElement);
  330. }
  331. }
  332. function setProgressBar() {
  333. if (options.progressBar) {
  334. $progressElement.addClass(options.progressClass);
  335. $toastElement.prepend($progressElement);
  336. }
  337. }
  338. function setRTL() {
  339. if (options.rtl) {
  340. $toastElement.addClass('rtl');
  341. }
  342. }
  343. function shouldExit(options, map) {
  344. if (options.preventDuplicates) {
  345. if (map.message === previousToast) {
  346. return true;
  347. } else {
  348. previousToast = map.message;
  349. }
  350. }
  351. return false;
  352. }
  353. function hideToast(override) {
  354. var method = override && options.closeMethod !== false ? options.closeMethod : options.hideMethod;
  355. var duration = override && options.closeDuration !== false ?
  356. options.closeDuration : options.hideDuration;
  357. var easing = override && options.closeEasing !== false ? options.closeEasing : options.hideEasing;
  358. if ($(':focus', $toastElement).length && !override) {
  359. return;
  360. }
  361. clearTimeout(progressBar.intervalId);
  362. return $toastElement[method]({
  363. duration: duration,
  364. easing: easing,
  365. complete: function() {
  366. removeToast($toastElement);
  367. clearTimeout(intervalId);
  368. if (options.onHidden && response.state !== 'hidden') {
  369. options.onHidden();
  370. }
  371. response.state = 'hidden';
  372. response.endTime = new Date();
  373. publish(response);
  374. }
  375. });
  376. }
  377. function delayedHideToast() {
  378. if (options.timeOut > 0 || options.extendedTimeOut > 0) {
  379. intervalId = setTimeout(hideToast, options.extendedTimeOut);
  380. progressBar.maxHideTime = parseFloat(options.extendedTimeOut);
  381. progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
  382. }
  383. }
  384. function stickAround() {
  385. clearTimeout(intervalId);
  386. progressBar.hideEta = 0;
  387. $toastElement.stop(true, true)[options.showMethod]({
  388. duration: options.showDuration,
  389. easing: options.showEasing
  390. });
  391. }
  392. function updateProgress() {
  393. var percentage = ((progressBar.hideEta - (new Date().getTime())) / progressBar.maxHideTime) * 100;
  394. $progressElement.width(percentage + '%');
  395. }
  396. }
  397. function getOptions() {
  398. return $.extend({}, getDefaults(), toastr.options);
  399. }
  400. function removeToast($toastElement) {
  401. if (!$container) {
  402. $container = getContainer();
  403. }
  404. if ($toastElement.is(':visible')) {
  405. return;
  406. }
  407. $toastElement.remove();
  408. $toastElement = null;
  409. if ($container.children().length === 0) {
  410. $container.remove();
  411. previousToast = undefined;
  412. }
  413. }
  414. })();
  415. });
  416. }(typeof define === 'function' && define.amd ? define : function(deps, factory) {
  417. if (typeof module !== 'undefined' && module.exports) { //Node
  418. module.exports = factory(require('jquery'));
  419. } else if (window.layui && layui.define) {
  420. layui.define('jquery', function(exports) { //layui加载
  421. exports('toastr', factory(layui.jquery));
  422. exports('notice', factory(layui.jquery));
  423. });
  424. } else {
  425. window.toastr = factory(window.jQuery);
  426. }
  427. }));