/**
* @Datei button.js
* /
importiere ClickableComponent aus './clickable-component.js';
importiere Komponente von './komponente';
import log from './utils/log.js';
importiere {assign} von './utils/obj';
import keycode from 'keycode';
importieren Sie {createEl} aus './utils/dom.js';
/**
* Basisklasse für alle Schaltflächen.
*
* @erweitert ClickableComponent
* /
class Button extends ClickableComponent {
/**
* Erstellen Sie das DOM-Element `Button`.
*
* @param {string} [tag="button"]
* Der Knotentyp des Elements. Dieses Argument wird ignoriert: egal, was
* übergeben wird, wird immer ein `button`-Element erstellt.
*
* @param {Object} [props={}]
* Ein Objekt mit Eigenschaften, die für das Element festgelegt werden sollen.
*
* @param {Object} [attributes={}]
* Ein Objekt mit Attributen, die für das Element festgelegt werden sollen.
*
* @return {Element}
* Das Element, das erstellt wird.
* /
createEl(tag, props = {}, attributes = {}) {
tag = 'Schaltfläche';
props = assign({
klassenname: this.buildCSSClass()
}, props);
// Attribute für das Schaltflächenelement hinzufügen
attribute = assign({
// Erforderlich, da der Standardschaltflächentyp "Senden" ist
typ: 'Schaltfläche'
}, attributes);
const el = createEl(tag, props, attributes);
el.appendChild(createEl('span', {
className: 'vjs-icon-placeholder'
}, {
aria-hidden": wahr
}));
this.createControlTextEl(el);
zurück el;
}
/**
* Hinzufügen einer untergeordneten "Komponente" innerhalb dieser "Schaltfläche".
*
* @param {String|Komponente} Kind
* Der Name oder die Instanz eines hinzuzufügenden Kindes.
*
* @param {Object} [options={}]
* Der Schlüssel/Wertspeicher der Optionen, die an die Kinder von
* das Kind.
*
* @return {Komponente}
* Die Komponente, die als untergeordnetes Element hinzugefügt wird. Bei Verwendung einer Zeichenkette wird die
* komponente" wird durch diesen Prozess erstellt.
*
* @veraltet seit Version 5
* /
addChild(child, options = {}) {
const className = this.constructor.name;
log.warn(`Das Hinzufügen eines aktionsfähigen (vom Benutzer steuerbaren) untergeordneten Elements zu einer Schaltfläche (${className}) wird nicht unterstützt; verwenden Sie stattdessen eine ClickableComponent.`);
// Vermeiden Sie die Fehlermeldung, die von der addChild-Methode von ClickableComponent erzeugt wird
return Component.prototype.addChild.call(this, child, options);
}
/**
* Aktivieren Sie das Element `Button`, damit es aktiviert oder angeklickt werden kann. Verwenden Sie dies mit
* {@link Button#disable}.
* /
enable() {
super.enable();
this.el_.removeAttribute('disabled');
}
/**
* Deaktivieren Sie das Element `Button`, so dass es nicht aktiviert oder angeklickt werden kann. Verwenden Sie dies mit
* {@link Button#enable}.
* /
deaktivieren() {
super.disable();
this.el_.setAttribute('disabled', 'disabled');
}
/**
* Diese Funktion wird aufgerufen, wenn ein `Button` den Fokus hat und `keydown` über eine Taste ausgelöst wird
* presse.
*
* @param {EventTarget~Event} event
* Das Ereignis, das zum Aufruf dieser Funktion geführt hat.
*
* @listens keydown
* /
handleKeyDown(event) {
// Leertaste oder Eingabetaste ignorieren, die vom Browser für
// eine Schaltfläche - allerdings nicht für ihre Oberklasse, ClickableComponent. Auch,
// Verhindern, dass sich das Ereignis durch das DOM ausbreitet und den Player auslöst
// Hotkeys. Wir verhindernDefault hier nicht, weil wir _wollen_, dass der Browser
// behandeln.
if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
event.stopPropagation();
rückkehr;
}
// Übergabe der Tastendruckbehandlung für nicht unterstützte Tasten
super.handleKeyDown(event);
}
}
Component.registerComponent('Button', Button);
standard-Button exportieren;