menu.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  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 animations_1 = require("@angular/animations");
  17. var common_1 = require("@angular/common");
  18. var domhandler_1 = require("../dom/domhandler");
  19. var router_1 = require("@angular/router");
  20. var MenuItemContent = /** @class */ (function () {
  21. function MenuItemContent(menu) {
  22. this.menu = menu;
  23. }
  24. __decorate([
  25. core_1.Input("pMenuItemContent"),
  26. __metadata("design:type", Object)
  27. ], MenuItemContent.prototype, "item", void 0);
  28. MenuItemContent = __decorate([
  29. core_1.Component({
  30. selector: '[pMenuItemContent]',
  31. template: "\n <a *ngIf=\"!item.routerLink\" [attr.href]=\"item.url||null\" class=\"ui-menuitem-link ui-corner-all\" [attr.tabindex]=\"item.tabindex ? item.tabindex : '0'\" [attr.data-automationid]=\"item.automationId\" [attr.target]=\"item.target\" [attr.title]=\"item.title\" [attr.id]=\"item.id\"\n [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"menu.itemClick($event, item)\" >\n <span class=\"ui-menuitem-icon\" *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></span>\n <span class=\"ui-menuitem-text\">{{item.label}}</span>\n </a>\n <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [attr.data-automationid]=\"item.automationId\" [queryParams]=\"item.queryParams\" [routerLinkActive]=\"'ui-state-active'\"\n [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\" [attr.id]=\"item.id\" [attr.tabindex]=\"item.tabindex ? item.tabindex : '0'\" \n [attr.title]=\"item.title\" [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"menu.itemClick($event, item)\">\n <span class=\"ui-menuitem-icon\" *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></span>\n <span class=\"ui-menuitem-text\">{{item.label}}</span>\n </a>\n "
  32. }),
  33. __param(0, core_1.Inject(core_1.forwardRef(function () { return Menu; }))),
  34. __metadata("design:paramtypes", [Object])
  35. ], MenuItemContent);
  36. return MenuItemContent;
  37. }());
  38. exports.MenuItemContent = MenuItemContent;
  39. var Menu = /** @class */ (function () {
  40. function Menu(el, renderer) {
  41. this.el = el;
  42. this.renderer = renderer;
  43. this.autoZIndex = true;
  44. this.baseZIndex = 0;
  45. this.showTransitionOptions = '225ms ease-out';
  46. this.hideTransitionOptions = '195ms ease-in';
  47. this.onShow = new core_1.EventEmitter();
  48. this.onHide = new core_1.EventEmitter();
  49. }
  50. Menu.prototype.toggle = function (event) {
  51. if (this.visible)
  52. this.hide();
  53. else
  54. this.show(event);
  55. this.preventDocumentDefault = true;
  56. };
  57. Menu.prototype.show = function (event) {
  58. this.target = event.currentTarget;
  59. this.visible = true;
  60. this.preventDocumentDefault = true;
  61. };
  62. Menu.prototype.onOverlayAnimationStart = function (event) {
  63. switch (event.toState) {
  64. case 'visible':
  65. if (this.popup) {
  66. this.container = event.element;
  67. this.moveOnTop();
  68. this.onShow.emit({});
  69. this.appendOverlay();
  70. domhandler_1.DomHandler.absolutePosition(this.container, this.target);
  71. this.bindDocumentClickListener();
  72. this.bindDocumentResizeListener();
  73. }
  74. break;
  75. case 'void':
  76. this.onOverlayHide();
  77. this.onHide.emit({});
  78. break;
  79. }
  80. };
  81. Menu.prototype.appendOverlay = function () {
  82. if (this.appendTo) {
  83. if (this.appendTo === 'body')
  84. document.body.appendChild(this.container);
  85. else
  86. domhandler_1.DomHandler.appendChild(this.container, this.appendTo);
  87. }
  88. };
  89. Menu.prototype.restoreOverlayAppend = function () {
  90. if (this.container && this.appendTo) {
  91. this.el.nativeElement.appendChild(this.container);
  92. }
  93. };
  94. Menu.prototype.moveOnTop = function () {
  95. if (this.autoZIndex) {
  96. this.container.style.zIndex = String(this.baseZIndex + (++domhandler_1.DomHandler.zindex));
  97. }
  98. };
  99. Menu.prototype.hide = function () {
  100. this.visible = false;
  101. };
  102. Menu.prototype.onWindowResize = function () {
  103. this.hide();
  104. };
  105. Menu.prototype.itemClick = function (event, item) {
  106. if (item.disabled) {
  107. event.preventDefault();
  108. return;
  109. }
  110. if (!item.url) {
  111. event.preventDefault();
  112. }
  113. if (item.command) {
  114. item.command({
  115. originalEvent: event,
  116. item: item
  117. });
  118. }
  119. if (this.popup) {
  120. this.hide();
  121. }
  122. };
  123. Menu.prototype.bindDocumentClickListener = function () {
  124. var _this = this;
  125. if (!this.documentClickListener) {
  126. this.documentClickListener = this.renderer.listen('document', 'click', function () {
  127. if (!_this.preventDocumentDefault) {
  128. _this.hide();
  129. }
  130. _this.preventDocumentDefault = false;
  131. });
  132. }
  133. };
  134. Menu.prototype.unbindDocumentClickListener = function () {
  135. if (this.documentClickListener) {
  136. this.documentClickListener();
  137. this.documentClickListener = null;
  138. }
  139. };
  140. Menu.prototype.bindDocumentResizeListener = function () {
  141. this.documentResizeListener = this.onWindowResize.bind(this);
  142. window.addEventListener('resize', this.documentResizeListener);
  143. };
  144. Menu.prototype.unbindDocumentResizeListener = function () {
  145. if (this.documentResizeListener) {
  146. window.removeEventListener('resize', this.documentResizeListener);
  147. this.documentResizeListener = null;
  148. }
  149. };
  150. Menu.prototype.onOverlayHide = function () {
  151. this.unbindDocumentClickListener();
  152. this.unbindDocumentResizeListener();
  153. this.preventDocumentDefault = false;
  154. this.target = null;
  155. };
  156. Menu.prototype.ngOnDestroy = function () {
  157. if (this.popup) {
  158. this.restoreOverlayAppend();
  159. this.onOverlayHide();
  160. }
  161. };
  162. Menu.prototype.hasSubMenu = function () {
  163. if (this.model) {
  164. for (var _i = 0, _a = this.model; _i < _a.length; _i++) {
  165. var item = _a[_i];
  166. if (item.items) {
  167. return true;
  168. }
  169. }
  170. }
  171. return false;
  172. };
  173. __decorate([
  174. core_1.Input(),
  175. __metadata("design:type", Array)
  176. ], Menu.prototype, "model", void 0);
  177. __decorate([
  178. core_1.Input(),
  179. __metadata("design:type", Boolean)
  180. ], Menu.prototype, "popup", void 0);
  181. __decorate([
  182. core_1.Input(),
  183. __metadata("design:type", Object)
  184. ], Menu.prototype, "style", void 0);
  185. __decorate([
  186. core_1.Input(),
  187. __metadata("design:type", String)
  188. ], Menu.prototype, "styleClass", void 0);
  189. __decorate([
  190. core_1.Input(),
  191. __metadata("design:type", Object)
  192. ], Menu.prototype, "appendTo", void 0);
  193. __decorate([
  194. core_1.Input(),
  195. __metadata("design:type", Boolean)
  196. ], Menu.prototype, "autoZIndex", void 0);
  197. __decorate([
  198. core_1.Input(),
  199. __metadata("design:type", Number)
  200. ], Menu.prototype, "baseZIndex", void 0);
  201. __decorate([
  202. core_1.Input(),
  203. __metadata("design:type", String)
  204. ], Menu.prototype, "showTransitionOptions", void 0);
  205. __decorate([
  206. core_1.Input(),
  207. __metadata("design:type", String)
  208. ], Menu.prototype, "hideTransitionOptions", void 0);
  209. __decorate([
  210. core_1.ViewChild('container', { static: false }),
  211. __metadata("design:type", core_1.ElementRef)
  212. ], Menu.prototype, "containerViewChild", void 0);
  213. __decorate([
  214. core_1.Output(),
  215. __metadata("design:type", core_1.EventEmitter)
  216. ], Menu.prototype, "onShow", void 0);
  217. __decorate([
  218. core_1.Output(),
  219. __metadata("design:type", core_1.EventEmitter)
  220. ], Menu.prototype, "onHide", void 0);
  221. Menu = __decorate([
  222. core_1.Component({
  223. selector: 'p-menu',
  224. template: "\n <div #container [ngClass]=\"{'ui-menu ui-widget ui-widget-content ui-corner-all': true, 'ui-menu-dynamic ui-shadow': popup}\"\n [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"preventDocumentDefault=true\" *ngIf=\"!popup || visible\"\n [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n <ul>\n <ng-template ngFor let-submenu [ngForOf]=\"model\" *ngIf=\"hasSubMenu()\">\n <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"submenu.separator\" [ngClass]=\"{'ui-helper-hidden': submenu.visible === false}\"></li>\n <li class=\"ui-submenu-header ui-widget-header ui-corner-all\" [attr.data-automationid]=\"submenu.automationId\" *ngIf=\"!submenu.separator\" [ngClass]=\"{'ui-helper-hidden': submenu.visible === false}\">{{submenu.label}}</li>\n <ng-template ngFor let-item [ngForOf]=\"submenu.items\">\n <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"item.separator\" [ngClass]=\"{'ui-helper-hidden': (item.visible === false ||\u00A0submenu.visible === false)}\"></li>\n <li class=\"ui-menuitem ui-widget ui-corner-all\" *ngIf=\"!item.separator\" [pMenuItemContent]=\"item\" [ngClass]=\"{'ui-helper-hidden': (item.visible === false || submenu.visible === false)}\" [ngStyle]=\"item.style\" [class]=\"item.styleClass\"></li>\n </ng-template>\n </ng-template>\n <ng-template ngFor let-item [ngForOf]=\"model\" *ngIf=\"!hasSubMenu()\">\n <li class=\"ui-menu-separator ui-widget-content\" *ngIf=\"item.separator\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\"></li>\n <li class=\"ui-menuitem ui-widget ui-corner-all\" *ngIf=\"!item.separator\" [pMenuItemContent]=\"item\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\" [ngStyle]=\"item.style\" [class]=\"item.styleClass\"></li>\n </ng-template>\n </ul>\n </div>\n ",
  225. animations: [
  226. animations_1.trigger('overlayAnimation', [
  227. animations_1.state('void', animations_1.style({
  228. transform: 'translateY(5%)',
  229. opacity: 0
  230. })),
  231. animations_1.state('visible', animations_1.style({
  232. transform: 'translateY(0)',
  233. opacity: 1
  234. })),
  235. animations_1.transition('void => visible', animations_1.animate('{{showTransitionParams}}')),
  236. animations_1.transition('visible => void', animations_1.animate('{{hideTransitionParams}}'))
  237. ])
  238. ]
  239. }),
  240. __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2])
  241. ], Menu);
  242. return Menu;
  243. }());
  244. exports.Menu = Menu;
  245. var MenuModule = /** @class */ (function () {
  246. function MenuModule() {
  247. }
  248. MenuModule = __decorate([
  249. core_1.NgModule({
  250. imports: [common_1.CommonModule, router_1.RouterModule],
  251. exports: [Menu, router_1.RouterModule],
  252. declarations: [Menu, MenuItemContent]
  253. })
  254. ], MenuModule);
  255. return MenuModule;
  256. }());
  257. exports.MenuModule = MenuModule;
  258. //# sourceMappingURL=menu.js.map