1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
/**
* @file button.js
*/
import ClickableComponent from './clickable-component.js';
import Component from './component';
import log from './utils/log.js';
import {createEl} from './utils/dom.js';
/**
* Base class for all buttons.
*
* @extends ClickableComponent
*/
class Button extends ClickableComponent {
/**
* Create the `Button`s DOM element.
*
* @param {string} [tag="button"]
* The element's node type. This argument is IGNORED: no matter what
* is passed, it will always create a `button` element.
*
* @param {Object} [props={}]
* An object of properties that should be set on the element.
*
* @param {Object} [attributes={}]
* An object of attributes that should be set on the element.
*
* @return {Element}
* The element that gets created.
*/
createEl(tag, props = {}, attributes = {}) {
tag = 'button';
props = Object.assign({
className: this.buildCSSClass()
}, props);
// Add attributes for button element
attributes = Object.assign({
// Necessary since the default button type is "submit"
type: 'button'
}, attributes);
const el = createEl(tag, props, attributes);
if (!this.player_.options_.experimentalSvgIcons) {
el.appendChild(createEl('span', {
className: 'vjs-icon-placeholder'
}, {
'aria-hidden': true
}));
}
this.createControlTextEl(el);
return el;
}
/**
* Add a child `Component` inside of this `Button`.
*
* @param {string|Component} child
* The name or instance of a child to add.
*
* @param {Object} [options={}]
* The key/value store of options that will get passed to children of
* the child.
*
* @return {Component}
* The `Component` that gets added as a child. When using a string the
* `Component` will get created by this process.
*
* @deprecated since version 5
*/
addChild(child, options = {}) {
const className = this.constructor.name;
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
return Component.prototype.addChild.call(this, child, options);
}
/**
* Enable the `Button` element so that it can be activated or clicked. Use this with
* {@link Button#disable}.
*/
enable() {
super.enable();
this.el_.removeAttribute('disabled');
}
/**
* Disable the `Button` element so that it cannot be activated or clicked. Use this with
* {@link Button#enable}.
*/
disable() {
super.disable();
this.el_.setAttribute('disabled', 'disabled');
}
/**
* This gets called when a `Button` has focus and `keydown` is triggered via a key
* press.
*
* @param {KeyboardEvent} event
* The event that caused this function to get called.
*
* @listens keydown
*/
handleKeyDown(event) {
// 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') {
event.stopPropagation();
return;
}
// Pass keypress handling up for unsupported keys
super.handleKeyDown(event);
}
}
Component.registerComponent('Button', Button);
export default Button;
|
