/**
* @file menu-item.js
* /
importiere ClickableComponent aus '.. /clickable-component.js ';
importiere Komponente aus '../component.js';
importiere {assign} von '../utils/obj';
importiere {MenuKeys} aus '. /menu-keys.js ';
import keycode from 'keycode';
importiere {createEL} aus '.. /utils/dom.js ';
/**
* Die Komponente für einen Menüpunkt. `<li>`
*
* @erweitert ClickableComponent
* /
Klasse MenuItem erweitert ClickableComponent {
/**
* Erzeugt eine Instanz der Klasse this.
*
* @param {Player} Spieler
* Der `Player`, dem diese Klasse zugeordnet werden soll.
*
* @param {Object} [options={}]
* Der Schlüssel/Wertspeicher der Playeroptionen.
*
* /
constructor(spieler, optionen) {
super(Spieler, Optionen);
this.selectable = Optionen.auswählbar;
this.isSelected_ = optionen.ausgewählt || falsch;
this.multiSelectable = Optionen.multiSelectable;
this.selected (this.isSelected_);
if (this.selectable) {
wenn (this.multiSelectable) {
this.el_.setAttribute ('role', 'menuitemcheckbox');
} sonst {
this.el_.setAttribute ('role', 'menuitemradio');
}
} sonst {
this.el_.setAttribute ('Rolle', 'Menüpunkt');
}
}
/**
* Erstelle das DOM-Element von `MenuItem
*
* @param {string} [typ=li]
* Der Knotentyp des Elements, der nicht wirklich verwendet wird, ist immer auf `li` gesetzt.
*
* @param {Object} [props={}]
* Ein Objekt mit Eigenschaften, die für das Element festgelegt werden sollten
*
* @param {Objekt} [attrs= {}]
* Ein Objekt mit Attributen, die für das Element gesetzt werden sollen
*
* @return {Element}
* Das Element, das erstellt wird.
* /
createEl(type, props, attrs) {
//Das Steuerelement ist textuell, nicht nur ein Symbol
this.noIconControl = wahr;
const el = super.createEl ('li', assign ({
Klassenname: 'vjs-menu-item',
tabIndex: -1
}, Requisiten), Attren);
//tausche das Symbol mit dem Text des Menüeintrags aus.
el.replaceChild (createEl ('span', {
Klassenname: 'vjs-menu-item-text',
TextInhalt: this.localize (this.options_.label)
}), el.querySelector ('.vjs-icon-placeholder'));
zurück el;
}
/**
* Ignoriere Tasten, die vom Menü benutzt werden, übergib aber alle anderen. Sehen
* {@link ClickableComponent#handleKeyDown} für Instanzen, in denen dies aufgerufen wird.
*
* @param {EventTarget~Event} event
* Das "Keydown"-Ereignis, das zum Aufruf dieser Funktion geführt hat.
*
* @listens keydown
* /
handleKeyDown(event) {
wenn (! menuKeys.some ((Schlüssel) => keycode.isEventKey (Ereignis, Schlüssel)) {
//Keydown-Behandlung für ungenutzte Schlüssel weiterleiten
super.handleKeyDown(event);
}
}
/**
* Jeder Klick auf ein `MenuItem` versetzt es in den ausgewählten Zustand.
* Siehe {@link ClickableComponent#handleClick} für Instanzen, in denen dies aufgerufen wird.
*
* @param {EventTarget~Event} event
* Das `Keydown`-, `Tap`- oder `Click`-Ereignis, das diese Funktion ausgelöst hat
* genannt.
*
* @listens tap
* @listens klicken
* /
handleClick(event) {
this.selected (wahr);
}
/**
* Stellen Sie den Status für diesen Menüpunkt als ausgewählt ein oder nicht.
*
* @param {boolean} ausgewählt
* ob der Menüpunkt ausgewählt ist oder nicht
* /
ausgewählt (ausgewählt) {
if (this.selectable) {
wenn (ausgewählt) {
this.addClass ('vjs-selected');
this.el_.setAttribute ('aria-checked', 'wahr');
//aria-checked wird von Browsern/Screenreadern nicht vollständig unterstützt,
//geben Sie dem Screenreader also den ausgewählten Status im Steuertext an.
this.controlText (', ausgewählt');
this.isSelected_ = wahr;
} sonst {
this.removeClass ('vjs-selected');
this.el_.setAttribute ('aria-checked', 'falsch');
//Zeigt dem Bildschirmleser einen nicht ausgewählten Status an
this.controlText („);
this.isSelected_ = falsch;
}
}
}
}
component.registerComponent ('MenuItem', MenuItem);
Exportieren Sie das Standard-MenuItem;