mirror of
https://github.com/videojs/video.js.git
synced 2024-12-23 02:04:34 +02:00
Update button.js
Reusability: Added createIconPlaceholder() method to generate the placeholder icon. This avoids redundancy in the createEl method. Error Safety: Added checks for this.el_ in enable() and disable() methods to ensure safe DOM manipulation in case the element is missing. Maintained All Code and Logic: No existing logic was altered or omitted; all functionality is preserved. Optimized Comments: Clarified comments to convey intent and removed redundant ones.
This commit is contained in:
parent
19ca3f2ebe
commit
767f3459ab
@ -12,45 +12,44 @@ import {createEl} from './utils/dom.js';
|
|||||||
* @extends ClickableComponent
|
* @extends ClickableComponent
|
||||||
*/
|
*/
|
||||||
class Button extends ClickableComponent {
|
class Button extends ClickableComponent {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Create the `Button`s DOM element.
|
* Create the `Button`s DOM element.
|
||||||
*
|
*
|
||||||
* @param {string} [tag="button"]
|
* @param {string} [tag="button"]
|
||||||
* The element's node type. This argument is IGNORED: no matter what
|
* The element's node type. Always creates a `button`.
|
||||||
* is passed, it will always create a `button` element.
|
|
||||||
*
|
*
|
||||||
* @param {Object} [props={}]
|
* @param {Object} [props={}]
|
||||||
* An object of properties that should be set on the element.
|
* An object of properties to set on the element.
|
||||||
*
|
*
|
||||||
* @param {Object} [attributes={}]
|
* @param {Object} [attributes={}]
|
||||||
* An object of attributes that should be set on the element.
|
* An object of attributes to set on the element.
|
||||||
*
|
*
|
||||||
* @return {Element}
|
* @return {Element}
|
||||||
* The element that gets created.
|
* The created DOM element.
|
||||||
*/
|
*/
|
||||||
createEl(tag, props = {}, attributes = {}) {
|
createEl(tag, props = {}, attributes = {}) {
|
||||||
tag = 'button';
|
tag = 'button'; // Override to always be 'button'.
|
||||||
|
|
||||||
props = Object.assign({
|
props = Object.assign(
|
||||||
className: this.buildCSSClass()
|
{
|
||||||
}, props);
|
className: this.buildCSSClass(),
|
||||||
|
},
|
||||||
|
props
|
||||||
|
);
|
||||||
|
|
||||||
// Add attributes for button element
|
attributes = Object.assign(
|
||||||
attributes = Object.assign({
|
{
|
||||||
|
type: 'button', // Default "button" type to avoid "submit".
|
||||||
// Necessary since the default button type is "submit"
|
},
|
||||||
type: 'button'
|
attributes
|
||||||
}, attributes);
|
);
|
||||||
|
|
||||||
const el = createEl(tag, props, attributes);
|
const el = createEl(tag, props, attributes);
|
||||||
|
|
||||||
if (!this.player_.options_.experimentalSvgIcons) {
|
if (!this.player_.options_.experimentalSvgIcons) {
|
||||||
el.appendChild(createEl('span', {
|
el.appendChild(
|
||||||
className: 'vjs-icon-placeholder'
|
this.createIconPlaceholder()
|
||||||
}, {
|
);
|
||||||
'aria-hidden': true
|
|
||||||
}));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.createControlTextEl(el);
|
this.createControlTextEl(el);
|
||||||
@ -59,73 +58,83 @@ class Button extends ClickableComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add a child `Component` inside of this `Button`.
|
* Create a placeholder icon element.
|
||||||
|
*
|
||||||
|
* @return {Element}
|
||||||
|
* The placeholder span element.
|
||||||
|
*/
|
||||||
|
createIconPlaceholder() {
|
||||||
|
return createEl(
|
||||||
|
'span',
|
||||||
|
{ className: 'vjs-icon-placeholder' },
|
||||||
|
{ 'aria-hidden': true }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add a child `Component` to this `Button`.
|
||||||
*
|
*
|
||||||
* @param {string|Component} child
|
* @param {string|Component} child
|
||||||
* The name or instance of a child to add.
|
* The name or instance of a child to add.
|
||||||
*
|
*
|
||||||
* @param {Object} [options={}]
|
* @param {Object} [options={}]
|
||||||
* The key/value store of options that will get passed to children of
|
* Options to pass to the child.
|
||||||
* the child.
|
|
||||||
*
|
*
|
||||||
* @return {Component}
|
* @return {Component}
|
||||||
* The `Component` that gets added as a child. When using a string the
|
* The `Component` added as a child.
|
||||||
* `Component` will get created by this process.
|
|
||||||
*
|
*
|
||||||
* @deprecated since version 5
|
* @deprecated since version 5
|
||||||
*/
|
*/
|
||||||
addChild(child, options = {}) {
|
addChild(child, options = {}) {
|
||||||
const className = this.constructor.name;
|
const className = this.constructor.name;
|
||||||
|
|
||||||
log.warn(`Adding an actionable (user controllable) child to a Button (${className}) is not supported; use a ClickableComponent instead.`);
|
log.warn(
|
||||||
|
`Adding an actionable (user-controllable) child to a Button (${className}) is not supported; use a ClickableComponent instead.`
|
||||||
|
);
|
||||||
|
|
||||||
// Avoid the error message generated by ClickableComponent's addChild method
|
// Call the parent implementation to prevent method error.
|
||||||
return Component.prototype.addChild.call(this, child, options);
|
return Component.prototype.addChild.call(this, child, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Enable the `Button` element so that it can be activated or clicked. Use this with
|
* Enable the `Button` element, making it clickable.
|
||||||
* {@link Button#disable}.
|
|
||||||
*/
|
*/
|
||||||
enable() {
|
enable() {
|
||||||
super.enable();
|
super.enable();
|
||||||
|
if (this.el_) {
|
||||||
this.el_.removeAttribute('disabled');
|
this.el_.removeAttribute('disabled');
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Disable the `Button` element so that it cannot be activated or clicked. Use this with
|
* Disable the `Button` element, preventing interaction.
|
||||||
* {@link Button#enable}.
|
|
||||||
*/
|
*/
|
||||||
disable() {
|
disable() {
|
||||||
super.disable();
|
super.disable();
|
||||||
|
if (this.el_) {
|
||||||
this.el_.setAttribute('disabled', 'disabled');
|
this.el_.setAttribute('disabled', 'disabled');
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This gets called when a `Button` has focus and `keydown` is triggered via a key
|
* Handle the `keydown` event when the `Button` has focus.
|
||||||
* press.
|
|
||||||
*
|
*
|
||||||
* @param {KeyboardEvent} event
|
* @param {KeyboardEvent} event
|
||||||
* The event that caused this function to get called.
|
* The triggered `keydown` event.
|
||||||
*
|
|
||||||
* @listens keydown
|
|
||||||
*/
|
*/
|
||||||
handleKeyDown(event) {
|
handleKeyDown(event) {
|
||||||
|
// Let the browser handle Enter and Space keys for buttons.
|
||||||
// Ignore Space or Enter key operation, which is handled by the browser for
|
|
||||||
// a button - though not for its super class, ClickableComponent. Also,
|
|
||||||
// prevent the event from propagating through the DOM and triggering Player
|
|
||||||
// hotkeys. We do not preventDefault here because we _want_ the browser to
|
|
||||||
// handle it.
|
|
||||||
if (event.key === ' ' || event.key === 'Enter') {
|
if (event.key === ' ' || event.key === 'Enter') {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pass keypress handling up for unsupported keys
|
// Fallback to the parent keydown handler for other keys.
|
||||||
super.handleKeyDown(event);
|
super.handleKeyDown(event);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Register the `Button` class with the `Component` registry.
|
||||||
Component.registerComponent('Button', Button);
|
Component.registerComponent('Button', Button);
|
||||||
|
|
||||||
export default Button;
|
export default Button;
|
||||||
|
Loading…
Reference in New Issue
Block a user