--- /dev/null
+'use strict';
+
+exports.__esModule = true;
+
+var _clickableComponent = require('../clickable-component.js');
+
+var _clickableComponent2 = _interopRequireDefault(_clickableComponent);
+
+var _component = require('../component.js');
+
+var _component2 = _interopRequireDefault(_component);
+
+var _menu = require('./menu.js');
+
+var _menu2 = _interopRequireDefault(_menu);
+
+var _dom = require('../utils/dom.js');
+
+var Dom = _interopRequireWildcard(_dom);
+
+var _fn = require('../utils/fn.js');
+
+var Fn = _interopRequireWildcard(_fn);
+
+var _toTitleCase = require('../utils/to-title-case.js');
+
+var _toTitleCase2 = _interopRequireDefault(_toTitleCase);
+
+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; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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; }
+
+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; } /**
+ * @file menu-button.js
+ */
+
+
+/**
+ * A `MenuButton` class for any popup {@link Menu}.
+ *
+ * @extends ClickableComponent
+ */
+var MenuButton = function (_ClickableComponent) {
+ _inherits(MenuButton, _ClickableComponent);
+
+ /**
+ * 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.
+ */
+ function MenuButton(player) {
+ var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+ _classCallCheck(this, MenuButton);
+
+ var _this = _possibleConstructorReturn(this, _ClickableComponent.call(this, player, options));
+
+ _this.update();
+
+ _this.enabled_ = true;
+
+ _this.el_.setAttribute('aria-haspopup', 'true');
+ _this.el_.setAttribute('role', 'menuitem');
+ _this.on('keydown', _this.handleSubmenuKeyPress);
+ return _this;
+ }
+
+ /**
+ * Update the menu based on the current state of its items.
+ */
+
+
+ MenuButton.prototype.update = function update() {
+ var menu = this.createMenu();
+
+ if (this.menu) {
+ this.removeChild(this.menu);
+ }
+
+ this.menu = menu;
+ this.addChild(menu);
+
+ /**
+ * Track the state of the menu button
+ *
+ * @type {Boolean}
+ * @private
+ */
+ this.buttonPressed_ = false;
+ this.el_.setAttribute('aria-expanded', 'false');
+
+ if (this.items && this.items.length <= this.hideThreshold_) {
+ this.hide();
+ } else {
+ this.show();
+ }
+ };
+
+ /**
+ * Create the menu and add all items to it.
+ *
+ * @return {Menu}
+ * The constructed menu
+ */
+
+
+ MenuButton.prototype.createMenu = function createMenu() {
+ var menu = new _menu2['default'](this.player_);
+
+ /**
+ * Hide the menu if the number of items is less than or equal to this threshold. This defaults
+ * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list
+ * it here because every time we run `createMenu` we need to reset the value.
+ *
+ * @protected
+ * @type {Number}
+ */
+ this.hideThreshold_ = 0;
+
+ // Add a title list item to the top
+ if (this.options_.title) {
+ var title = Dom.createEl('li', {
+ className: 'vjs-menu-title',
+ innerHTML: (0, _toTitleCase2['default'])(this.options_.title),
+ tabIndex: -1
+ });
+
+ this.hideThreshold_ += 1;
+
+ menu.children_.unshift(title);
+ Dom.insertElFirst(title, menu.contentEl());
+ }
+
+ this.items = this.createItems();
+
+ if (this.items) {
+ // Add menu items to the menu
+ for (var i = 0; i < this.items.length; i++) {
+ menu.addItem(this.items[i]);
+ }
+ }
+
+ return menu;
+ };
+
+ /**
+ * Create the list of menu items. Specific to each subclass.
+ *
+ * @abstract
+ */
+
+
+ MenuButton.prototype.createItems = function createItems() {};
+
+ /**
+ * Create the `MenuButtons`s DOM element.
+ *
+ * @return {Element}
+ * The element that gets created.
+ */
+
+
+ MenuButton.prototype.createEl = function createEl() {
+ return _ClickableComponent.prototype.createEl.call(this, 'div', {
+ className: this.buildCSSClass()
+ });
+ };
+
+ /**
+ * Builds the default DOM `className`.
+ *
+ * @return {string}
+ * The DOM `className` for this object.
+ */
+
+
+ MenuButton.prototype.buildCSSClass = function buildCSSClass() {
+ var menuButtonClass = 'vjs-menu-button';
+
+ // If the inline option is passed, we want to use different styles altogether.
+ if (this.options_.inline === true) {
+ menuButtonClass += '-inline';
+ } else {
+ menuButtonClass += '-popup';
+ }
+
+ return 'vjs-menu-button ' + menuButtonClass + ' ' + _ClickableComponent.prototype.buildCSSClass.call(this);
+ };
+
+ /**
+ * Handle a click on a `MenuButton`.
+ * See {@link ClickableComponent#handleClick} for instances where this is called.
+ *
+ * @param {EventTarget~Event} event
+ * The `keydown`, `tap`, or `click` event that caused this function to be
+ * called.
+ *
+ * @listens tap
+ * @listens click
+ */
+
+
+ MenuButton.prototype.handleClick = function handleClick(event) {
+ // When you click the button it adds focus, which will show the menu.
+ // So we'll remove focus when the mouse leaves the button. Focus is needed
+ // for tab navigation.
+
+ this.one(this.menu.contentEl(), 'mouseleave', Fn.bind(this, function (e) {
+ this.unpressButton();
+ this.el_.blur();
+ }));
+ if (this.buttonPressed_) {
+ this.unpressButton();
+ } else {
+ this.pressButton();
+ }
+ };
+
+ /**
+ * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See
+ * {@link ClickableComponent#handleKeyPress} for instances where this is called.
+ *
+ * @param {EventTarget~Event} event
+ * The `keydown` event that caused this function to be called.
+ *
+ * @listens keydown
+ */
+
+
+ MenuButton.prototype.handleKeyPress = function handleKeyPress(event) {
+
+ // Escape (27) key or Tab (9) key unpress the 'button'
+ if (event.which === 27 || event.which === 9) {
+ if (this.buttonPressed_) {
+ this.unpressButton();
+ }
+ // Don't preventDefault for Tab key - we still want to lose focus
+ if (event.which !== 9) {
+ event.preventDefault();
+ }
+ // Up (38) key or Down (40) key press the 'button'
+ } else if (event.which === 38 || event.which === 40) {
+ if (!this.buttonPressed_) {
+ this.pressButton();
+ event.preventDefault();
+ }
+ } else {
+ _ClickableComponent.prototype.handleKeyPress.call(this, event);
+ }
+ };
+
+ /**
+ * Handle a `keydown` event on a sub-menu. The listener for this is added in
+ * the constructor.
+ *
+ * @param {EventTarget~Event} event
+ * Key press event
+ *
+ * @listens keydown
+ */
+
+
+ MenuButton.prototype.handleSubmenuKeyPress = function handleSubmenuKeyPress(event) {
+
+ // Escape (27) key or Tab (9) key unpress the 'button'
+ if (event.which === 27 || event.which === 9) {
+ if (this.buttonPressed_) {
+ this.unpressButton();
+ }
+ // Don't preventDefault for Tab key - we still want to lose focus
+ if (event.which !== 9) {
+ event.preventDefault();
+ }
+ }
+ };
+
+ /**
+ * Put the current `MenuButton` into a pressed state.
+ */
+
+
+ MenuButton.prototype.pressButton = function pressButton() {
+ if (this.enabled_) {
+ this.buttonPressed_ = true;
+ this.menu.lockShowing();
+ this.el_.setAttribute('aria-expanded', 'true');
+ // set the focus into the submenu
+ this.menu.focus();
+ }
+ };
+
+ /**
+ * Take the current `MenuButton` out of a pressed state.
+ */
+
+
+ MenuButton.prototype.unpressButton = function unpressButton() {
+ if (this.enabled_) {
+ this.buttonPressed_ = false;
+ this.menu.unlockShowing();
+ this.el_.setAttribute('aria-expanded', 'false');
+ // Set focus back to this menu button
+ this.el_.focus();
+ }
+ };
+
+ /**
+ * Disable the `MenuButton`. Don't allow it to be clicked.
+ *
+ * @return {MenuButton}
+ * Returns itself; method can be chained.
+ */
+
+
+ MenuButton.prototype.disable = function disable() {
+ // Unpress, but don't force focus on this button
+ this.buttonPressed_ = false;
+ this.menu.unlockShowing();
+ this.el_.setAttribute('aria-expanded', 'false');
+
+ this.enabled_ = false;
+
+ return _ClickableComponent.prototype.disable.call(this);
+ };
+
+ /**
+ * Enable the `MenuButton`. Allow it to be clicked.
+ *
+ * @return {MenuButton}
+ * Returns itself; method can be chained.
+ */
+
+
+ MenuButton.prototype.enable = function enable() {
+ this.enabled_ = true;
+
+ return _ClickableComponent.prototype.enable.call(this);
+ };
+
+ return MenuButton;
+}(_clickableComponent2['default']);
+
+_component2['default'].registerComponent('MenuButton', MenuButton);
+exports['default'] = MenuButton;
projects / yaffs-website / blobdiff