/**
* @botón de archivo.js
* /
importar ClickableComponent desde './clickable-component.js';
importar componente desde './componente';
importar registro desde './utils/log.js';
importar {asignar} desde './utils/obj';
importar código clave desde 'código clave';
importar {createEl} desde './utils/dom.js';
/**
* Clase base para todos los botones.
*
* @extiende Componente que se puede hacer clic
* /
El botón de clase extiende ClickableComponent {
/**
* Crear el elemento DOM `Button`s.
*
* @param {cadena} [etiqueta="botón"]
* El tipo de nodo del elemento. Este argumento es IGNORADO: pase lo que pase
* se pasa, siempre creará un elemento `button`.
*
* @param {Objeto} [props={}]
* Un objeto de propiedades que debe establecerse en el elemento.
*
* @param {Objeto} [atributos={}]
* Un objeto de atributos que debe establecerse en el elemento.
*
* @return {Elemento}
* El elemento que se crea.
* /
createEl(etiqueta, accesorios = {}, atributos = {}) {
etiqueta = 'botón';
accesorios = asignar ({
nombre de clase: this.buildCSSClass()
}, props);
// Agregar atributos para el elemento de botón
atributos = asignar ({
// Necesario ya que el tipo de botón predeterminado es "enviar"
tipo: 'botón'
}, attributes);
const el = createEl(etiqueta, props, atributos);
el.appendChild(createEl('span', {
className: 'vjs-icono-marcador de posición'
}, {
'aria-oculto': verdadero
}));
this.createControlTextEl(el);
volver el;
}
/**
* Agregue un 'Componente' secundario dentro de este 'Botón'.
*
* @param {cadena|Componente} niño
* El nombre o instancia de un niño para agregar.
*
* @param {Objeto} [opciones={}]
* El almacén de claves/valores de opciones que se pasarán a los hijos de
* el niño.
*
* @return {Componente}
* El `Componente` que se agrega como hijo. Cuando se usa una cuerda, el
* `Componente` será creado por este proceso.
*
* @obsoleto desde la versión 5
* /
addChild(hijo, opciones = {}) {
const className = this.constructor.name;
log.warn(`No se admite agregar un elemento secundario accionable (controlable por el usuario) a un botón (${className}); use un ClickableComponent en su lugar.`);
// Evite el mensaje de error generado por el método addChild de ClickableComponent
return Component.prototype.addChild.call(this, child, options);
}
/**
* Habilite el elemento `Botón` para que se pueda activar o hacer clic. Usa esto con
* {@botón de enlace#deshabilitar}.
* /
permitir() {
super.enable();
this.el_.removeAttribute('deshabilitado');
}
/**
* Deshabilite el elemento 'Botón' para que no se pueda activar o hacer clic. Usa esto con
* {@botón de enlace#habilitar}.
* /
desactivar() {
super.disable();
this.el_.setAttribute('deshabilitado', 'deshabilitado');
}
/**
* Esto se llama cuando un `Botón` tiene el foco y `keydown` se activa a través de una tecla
* prensa.
*
* @param {EventTarget~Evento} evento
* El evento que provocó que se llamara a esta función.
*
* @escucha tecla abajo
* /
handleKeyDown(evento) {
// Ignorar la operación de la tecla Espacio o Intro, que es manejada por el navegador para
// un botón, aunque no para su superclase, ClickableComponent. También,
// evita que el evento se propague a través del DOM y active Player
// teclas de acceso rápido. No evitamos Default aquí porque _queremos_ que el navegador
// manejarlo.
if (keycode.isEventKey(evento, 'Espacio') || keycode.isEventKey(evento, 'Entrar')) {
event.stopPropagation();
devolver;
}
// Pasar el manejo de pulsaciones de teclas para teclas no compatibles
super.handleKeyDown(evento);
}
}
Componente.registerComponent('Botón', Botón);
Exportar botón predeterminado;