3 exports.__esModule = true;
5 var _clickableComponent = require('../clickable-component.js');
7 var _clickableComponent2 = _interopRequireDefault(_clickableComponent);
9 var _component = require('../component.js');
11 var _component2 = _interopRequireDefault(_component);
13 var _obj = require('../utils/obj');
15 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
17 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
19 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
21 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
27 * The component for a menu item. `<li>`
29 * @extends ClickableComponent
31 var MenuItem = function (_ClickableComponent) {
32 _inherits(MenuItem, _ClickableComponent);
35 * Creates an instance of the this class.
37 * @param {Player} player
38 * The `Player` that this class should be attached to.
40 * @param {Object} [options={}]
41 * The key/value store of player options.
44 function MenuItem(player, options) {
45 _classCallCheck(this, MenuItem);
47 var _this = _possibleConstructorReturn(this, _ClickableComponent.call(this, player, options));
49 _this.selectable = options.selectable;
51 _this.selected(options.selected);
53 if (_this.selectable) {
54 // TODO: May need to be either menuitemcheckbox or menuitemradio,
55 // and may need logical grouping of menu items.
56 _this.el_.setAttribute('role', 'menuitemcheckbox');
58 _this.el_.setAttribute('role', 'menuitem');
64 * Create the `MenuItem's DOM element
66 * @param {string} [type=li]
67 * Element's node type, not actually used, always set to `li`.
69 * @param {Object} [props={}]
70 * An object of properties that should be set on the element
72 * @param {Object} [attrs={}]
73 * An object of attributes that should be set on the element
76 * The element that gets created.
80 MenuItem.prototype.createEl = function createEl(type, props, attrs) {
81 // The control is textual, not just an icon
82 this.nonIconControl = true;
84 return _ClickableComponent.prototype.createEl.call(this, 'li', (0, _obj.assign)({
85 className: 'vjs-menu-item',
86 innerHTML: this.localize(this.options_.label),
92 * Any click on a `MenuItem` puts int into the selected state.
93 * See {@link ClickableComponent#handleClick} for instances where this is called.
95 * @param {EventTarget~Event} event
96 * The `keydown`, `tap`, or `click` event that caused this function to be
104 MenuItem.prototype.handleClick = function handleClick(event) {
109 * Set the state for this menu item as selected or not.
111 * @param {boolean} selected
112 * if the menu item is selected or not
116 MenuItem.prototype.selected = function selected(_selected) {
117 if (this.selectable) {
119 this.addClass('vjs-selected');
120 this.el_.setAttribute('aria-checked', 'true');
121 // aria-checked isn't fully supported by browsers/screen readers,
122 // so indicate selected state to screen reader in the control text.
123 this.controlText(', selected');
125 this.removeClass('vjs-selected');
126 this.el_.setAttribute('aria-checked', 'false');
127 // Indicate un-selected state to screen reader
128 // Note that a space clears out the selected state text
129 this.controlText(' ');
135 }(_clickableComponent2['default']);
137 _component2['default'].registerComponent('MenuItem', MenuItem);
138 exports['default'] = MenuItem;