/**
* fichier button.js
*/
import ClickableComponent de './clickable-component.js' ;
import Component from './component' ;
import log from './utils/log.js' ;
import {assign} from './utils/obj' ;
import keycode from 'keycode' ;
import {createEl} from './utils/dom.js' ;
/**
* Classe de base pour tous les boutons.
*
* @extends ClickableComponent
*/
class Button extends ClickableComponent {
/**
* Créez l'élément DOM `Button`.
*
* @param {string} [tag="button"]
* Le type de nœud de l'élément. Cet argument est IGNORÉ : quoi qu'il en soit, il n'y a pas d'autre solution que de faire appel à l'expertise d'un expert
* est passé, il créera toujours un élément `button`.
*
* @param {Objet} [props={}]
* Un objet de propriétés à définir sur l'élément.
*
* @param {Objet} [attributes={}]
* Un objet d'attributs à définir sur l'élément.
*
* @return {Element}
* L'élément qui est créé.
*/
createEl(tag, props = {}, attributes = {}) {
tag = 'button' ;
props = assign({
className : this.buildCSSClass()
}, props) ;
// Ajouter des attributs pour l'élément bouton
attributs = assign({
// Nécessaire puisque le type de bouton par défaut est "submit"
type : "button" (bouton)
}, attributs) ;
const el = createEl(tag, props, attributes) ;
el.appendChild(createEl('span', {
className : 'vjs-icon-placeholder'
}, {
aria-hidden" : vrai
})) ;
this.createControlTextEl(el) ;
return el ;
}
/**
* Ajouter un `Composant` enfant à l'intérieur de ce `Button`.
*
* @param {string|Composant} child
* Le nom ou l'instance d'un enfant à ajouter.
*
* @param {Objet} [options={}]
* Le magasin clé/valeur des options qui seront transmises aux enfants de
* l'enfant.
*
* @return {Component}
* Le `Composant` qui est ajouté en tant qu'enfant. Lors de l'utilisation d'une chaîne de caractères, l'option
* le composant sera créé par ce processus.
*
* @déprécié depuis la version 5
*/
addChild(child, options = {}) {
const className = this.constructor.name ;
log.warn(`L'ajout d'un enfant actionnable (contrôlable par l'utilisateur) à un bouton (${className}) n'est pas pris en charge ; utilisez plutôt un ClickableComponent.`) ;
// Éviter le message d'erreur généré par la méthode addChild de ClickableComponent
return Component.prototype.addChild.call(this, child, options) ;
}
/**
* Active l'élément `Button` pour qu'il puisse être activé ou cliqué. A utiliser avec
* {@link Button#disable}.
*/
enable() {
super.enable() ;
this.el_.removeAttribute('disabled') ;
}
/**
* Désactive l'élément `Button` afin qu'il ne puisse pas être activé ou cliqué. A utiliser avec
* {@link Button#enable}.
*/
disable() {
super.disable() ;
this.el_.setAttribute('disabled', 'disabled') ;
}
/**
* Cette fonction est appelée lorsqu'un `Button` a le focus et que le `keydown` est déclenché par une touche
* presse.
*
* @param {EventTarget~Event} event
* L'événement qui a provoqué l'appel de cette fonction.
*
* @listens keydown
*/
handleKeyDown(event) {
// Ignorer l'opération de la touche Espace ou Entrée, qui est gérée par le navigateur pour
// un bouton - mais pas pour sa super classe, ClickableComponent. En outre,
// empêche l'événement de se propager dans le DOM et de déclencher Player
// hotkeys. Nous n'utilisons pas preventDefault ici parce que nous _voulons_ que le navigateur puisse
// le gérer.
if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
event.stopPropagation() ;
retour ;
}
// Transmettre la gestion des pressions de touches pour les touches non prises en charge
super.handleKeyDown(event) ;
}
}
Component.registerComponent('Button', Button) ;
exporter le bouton par défaut ;