feat(dees-appui-appbar): implement dynamic menu system with support for submenus, shortcuts, and user account features
feat(dees-contextmenu): adjust menu item positioning for improved alignment fix(dees-appui-appbar.demo): add demo functionality for app bar with dynamic menu items and user interactions feat(interfaces): create IAppBarMenuItem interface for enhanced menu item configurations docs: add comprehensive improvement plan for dees-appui-appbar component
This commit is contained in:
Juergen Kunz
@ -1,59 +1,319 @@
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
property,
|
||||
state,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
import { demoFunc } from './dees-appui-appbar.demo.js';
|
||||
|
||||
// Import required components
|
||||
import './dees-icon.js';
|
||||
import './dees-windowcontrols.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-appui-appbar': DeesAppuiBar;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-appui-appbar')
|
||||
export class DeesAppuiBar extends DeesElement {
|
||||
public static demo = () => html`<dees-appui-appbar></dees-appui-appbar>`;
|
||||
public static demo = demoFunc;
|
||||
|
||||
// INSTANCE PROPERTIES
|
||||
@property({ type: Array })
|
||||
public menuItems: interfaces.IAppBarMenuItem[] = [];
|
||||
|
||||
@property({ type: String })
|
||||
public breadcrumbs: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public breadcrumbSeparator: string = ' > ';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public showWindowControls: boolean = true;
|
||||
|
||||
@property({ type: String })
|
||||
public theme: 'light' | 'dark' = 'dark';
|
||||
|
||||
@property({ type: Object })
|
||||
public user?: {
|
||||
name: string;
|
||||
avatar?: string;
|
||||
status?: 'online' | 'offline' | 'busy' | 'away';
|
||||
};
|
||||
|
||||
@property({ type: Boolean })
|
||||
public showSearch: boolean = false;
|
||||
|
||||
// STATE
|
||||
@state()
|
||||
private activeMenu: string | null = null;
|
||||
|
||||
@state()
|
||||
private openDropdowns: Set<string> = new Set();
|
||||
|
||||
@state()
|
||||
private focusedItem: string | null = null;
|
||||
|
||||
@state()
|
||||
private focusedDropdownItem: number = -1;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
/* CSS Variables for theming */
|
||||
--appbar-height: 40px;
|
||||
--appbar-bg: var(--dees-color-appbar-bg, #000000);
|
||||
--appbar-text: var(--dees-color-appbar-text, #ffffff80);
|
||||
--appbar-text-hover: var(--dees-color-appbar-text-hover, #ffffff);
|
||||
--appbar-border: var(--dees-color-appbar-border, #202020);
|
||||
--appbar-hover: var(--dees-color-appbar-hover, #ffffff20);
|
||||
--appbar-active: var(--dees-color-appbar-active, #ffffff30);
|
||||
--appbar-font-size: 12px;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #202020;
|
||||
background: #000000;
|
||||
color: #ffffff80;
|
||||
font-size: 12px;
|
||||
height: var(--appbar-height);
|
||||
border-bottom: 1px solid var(--appbar-border);
|
||||
background: var(--appbar-bg);
|
||||
color: var(--appbar-text);
|
||||
font-size: var(--appbar-font-size);
|
||||
display: grid;
|
||||
grid-template-columns: ${cssManager.cssGridColumns(3, 20)};
|
||||
grid-template-columns: ${cssManager.cssGridColumns(3, 20)};
|
||||
-webkit-app-region: drag;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
:host([theme="light"]) {
|
||||
--appbar-bg: #ffffff;
|
||||
--appbar-text: #00000080;
|
||||
--appbar-text-hover: #000000;
|
||||
--appbar-border: #e0e0e0;
|
||||
--appbar-hover: #00000010;
|
||||
--appbar-active: #00000020;
|
||||
}
|
||||
|
||||
.menus {
|
||||
display: flex;
|
||||
padding-left: 8px;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
position: relative;
|
||||
line-height: 24px;
|
||||
padding: 0px 8px;
|
||||
padding: 0px 12px;
|
||||
margin: 8px 0px;
|
||||
border-radius: 4px;
|
||||
-webkit-app-region: no-drag;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Optional: Style for menu items with icons (not typically used for top-level items) */
|
||||
.menuItem dees-icon {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.menuItem:hover {
|
||||
background: #ffffff20;
|
||||
background: var(--appbar-hover);
|
||||
color: var(--appbar-text-hover);
|
||||
}
|
||||
|
||||
.menuItem.active {
|
||||
background: var(--appbar-active);
|
||||
color: var(--appbar-text-hover);
|
||||
}
|
||||
|
||||
.menuItem[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.menuItem:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--appbar-text);
|
||||
}
|
||||
|
||||
|
||||
/* Dropdown styles */
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 200px;
|
||||
background: var(--appbar-bg);
|
||||
border: 1px solid var(--appbar-border);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
margin-top: 4px;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dropdown.open {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item.focused {
|
||||
background: var(--appbar-hover);
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background: var(--appbar-border);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.dropdown-item[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dropdown-item .shortcut {
|
||||
margin-left: auto;
|
||||
opacity: 0.6;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Breadcrumbs */
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
color: var(--appbar-text);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.breadcrumb-item:hover {
|
||||
color: var(--appbar-text-hover);
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
margin: 0 8px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Account section */
|
||||
.account {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.search-icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.user-info:hover {
|
||||
background: var(--appbar-hover);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin: 8px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: var(--appbar-active);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-status {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--appbar-bg);
|
||||
}
|
||||
|
||||
.user-status.online {
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
.user-status.offline {
|
||||
background: #757575;
|
||||
}
|
||||
|
||||
.user-status.busy {
|
||||
background: #f44336;
|
||||
}
|
||||
|
||||
.user-status.away {
|
||||
background: #ff9800;
|
||||
}
|
||||
`,
|
||||
];
|
||||
@ -62,16 +322,367 @@ export class DeesAppuiBar extends DeesElement {
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="menus">
|
||||
<dees-windowcontrols></dees-windowcontrols>
|
||||
<div class="menuItem">File</div>
|
||||
<div class="menuItem">View</div>
|
||||
<div class="menuItem">Help</div>
|
||||
<div class="menuItem">Terminal</div>
|
||||
${this.showWindowControls ? html`<dees-windowcontrols></dees-windowcontrols>` : ''}
|
||||
${this.renderMenuItems()}
|
||||
</div>
|
||||
<div class="breadcrumbs">
|
||||
tool:social.io > org:design.estate > prop:lossless.com
|
||||
${this.renderBreadcrumbs()}
|
||||
</div>
|
||||
<div class="account">
|
||||
${this.renderAccountSection()}
|
||||
</div>
|
||||
<div class="account"></div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderMenuItems(): TemplateResult {
|
||||
return html`
|
||||
${this.menuItems.map((item, index) => this.renderMenuItem(item, `menu-${index}`))}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderMenuItem(item: interfaces.IAppBarMenuItem, itemId: string): TemplateResult {
|
||||
if ('divider' in item && item.divider) {
|
||||
return html`<div class="dropdown-divider"></div>`;
|
||||
}
|
||||
|
||||
const menuItem = item as interfaces.IAppBarMenuItemRegular;
|
||||
const isActive = this.activeMenu === itemId;
|
||||
const hasSubmenu = menuItem.submenu && menuItem.submenu.length > 0;
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="menuItem ${isActive ? 'active' : ''}"
|
||||
?disabled=${menuItem.disabled}
|
||||
tabindex="${menuItem.disabled ? -1 : 0}"
|
||||
data-item-id="${itemId}"
|
||||
@click=${() => this.handleMenuClick(menuItem, itemId)}
|
||||
@keydown=${(e: KeyboardEvent) => this.handleMenuKeydown(e, menuItem, itemId)}
|
||||
role="menuitem"
|
||||
aria-haspopup="${hasSubmenu}"
|
||||
aria-expanded="${isActive}"
|
||||
>
|
||||
${menuItem.iconName ? html`<dees-icon .iconName=${menuItem.iconName}></dees-icon>` : ''}
|
||||
${menuItem.name}
|
||||
${hasSubmenu ? this.renderDropdown(menuItem.submenu, itemId, isActive) : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderDropdown(items: interfaces.IAppBarMenuItem[], parentId: string, isOpen: boolean): TemplateResult {
|
||||
return html`
|
||||
<div
|
||||
class="dropdown ${isOpen ? 'open' : ''}"
|
||||
@click=${(e: Event) => e.stopPropagation()}
|
||||
@keydown=${(e: KeyboardEvent) => this.handleDropdownKeydown(e, items, parentId)}
|
||||
tabindex="${isOpen ? 0 : -1}"
|
||||
role="menu"
|
||||
>
|
||||
${items.map((item, index) => this.renderDropdownItem(item, `${parentId}-${index}`))}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderDropdownItem(item: interfaces.IAppBarMenuItem, itemId: string): TemplateResult {
|
||||
if ('divider' in item && item.divider) {
|
||||
return html`<div class="dropdown-divider"></div>`;
|
||||
}
|
||||
|
||||
const menuItem = item as interfaces.IAppBarMenuItemRegular;
|
||||
const itemIndex = parseInt(itemId.split('-').pop() || '0');
|
||||
const isFocused = this.focusedDropdownItem === itemIndex;
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="dropdown-item ${isFocused ? 'focused' : ''}"
|
||||
?disabled=${menuItem.disabled}
|
||||
@click=${() => this.handleDropdownItemClick(menuItem)}
|
||||
@mouseenter=${() => this.focusedDropdownItem = itemIndex}
|
||||
role="menuitem"
|
||||
tabindex="${menuItem.disabled ? -1 : 0}"
|
||||
>
|
||||
${menuItem.iconName ? html`<dees-icon .iconName=${menuItem.iconName}></dees-icon>` : ''}
|
||||
<span>${menuItem.name}</span>
|
||||
${menuItem.shortcut ? html`<span class="shortcut">${menuItem.shortcut}</span>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderBreadcrumbs(): TemplateResult {
|
||||
if (!this.breadcrumbs) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const parts = this.breadcrumbs.split(this.breadcrumbSeparator);
|
||||
return html`
|
||||
${parts.map((part, index) => html`
|
||||
${index > 0 ? html`<span class="breadcrumb-separator">${this.breadcrumbSeparator}</span>` : ''}
|
||||
<span
|
||||
class="breadcrumb-item"
|
||||
@click=${() => this.handleBreadcrumbClick(part, index)}
|
||||
>
|
||||
${part}
|
||||
</span>
|
||||
`)}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderAccountSection(): TemplateResult {
|
||||
return html`
|
||||
${this.showSearch ? html`
|
||||
<dees-icon
|
||||
class="search-icon"
|
||||
.iconName=${'search'}
|
||||
@click=${this.handleSearchClick}
|
||||
></dees-icon>
|
||||
` : ''}
|
||||
${this.user ? html`
|
||||
<div class="user-info" @click=${this.handleUserClick}>
|
||||
<div class="user-avatar">
|
||||
${this.user.avatar ?
|
||||
html`<img src="${this.user.avatar}" alt="${this.user.name}">` :
|
||||
html`${this.user.name.charAt(0).toUpperCase()}`
|
||||
}
|
||||
${this.user.status ? html`
|
||||
<div class="user-status ${this.user.status}"></div>
|
||||
` : ''}
|
||||
</div>
|
||||
<span>${this.user.name}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
`;
|
||||
}
|
||||
|
||||
// Event handlers
|
||||
private handleMenuClick(item: interfaces.IAppBarMenuItemRegular, itemId: string) {
|
||||
if (item.disabled) return;
|
||||
|
||||
if (item.submenu && item.submenu.length > 0) {
|
||||
// Toggle dropdown
|
||||
if (this.activeMenu === itemId) {
|
||||
this.activeMenu = null;
|
||||
} else {
|
||||
this.activeMenu = itemId;
|
||||
}
|
||||
} else {
|
||||
// Execute action
|
||||
this.activeMenu = null;
|
||||
if (item.action) {
|
||||
item.action();
|
||||
}
|
||||
this.dispatchEvent(new CustomEvent('menu-select', {
|
||||
detail: { item },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
private handleDropdownItemClick(item: interfaces.IAppBarMenuItemRegular) {
|
||||
if (item.disabled) return;
|
||||
|
||||
this.activeMenu = null;
|
||||
if (item.action) {
|
||||
item.action();
|
||||
}
|
||||
this.dispatchEvent(new CustomEvent('menu-select', {
|
||||
detail: { item },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private handleMenuKeydown(e: KeyboardEvent, item: interfaces.IAppBarMenuItemRegular, itemId: string) {
|
||||
switch (e.key) {
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
e.preventDefault();
|
||||
this.handleMenuClick(item, itemId);
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
if (item.submenu && this.activeMenu === itemId) {
|
||||
e.preventDefault();
|
||||
// Focus first non-disabled item in dropdown
|
||||
this.focusedDropdownItem = 0;
|
||||
const firstValidItem = this.findNextValidItem(item.submenu, -1, 1);
|
||||
if (firstValidItem !== -1) {
|
||||
this.focusedDropdownItem = firstValidItem;
|
||||
// Focus the dropdown element
|
||||
setTimeout(() => {
|
||||
const dropdown = this.renderRoot.querySelector('.dropdown.open');
|
||||
if (dropdown) {
|
||||
(dropdown as HTMLElement).focus();
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
this.activeMenu = null;
|
||||
this.focusedDropdownItem = -1;
|
||||
break;
|
||||
case 'Tab':
|
||||
// Let default tab navigation work but close dropdown
|
||||
if (this.activeMenu === itemId) {
|
||||
this.activeMenu = null;
|
||||
this.focusedDropdownItem = -1;
|
||||
}
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
e.preventDefault();
|
||||
this.focusNextMenuItem(itemId, 1);
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
e.preventDefault();
|
||||
this.focusNextMenuItem(itemId, -1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private handleBreadcrumbClick(breadcrumb: string, index: number) {
|
||||
this.dispatchEvent(new CustomEvent('breadcrumb-navigate', {
|
||||
detail: { breadcrumb, index },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private handleSearchClick() {
|
||||
this.dispatchEvent(new CustomEvent('search-click', {
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private handleUserClick() {
|
||||
this.dispatchEvent(new CustomEvent('user-menu-open', {
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
async connectedCallback() {
|
||||
await super.connectedCallback();
|
||||
// Add global click listener to close dropdowns
|
||||
this.addEventListener('click', this.handleGlobalClick);
|
||||
document.addEventListener('click', this.handleDocumentClick);
|
||||
}
|
||||
|
||||
async disconnectedCallback() {
|
||||
await super.disconnectedCallback();
|
||||
document.removeEventListener('click', this.handleDocumentClick);
|
||||
}
|
||||
|
||||
private handleGlobalClick = (e: Event) => {
|
||||
// Prevent closing when clicking inside
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
private handleDocumentClick = () => {
|
||||
// Close all dropdowns when clicking outside
|
||||
this.activeMenu = null;
|
||||
this.focusedDropdownItem = -1;
|
||||
}
|
||||
|
||||
private handleDropdownKeydown(e: KeyboardEvent, items: interfaces.IAppBarMenuItem[], _parentId: string) {
|
||||
const validItems = items.filter(item => !('divider' in item && item.divider));
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
const nextIndex = this.findNextValidItem(items, this.focusedDropdownItem, 1);
|
||||
if (nextIndex !== -1) {
|
||||
this.focusedDropdownItem = nextIndex;
|
||||
}
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
const prevIndex = this.findNextValidItem(items, this.focusedDropdownItem, -1);
|
||||
if (prevIndex !== -1) {
|
||||
this.focusedDropdownItem = prevIndex;
|
||||
}
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (this.focusedDropdownItem !== -1) {
|
||||
const focusedItem = validItems[this.focusedDropdownItem];
|
||||
if (focusedItem && 'action' in focusedItem && !focusedItem.disabled) {
|
||||
this.handleDropdownItemClick(focusedItem as interfaces.IAppBarMenuItemRegular);
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'Home':
|
||||
e.preventDefault();
|
||||
const firstIndex = this.findNextValidItem(items, -1, 1);
|
||||
if (firstIndex !== -1) {
|
||||
this.focusedDropdownItem = firstIndex;
|
||||
}
|
||||
break;
|
||||
case 'End':
|
||||
e.preventDefault();
|
||||
const lastIndex = this.findNextValidItem(items, items.length, -1);
|
||||
if (lastIndex !== -1) {
|
||||
this.focusedDropdownItem = lastIndex;
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
e.preventDefault();
|
||||
this.activeMenu = null;
|
||||
this.focusedDropdownItem = -1;
|
||||
// Return focus to menu item
|
||||
const menuItem = this.renderRoot.querySelector(`.menuItem.active`);
|
||||
if (menuItem) {
|
||||
(menuItem as HTMLElement).focus();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private findNextValidItem(items: interfaces.IAppBarMenuItem[], currentIndex: number, direction: number): number {
|
||||
let index = currentIndex + direction;
|
||||
|
||||
while (index >= 0 && index < items.length) {
|
||||
const item = items[index];
|
||||
// Skip dividers and disabled items
|
||||
if (!('divider' in item && item.divider) && !('disabled' in item && item.disabled)) {
|
||||
return index;
|
||||
}
|
||||
index += direction;
|
||||
}
|
||||
|
||||
return -1;
|
||||
}
|
||||
|
||||
private focusNextMenuItem(currentItemId: string, direction: number) {
|
||||
const menuItems = Array.from(this.renderRoot.querySelectorAll('.menuItem'));
|
||||
const currentIndex = menuItems.findIndex(item => item.getAttribute('data-item-id') === currentItemId);
|
||||
|
||||
if (currentIndex === -1) return;
|
||||
|
||||
let nextIndex = currentIndex + direction;
|
||||
|
||||
// Wrap around
|
||||
if (nextIndex < 0) {
|
||||
nextIndex = menuItems.length - 1;
|
||||
} else if (nextIndex >= menuItems.length) {
|
||||
nextIndex = 0;
|
||||
}
|
||||
|
||||
// Find next non-disabled item
|
||||
let attempts = 0;
|
||||
while (attempts < menuItems.length) {
|
||||
const nextItem = menuItems[nextIndex] as HTMLElement;
|
||||
if (!nextItem.hasAttribute('disabled')) {
|
||||
nextItem.focus();
|
||||
// Close current dropdown if open
|
||||
if (this.activeMenu) {
|
||||
this.activeMenu = null;
|
||||
this.focusedDropdownItem = -1;
|
||||
}
|
||||
break;
|
||||
}
|
||||
nextIndex = (nextIndex + direction + menuItems.length) % menuItems.length;
|
||||
attempts++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user