Skip to content

Commit

Permalink
Fixed #13763 - Add MenuItem API id property support for menu components
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Sep 27, 2023
1 parent e3a643c commit 75a070d
Show file tree
Hide file tree
Showing 9 changed files with 143 additions and 120 deletions.
16 changes: 6 additions & 10 deletions src/app/components/breadcrumb/breadcrumb.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
@Component({
selector: 'p-breadcrumb',
template: `
<div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-breadcrumb p-component'" [attr.data-pc-name]="'breadcrumb'" [attr.data-pc-section]="'root'">
<ul [attr.data-pc-section]="'menu'" class="p-breadcrumb-list">
<li [class]="home.styleClass" [ngClass]="{ 'p-breadcrumb-home': true, 'p-disabled': home.disabled }" [ngStyle]="home.style" *ngIf="home" pTooltip [tooltipOptions]="home.tooltipOptions" [attr.data-pc-section]="'home'">
<nav [class]="styleClass" [ngStyle]="style" [ngClass]="'p-breadcrumb p-component'" [attr.data-pc-name]="'breadcrumb'" [attr.data-pc-section]="'root'">
<ol [attr.data-pc-section]="'menu'" class="p-breadcrumb-list">
<li [class]="home.styleClass" [attr.id]="home.id" [ngClass]="{ 'p-breadcrumb-home': true, 'p-disabled': home.disabled }" [ngStyle]="home.style" *ngIf="home" pTooltip [tooltipOptions]="home.tooltipOptions" [attr.data-pc-section]="'home'">
<a
[href]="home.url ? home.url : null"
*ngIf="!home.routerLink"
Expand All @@ -24,7 +24,6 @@ import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
(click)="onClick($event, home)"
[target]="home.target"
[attr.title]="home.title"
[attr.id]="home.id"
[attr.tabindex]="home.disabled ? null : '0'"
[ariaCurrentWhenActive]="isCurrentUrl(home)"
>
Expand All @@ -46,7 +45,6 @@ import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
(click)="onClick($event, home)"
[target]="home.target"
[attr.title]="home.title"
[attr.id]="home.id"
[attr.tabindex]="home.disabled ? null : '0'"
[ariaCurrentWhenActive]="isCurrentUrl(home)"
[fragment]="home.fragment"
Expand All @@ -69,15 +67,14 @@ import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
<ng-template *ngTemplateOutlet="separatorTemplate"></ng-template>
</li>
<ng-template ngFor let-item let-end="last" [ngForOf]="model">
<li [class]="item.styleClass" [ngStyle]="item.style" [ngClass]="{ 'p-disabled': item.disabled }" pTooltip [tooltipOptions]="item.tooltipOptions" [attr.data-pc-section]="'menuitem'">
<li [class]="item.styleClass" [attr.id]="item.id" [ngStyle]="item.style" [ngClass]="{ 'p-disabled': item.disabled }" pTooltip [tooltipOptions]="item.tooltipOptions" [attr.data-pc-section]="'menuitem'">
<a
*ngIf="!item.routerLink"
[attr.href]="item.url ? item.url : null"
class="p-menuitem-link"
(click)="onClick($event, item)"
[target]="item.target"
[attr.title]="item.title"
[attr.id]="item.id"
[attr.tabindex]="item.disabled ? null : '0'"
[ariaCurrentWhenActive]="isCurrentUrl(item)"
>
Expand All @@ -97,7 +94,6 @@ import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
(click)="onClick($event, item)"
[target]="item.target"
[attr.title]="item.title"
[attr.id]="item.id"
[attr.tabindex]="item.disabled ? null : '0'"
[fragment]="item.fragment"
[queryParamsHandling]="item.queryParamsHandling"
Expand All @@ -119,8 +115,8 @@ import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
<ng-template *ngTemplateOutlet="separatorTemplate"></ng-template>
</li>
</ng-template>
</ul>
</div>
</ol>
</nav>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
Expand Down
35 changes: 22 additions & 13 deletions src/app/components/contextmenu/contextmenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ export class ContextMenuSub {
}

getItemId(processedItem: any): string {
return `${this.menuId}_${processedItem.key}`;
return processedItem.item && processedItem.item?.id ? processedItem.item.id : `${this.menuId}_${processedItem.key}`;
}

getItemKey(processedItem: any): string {
Expand Down Expand Up @@ -489,7 +489,7 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {

activeItemPath = signal<any>([]);

focusedItemInfo = signal<any>({ index: -1, level: 0, parentKey: '' });
focusedItemInfo = signal<any>({ index: -1, level: 0, parentKey: '', item: null });

submenuVisible = signal<boolean>(false);

Expand All @@ -515,8 +515,8 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
}

get focusedItemId() {
const focusedItemInfo = this.focusedItemInfo();
return focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : ''}_${focusedItemInfo.index}` : null;
const focusedItem = this.focusedItemInfo();
return focusedItem.item && focusedItem.item?.id ? focusedItem.item.id : focusedItem.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(focusedItem.parentKey) ? '_' + focusedItem.parentKey : ''}_${focusedItem.index}` : null;
}

constructor(
Expand Down Expand Up @@ -668,10 +668,10 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
const selected = this.isSelected(processedItem);

if (selected) {
const { index, key, level, parentKey } = processedItem;
const { index, key, level, parentKey, item } = processedItem;

this.activeItemPath.set(this.activeItemPath().filter((p) => key !== p.key && key.startsWith(p.key)));
this.focusedItemInfo.set({ index, level, parentKey });
this.focusedItemInfo.set({ index, level, parentKey, item });

DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
} else {
Expand Down Expand Up @@ -757,7 +757,7 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {

if (grouped) {
this.onItemChange({ originalEvent: event, processedItem });
this.focusedItemInfo.set({ index: -1, parentKey: processedItem.key });
this.focusedItemInfo.set({ index: -1, parentKey: processedItem.key, item: processedItem.item });
this.searchValue = '';
this.onArrowDownKey(event);
}
Expand Down Expand Up @@ -790,7 +790,7 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
const root = ObjectUtils.isEmpty(processedItem.parent);

if (!root) {
this.focusedItemInfo.set({ index: -1, parentKey: parentItem ? parentItem.parentKey : '' });
this.focusedItemInfo.set({ index: -1, parentKey: parentItem ? parentItem.parentKey : '', item: processedItem.item });
this.searchValue = '';
this.onArrowDownKey(event);
}
Expand All @@ -817,13 +817,16 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {

onEscapeKey(event: KeyboardEvent) {
this.hide();
const processedItem = this.findVisibleItem(this.findFirstFocusedItemIndex());
this.focusedItemInfo.mutate((value) => {
value.index = this.findFirstFocusedItemIndex();
value.item = processedItem.item
});

event.preventDefault();
}


onTabKey(event: KeyboardEvent) {
if (this.focusedItemInfo().index !== -1) {
const processedItem = this.visibleItems[this.focusedItemInfo().index];
Expand Down Expand Up @@ -867,22 +870,22 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
activeItemPath.push(processedItem);
this.submenuVisible.set(true);
}
this.focusedItemInfo.set({ index, level, parentKey });
this.focusedItemInfo.set({ index, level, parentKey, item: processedItem.item });
this.activeItemPath.set(activeItemPath);

isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
}

onMenuFocus(event: any) {
this.focused = true;
const focusedItemInfo = this.focusedItemInfo().index !== -1 ? this.focusedItemInfo() : { index: -1, level: 0, parentKey: '' };
const focusedItemInfo = this.focusedItemInfo().index !== -1 ? this.focusedItemInfo() : { index: -1, level: 0, parentKey: '', item: null };

this.focusedItemInfo.set(focusedItemInfo);
}

onMenuBlur(event: any) {
this.focused = false;
this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '' });
this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null });
this.searchValue = '';
}

Expand Down Expand Up @@ -939,7 +942,7 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
hide() {
this.visible.set(false);
this.activeItemPath.set([]);
this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '' });
this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null});
}

toggle(event?: any) {
Expand All @@ -948,7 +951,7 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {

show(event: any) {
this.activeItemPath.set([]);
this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '' });
this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null });

this.pageX = event.pageX;
this.pageY = event.pageY;
Expand Down Expand Up @@ -1027,6 +1030,10 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
return matched;
}

findVisibleItem(index) {
return ObjectUtils.isNotEmpty(this.visibleItems) ? this.visibleItems[index] : null;
}

findLastFocusedItemIndex() {
const selectedIndex = this.findSelectedItemIndex();
return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex;
Expand Down Expand Up @@ -1063,9 +1070,11 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
}

changeFocusedItemIndex(event: any, index: number) {
const processedItem = this.findVisibleItem(index);
if (this.focusedItemInfo().index !== index) {
this.focusedItemInfo.mutate((value) => {
value.index = index;
value.item = processedItem.item;
});
this.scrollInView();
}
Expand Down
16 changes: 7 additions & 9 deletions src/app/components/dock/dock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ import { DomHandler } from 'primeng/dom';
>
<li
*ngFor="let item of model; let i = index"
[attr.id]="getItemId(i)"
[ngClass]="itemClass(i)"
[attr.id]="getItemId(item, i)"
[ngClass]="itemClass(item, i)"
role="menuitem"
[attr.aria-label]="item.label"
[attr.aria-disabled]="disabled(item)"
(click)="onItemClick($event, item)"
(mouseenter)="onItemMouseEnter(i)"
[attr.data-pc-section]="'menuitem'"
[attr.data-p-focused]="isItemActive(getItemId(i))"
[attr.data-p-focused]="isItemActive(getItemId(item, i))"
[attr.data-p-disabled]="disabled(item) || false"
>
<div class="p-menuitem-content" [attr.data-pc-section]="'content'">
Expand All @@ -55,7 +55,6 @@ import { DomHandler } from 'primeng/dom';
class="p-dock-link"
[routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
[target]="item.target"
[attr.id]="item.id"
[attr.tabindex]="item.disabled || readonly ? null : item.tabindex ? item.tabindex : '-1'"
pTooltip
[tooltipOptions]="item.tooltipOptions"
Expand All @@ -80,7 +79,6 @@ import { DomHandler } from 'primeng/dom';
[tooltipOptions]="item.tooltipOptions"
[ngClass]="{ 'p-disabled': item.disabled }"
[target]="item.target"
[attr.id]="item.id"
[attr.tabindex]="item.disabled || (i !== activeIndex && readonly) ? null : item.tabindex ? item.tabindex : '-1'"
[attr.aria-hidden]="true"
>
Expand Down Expand Up @@ -190,8 +188,8 @@ export class Dock implements AfterContentInit {
});
}

getItemId(index) {
return `${index}`;
getItemId(item, index) {
return item && item?.id ? item.id : `${index}`;
}

getItemProp(processedItem, name) {
Expand Down Expand Up @@ -347,15 +345,15 @@ export class Dock implements AfterContentInit {
return item.routerLink && !item.disabled;
}

itemClass(index: number) {
itemClass(item, index: number) {
return {
'p-dock-item': true,
'p-dock-item-second-prev': this.currentIndex - 2 === index,
'p-dock-item-prev': this.currentIndex - 1 === index,
'p-dock-item-current': this.currentIndex === index,
'p-dock-item-next': this.currentIndex + 1 === index,
'p-dock-item-second-next': this.currentIndex + 2 === index,
'p-focus': this.isItemActive(this.getItemId(index))
'p-focus': this.isItemActive(this.getItemId(item, index))
};
}
}
Expand Down
Loading

0 comments on commit 75a070d

Please sign in to comment.