sidebar.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  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. Object.defineProperty(exports, "__esModule", { value: true });
  12. var core_1 = require("@angular/core");
  13. var animations_1 = require("@angular/animations");
  14. var common_1 = require("@angular/common");
  15. var domhandler_1 = require("../dom/domhandler");
  16. var Sidebar = /** @class */ (function () {
  17. function Sidebar(el, renderer) {
  18. this.el = el;
  19. this.renderer = renderer;
  20. this.position = 'left';
  21. this.blockScroll = false;
  22. this.autoZIndex = true;
  23. this.baseZIndex = 0;
  24. this.modal = true;
  25. this.dismissible = true;
  26. this.showCloseIcon = true;
  27. this.closeOnEscape = true;
  28. this.onShow = new core_1.EventEmitter();
  29. this.onHide = new core_1.EventEmitter();
  30. this.visibleChange = new core_1.EventEmitter();
  31. }
  32. Sidebar.prototype.ngAfterViewInit = function () {
  33. this.initialized = true;
  34. if (this.appendTo) {
  35. if (this.appendTo === 'body')
  36. document.body.appendChild(this.containerViewChild.nativeElement);
  37. else
  38. domhandler_1.DomHandler.appendChild(this.containerViewChild.nativeElement, this.appendTo);
  39. }
  40. if (this.visible) {
  41. this.show();
  42. }
  43. };
  44. Object.defineProperty(Sidebar.prototype, "visible", {
  45. get: function () {
  46. return this._visible;
  47. },
  48. set: function (val) {
  49. this._visible = val;
  50. if (this.initialized && this.containerViewChild && this.containerViewChild.nativeElement) {
  51. if (this._visible)
  52. this.show();
  53. else {
  54. if (this.preventVisibleChangePropagation)
  55. this.preventVisibleChangePropagation = false;
  56. else
  57. this.hide();
  58. }
  59. }
  60. },
  61. enumerable: true,
  62. configurable: true
  63. });
  64. Sidebar.prototype.ngAfterViewChecked = function () {
  65. if (this.executePostDisplayActions) {
  66. this.onShow.emit({});
  67. this.executePostDisplayActions = false;
  68. }
  69. };
  70. Sidebar.prototype.show = function () {
  71. this.executePostDisplayActions = true;
  72. if (this.autoZIndex) {
  73. this.containerViewChild.nativeElement.style.zIndex = String(this.baseZIndex + (++domhandler_1.DomHandler.zindex));
  74. }
  75. if (this.modal) {
  76. this.enableModality();
  77. }
  78. };
  79. Sidebar.prototype.hide = function () {
  80. this.onHide.emit({});
  81. if (this.modal) {
  82. this.disableModality();
  83. }
  84. };
  85. Sidebar.prototype.close = function (event) {
  86. this.preventVisibleChangePropagation = true;
  87. this.hide();
  88. this.visibleChange.emit(false);
  89. event.preventDefault();
  90. };
  91. Sidebar.prototype.enableModality = function () {
  92. var _this = this;
  93. if (!this.mask) {
  94. this.mask = document.createElement('div');
  95. this.mask.style.zIndex = String(parseInt(this.containerViewChild.nativeElement.style.zIndex) - 1);
  96. domhandler_1.DomHandler.addMultipleClasses(this.mask, 'ui-widget-overlay ui-sidebar-mask');
  97. if (this.dismissible) {
  98. this.maskClickListener = this.renderer.listen(this.mask, 'click', function (event) {
  99. if (_this.dismissible) {
  100. _this.close(event);
  101. }
  102. });
  103. }
  104. document.body.appendChild(this.mask);
  105. if (this.blockScroll) {
  106. domhandler_1.DomHandler.addClass(document.body, 'ui-overflow-hidden');
  107. }
  108. }
  109. };
  110. Sidebar.prototype.disableModality = function () {
  111. if (this.mask) {
  112. this.unbindMaskClickListener();
  113. document.body.removeChild(this.mask);
  114. if (this.blockScroll) {
  115. domhandler_1.DomHandler.removeClass(document.body, 'ui-overflow-hidden');
  116. }
  117. this.mask = null;
  118. }
  119. };
  120. Sidebar.prototype.onAnimationStart = function (event) {
  121. switch (event.toState) {
  122. case 'visible':
  123. if (this.closeOnEscape) {
  124. this.bindDocumentEscapeListener();
  125. }
  126. break;
  127. case 'hidden':
  128. this.unbindGlobalListeners();
  129. break;
  130. }
  131. };
  132. Sidebar.prototype.bindDocumentEscapeListener = function () {
  133. var _this = this;
  134. this.documentEscapeListener = this.renderer.listen('document', 'keydown', function (event) {
  135. if (event.which == 27) {
  136. if (parseInt(_this.containerViewChild.nativeElement.style.zIndex) === (domhandler_1.DomHandler.zindex + _this.baseZIndex)) {
  137. _this.close(event);
  138. }
  139. }
  140. });
  141. };
  142. Sidebar.prototype.unbindDocumentEscapeListener = function () {
  143. if (this.documentEscapeListener) {
  144. this.documentEscapeListener();
  145. this.documentEscapeListener = null;
  146. }
  147. };
  148. Sidebar.prototype.unbindMaskClickListener = function () {
  149. if (this.maskClickListener) {
  150. this.maskClickListener();
  151. this.maskClickListener = null;
  152. }
  153. };
  154. Sidebar.prototype.unbindGlobalListeners = function () {
  155. this.unbindMaskClickListener();
  156. this.unbindDocumentEscapeListener();
  157. };
  158. Sidebar.prototype.ngOnDestroy = function () {
  159. this.initialized = false;
  160. if (this.visible) {
  161. this.hide();
  162. }
  163. if (this.appendTo) {
  164. this.el.nativeElement.appendChild(this.containerViewChild.nativeElement);
  165. }
  166. this.unbindGlobalListeners();
  167. };
  168. __decorate([
  169. core_1.Input(),
  170. __metadata("design:type", String)
  171. ], Sidebar.prototype, "position", void 0);
  172. __decorate([
  173. core_1.Input(),
  174. __metadata("design:type", Boolean)
  175. ], Sidebar.prototype, "fullScreen", void 0);
  176. __decorate([
  177. core_1.Input(),
  178. __metadata("design:type", String)
  179. ], Sidebar.prototype, "appendTo", void 0);
  180. __decorate([
  181. core_1.Input(),
  182. __metadata("design:type", Boolean)
  183. ], Sidebar.prototype, "blockScroll", void 0);
  184. __decorate([
  185. core_1.Input(),
  186. __metadata("design:type", Object)
  187. ], Sidebar.prototype, "style", void 0);
  188. __decorate([
  189. core_1.Input(),
  190. __metadata("design:type", String)
  191. ], Sidebar.prototype, "styleClass", void 0);
  192. __decorate([
  193. core_1.Input(),
  194. __metadata("design:type", Boolean)
  195. ], Sidebar.prototype, "autoZIndex", void 0);
  196. __decorate([
  197. core_1.Input(),
  198. __metadata("design:type", Number)
  199. ], Sidebar.prototype, "baseZIndex", void 0);
  200. __decorate([
  201. core_1.Input(),
  202. __metadata("design:type", Boolean)
  203. ], Sidebar.prototype, "modal", void 0);
  204. __decorate([
  205. core_1.Input(),
  206. __metadata("design:type", Boolean)
  207. ], Sidebar.prototype, "dismissible", void 0);
  208. __decorate([
  209. core_1.Input(),
  210. __metadata("design:type", Boolean)
  211. ], Sidebar.prototype, "showCloseIcon", void 0);
  212. __decorate([
  213. core_1.Input(),
  214. __metadata("design:type", Boolean)
  215. ], Sidebar.prototype, "closeOnEscape", void 0);
  216. __decorate([
  217. core_1.ViewChild('container', { static: false }),
  218. __metadata("design:type", core_1.ElementRef)
  219. ], Sidebar.prototype, "containerViewChild", void 0);
  220. __decorate([
  221. core_1.Output(),
  222. __metadata("design:type", core_1.EventEmitter)
  223. ], Sidebar.prototype, "onShow", void 0);
  224. __decorate([
  225. core_1.Output(),
  226. __metadata("design:type", core_1.EventEmitter)
  227. ], Sidebar.prototype, "onHide", void 0);
  228. __decorate([
  229. core_1.Output(),
  230. __metadata("design:type", core_1.EventEmitter)
  231. ], Sidebar.prototype, "visibleChange", void 0);
  232. __decorate([
  233. core_1.Input(),
  234. __metadata("design:type", Boolean),
  235. __metadata("design:paramtypes", [Boolean])
  236. ], Sidebar.prototype, "visible", null);
  237. Sidebar = __decorate([
  238. core_1.Component({
  239. selector: 'p-sidebar',
  240. template: "\n <div #container [ngClass]=\"{'ui-sidebar ui-widget ui-widget-content ui-shadow':true, 'ui-sidebar-active': visible, \n 'ui-sidebar-left': (position === 'left'), 'ui-sidebar-right': (position === 'right'),\n 'ui-sidebar-top': (position === 'top'), 'ui-sidebar-bottom': (position === 'bottom'), \n 'ui-sidebar-full': fullScreen}\"\n [@panelState]=\"visible ? 'visible' : 'hidden'\" (@panelState.start)=\"onAnimationStart($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <a [ngClass]=\"{'ui-sidebar-close ui-corner-all':true}\" *ngIf=\"showCloseIcon\" tabindex=\"0\" role=\"button\" (click)=\"close($event)\" (keydown.enter)=\"close($event)\">\n <span class=\"pi pi-times\"></span>\n </a>\n <ng-content></ng-content>\n </div>\n ",
  241. animations: [
  242. animations_1.trigger('panelState', [
  243. animations_1.state('hidden', animations_1.style({
  244. opacity: 0
  245. })),
  246. animations_1.state('visible', animations_1.style({
  247. opacity: 1
  248. })),
  249. animations_1.transition('visible => hidden', animations_1.animate('300ms ease-in')),
  250. animations_1.transition('hidden => visible', animations_1.animate('300ms ease-out'))
  251. ])
  252. ]
  253. }),
  254. __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2])
  255. ], Sidebar);
  256. return Sidebar;
  257. }());
  258. exports.Sidebar = Sidebar;
  259. var SidebarModule = /** @class */ (function () {
  260. function SidebarModule() {
  261. }
  262. SidebarModule = __decorate([
  263. core_1.NgModule({
  264. imports: [common_1.CommonModule],
  265. exports: [Sidebar],
  266. declarations: [Sidebar]
  267. })
  268. ], SidebarModule);
  269. return SidebarModule;
  270. }());
  271. exports.SidebarModule = SidebarModule;
  272. //# sourceMappingURL=sidebar.js.map