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
|
import Component from '../component';
import * as Dom from '../utils/dom';
import { newGUID } from '../utils/guid';
/** @import Player from './player' */
/** @import { ContentDescriptor } from '../utils/dom' */
/**
* Creates DOM element of 'select' & its options.
*
* @extends Component
*/
class TextTrackSelect extends Component {
/**
* Creates an instance of this class.
*
* @param {Player} player
* The `Player` that this class should be attached to.
*
* @param {Object} [options]
* The key/value store of player options.
*
* @param {ContentDescriptor} [options.content=undefined]
* Provide customized content for this modal.
*
* @param {string} [options.legendId]
* A text with part of an string to create atribute of aria-labelledby.
*
* @param {string} [options.id]
* A text with part of an string to create atribute of aria-labelledby.
*
* @param {Array} [options.SelectOptions]
* Array that contains the value & textContent of for each of the
* options elements.
*/
constructor(player, options = {}) {
super(player, options);
this.el_.setAttribute('aria-labelledby', this.selectLabelledbyIds);
}
/**
* Create the `TextTrackSelect`'s DOM element
*
* @return {Element}
* The DOM element that gets created.
*/
createEl() {
this.selectLabelledbyIds = [this.options_.legendId, this.options_.labelId].join(' ').trim();
// Create select & inner options
const selectoptions = Dom.createEl(
'select',
{
id: this.options_.id
},
{},
this.options_.SelectOptions.map((optionText) => {
// Constructs an id for the <option>.
// For the colour settings that have two <selects> with a <label> each, generates an id based off the label value
// For font size/family and edge style with one <select> and no <label>, generates an id with a guid
const optionId = (this.options_.labelId ? this.options_.labelId : `vjs-track-option-${newGUID()}`) +
'-' + optionText[1].replace(/\W+/g, '');
const option = Dom.createEl(
'option',
{
id: optionId,
value: this.localize(optionText[0]),
textContent: this.localize(optionText[1])
}
);
option.setAttribute('aria-labelledby', `${this.selectLabelledbyIds} ${optionId}`);
return option;
})
);
return selectoptions;
}
}
Component.registerComponent('TextTrackSelect', TextTrackSelect);
export default TextTrackSelect;
|
