Skip to content

Commit

Permalink
Fixed #10422 - Tooltip support for Menu Components
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Jul 30, 2021
1 parent e47c4e6 commit 528fc93
Show file tree
Hide file tree
Showing 11 changed files with 72 additions and 72 deletions.
22 changes: 11 additions & 11 deletions src/app/components/breadcrumb/breadcrumb.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,16 @@ import {RouterModule} from '@angular/router';
template: `
<div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-breadcrumb p-component'">
<ul>
<li [class]="home.styleClass" [ngClass]="{'p-breadcrumb-home': true, 'p-disabled':home.disabled}" [ngStyle]="home.style" *ngIf="home">
<a *ngIf="!home.routerLink" [href]="home.url ? home.url : null" class="p-menuitem-link" (click)="itemClick($event, home)"
<li [class]="home.styleClass" [ngClass]="{'p-breadcrumb-home': true, 'p-disabled':home.disabled}" [ngStyle]="home.style" *ngIf="home" pTooltip [tooltipOptions]="home.tooltipOptions">
<a *ngIf="!home.routerLink" [href]="home.url ? home.url : null" class="p-menuitem-link" (click)="itemClick($event, home)"
[attr.target]="home.target" [attr.title]="home.title" [attr.id]="home.id" [attr.tabindex]="home.disabled ? null : '0'">
<span *ngIf="home.icon" class="p-menuitem-icon" [ngClass]="home.icon||'pi pi-home'"></span>
<ng-container *ngIf="home.label">
<span *ngIf="home.escape !== false; else htmlHomeLabel" class="p-menuitem-text">{{home.label}}</span>
<ng-template #htmlHomeLabel><span class="p-menuitem-text" [innerHTML]="home.label"></span></ng-template>
</ng-container>
</a>
<a *ngIf="home.routerLink" [routerLink]="home.routerLink" [queryParams]="home.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="home.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link" (click)="itemClick($event, home)"
<a *ngIf="home.routerLink" [routerLink]="home.routerLink" [queryParams]="home.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="home.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link" (click)="itemClick($event, home)"
[attr.target]="home.target" [attr.title]="home.title" [attr.id]="home.id" [attr.tabindex]="home.disabled ? null : '0'"
[fragment]="home.fragment" [queryParamsHandling]="home.queryParamsHandling" [preserveFragment]="home.preserveFragment" [skipLocationChange]="home.skipLocationChange" [replaceUrl]="home.replaceUrl" [state]="home.state">
<span *ngIf="home.icon" class="p-menuitem-icon" [ngClass]="home.icon||'pi pi-home'"></span>
Expand All @@ -30,15 +30,15 @@ import {RouterModule} from '@angular/router';
<li class="p-breadcrumb-chevron pi pi-chevron-right" *ngIf="model&&home"></li>
<ng-template ngFor let-item let-end="last" [ngForOf]="model">
<li [class]="item.styleClass" [ngStyle]="item.style" [ngClass]="{'p-disabled':item.disabled}">
<a *ngIf="!item.routerLink" [attr.href]="item.url ? item.url : null" class="p-menuitem-link" (click)="itemClick($event, item)"
<a *ngIf="!item.routerLink" [attr.href]="item.url ? item.url : null" class="p-menuitem-link" (click)="itemClick($event, item)" pTooltip [tooltipOptions]="item.tooltipOptions"
[attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id" [attr.tabindex]="item.disabled ? null : '0'">
<span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon"></span>
<ng-container *ngIf="item.label">
<span *ngIf="item.escape !== false; else htmlLabel" class="p-menuitem-text">{{item.label}}</span>
<ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
</ng-container>
</a>
<a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link" (click)="itemClick($event, item)"
<a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link" (click)="itemClick($event, item)"
[attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id" [attr.tabindex]="item.disabled ? null : '0'"
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
<span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon"></span>
Expand All @@ -64,22 +64,22 @@ export class Breadcrumb {
@Input() style: any;

@Input() styleClass: string;

@Input() home: MenuItem;

@Output() onItemClick: EventEmitter<any> = new EventEmitter();

itemClick(event, item: MenuItem) {
if (item.disabled) {
event.preventDefault();
return;
}

if (!item.url) {
event.preventDefault();
}
if (item.command) {

if (item.command) {
item.command({
originalEvent: event,
item: item
Expand All @@ -91,7 +91,7 @@ export class Breadcrumb {
item: item
});
}

onHomeClick(event) {
if (this.home) {
this.itemClick(event, this.home);
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/contextmenu/contextmenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { takeUntil } from 'rxjs/operators';
<ul #sublist [ngClass]="{'p-submenu-list':!root}">
<ng-template ngFor let-child let-index="index" [ngForOf]="(root ? item : item.items)">
<li *ngIf="child.separator" #menuitem class="p-menu-separator" [ngClass]="{'p-hidden': child.visible === false}" role="separator">
<li *ngIf="!child.separator" #menuitem [ngClass]="{'p-menuitem':true,'p-menuitem-active': isActive(getKey(index)),'p-hidden': child.visible === false}" [ngStyle]="child.style" [class]="child.styleClass"
<li *ngIf="!child.separator" #menuitem [ngClass]="{'p-menuitem':true,'p-menuitem-active': isActive(getKey(index)),'p-hidden': child.visible === false}" [ngStyle]="child.style" [class]="child.styleClass" pTooltip [tooltipOptions]="child.tooltipOptions"
(mouseenter)="onItemMouseEnter($event,child,getKey(index))" (mouseleave)="onItemMouseLeave($event,child)" role="none" [attr.data-ik]="getKey(index)">
<a *ngIf="!child.routerLink" [attr.href]="child.url ? child.url : null" [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id"
[attr.tabindex]="child.disabled ? null : '0'" (click)="onItemClick($event, child, menuitem, getKey(index))" [ngClass]="{'p-menuitem-link':true,'p-disabled':child.disabled}" pRipple
Expand Down
6 changes: 3 additions & 3 deletions src/app/components/dock/dock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@ import { TooltipModule } from 'primeng/tooltip';
template: `
<div [attr.id]="id" [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass">
<ul #list class="p-dock-list" role="menu" (mouseleave)="onListMouseLeave()">
<li *ngFor="let item of model; let i = index" [ngClass]="itemClass(i)" (mouseenter)="onItemMouseEnter(i)" >
<li *ngFor="let item of model; let i = index" [ngClass]="itemClass(i)" (mouseenter)="onItemMouseEnter(i)">
<a *ngIf="isClickableRouterLink(item); else elseBlock" pRipple [routerLink]="item.routerLink" [queryParams]="item.queryParams"
[ngClass]="{'p-disabled':item.disabled}" class="p-dock-action" role="menuitem" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" (click)="onItemClick($event, item)" (keydown.enter)="onItemClick($event, item, i)"
[attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled || readonly ? null : (item.tabindex ? item.tabindex : '0')"
[attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled || readonly ? null : (item.tabindex ? item.tabindex : '0')" pTooltip [tooltipOptions]="item.tooltipOptions"
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
<span class="p-dock-action-icon" *ngIf="item.icon && !itemTemplate" [ngClass]="item.icon"></span>
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
</a>
<ng-template #elseBlock>
<a pTooltip [tooltipOptions]="item.tooltipOptions" [showDelay]="1000" [tooltipPosition]="item.tooltipPosition" [attr.href]="item.url||null" class="p-dock-action" role="menuitem" pRipple (click)="onItemClick($event, item)"
<a [tooltipPosition]="item.tooltipPosition" [attr.href]="item.url||null" class="p-dock-action" role="menuitem" pRipple (click)="onItemClick($event, item)" pTooltip [tooltipOptions]="item.tooltipOptions"
[ngClass]="{'p-disabled':item.disabled}" (keydown.enter)="onItemClick($event, item, i)" [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled||(i !== activeIndex && readonly) ? null : (item.tabindex ? item.tabindex : '0')">
<span class="p-dock-action-icon" *ngIf="item.icon && !itemTemplate" [ngClass]="item.icon"></span>
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
Expand Down
40 changes: 20 additions & 20 deletions src/app/components/megamenu/megamenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {NgModule,Component,ElementRef,Input,Renderer2,ChangeDetectionStrategy, V
import {CommonModule} from '@angular/common';
import {MegaMenuItem,MenuItem, PrimeTemplate} from 'primeng/api';
import {RouterModule} from '@angular/router';
import {RippleModule} from 'primeng/ripple';
import {RippleModule} from 'primeng/ripple';

@Component({
selector: 'p-megaMenu',
Expand All @@ -15,7 +15,7 @@ import {RippleModule} from 'primeng/ripple';
<ul class="p-megamenu-root-list" role="menubar">
<ng-template ngFor let-category [ngForOf]="model">
<li *ngIf="category.separator" class="p-menu-separator" [ngClass]="{'p-hidden': category.visible === false}">
<li *ngIf="!category.separator" [ngClass]="{'p-menuitem':true,'p-menuitem-active':category==activeItem, 'p-hidden': category.visible === false}"
<li *ngIf="!category.separator" [ngClass]="{'p-menuitem':true,'p-menuitem-active':category==activeItem, 'p-hidden': category.visible === false}" pTooltip [tooltipOptions]="category.tooltipOptions"
(mouseenter)="onCategoryMouseEnter($event, category)">
<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'"
[ngClass]="{'p-menuitem-link':true,'p-disabled':category.disabled}" [ngStyle]="category.style" [class]="category.styleClass" pRipple>
Expand All @@ -24,7 +24,7 @@ import {RippleModule} from 'primeng/ripple';
<ng-template #categoryHtmlLabel><span class="p-menuitem-text" [innerHTML]="category.label"></span></ng-template>
<span *ngIf="category.items" class="p-submenu-icon pi" [ngClass]="{'pi-angle-down':orientation=='horizontal','pi-angle-right':orientation=='vertical'}"></span>
</a>
<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'"
<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'"
[attr.target]="category.target" [attr.title]="category.title" [attr.id]="category.id"
(click)="onCategoryClick($event, category)" [ngClass]="{'p-menuitem-link':true,'p-disabled':category.disabled}" [ngStyle]="category.style" [class]="category.styleClass"
[fragment]="category.fragment" [queryParamsHandling]="category.queryParamsHandling" [preserveFragment]="category.preserveFragment" [skipLocationChange]="category.skipLocationChange" [replaceUrl]="category.replaceUrl" [state]="category.state" pRipple>
Expand All @@ -44,15 +44,15 @@ import {RippleModule} from 'primeng/ripple';
</li>
<ng-template ngFor let-item [ngForOf]="submenu.items">
<li *ngIf="item.separator" class="p-menu-separator" [ngClass]="{'p-hidden': item.visible === false}" role="separator">
<li *ngIf="!item.separator" class="p-menuitem" [ngClass]="{'p-hidden': item.visible === false}" role="none">
<li *ngIf="!item.separator" class="p-menuitem" [ngClass]="{'p-hidden': item.visible === false}" role="none" pTooltip [tooltipOptions]="item.tooltipOptions">
<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'"
[ngClass]="{'p-disabled':item.disabled}" (click)="itemClick($event, item)" pRipple>
<span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
<span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
<ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
</a>
<a *ngIf="item.routerLink" role="menuitem" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [attr.tabindex]="item.tabindex ? item.tabindex : '0'"
[routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link"
[routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link"
[attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
[ngClass]="{'p-disabled':item.disabled}" (click)="itemClick($event, item)"
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" pRipple>
Expand Down Expand Up @@ -92,25 +92,25 @@ export class MegaMenu implements AfterContentInit {
@Input() style: any;

@Input() styleClass: string;

@Input() orientation: string = 'horizontal';

@Input() autoZIndex: boolean = true;

@Input() baseZIndex: number = 0;

@ContentChildren(PrimeTemplate) templates: QueryList<any>;

activeItem: any;

documentClickListener: any;

startTemplate: TemplateRef<any>;

endTemplate: TemplateRef<any>;

constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef) {}

ngAfterContentInit() {
this.templates.forEach((item) => {
switch(item.getType()) {
Expand Down Expand Up @@ -164,52 +164,52 @@ export class MegaMenu implements AfterContentInit {
}
}
}

itemClick(event, item: MenuItem | MegaMenuItem) {
if (item.disabled) {
event.preventDefault();
return;
}

if (!item.url) {
event.preventDefault();
}

if (item.command) {
item.command({
originalEvent: event,
item: item
});
}

this.activeItem = null;
}

getColumnClass(menuitem: MegaMenuItem) {
let length = menuitem.items ? menuitem.items.length: 0;
let columnClass;
switch(length) {
case 2:
columnClass= 'p-megamenu-col-6';
break;

case 3:
columnClass= 'p-megamenu-col-4';
break;

case 4:
columnClass= 'p-megamenu-col-3';
break;

case 6:
columnClass= 'p-megamenu-col-2';
break;

default:
columnClass= 'p-megamenu-col-12';
break;
}

return columnClass;
}

Expand Down Expand Up @@ -240,4 +240,4 @@ export class MegaMenu implements AfterContentInit {
exports: [MegaMenu,RouterModule],
declarations: [MegaMenu]
})
export class MegaMenuModule { }
export class MegaMenuModule { }
2 changes: 1 addition & 1 deletion src/app/components/menu/menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export class MenuItemContent {
</ng-template>
<ng-template ngFor let-item [ngForOf]="model" *ngIf="!hasSubMenu()">
<li class="p-menu-separator" *ngIf="item.separator" [ngClass]="{'p-hidden': item.visible === false}"></li>
<li class="p-menuitem" *ngIf="!item.separator" [pMenuItemContent]="item" [ngClass]="{'p-hidden': item.visible === false}" [ngStyle]="item.style" [class]="item.styleClass"></li>
<li class="p-menuitem" *ngIf="!item.separator" [pMenuItemContent]="item" [ngClass]="{'p-hidden': item.visible === false}" [ngStyle]="item.style" [class]="item.styleClass" pTooltip [tooltipOptions]="item.tooltipOptions"></li>
</ng-template>
</ul>
</div>
Expand Down
Loading

0 comments on commit 528fc93

Please sign in to comment.