toaster.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  1. /* global angular */
  2. (function (window, document) {
  3. 'use strict';
  4. /*
  5. * AngularJS Toaster
  6. * Version: 0.4.18
  7. *
  8. * Copyright 2013-2015 Jiri Kavulak.
  9. * All Rights Reserved.
  10. * Use, reproduction, distribution, and modification of this code is subject to the terms and
  11. * conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
  12. *
  13. * Author: Jiri Kavulak
  14. * Related to project of John Papa, Hans Fjällemark and Nguyễn Thiện Hùng (thienhung1989)
  15. */
  16. angular.module('toaster', []).constant(
  17. 'toasterConfig', {
  18. 'limit': 0, // limits max number of toasts
  19. 'tap-to-dismiss': true,
  20. /* Options:
  21. - Boolean false/true
  22. 'close-button': true
  23. - object if not a boolean that allows you to
  24. override showing the close button for each
  25. icon-class value
  26. 'close-button': { 'toast-error': true, 'toast-info': false }
  27. */
  28. 'close-button': false,
  29. 'close-html': '<button class="toast-close-button" type="button">&times;</button>',
  30. 'newest-on-top': true,
  31. //'fade-in': 1000, // done in css
  32. //'on-fade-in': undefined, // not implemented
  33. //'fade-out': 1000, // done in css
  34. //'on-fade-out': undefined, // not implemented
  35. //'extended-time-out': 1000, // not implemented
  36. 'time-out': 5000, // Set timeOut and extendedTimeout to 0 to make it sticky
  37. 'icon-classes': {
  38. error: 'toast-error',
  39. info: 'toast-info',
  40. wait: 'toast-wait',
  41. success: 'toast-success',
  42. warning: 'toast-warning'
  43. },
  44. 'body-output-type': '', // Options: '', 'trustedHtml', 'template', 'templateWithData', 'directive'
  45. 'body-template': 'toasterBodyTmpl.html',
  46. 'icon-class': 'toast-info',
  47. 'position-class': 'toast-top-right', // Options (see CSS):
  48. // 'toast-top-full-width', 'toast-bottom-full-width', 'toast-center',
  49. // 'toast-top-left', 'toast-top-center', 'toast-top-right',
  50. // 'toast-bottom-left', 'toast-bottom-center', 'toast-bottom-right',
  51. 'title-class': 'toast-title',
  52. 'message-class': 'toast-message',
  53. 'prevent-duplicates': false,
  54. 'mouseover-timer-stop': true // stop timeout on mouseover and restart timer on mouseout
  55. }
  56. ).service(
  57. 'toaster', [
  58. '$rootScope', 'toasterConfig', function ($rootScope, toasterConfig) {
  59. this.pop = function (type, title, body, timeout, bodyOutputType, clickHandler, toasterId, showCloseButton, toastId, onHideCallback) {
  60. if (angular.isObject(type)) {
  61. var params = type; // Enable named parameters as pop argument
  62. this.toast = {
  63. type: params.type,
  64. title: params.title,
  65. body: params.body,
  66. timeout: params.timeout,
  67. bodyOutputType: params.bodyOutputType,
  68. clickHandler: params.clickHandler,
  69. showCloseButton: params.showCloseButton,
  70. closeHtml: params.closeHtml,
  71. uid: params.toastId,
  72. onHideCallback: params.onHideCallback,
  73. directiveData: params.directiveData
  74. };
  75. toastId = params.toastId;
  76. toasterId = params.toasterId;
  77. } else {
  78. this.toast = {
  79. type: type,
  80. title: title,
  81. body: body,
  82. timeout: timeout,
  83. bodyOutputType: bodyOutputType,
  84. clickHandler: clickHandler,
  85. showCloseButton: showCloseButton,
  86. uid: toastId,
  87. onHideCallback: onHideCallback
  88. };
  89. }
  90. $rootScope.$emit('toaster-newToast', toasterId, toastId);
  91. };
  92. this.clear = function (toasterId, toastId) {
  93. $rootScope.$emit('toaster-clearToasts', toasterId, toastId);
  94. };
  95. // Create one method per icon class, to allow to call toaster.info() and similar
  96. for (var type in toasterConfig['icon-classes']) {
  97. this[type] = createTypeMethod(type);
  98. }
  99. function createTypeMethod(toasterType) {
  100. return function (title, body, timeout, bodyOutputType, clickHandler, toasterId, showCloseButton, toastId, onHideCallback) {
  101. if (angular.isString(title)) {
  102. this.pop(
  103. toasterType,
  104. title,
  105. body,
  106. timeout,
  107. bodyOutputType,
  108. clickHandler,
  109. toasterId,
  110. showCloseButton,
  111. toastId,
  112. onHideCallback);
  113. } else { // 'title' is actually an object with options
  114. this.pop(angular.extend(title, { type: toasterType }));
  115. }
  116. };
  117. }
  118. }]
  119. ).factory(
  120. 'toasterEventRegistry', [
  121. '$rootScope', function ($rootScope) {
  122. var deregisterNewToast = null, deregisterClearToasts = null, newToastEventSubscribers = [], clearToastsEventSubscribers = [], toasterFactory;
  123. toasterFactory = {
  124. setup: function () {
  125. if (!deregisterNewToast) {
  126. deregisterNewToast = $rootScope.$on(
  127. 'toaster-newToast', function (event, toasterId, toastId) {
  128. for (var i = 0, len = newToastEventSubscribers.length; i < len; i++) {
  129. newToastEventSubscribers[i](event, toasterId, toastId);
  130. }
  131. });
  132. }
  133. if (!deregisterClearToasts) {
  134. deregisterClearToasts = $rootScope.$on(
  135. 'toaster-clearToasts', function (event, toasterId, toastId) {
  136. for (var i = 0, len = clearToastsEventSubscribers.length; i < len; i++) {
  137. clearToastsEventSubscribers[i](event, toasterId, toastId);
  138. }
  139. });
  140. }
  141. },
  142. subscribeToNewToastEvent: function (onNewToast) {
  143. newToastEventSubscribers.push(onNewToast);
  144. },
  145. subscribeToClearToastsEvent: function (onClearToasts) {
  146. clearToastsEventSubscribers.push(onClearToasts);
  147. },
  148. unsubscribeToNewToastEvent: function (onNewToast) {
  149. var index = newToastEventSubscribers.indexOf(onNewToast);
  150. if (index >= 0) {
  151. newToastEventSubscribers.splice(index, 1);
  152. }
  153. if (newToastEventSubscribers.length === 0) {
  154. deregisterNewToast();
  155. deregisterNewToast = null;
  156. }
  157. },
  158. unsubscribeToClearToastsEvent: function (onClearToasts) {
  159. var index = clearToastsEventSubscribers.indexOf(onClearToasts);
  160. if (index >= 0) {
  161. clearToastsEventSubscribers.splice(index, 1);
  162. }
  163. if (clearToastsEventSubscribers.length === 0) {
  164. deregisterClearToasts();
  165. deregisterClearToasts = null;
  166. }
  167. }
  168. };
  169. return {
  170. setup: toasterFactory.setup,
  171. subscribeToNewToastEvent: toasterFactory.subscribeToNewToastEvent,
  172. subscribeToClearToastsEvent: toasterFactory.subscribeToClearToastsEvent,
  173. unsubscribeToNewToastEvent: toasterFactory.unsubscribeToNewToastEvent,
  174. unsubscribeToClearToastsEvent: toasterFactory.unsubscribeToClearToastsEvent
  175. };
  176. }]
  177. )
  178. .directive('directiveTemplate', ['$compile', '$injector', function($compile, $injector) {
  179. return {
  180. restrict: 'A',
  181. scope: {
  182. directiveName: '@directiveName',
  183. directiveData: '@directiveData'
  184. },
  185. replace: true,
  186. link: function (scope, elm, attrs) {
  187. scope.$watch('directiveName', function (directiveName) {
  188. if (angular.isUndefined(directiveName) || directiveName.length <= 0)
  189. throw new Error('A valid directive name must be provided via the toast body argument when using bodyOutputType: directive');
  190. var directiveExists = $injector.has(attrs.$normalize(directiveName) + 'Directive');
  191. if (!directiveExists)
  192. throw new Error(directiveName + ' could not be found.');
  193. if (scope.directiveData)
  194. scope.directiveData = angular.fromJson(scope.directiveData);
  195. var template = $compile('<div ' + directiveName + '></div>')(scope);
  196. elm.append(template);
  197. });
  198. }
  199. }
  200. }])
  201. .directive(
  202. 'toasterContainer', [
  203. '$parse', '$rootScope', '$interval', '$sce', 'toasterConfig', 'toaster', 'toasterEventRegistry',
  204. function ($parse, $rootScope, $interval, $sce, toasterConfig, toaster, toasterEventRegistry) {
  205. return {
  206. replace: true,
  207. restrict: 'EA',
  208. scope: true, // creates an internal scope for this directive (one per directive instance)
  209. link: function (scope, elm, attrs) {
  210. var id = 0, mergedConfig;
  211. // Merges configuration set in directive with default one
  212. mergedConfig = angular.extend({}, toasterConfig, scope.$eval(attrs.toasterOptions));
  213. scope.config = {
  214. toasterId: mergedConfig['toaster-id'],
  215. position: mergedConfig['position-class'],
  216. title: mergedConfig['title-class'],
  217. message: mergedConfig['message-class'],
  218. tap: mergedConfig['tap-to-dismiss'],
  219. closeButton: mergedConfig['close-button'],
  220. closeHtml: mergedConfig['close-html'],
  221. animation: mergedConfig['animation-class'],
  222. mouseoverTimer: mergedConfig['mouseover-timer-stop']
  223. };
  224. scope.$on(
  225. "$destroy", function () {
  226. toasterEventRegistry.unsubscribeToNewToastEvent(scope._onNewToast);
  227. toasterEventRegistry.unsubscribeToClearToastsEvent(scope._onClearToasts);
  228. }
  229. );
  230. function setTimeout(toast, time) {
  231. toast.timeoutPromise = $interval(
  232. function () {
  233. scope.removeToast(toast.id);
  234. }, time, 1
  235. );
  236. }
  237. scope.configureTimer = function (toast) {
  238. var timeout = angular.isNumber(toast.timeout) ? toast.timeout : mergedConfig['time-out'];
  239. if (typeof timeout === "object") timeout = timeout[toast.type];
  240. if (timeout > 0) {
  241. setTimeout(toast, timeout);
  242. }
  243. };
  244. function addToast(toast, toastId) {
  245. toast.type = mergedConfig['icon-classes'][toast.type];
  246. if (!toast.type) {
  247. toast.type = mergedConfig['icon-class'];
  248. }
  249. if (mergedConfig['prevent-duplicates'] === true) {
  250. // Prevent adding duplicate toasts if it's set
  251. if (isUndefinedOrNull(toastId)) {
  252. if (scope.toasters.length > 0 && scope.toasters[scope.toasters.length - 1].body === toast.body) {
  253. return;
  254. }
  255. } else {
  256. var i, len;
  257. for (i = 0, len = scope.toasters.length; i < len; i++) {
  258. if (scope.toasters[i].uid === toastId) {
  259. removeToast(i);
  260. // update loop
  261. i--;
  262. len = scope.toasters.length;
  263. }
  264. }
  265. }
  266. }
  267. toast.id = ++id;
  268. // Sure uid defined
  269. if (!isUndefinedOrNull(toastId)) {
  270. toast.uid = toastId;
  271. }
  272. // set the showCloseButton property on the toast so that
  273. // each template can bind directly to the property to show/hide
  274. // the close button
  275. var closeButton = mergedConfig['close-button'];
  276. // if toast.showCloseButton is a boolean value,
  277. // it was specifically overriden in the pop arguments
  278. if (typeof toast.showCloseButton === "boolean") {
  279. } else if (typeof closeButton === "boolean") {
  280. toast.showCloseButton = closeButton;
  281. } else if (typeof closeButton === "object") {
  282. var closeButtonForType = closeButton[toast.type];
  283. if (typeof closeButtonForType !== "undefined" && closeButtonForType !== null) {
  284. toast.showCloseButton = closeButtonForType;
  285. }
  286. } else {
  287. // if an option was not set, default to false.
  288. toast.showCloseButton = false;
  289. }
  290. if (toast.showCloseButton) {
  291. toast.closeHtml = $sce.trustAsHtml(toast.closeHtml || scope.config.closeHtml);
  292. }
  293. // Set the toast.bodyOutputType to the default if it isn't set
  294. toast.bodyOutputType = toast.bodyOutputType || mergedConfig['body-output-type'];
  295. switch (toast.bodyOutputType) {
  296. case 'trustedHtml':
  297. toast.html = $sce.trustAsHtml(toast.body);
  298. break;
  299. case 'template':
  300. toast.bodyTemplate = toast.body || mergedConfig['body-template'];
  301. break;
  302. case 'templateWithData':
  303. var fcGet = $parse(toast.body || mergedConfig['body-template']);
  304. var templateWithData = fcGet(scope);
  305. toast.bodyTemplate = templateWithData.template;
  306. toast.data = templateWithData.data;
  307. break;
  308. case 'directive':
  309. toast.html = toast.body;
  310. break;
  311. }
  312. scope.configureTimer(toast);
  313. if (mergedConfig['newest-on-top'] === true) {
  314. scope.toasters.unshift(toast);
  315. if (mergedConfig['limit'] > 0 && scope.toasters.length > mergedConfig['limit']) {
  316. scope.toasters.pop();
  317. }
  318. } else {
  319. scope.toasters.push(toast);
  320. if (mergedConfig['limit'] > 0 && scope.toasters.length > mergedConfig['limit']) {
  321. scope.toasters.shift();
  322. }
  323. }
  324. }
  325. scope.removeToast = function (id) {
  326. var i, len;
  327. for (i = 0, len = scope.toasters.length; i < len; i++) {
  328. if (scope.toasters[i].id === id) {
  329. removeToast(i);
  330. break;
  331. }
  332. }
  333. };
  334. function removeToast(toastIndex) {
  335. var toast = scope.toasters[toastIndex];
  336. if (toast) {
  337. if (toast.timeoutPromise) {
  338. $interval.cancel(toast.timeoutPromise);
  339. }
  340. scope.toasters.splice(toastIndex, 1);
  341. if (angular.isFunction(toast.onHideCallback)) {
  342. toast.onHideCallback();
  343. }
  344. }
  345. }
  346. function removeAllToasts(toastId) {
  347. for (var i = scope.toasters.length - 1; i >= 0; i--) {
  348. if (isUndefinedOrNull(toastId)) {
  349. removeToast(i);
  350. } else {
  351. if (scope.toasters[i].uid == toastId) {
  352. removeToast(i);
  353. }
  354. }
  355. }
  356. }
  357. scope.toasters = [];
  358. function isUndefinedOrNull(val) {
  359. return angular.isUndefined(val) || val === null;
  360. }
  361. scope._onNewToast = function (event, toasterId, toastId) {
  362. // Compatibility: if toaster has no toasterId defined, and if call to display
  363. // hasn't either, then the request is for us
  364. if ((isUndefinedOrNull(scope.config.toasterId) && isUndefinedOrNull(toasterId)) || (!isUndefinedOrNull(scope.config.toasterId) && !isUndefinedOrNull(toasterId) && scope.config.toasterId == toasterId)) {
  365. addToast(toaster.toast, toastId);
  366. }
  367. };
  368. scope._onClearToasts = function (event, toasterId, toastId) {
  369. // Compatibility: if toaster has no toasterId defined, and if call to display
  370. // hasn't either, then the request is for us
  371. if (toasterId == '*' || (isUndefinedOrNull(scope.config.toasterId) && isUndefinedOrNull(toasterId)) || (!isUndefinedOrNull(scope.config.toasterId) && !isUndefinedOrNull(toasterId) && scope.config.toasterId == toasterId)) {
  372. removeAllToasts(toastId);
  373. }
  374. };
  375. toasterEventRegistry.setup();
  376. toasterEventRegistry.subscribeToNewToastEvent(scope._onNewToast);
  377. toasterEventRegistry.subscribeToClearToastsEvent(scope._onClearToasts);
  378. },
  379. controller: [
  380. '$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
  381. // Called on mouseover
  382. $scope.stopTimer = function (toast) {
  383. if ($scope.config.mouseoverTimer === true) {
  384. if (toast.timeoutPromise) {
  385. $interval.cancel(toast.timeoutPromise);
  386. toast.timeoutPromise = null;
  387. }
  388. }
  389. };
  390. // Called on mouseout
  391. $scope.restartTimer = function (toast) {
  392. if ($scope.config.mouseoverTimer === true) {
  393. if (!toast.timeoutPromise) {
  394. $scope.configureTimer(toast);
  395. }
  396. } else if (toast.timeoutPromise === null) {
  397. $scope.removeToast(toast.id);
  398. }
  399. };
  400. $scope.click = function (toast, isCloseButton) {
  401. if ($scope.config.tap === true || (toast.showCloseButton === true && isCloseButton === true)) {
  402. var removeToast = true;
  403. if (toast.clickHandler) {
  404. if (angular.isFunction(toast.clickHandler)) {
  405. removeToast = toast.clickHandler(toast, isCloseButton);
  406. } else if (angular.isFunction($scope.$parent.$eval(toast.clickHandler))) {
  407. removeToast = $scope.$parent.$eval(toast.clickHandler)(toast, isCloseButton);
  408. } else {
  409. console.log("TOAST-NOTE: Your click handler is not inside a parent scope of toaster-container.");
  410. }
  411. }
  412. if (removeToast) {
  413. $scope.removeToast(toast.id);
  414. }
  415. }
  416. };
  417. }],
  418. template:
  419. '<div id="toast-container" ng-class="[config.position, config.animation]">' +
  420. '<div ng-repeat="toaster in toasters" class="toast" ng-class="toaster.type" ng-click="click(toaster)" ng-mouseover="stopTimer(toaster)" ng-mouseout="restartTimer(toaster)">' +
  421. '<div ng-if="toaster.showCloseButton" ng-click="click(toaster, true)" ng-bind-html="toaster.closeHtml"></div>' +
  422. '<div ng-class="config.title">{{toaster.title}}</div>' +
  423. '<div ng-class="config.message" ng-switch on="toaster.bodyOutputType">' +
  424. '<div ng-switch-when="trustedHtml" ng-bind-html="toaster.html"></div>' +
  425. '<div ng-switch-when="template"><div ng-include="toaster.bodyTemplate"></div></div>' +
  426. '<div ng-switch-when="templateWithData"><div ng-include="toaster.bodyTemplate"></div></div>' +
  427. '<div ng-switch-when="directive"><div directive-template directive-name="{{toaster.html}}" directive-data="{{toaster.directiveData}}"></div></div>' +
  428. '<div ng-switch-default >{{toaster.body}}</div>' +
  429. '</div>' +
  430. '</div>' +
  431. '</div>'
  432. };
  433. }]
  434. );
  435. })(window, document);