menubar.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  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 common_1 = require("@angular/common");
  14. var domhandler_1 = require("../dom/domhandler");
  15. var router_1 = require("@angular/router");
  16. var MenubarSub = /** @class */ (function () {
  17. function MenubarSub(renderer, cd) {
  18. this.renderer = renderer;
  19. this.cd = cd;
  20. this.autoZIndex = true;
  21. this.baseZIndex = 0;
  22. this.menuHoverActive = false;
  23. }
  24. Object.defineProperty(MenubarSub.prototype, "parentActive", {
  25. get: function () {
  26. return this._parentActive;
  27. },
  28. set: function (value) {
  29. if (!this.root) {
  30. this._parentActive = value;
  31. if (!value)
  32. this.activeItem = null;
  33. }
  34. },
  35. enumerable: true,
  36. configurable: true
  37. });
  38. MenubarSub.prototype.onItemMenuClick = function (event, item, menuitem) {
  39. if (!this.autoDisplay) {
  40. if (menuitem.disabled) {
  41. return;
  42. }
  43. this.activeItem = this.activeMenu ? (this.activeMenu.isEqualNode(item) ? null : item) : item;
  44. var nextElement = item.children[0].nextElementSibling;
  45. if (nextElement) {
  46. var sublist = nextElement.children[0];
  47. if (this.autoZIndex) {
  48. sublist.style.zIndex = String(this.baseZIndex + (++domhandler_1.DomHandler.zindex));
  49. }
  50. if (this.root) {
  51. sublist.style.top = domhandler_1.DomHandler.getOuterHeight(item.children[0]) + 'px';
  52. sublist.style.left = '0px';
  53. }
  54. else {
  55. sublist.style.top = '0px';
  56. sublist.style.left = domhandler_1.DomHandler.getOuterWidth(item.children[0]) + 'px';
  57. }
  58. }
  59. this.menuClick = true;
  60. this.menuHoverActive = this.activeMenu ? (!this.activeMenu.isEqualNode(item)) : true;
  61. this.activeMenu = this.activeMenu ? (this.activeMenu.isEqualNode(item) ? null : item) : item;
  62. this.bindEventListener();
  63. }
  64. };
  65. MenubarSub.prototype.bindEventListener = function () {
  66. var _this = this;
  67. if (!this.documentClickListener) {
  68. this.documentClickListener = this.renderer.listen('document', 'click', function (event) {
  69. if (!_this.menuClick) {
  70. _this.activeItem = null;
  71. _this.menuHoverActive = false;
  72. _this.activeMenu = false;
  73. }
  74. _this.menuClick = false;
  75. });
  76. }
  77. };
  78. MenubarSub.prototype.onItemMouseEnter = function (event, item, menuitem) {
  79. if (this.autoDisplay || (!this.autoDisplay && this.root && this.menuHoverActive)) {
  80. if (menuitem.disabled) {
  81. return;
  82. }
  83. if ((this.activeItem && !this.activeItem.isEqualNode(item) || !this.activeItem)) {
  84. this.activeItem = item;
  85. var nextElement = item.children[0].nextElementSibling;
  86. if (nextElement) {
  87. var sublist = nextElement.children[0];
  88. sublist.style.zIndex = String(++domhandler_1.DomHandler.zindex);
  89. if (this.root) {
  90. sublist.style.top = domhandler_1.DomHandler.getOuterHeight(item.children[0]) + 'px';
  91. sublist.style.left = '0px';
  92. }
  93. else {
  94. sublist.style.top = '0px';
  95. sublist.style.left = domhandler_1.DomHandler.getOuterWidth(item.children[0]) + 'px';
  96. }
  97. }
  98. this.activeMenu = item;
  99. }
  100. }
  101. };
  102. MenubarSub.prototype.itemClick = function (event, item) {
  103. if (item.disabled) {
  104. event.preventDefault();
  105. return;
  106. }
  107. if (!item.url) {
  108. event.preventDefault();
  109. }
  110. if (item.command) {
  111. item.command({
  112. originalEvent: event,
  113. item: item
  114. });
  115. }
  116. this.activeItem = null;
  117. };
  118. MenubarSub.prototype.listClick = function (event) {
  119. if (this.autoDisplay) {
  120. this.activeItem = null;
  121. }
  122. };
  123. MenubarSub.prototype.ngOnDestroy = function () {
  124. if (this.documentClickListener) {
  125. this.documentClickListener();
  126. this.documentClickListener = null;
  127. }
  128. };
  129. __decorate([
  130. core_1.Input(),
  131. __metadata("design:type", Object)
  132. ], MenubarSub.prototype, "item", void 0);
  133. __decorate([
  134. core_1.Input(),
  135. __metadata("design:type", Boolean)
  136. ], MenubarSub.prototype, "root", void 0);
  137. __decorate([
  138. core_1.Input(),
  139. __metadata("design:type", Boolean)
  140. ], MenubarSub.prototype, "autoDisplay", void 0);
  141. __decorate([
  142. core_1.Input(),
  143. __metadata("design:type", Boolean)
  144. ], MenubarSub.prototype, "autoZIndex", void 0);
  145. __decorate([
  146. core_1.Input(),
  147. __metadata("design:type", Number)
  148. ], MenubarSub.prototype, "baseZIndex", void 0);
  149. __decorate([
  150. core_1.Input(),
  151. __metadata("design:type", Boolean),
  152. __metadata("design:paramtypes", [Object])
  153. ], MenubarSub.prototype, "parentActive", null);
  154. MenubarSub = __decorate([
  155. core_1.Component({
  156. selector: 'p-menubarSub',
  157. template: "\n <ul [ngClass]=\"{'ui-menubar-root-list':root, 'ui-widget-content ui-corner-all ui-submenu-list ui-shadow':!root}\"\n (click)=\"listClick($event)\">\n <ng-template ngFor let-child [ngForOf]=\"(root ? item : item.items)\">\n <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\" [ngClass]=\"{'ui-helper-hidden': child.visible === false}\">\n <li *ngIf=\"!child.separator\" #listItem [ngClass]=\"{'ui-menuitem ui-corner-all':true,\n 'ui-menu-parent':child.items,'ui-menuitem-active':listItem==activeItem,'ui-helper-hidden': child.visible === false}\"\n (mouseenter)=\"onItemMouseEnter($event,listItem,child)\" (click)=\"onItemMenuClick($event, listItem, child)\">\n <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" [attr.data-automationid]=\"child.automationId\" [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\" (click)=\"itemClick($event, child)\"\n [ngClass]=\"{'ui-menuitem-link ui-corner-all':true,'ui-state-disabled':child.disabled}\" [ngStyle]=\"child.style\" [class]=\"child.styleClass\" [attr.tabindex]=\"child.tabindex ? child.tabindex : '0'\">\n <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n <span class=\"ui-menuitem-text\">{{child.label}}</span>\n <span class=\"ui-submenu-icon pi pi-fw\" *ngIf=\"child.items\" [ngClass]=\"{'pi-caret-down':root,'pi-caret-right':!root}\"></span>\n </a>\n <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [attr.data-automationid]=\"child.automationId\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-state-active'\" [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\"\n [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\" [attr.tabindex]=\"child.tabindex ? child.tabindex : '0'\"\n (click)=\"itemClick($event, child)\" [ngClass]=\"{'ui-menuitem-link ui-corner-all':true,'ui-state-disabled':child.disabled}\" [ngStyle]=\"child.style\" [class]=\"child.styleClass\">\n <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n <span class=\"ui-menuitem-text\">{{child.label}}</span>\n <span class=\"ui-submenu-icon pi pi-fw\" *ngIf=\"child.items\" [ngClass]=\"{'pi-caret-down':root,'pi-caret-right':!root}\"></span>\n </a>\n <p-menubarSub class=\"ui-submenu\" [parentActive]=\"listItem==activeItem\" [item]=\"child\" *ngIf=\"child.items\" [autoDisplay]=\"true\"></p-menubarSub>\n </li>\n </ng-template>\n </ul>\n "
  158. }),
  159. __metadata("design:paramtypes", [core_1.Renderer2, core_1.ChangeDetectorRef])
  160. ], MenubarSub);
  161. return MenubarSub;
  162. }());
  163. exports.MenubarSub = MenubarSub;
  164. var Menubar = /** @class */ (function () {
  165. function Menubar(el, renderer) {
  166. this.el = el;
  167. this.renderer = renderer;
  168. this.autoZIndex = true;
  169. this.baseZIndex = 0;
  170. }
  171. Object.defineProperty(Menubar.prototype, "autoDisplay", {
  172. get: function () {
  173. return this._autoDisplay;
  174. },
  175. enumerable: true,
  176. configurable: true
  177. });
  178. Object.defineProperty(Menubar.prototype, "utc", {
  179. set: function (_utc) {
  180. console.log("AutoDisplay property is deprecated and functionality is not available.");
  181. },
  182. enumerable: true,
  183. configurable: true
  184. });
  185. __decorate([
  186. core_1.Input(),
  187. __metadata("design:type", Array)
  188. ], Menubar.prototype, "model", void 0);
  189. __decorate([
  190. core_1.Input(),
  191. __metadata("design:type", Object)
  192. ], Menubar.prototype, "style", void 0);
  193. __decorate([
  194. core_1.Input(),
  195. __metadata("design:type", String)
  196. ], Menubar.prototype, "styleClass", void 0);
  197. __decorate([
  198. core_1.Input(),
  199. __metadata("design:type", Boolean)
  200. ], Menubar.prototype, "autoZIndex", void 0);
  201. __decorate([
  202. core_1.Input(),
  203. __metadata("design:type", Number)
  204. ], Menubar.prototype, "baseZIndex", void 0);
  205. __decorate([
  206. core_1.Input(),
  207. __metadata("design:type", Boolean),
  208. __metadata("design:paramtypes", [])
  209. ], Menubar.prototype, "autoDisplay", null);
  210. Menubar = __decorate([
  211. core_1.Component({
  212. selector: 'p-menubar',
  213. template: "\n <div [ngClass]=\"{'ui-menubar ui-widget ui-widget-content ui-corner-all':true}\" [class]=\"styleClass\" [ngStyle]=\"style\">\n <p-menubarSub [item]=\"model\" root=\"root\" [baseZIndex]=\"baseZIndex\" [autoZIndex]=\"autoZIndex\">\n <ng-content></ng-content>\n </p-menubarSub>\n <div class=\"ui-menubar-custom\">\n <ng-content></ng-content>\n </div>\n </div>\n "
  214. }),
  215. __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2])
  216. ], Menubar);
  217. return Menubar;
  218. }());
  219. exports.Menubar = Menubar;
  220. var MenubarModule = /** @class */ (function () {
  221. function MenubarModule() {
  222. }
  223. MenubarModule = __decorate([
  224. core_1.NgModule({
  225. imports: [common_1.CommonModule, router_1.RouterModule],
  226. exports: [Menubar, router_1.RouterModule],
  227. declarations: [Menubar, MenubarSub]
  228. })
  229. ], MenubarModule);
  230. return MenubarModule;
  231. }());
  232. exports.MenubarModule = MenubarModule;
  233. //# sourceMappingURL=menubar.js.map