--- /dev/null
+'use strict';
+
+exports.__esModule = true;
+
+var _component = require('./component');
+
+var _component2 = _interopRequireDefault(_component);
+
+var _dom = require('./utils/dom.js');
+
+var Dom = _interopRequireWildcard(_dom);
+
+var _events = require('./utils/events.js');
+
+var Events = _interopRequireWildcard(_events);
+
+var _fn = require('./utils/fn.js');
+
+var Fn = _interopRequireWildcard(_fn);
+
+var _log = require('./utils/log.js');
+
+var _log2 = _interopRequireDefault(_log);
+
+var _document = require('global/document');
+
+var _document2 = _interopRequireDefault(_document);
+
+var _obj = require('./utils/obj');
+
+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 button.js
+ */
+
+
+/**
+ * Clickable Component which is clickable or keyboard actionable,
+ * but is not a native HTML button.
+ *
+ * @extends Component
+ */
+var ClickableComponent = function (_Component) {
+ _inherits(ClickableComponent, _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.
+ */
+ function ClickableComponent(player, options) {
+ _classCallCheck(this, ClickableComponent);
+
+ var _this = _possibleConstructorReturn(this, _Component.call(this, player, options));
+
+ _this.emitTapEvents();
+
+ _this.enable();
+ return _this;
+ }
+
+ /**
+ * Create the `Component`s DOM element.
+ *
+ * @param {string} [tag=div]
+ * The element's node type.
+ *
+ * @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.
+ */
+
+
+ ClickableComponent.prototype.createEl = function createEl() {
+ var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'div';
+ var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+ var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+ props = (0, _obj.assign)({
+ className: this.buildCSSClass(),
+ tabIndex: 0
+ }, props);
+
+ if (tag === 'button') {
+ _log2['default'].error('Creating a ClickableComponent with an HTML element of ' + tag + ' is not supported; use a Button instead.');
+ }
+
+ // Add ARIA attributes for clickable element which is not a native HTML button
+ attributes = (0, _obj.assign)({
+ 'role': 'button',
+
+ // let the screen reader user know that the text of the element may change
+ 'aria-live': 'polite'
+ }, attributes);
+
+ this.tabIndex_ = props.tabIndex;
+
+ var el = _Component.prototype.createEl.call(this, tag, props, attributes);
+
+ this.createControlTextEl(el);
+
+ return el;
+ };
+
+ /**
+ * Create a control text element on this `Component`
+ *
+ * @param {Element} [el]
+ * Parent element for the control text.
+ *
+ * @return {Element}
+ * The control text element that gets created.
+ */
+
+
+ ClickableComponent.prototype.createControlTextEl = function createControlTextEl(el) {
+ this.controlTextEl_ = Dom.createEl('span', {
+ className: 'vjs-control-text'
+ });
+
+ if (el) {
+ el.appendChild(this.controlTextEl_);
+ }
+
+ this.controlText(this.controlText_, el);
+
+ return this.controlTextEl_;
+ };
+
+ /**
+ * Get or set the localize text to use for the controls on the `Component`.
+ *
+ * @param {string} [text]
+ * Control text for element.
+ *
+ * @param {Element} [el=this.el()]
+ * Element to set the title on.
+ *
+ * @return {string|ClickableComponent}
+ * - The control text when getting
+ * - Returns itself when setting; method can be chained.
+ */
+
+
+ ClickableComponent.prototype.controlText = function controlText(text) {
+ var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.el();
+
+ if (!text) {
+ return this.controlText_ || 'Need Text';
+ }
+
+ var localizedText = this.localize(text);
+
+ this.controlText_ = text;
+ this.controlTextEl_.innerHTML = localizedText;
+
+ if (!this.nonIconControl) {
+ // Set title attribute if only an icon is shown
+ el.setAttribute('title', localizedText);
+ }
+
+ return this;
+ };
+
+ /**
+ * Builds the default DOM `className`.
+ *
+ * @return {string}
+ * The DOM `className` for this object.
+ */
+
+
+ ClickableComponent.prototype.buildCSSClass = function buildCSSClass() {
+ return 'vjs-control vjs-button ' + _Component.prototype.buildCSSClass.call(this);
+ };
+
+ /**
+ * Enable this `Component`s element.
+ *
+ * @return {ClickableComponent}
+ * Returns itself; method can be chained.
+ */
+
+
+ ClickableComponent.prototype.enable = function enable() {
+ this.removeClass('vjs-disabled');
+ this.el_.setAttribute('aria-disabled', 'false');
+ if (typeof this.tabIndex_ !== 'undefined') {
+ this.el_.setAttribute('tabIndex', this.tabIndex_);
+ }
+ this.on('tap', this.handleClick);
+ this.on('click', this.handleClick);
+ this.on('focus', this.handleFocus);
+ this.on('blur', this.handleBlur);
+ return this;
+ };
+
+ /**
+ * Disable this `Component`s element.
+ *
+ * @return {ClickableComponent}
+ * Returns itself; method can be chained.
+ */
+
+
+ ClickableComponent.prototype.disable = function disable() {
+ this.addClass('vjs-disabled');
+ this.el_.setAttribute('aria-disabled', 'true');
+ if (typeof this.tabIndex_ !== 'undefined') {
+ this.el_.removeAttribute('tabIndex');
+ }
+ this.off('tap', this.handleClick);
+ this.off('click', this.handleClick);
+ this.off('focus', this.handleFocus);
+ this.off('blur', this.handleBlur);
+ return this;
+ };
+
+ /**
+ * This gets called when a `ClickableComponent` gets:
+ * - Clicked (via the `click` event, listening starts in the constructor)
+ * - Tapped (via the `tap` event, listening starts in the constructor)
+ * - The following things happen in order:
+ * 1. {@link ClickableComponent#handleFocus} is called via a `focus` event on the
+ * `ClickableComponent`.
+ * 2. {@link ClickableComponent#handleFocus} adds a listener for `keydown` on using
+ * {@link ClickableComponent#handleKeyPress}.
+ * 3. `ClickableComponent` has not had a `blur` event (`blur` means that focus was lost). The user presses
+ * the space or enter key.
+ * 4. {@link ClickableComponent#handleKeyPress} calls this function with the `keydown`
+ * event as a parameter.
+ *
+ * @param {EventTarget~Event} event
+ * The `keydown`, `tap`, or `click` event that caused this function to be
+ * called.
+ *
+ * @listens tap
+ * @listens click
+ * @abstract
+ */
+
+
+ ClickableComponent.prototype.handleClick = function handleClick(event) {};
+
+ /**
+ * This gets called when a `ClickableComponent` gains focus via a `focus` event.
+ * Turns on listening for `keydown` events. When they happen it
+ * calls `this.handleKeyPress`.
+ *
+ * @param {EventTarget~Event} event
+ * The `focus` event that caused this function to be called.
+ *
+ * @listens focus
+ */
+
+
+ ClickableComponent.prototype.handleFocus = function handleFocus(event) {
+ Events.on(_document2['default'], 'keydown', Fn.bind(this, this.handleKeyPress));
+ };
+
+ /**
+ * Called when this ClickableComponent has focus and a key gets pressed down. By
+ * default it will call `this.handleClick` when the key is space or enter.
+ *
+ * @param {EventTarget~Event} event
+ * The `keydown` event that caused this function to be called.
+ *
+ * @listens keydown
+ */
+
+
+ ClickableComponent.prototype.handleKeyPress = function handleKeyPress(event) {
+
+ // Support Space (32) or Enter (13) key operation to fire a click event
+ if (event.which === 32 || event.which === 13) {
+ event.preventDefault();
+ this.handleClick(event);
+ } else if (_Component.prototype.handleKeyPress) {
+
+ // Pass keypress handling up for unsupported keys
+ _Component.prototype.handleKeyPress.call(this, event);
+ }
+ };
+
+ /**
+ * Called when a `ClickableComponent` loses focus. Turns off the listener for
+ * `keydown` events. Which Stops `this.handleKeyPress` from getting called.
+ *
+ * @param {EventTarget~Event} event
+ * The `blur` event that caused this function to be called.
+ *
+ * @listens blur
+ */
+
+
+ ClickableComponent.prototype.handleBlur = function handleBlur(event) {
+ Events.off(_document2['default'], 'keydown', Fn.bind(this, this.handleKeyPress));
+ };
+
+ return ClickableComponent;
+}(_component2['default']);
+
+_component2['default'].registerComponent('ClickableComponent', ClickableComponent);
+exports['default'] = ClickableComponent;
projects / yaffs-website / blobdiff