-
Notifications
You must be signed in to change notification settings - Fork 0
/
MenuButton.ts
77 lines (65 loc) · 2.26 KB
/
MenuButton.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { Button, type ButtonOptions, buttonTemplate } from './Button';
import { createCustomEvent } from '../util/EventUtils';
import { TOGGLE_MENU_EVENT, type ToggleMenuEvent } from '../events/ToggleMenuEvent';
import { Attribute } from '../util/Attribute';
import { createTemplate } from '../util/TemplateUtils';
const template = createTemplate('theoplayer-menu-button', buttonTemplate(`<slot></slot>`));
/**
* `<theoplayer-menu-button>` - A menu button that opens a {@link Menu}.
*
* @attribute `menu` - The ID of the menu to open.
* @group Components
*/
export class MenuButton extends Button {
static get observedAttributes() {
return [...Button.observedAttributes, Attribute.MENU];
}
constructor(options?: Partial<ButtonOptions>) {
super({ template: template(), ...options });
this._upgradeProperty('menu');
}
override connectedCallback() {
super.connectedCallback();
if (!this.hasAttribute('aria-haspopup')) {
this.setAttribute('aria-haspopup', 'true');
}
}
/**
* The ID of the menu to open.
*/
get menu(): string | null {
return this.getAttribute(Attribute.MENU);
}
set menu(menuId: string | null) {
if (menuId) {
this.setAttribute(Attribute.MENU, menuId);
} else {
this.removeAttribute(Attribute.MENU);
}
}
override attributeChangedCallback(attrName: string, oldValue: any, newValue: any) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === Attribute.MENU) {
if (!this.hasAttribute('aria-controls') || this.getAttribute('aria-controls') === oldValue) {
this.setAttribute('aria-controls', newValue);
}
}
}
protected override handleClick() {
const menu = this.menu;
if (menu) {
const event: ToggleMenuEvent = createCustomEvent(TOGGLE_MENU_EVENT, {
bubbles: true,
composed: true,
detail: { menu }
});
this.dispatchEvent(event);
}
}
}
customElements.define('theoplayer-menu-button', MenuButton);
declare global {
interface HTMLElementTagNameMap {
'theoplayer-menu-button': MenuButton;
}
}