UNPKG

13.9 kBJavaScriptView Raw
1import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, ChangeDetectorRef, Input, ContentChildren, NgModule } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { PrimeTemplate } from 'primeng/api';
4import { RouterModule } from '@angular/router';
5import { RippleModule } from 'primeng/ripple';
6
7class MegaMenu {
8 constructor(el, renderer, cd) {
9 this.el = el;
10 this.renderer = renderer;
11 this.cd = cd;
12 this.orientation = 'horizontal';
13 this.autoZIndex = true;
14 this.baseZIndex = 0;
15 }
16 ngAfterContentInit() {
17 this.templates.forEach((item) => {
18 switch (item.getType()) {
19 case 'start':
20 this.startTemplate = item.template;
21 break;
22 case 'end':
23 this.endTemplate = item.template;
24 break;
25 }
26 });
27 }
28 onCategoryMouseEnter(event, menuitem) {
29 if (menuitem.disabled) {
30 event.preventDefault();
31 return;
32 }
33 if (this.activeItem) {
34 this.activeItem = menuitem;
35 }
36 }
37 onCategoryClick(event, item) {
38 if (item.disabled) {
39 event.preventDefault();
40 return;
41 }
42 if (!item.url) {
43 event.preventDefault();
44 }
45 if (item.command) {
46 item.command({
47 originalEvent: event,
48 item: item
49 });
50 }
51 if (item.items) {
52 if (this.activeItem && this.activeItem === item) {
53 this.activeItem = null;
54 this.unbindDocumentClickListener();
55 }
56 else {
57 this.activeItem = item;
58 this.bindDocumentClickListener();
59 }
60 }
61 }
62 itemClick(event, item) {
63 if (item.disabled) {
64 event.preventDefault();
65 return;
66 }
67 if (!item.url) {
68 event.preventDefault();
69 }
70 if (item.command) {
71 item.command({
72 originalEvent: event,
73 item: item
74 });
75 }
76 this.activeItem = null;
77 }
78 getColumnClass(menuitem) {
79 let length = menuitem.items ? menuitem.items.length : 0;
80 let columnClass;
81 switch (length) {
82 case 2:
83 columnClass = 'p-megamenu-col-6';
84 break;
85 case 3:
86 columnClass = 'p-megamenu-col-4';
87 break;
88 case 4:
89 columnClass = 'p-megamenu-col-3';
90 break;
91 case 6:
92 columnClass = 'p-megamenu-col-2';
93 break;
94 default:
95 columnClass = 'p-megamenu-col-12';
96 break;
97 }
98 return columnClass;
99 }
100 bindDocumentClickListener() {
101 if (!this.documentClickListener) {
102 this.documentClickListener = (event) => {
103 if (this.el && !this.el.nativeElement.contains(event.target)) {
104 this.activeItem = null;
105 this.unbindDocumentClickListener();
106 this.cd.markForCheck();
107 }
108 };
109 document.addEventListener('click', this.documentClickListener);
110 }
111 }
112 unbindDocumentClickListener() {
113 if (this.documentClickListener) {
114 document.removeEventListener('click', this.documentClickListener);
115 this.documentClickListener = null;
116 }
117 }
118}
119MegaMenu.decorators = [
120 { type: Component, args: [{
121 selector: 'p-megaMenu',
122 template: `
123 <div [class]="styleClass" [ngStyle]="style"
124 [ngClass]="{'p-megamenu p-component':true,'p-megamenu-horizontal': orientation == 'horizontal','p-megamenu-vertical': orientation == 'vertical'}">
125 <div class="p-megamenu-start" *ngIf="startTemplate">
126 <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
127 </div>
128 <ul class="p-megamenu-root-list" role="menubar">
129 <ng-template ngFor let-category [ngForOf]="model">
130 <li *ngIf="category.separator" class="p-menu-separator" [ngClass]="{'p-hidden': category.visible === false}">
131 <li *ngIf="!category.separator" [ngClass]="{'p-menuitem':true,'p-menuitem-active':category==activeItem, 'p-hidden': category.visible === false}"
132 (mouseenter)="onCategoryMouseEnter($event, category)">
133 <a *ngIf="!category.routerLink" [href]="category.url||'#'" [attr.target]="category.target" [attr.title]="category.title" [attr.id]="category.id" (click)="onCategoryClick($event, category)" [attr.tabindex]="category.tabindex ? category.tabindex : '0'"
134 [ngClass]="{'p-menuitem-link':true,'p-disabled':category.disabled}" [ngStyle]="category.style" [class]="category.styleClass" pRipple>
135 <span class="p-menuitem-icon" *ngIf="category.icon" [ngClass]="category.icon"></span>
136 <span class="p-menuitem-text" *ngIf="category.escape !== false; else categoryHtmlLabel">{{category.label}}</span>
137 <ng-template #categoryHtmlLabel><span class="p-menuitem-text" [innerHTML]="category.label"></span></ng-template>
138 <span *ngIf="category.items" class="p-submenu-icon pi" [ngClass]="{'pi-angle-down':orientation=='horizontal','pi-angle-right':orientation=='vertical'}"></span>
139 </a>
140 <a *ngIf="category.routerLink" [routerLink]="category.routerLink" [queryParams]="category.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="category.routerLinkActiveOptions||{exact:false}" [attr.tabindex]="category.tabindex ? category.tabindex : '0'"
141 [attr.target]="category.target" [attr.title]="category.title" [attr.id]="category.id"
142 (click)="onCategoryClick($event, category)" [ngClass]="{'p-menuitem-link':true,'p-disabled':category.disabled}" [ngStyle]="category.style" [class]="category.styleClass"
143 [fragment]="category.fragment" [queryParamsHandling]="category.queryParamsHandling" [preserveFragment]="category.preserveFragment" [skipLocationChange]="category.skipLocationChange" [replaceUrl]="category.replaceUrl" [state]="category.state" pRipple>
144 <span class="p-menuitem-icon" *ngIf="category.icon" [ngClass]="category.icon"></span>
145 <span class="p-menuitem-text" *ngIf="category.escape !== false; else categoryHtmlRouteLabel">{{category.label}}</span>
146 <ng-template #categoryHtmlRouteLabel><span class="p-menuitem-text" [innerHTML]="category.label"></span></ng-template>
147 </a>
148 <div class="p-megamenu-panel" *ngIf="category.items">
149 <div class="p-megamenu-grid">
150 <ng-template ngFor let-column [ngForOf]="category.items">
151 <div [class]="getColumnClass(category)">
152 <ng-template ngFor let-submenu [ngForOf]="column">
153 <ul class="p-megamenu-submenu" role="menu">
154 <li class="p-megamenu-submenu-header">
155 <span *ngIf="submenu.escape !== false; else submenuHtmlLabel">{{submenu.label}}</span>
156 <ng-template #submenuHtmlLabel><span [innerHTML]="submenu.label"></span></ng-template>
157 </li>
158 <ng-template ngFor let-item [ngForOf]="submenu.items">
159 <li *ngIf="item.separator" class="p-menu-separator" [ngClass]="{'p-hidden': item.visible === false}" role="separator">
160 <li *ngIf="!item.separator" class="p-menuitem" [ngClass]="{'p-hidden': item.visible === false}" role="none">
161 <a *ngIf="!item.routerLink" role="menuitem" [href]="item.url||'#'" class="p-menuitem-link" [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id" [attr.tabindex]="item.tabindex ? item.tabindex : '0'"
162 [ngClass]="{'p-disabled':item.disabled}" (click)="itemClick($event, item)" pRipple>
163 <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
164 <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
165 <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
166 </a>
167 <a *ngIf="item.routerLink" role="menuitem" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [attr.tabindex]="item.tabindex ? item.tabindex : '0'"
168 [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link"
169 [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
170 [ngClass]="{'p-disabled':item.disabled}" (click)="itemClick($event, item)"
171 [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" pRipple>
172 <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
173 <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
174 <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
175 </a>
176 </li>
177 </ng-template>
178 </ul>
179 </ng-template>
180 </div>
181 </ng-template>
182 </div>
183 </div>
184 </li>
185 </ng-template>
186 <div class="p-megamenu-end" *ngIf="endTemplate; else legacy">
187 <ng-container *ngTemplateOutlet="endTemplate"></ng-container>
188 </div>
189 <ng-template #legacy>
190 <div class="p-megamenu-end">
191 <ng-content></ng-content>
192 </div>
193 </ng-template>
194 </ul>
195 </div>
196 `,
197 changeDetection: ChangeDetectionStrategy.OnPush,
198 encapsulation: ViewEncapsulation.None,
199 styles: [".p-megamenu-root-list{list-style:none;margin:0;padding:0}.p-megamenu-root-list>.p-menuitem{position:relative}.p-megamenu .p-menuitem-link{-ms-flex-align:center;align-items:center;cursor:pointer;display:-ms-flexbox;display:flex;overflow:hidden;position:relative;text-decoration:none}.p-megamenu .p-menuitem-text{line-height:1}.p-megamenu-panel{display:none;position:absolute;width:auto;z-index:1}.p-megamenu-root-list>.p-menuitem-active>.p-megamenu-panel{display:block}.p-megamenu-submenu{list-style:none;margin:0;padding:0}.p-megamenu-horizontal .p-megamenu-root-list{-ms-flex-align:center;-ms-flex-wrap:wrap;align-items:center;display:-ms-flexbox;display:flex;flex-wrap:wrap}.p-megamenu-vertical .p-megamenu-root-list{-ms-flex-direction:column;flex-direction:column}.p-megamenu-vertical .p-megamenu-root-list>.p-menuitem-active>.p-megamenu-panel{left:100%;top:0}.p-megamenu-vertical .p-megamenu-root-list>.p-menuitem>.p-menuitem-link>.p-submenu-icon{margin-left:auto}.p-megamenu-grid{display:-ms-flexbox;display:flex}.p-megamenu-col-2,.p-megamenu-col-3,.p-megamenu-col-4,.p-megamenu-col-6,.p-megamenu-col-12{-ms-flex:0 0 auto;flex:0 0 auto;padding:.5rem}.p-megamenu-col-2{width:16.6667%}.p-megamenu-col-3{width:25%}.p-megamenu-col-4{width:33.3333%}.p-megamenu-col-6{width:50%}.p-megamenu-col-12{width:100%}"]
200 },] }
201];
202MegaMenu.ctorParameters = () => [
203 { type: ElementRef },
204 { type: Renderer2 },
205 { type: ChangeDetectorRef }
206];
207MegaMenu.propDecorators = {
208 model: [{ type: Input }],
209 style: [{ type: Input }],
210 styleClass: [{ type: Input }],
211 orientation: [{ type: Input }],
212 autoZIndex: [{ type: Input }],
213 baseZIndex: [{ type: Input }],
214 templates: [{ type: ContentChildren, args: [PrimeTemplate,] }]
215};
216class MegaMenuModule {
217}
218MegaMenuModule.decorators = [
219 { type: NgModule, args: [{
220 imports: [CommonModule, RouterModule, RippleModule],
221 exports: [MegaMenu, RouterModule],
222 declarations: [MegaMenu]
223 },] }
224];
225
226/**
227 * Generated bundle index. Do not edit.
228 */
229
230export { MegaMenu, MegaMenuModule };
231//# sourceMappingURL=primeng-megamenu.js.map