toaster.js 27 KB

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