growl.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. "use strict";
  2. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  3. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  4. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  5. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  6. return c > 3 && r && Object.defineProperty(target, key, r), r;
  7. };
  8. var __metadata = (this && this.__metadata) || function (k, v) {
  9. if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
  10. };
  11. var __param = (this && this.__param) || function (paramIndex, decorator) {
  12. return function (target, key) { decorator(target, key, paramIndex); }
  13. };
  14. Object.defineProperty(exports, "__esModule", { value: true });
  15. var core_1 = require("@angular/core");
  16. var common_1 = require("@angular/common");
  17. var domhandler_1 = require("../dom/domhandler");
  18. var messageservice_1 = require("../common/messageservice");
  19. var Growl = /** @class */ (function () {
  20. function Growl(el, differs, messageService, zone) {
  21. var _this = this;
  22. this.el = el;
  23. this.differs = differs;
  24. this.messageService = messageService;
  25. this.zone = zone;
  26. this.life = 3000;
  27. this.immutable = true;
  28. this.autoZIndex = true;
  29. this.baseZIndex = 0;
  30. this.onClick = new core_1.EventEmitter();
  31. this.onHover = new core_1.EventEmitter();
  32. this.onClose = new core_1.EventEmitter();
  33. this.valueChange = new core_1.EventEmitter();
  34. this.differ = differs.find([]).create(null);
  35. if (messageService) {
  36. this.subscription = messageService.messageObserver.subscribe(function (messages) {
  37. if (messages) {
  38. if (messages instanceof Array) {
  39. var filteredMessages = messages.filter(function (m) { return _this.key === m.key; });
  40. _this.value = _this.value ? _this.value.concat(filteredMessages) : filteredMessages.slice();
  41. }
  42. else if (_this.key === messages.key) {
  43. _this.value = _this.value ? _this.value.concat([messages]) : [messages];
  44. }
  45. }
  46. else {
  47. _this.value = null;
  48. }
  49. });
  50. }
  51. }
  52. Growl.prototype.ngAfterViewInit = function () {
  53. if (!this.sticky) {
  54. this.initTimeout();
  55. }
  56. };
  57. Object.defineProperty(Growl.prototype, "value", {
  58. get: function () {
  59. return this._value;
  60. },
  61. set: function (val) {
  62. this._value = val;
  63. if (this.containerViewChild && this.containerViewChild.nativeElement && this.immutable) {
  64. this.handleValueChange();
  65. }
  66. },
  67. enumerable: true,
  68. configurable: true
  69. });
  70. Object.defineProperty(Growl.prototype, "sticky", {
  71. get: function () {
  72. return this._sticky;
  73. },
  74. set: function (value) {
  75. if (value && this.timeout) {
  76. clearTimeout(this.timeout);
  77. }
  78. this._sticky = value;
  79. },
  80. enumerable: true,
  81. configurable: true
  82. });
  83. Growl.prototype.ngDoCheck = function () {
  84. if (!this.immutable && this.containerViewChild && this.containerViewChild.nativeElement) {
  85. var changes = this.differ.diff(this.value);
  86. if (changes) {
  87. this.handleValueChange();
  88. }
  89. }
  90. };
  91. Growl.prototype.handleValueChange = function () {
  92. if (this.preventRerender) {
  93. this.preventRerender = false;
  94. return;
  95. }
  96. if (this.autoZIndex) {
  97. this.containerViewChild.nativeElement.style.zIndex = String(this.baseZIndex + (++domhandler_1.DomHandler.zindex));
  98. }
  99. domhandler_1.DomHandler.fadeIn(this.containerViewChild.nativeElement, 250);
  100. if (!this.sticky) {
  101. this.initTimeout();
  102. }
  103. };
  104. Growl.prototype.initTimeout = function () {
  105. var _this = this;
  106. if (this.timeout) {
  107. clearTimeout(this.timeout);
  108. }
  109. this.zone.runOutsideAngular(function () {
  110. _this.timeout = setTimeout(function () {
  111. _this.zone.run(function () {
  112. _this.removeAll();
  113. });
  114. }, _this.life);
  115. });
  116. };
  117. Growl.prototype.remove = function (index, msgel) {
  118. var _this = this;
  119. this.closeIconClick = true;
  120. domhandler_1.DomHandler.fadeOut(msgel, 250);
  121. setTimeout(function () {
  122. _this.preventRerender = true;
  123. _this.onClose.emit({ message: _this.value[index] });
  124. if (_this.immutable) {
  125. _this._value = _this.value.filter(function (val, i) { return i != index; });
  126. _this.valueChange.emit(_this._value);
  127. }
  128. else {
  129. _this._value.splice(index, 1);
  130. }
  131. }, 250);
  132. };
  133. Growl.prototype.removeAll = function () {
  134. var _this = this;
  135. if (this.value && this.value.length) {
  136. domhandler_1.DomHandler.fadeOut(this.containerViewChild.nativeElement, 250);
  137. setTimeout(function () {
  138. _this.value.forEach(function (msg, index) { return _this.onClose.emit({ message: _this.value[index] }); });
  139. if (_this.immutable) {
  140. _this.value = [];
  141. _this.valueChange.emit(_this.value);
  142. }
  143. else {
  144. _this.value.splice(0, _this.value.length);
  145. }
  146. }, 250);
  147. }
  148. };
  149. Growl.prototype.onMessageClick = function (i) {
  150. if (this.closeIconClick)
  151. this.closeIconClick = false;
  152. else
  153. this.onClick.emit({ message: this.value[i] });
  154. };
  155. Growl.prototype.onMessageHover = function (i) {
  156. this.onHover.emit({ message: this.value[i] });
  157. };
  158. Growl.prototype.ngOnDestroy = function () {
  159. if (!this.sticky) {
  160. clearTimeout(this.timeout);
  161. }
  162. if (this.subscription) {
  163. this.subscription.unsubscribe();
  164. }
  165. };
  166. __decorate([
  167. core_1.Input(),
  168. __metadata("design:type", Number)
  169. ], Growl.prototype, "life", void 0);
  170. __decorate([
  171. core_1.Input(),
  172. __metadata("design:type", Object)
  173. ], Growl.prototype, "style", void 0);
  174. __decorate([
  175. core_1.Input(),
  176. __metadata("design:type", String)
  177. ], Growl.prototype, "styleClass", void 0);
  178. __decorate([
  179. core_1.Input(),
  180. __metadata("design:type", Boolean)
  181. ], Growl.prototype, "immutable", void 0);
  182. __decorate([
  183. core_1.Input(),
  184. __metadata("design:type", Boolean)
  185. ], Growl.prototype, "autoZIndex", void 0);
  186. __decorate([
  187. core_1.Input(),
  188. __metadata("design:type", Number)
  189. ], Growl.prototype, "baseZIndex", void 0);
  190. __decorate([
  191. core_1.Input(),
  192. __metadata("design:type", String)
  193. ], Growl.prototype, "key", void 0);
  194. __decorate([
  195. core_1.Output(),
  196. __metadata("design:type", core_1.EventEmitter)
  197. ], Growl.prototype, "onClick", void 0);
  198. __decorate([
  199. core_1.Output(),
  200. __metadata("design:type", core_1.EventEmitter)
  201. ], Growl.prototype, "onHover", void 0);
  202. __decorate([
  203. core_1.Output(),
  204. __metadata("design:type", core_1.EventEmitter)
  205. ], Growl.prototype, "onClose", void 0);
  206. __decorate([
  207. core_1.Output(),
  208. __metadata("design:type", core_1.EventEmitter)
  209. ], Growl.prototype, "valueChange", void 0);
  210. __decorate([
  211. core_1.ViewChild('container', { static: false }),
  212. __metadata("design:type", core_1.ElementRef)
  213. ], Growl.prototype, "containerViewChild", void 0);
  214. __decorate([
  215. core_1.Input(),
  216. __metadata("design:type", Array),
  217. __metadata("design:paramtypes", [Array])
  218. ], Growl.prototype, "value", null);
  219. __decorate([
  220. core_1.Input(),
  221. __metadata("design:type", Boolean),
  222. __metadata("design:paramtypes", [Boolean])
  223. ], Growl.prototype, "sticky", null);
  224. Growl = __decorate([
  225. core_1.Component({
  226. selector: 'p-growl',
  227. template: "\n <div #container [ngClass]=\"'ui-growl ui-widget'\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div #msgel *ngFor=\"let msg of value;let i = index\" class=\"ui-growl-item-container ui-state-highlight ui-corner-all ui-shadow\" aria-live=\"polite\"\n [ngClass]=\"{'ui-growl-message-info':msg.severity == 'info','ui-growl-message-warn':msg.severity == 'warn',\n 'ui-growl-message-error':msg.severity == 'error','ui-growl-message-success':msg.severity == 'success'}\"\n (click)=\"onMessageClick(i)\" (mouseenter)=\"onMessageHover(i)\">\n <div class=\"ui-growl-item\">\n <div class=\"ui-growl-icon-close pi pi-times\" (click)=\"remove(i,msgel)\"></div>\n <span class=\"ui-growl-image pi\"\n [ngClass]=\"{'pi-info-circle':msg.severity == 'info','pi-exclamation-triangle':msg.severity == 'warn',\n 'pi-times':msg.severity == 'error','pi-check':msg.severity == 'success'}\"></span>\n <div class=\"ui-growl-message\">\n <span class=\"ui-growl-title\">{{msg.summary}}</span>\n <p [innerHTML]=\"msg.detail||''\"></p>\n </div>\n <div style=\"clear: both;\"></div>\n </div>\n </div>\n </div>\n "
  228. }),
  229. __param(2, core_1.Optional()),
  230. __metadata("design:paramtypes", [core_1.ElementRef, core_1.IterableDiffers, messageservice_1.MessageService, core_1.NgZone])
  231. ], Growl);
  232. return Growl;
  233. }());
  234. exports.Growl = Growl;
  235. var GrowlModule = /** @class */ (function () {
  236. function GrowlModule() {
  237. }
  238. GrowlModule = __decorate([
  239. core_1.NgModule({
  240. imports: [common_1.CommonModule],
  241. exports: [Growl],
  242. declarations: [Growl]
  243. })
  244. ], GrowlModule);
  245. return GrowlModule;
  246. }());
  247. exports.GrowlModule = GrowlModule;
  248. //# sourceMappingURL=growl.js.map