aleph1.co.uk Git - yaffs-website/blob - node_modules/video.js/es5/menu/menu-button.js

   1 'use strict';
   2
   3 exports.__esModule = true;
   4
   5 var _clickableComponent = require('../clickable-component.js');
   6
   7 var _clickableComponent2 = _interopRequireDefault(_clickableComponent);
   8
   9 var _component = require('../component.js');
  10
  11 var _component2 = _interopRequireDefault(_component);
  12
  13 var _menu = require('./menu.js');
  14
  15 var _menu2 = _interopRequireDefault(_menu);
  16
  17 var _dom = require('../utils/dom.js');
  18
  19 var Dom = _interopRequireWildcard(_dom);
  20
  21 var _fn = require('../utils/fn.js');
  22
  23 var Fn = _interopRequireWildcard(_fn);
  24
  25 var _toTitleCase = require('../utils/to-title-case.js');
  26
  27 var _toTitleCase2 = _interopRequireDefault(_toTitleCase);
  28
  29 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
  30
  31 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  32
  33 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  34
  35 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; }
  36
  37 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; } /**
  38                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 * @file menu-button.js
  39                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 */
  40
  41
  42 /**
  43  * A `MenuButton` class for any popup {@link Menu}.
  44  *
  45  * @extends ClickableComponent
  46  */
  47 var MenuButton = function (_ClickableComponent) {
  48   _inherits(MenuButton, _ClickableComponent);
  49
  50   /**
  51    * Creates an instance of this class.
  52    *
  53    * @param {Player} player
  54    *        The `Player` that this class should be attached to.
  55    *
  56    * @param {Object} [options={}]
  57    *        The key/value store of player options.
  58    */
  59   function MenuButton(player) {
  60     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  61
  62     _classCallCheck(this, MenuButton);
  63
  64     var _this = _possibleConstructorReturn(this, _ClickableComponent.call(this, player, options));
  65
  66     _this.update();
  67
  68     _this.enabled_ = true;
  69
  70     _this.el_.setAttribute('aria-haspopup', 'true');
  71     _this.el_.setAttribute('role', 'menuitem');
  72     _this.on('keydown', _this.handleSubmenuKeyPress);
  73     return _this;
  74   }
  75
  76   /**
  77    * Update the menu based on the current state of its items.
  78    */
  79
  80
  81   MenuButton.prototype.update = function update() {
  82     var menu = this.createMenu();
  83
  84     if (this.menu) {
  85       this.removeChild(this.menu);
  86     }
  87
  88     this.menu = menu;
  89     this.addChild(menu);
  90
  91     /**
  92      * Track the state of the menu button
  93      *
  94      * @type {Boolean}
  95      * @private
  96      */
  97     this.buttonPressed_ = false;
  98     this.el_.setAttribute('aria-expanded', 'false');
  99
 100     if (this.items && this.items.length <= this.hideThreshold_) {
 101       this.hide();
 102     } else {
 103       this.show();
 104     }
 105   };
 106
 107   /**
 108    * Create the menu and add all items to it.
 109    *
 110    * @return {Menu}
 111    *         The constructed menu
 112    */
 113
 114
 115   MenuButton.prototype.createMenu = function createMenu() {
 116     var menu = new _menu2['default'](this.player_);
 117
 118     /**
 119      * Hide the menu if the number of items is less than or equal to this threshold. This defaults
 120      * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list
 121      * it here because every time we run `createMenu` we need to reset the value.
 122      *
 123      * @protected
 124      * @type {Number}
 125      */
 126     this.hideThreshold_ = 0;
 127
 128     // Add a title list item to the top
 129     if (this.options_.title) {
 130       var title = Dom.createEl('li', {
 131         className: 'vjs-menu-title',
 132         innerHTML: (0, _toTitleCase2['default'])(this.options_.title),
 133         tabIndex: -1
 134       });
 135
 136       this.hideThreshold_ += 1;
 137
 138       menu.children_.unshift(title);
 139       Dom.insertElFirst(title, menu.contentEl());
 140     }
 141
 142     this.items = this.createItems();
 143
 144     if (this.items) {
 145       // Add menu items to the menu
 146       for (var i = 0; i < this.items.length; i++) {
 147         menu.addItem(this.items[i]);
 148       }
 149     }
 150
 151     return menu;
 152   };
 153
 154   /**
 155    * Create the list of menu items. Specific to each subclass.
 156    *
 157    * @abstract
 158    */
 159
 160
 161   MenuButton.prototype.createItems = function createItems() {};
 162
 163   /**
 164    * Create the `MenuButtons`s DOM element.
 165    *
 166    * @return {Element}
 167    *         The element that gets created.
 168    */
 169
 170
 171   MenuButton.prototype.createEl = function createEl() {
 172     return _ClickableComponent.prototype.createEl.call(this, 'div', {
 173       className: this.buildCSSClass()
 174     });
 175   };
 176
 177   /**
 178    * Builds the default DOM `className`.
 179    *
 180    * @return {string}
 181    *         The DOM `className` for this object.
 182    */
 183
 184
 185   MenuButton.prototype.buildCSSClass = function buildCSSClass() {
 186     var menuButtonClass = 'vjs-menu-button';
 187
 188     // If the inline option is passed, we want to use different styles altogether.
 189     if (this.options_.inline === true) {
 190       menuButtonClass += '-inline';
 191     } else {
 192       menuButtonClass += '-popup';
 193     }
 194
 195     return 'vjs-menu-button ' + menuButtonClass + ' ' + _ClickableComponent.prototype.buildCSSClass.call(this);
 196   };
 197
 198   /**
 199    * Handle a click on a `MenuButton`.
 200    * See {@link ClickableComponent#handleClick} for instances where this is called.
 201    *
 202    * @param {EventTarget~Event} event
 203    *        The `keydown`, `tap`, or `click` event that caused this function to be
 204    *        called.
 205    *
 206    * @listens tap
 207    * @listens click
 208    */
 209
 210
 211   MenuButton.prototype.handleClick = function handleClick(event) {
 212     // When you click the button it adds focus, which will show the menu.
 213     // So we'll remove focus when the mouse leaves the button. Focus is needed
 214     // for tab navigation.
 215
 216     this.one(this.menu.contentEl(), 'mouseleave', Fn.bind(this, function (e) {
 217       this.unpressButton();
 218       this.el_.blur();
 219     }));
 220     if (this.buttonPressed_) {
 221       this.unpressButton();
 222     } else {
 223       this.pressButton();
 224     }
 225   };
 226
 227   /**
 228    * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See
 229    * {@link ClickableComponent#handleKeyPress} for instances where this is called.
 230    *
 231    * @param {EventTarget~Event} event
 232    *        The `keydown` event that caused this function to be called.
 233    *
 234    * @listens keydown
 235    */
 236
 237
 238   MenuButton.prototype.handleKeyPress = function handleKeyPress(event) {
 239
 240     // Escape (27) key or Tab (9) key unpress the 'button'
 241     if (event.which === 27 || event.which === 9) {
 242       if (this.buttonPressed_) {
 243         this.unpressButton();
 244       }
 245       // Don't preventDefault for Tab key - we still want to lose focus
 246       if (event.which !== 9) {
 247         event.preventDefault();
 248       }
 249       // Up (38) key or Down (40) key press the 'button'
 250     } else if (event.which === 38 || event.which === 40) {
 251       if (!this.buttonPressed_) {
 252         this.pressButton();
 253         event.preventDefault();
 254       }
 255     } else {
 256       _ClickableComponent.prototype.handleKeyPress.call(this, event);
 257     }
 258   };
 259
 260   /**
 261    * Handle a `keydown` event on a sub-menu. The listener for this is added in
 262    * the constructor.
 263    *
 264    * @param {EventTarget~Event} event
 265    *        Key press event
 266    *
 267    * @listens keydown
 268    */
 269
 270
 271   MenuButton.prototype.handleSubmenuKeyPress = function handleSubmenuKeyPress(event) {
 272
 273     // Escape (27) key or Tab (9) key unpress the 'button'
 274     if (event.which === 27 || event.which === 9) {
 275       if (this.buttonPressed_) {
 276         this.unpressButton();
 277       }
 278       // Don't preventDefault for Tab key - we still want to lose focus
 279       if (event.which !== 9) {
 280         event.preventDefault();
 281       }
 282     }
 283   };
 284
 285   /**
 286    * Put the current `MenuButton` into a pressed state.
 287    */
 288
 289
 290   MenuButton.prototype.pressButton = function pressButton() {
 291     if (this.enabled_) {
 292       this.buttonPressed_ = true;
 293       this.menu.lockShowing();
 294       this.el_.setAttribute('aria-expanded', 'true');
 295       // set the focus into the submenu
 296       this.menu.focus();
 297     }
 298   };
 299
 300   /**
 301    * Take the current `MenuButton` out of a pressed state.
 302    */
 303
 304
 305   MenuButton.prototype.unpressButton = function unpressButton() {
 306     if (this.enabled_) {
 307       this.buttonPressed_ = false;
 308       this.menu.unlockShowing();
 309       this.el_.setAttribute('aria-expanded', 'false');
 310       // Set focus back to this menu button
 311       this.el_.focus();
 312     }
 313   };
 314
 315   /**
 316    * Disable the `MenuButton`. Don't allow it to be clicked.
 317    *
 318    * @return {MenuButton}
 319    *         Returns itself; method can be chained.
 320    */
 321
 322
 323   MenuButton.prototype.disable = function disable() {
 324     // Unpress, but don't force focus on this button
 325     this.buttonPressed_ = false;
 326     this.menu.unlockShowing();
 327     this.el_.setAttribute('aria-expanded', 'false');
 328
 329     this.enabled_ = false;
 330
 331     return _ClickableComponent.prototype.disable.call(this);
 332   };
 333
 334   /**
 335    * Enable the `MenuButton`. Allow it to be clicked.
 336    *
 337    * @return {MenuButton}
 338    *         Returns itself; method can be chained.
 339    */
 340
 341
 342   MenuButton.prototype.enable = function enable() {
 343     this.enabled_ = true;
 344
 345     return _ClickableComponent.prototype.enable.call(this);
 346   };
 347
 348   return MenuButton;
 349 }(_clickableComponent2['default']);
 350
 351 _component2['default'].registerComponent('MenuButton', MenuButton);
 352 exports['default'] = MenuButton;