www.aleph1.co.uk Git - yaffs-website/blob - node_modules/video.js/es5/clickable-component.js

   1 'use strict';
   2
   3 exports.__esModule = true;
   4
   5 var _component = require('./component');
   6
   7 var _component2 = _interopRequireDefault(_component);
   8
   9 var _dom = require('./utils/dom.js');
  10
  11 var Dom = _interopRequireWildcard(_dom);
  12
  13 var _events = require('./utils/events.js');
  14
  15 var Events = _interopRequireWildcard(_events);
  16
  17 var _fn = require('./utils/fn.js');
  18
  19 var Fn = _interopRequireWildcard(_fn);
  20
  21 var _log = require('./utils/log.js');
  22
  23 var _log2 = _interopRequireDefault(_log);
  24
  25 var _document = require('global/document');
  26
  27 var _document2 = _interopRequireDefault(_document);
  28
  29 var _obj = require('./utils/obj');
  30
  31 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; } }
  32
  33 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  34
  35 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  36
  37 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; }
  38
  39 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; } /**
  40                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 * @file button.js
  41                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 */
  42
  43
  44 /**
  45  * Clickable Component which is clickable or keyboard actionable,
  46  * but is not a native HTML button.
  47  *
  48  * @extends Component
  49  */
  50 var ClickableComponent = function (_Component) {
  51   _inherits(ClickableComponent, _Component);
  52
  53   /**
  54    * Creates an instance of this class.
  55    *
  56    * @param  {Player} player
  57    *         The `Player` that this class should be attached to.
  58    *
  59    * @param  {Object} [options]
  60    *         The key/value store of player options.
  61    */
  62   function ClickableComponent(player, options) {
  63     _classCallCheck(this, ClickableComponent);
  64
  65     var _this = _possibleConstructorReturn(this, _Component.call(this, player, options));
  66
  67     _this.emitTapEvents();
  68
  69     _this.enable();
  70     return _this;
  71   }
  72
  73   /**
  74    * Create the `Component`s DOM element.
  75    *
  76    * @param {string} [tag=div]
  77    *        The element's node type.
  78    *
  79    * @param {Object} [props={}]
  80    *        An object of properties that should be set on the element.
  81    *
  82    * @param {Object} [attributes={}]
  83    *        An object of attributes that should be set on the element.
  84    *
  85    * @return {Element}
  86    *         The element that gets created.
  87    */
  88
  89
  90   ClickableComponent.prototype.createEl = function createEl() {
  91     var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'div';
  92     var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  93     var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  94
  95     props = (0, _obj.assign)({
  96       className: this.buildCSSClass(),
  97       tabIndex: 0
  98     }, props);
  99
 100     if (tag === 'button') {
 101       _log2['default'].error('Creating a ClickableComponent with an HTML element of ' + tag + ' is not supported; use a Button instead.');
 102     }
 103
 104     // Add ARIA attributes for clickable element which is not a native HTML button
 105     attributes = (0, _obj.assign)({
 106       'role': 'button',
 107
 108       // let the screen reader user know that the text of the element may change
 109       'aria-live': 'polite'
 110     }, attributes);
 111
 112     this.tabIndex_ = props.tabIndex;
 113
 114     var el = _Component.prototype.createEl.call(this, tag, props, attributes);
 115
 116     this.createControlTextEl(el);
 117
 118     return el;
 119   };
 120
 121   /**
 122    * Create a control text element on this `Component`
 123    *
 124    * @param {Element} [el]
 125    *        Parent element for the control text.
 126    *
 127    * @return {Element}
 128    *         The control text element that gets created.
 129    */
 130
 131
 132   ClickableComponent.prototype.createControlTextEl = function createControlTextEl(el) {
 133     this.controlTextEl_ = Dom.createEl('span', {
 134       className: 'vjs-control-text'
 135     });
 136
 137     if (el) {
 138       el.appendChild(this.controlTextEl_);
 139     }
 140
 141     this.controlText(this.controlText_, el);
 142
 143     return this.controlTextEl_;
 144   };
 145
 146   /**
 147    * Get or set the localize text to use for the controls on the `Component`.
 148    *
 149    * @param {string} [text]
 150    *        Control text for element.
 151    *
 152    * @param {Element} [el=this.el()]
 153    *        Element to set the title on.
 154    *
 155    * @return {string|ClickableComponent}
 156    *         - The control text when getting
 157    *         - Returns itself when setting; method can be chained.
 158    */
 159
 160
 161   ClickableComponent.prototype.controlText = function controlText(text) {
 162     var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.el();
 163
 164     if (!text) {
 165       return this.controlText_ || 'Need Text';
 166     }
 167
 168     var localizedText = this.localize(text);
 169
 170     this.controlText_ = text;
 171     this.controlTextEl_.innerHTML = localizedText;
 172
 173     if (!this.nonIconControl) {
 174       // Set title attribute if only an icon is shown
 175       el.setAttribute('title', localizedText);
 176     }
 177
 178     return this;
 179   };
 180
 181   /**
 182    * Builds the default DOM `className`.
 183    *
 184    * @return {string}
 185    *         The DOM `className` for this object.
 186    */
 187
 188
 189   ClickableComponent.prototype.buildCSSClass = function buildCSSClass() {
 190     return 'vjs-control vjs-button ' + _Component.prototype.buildCSSClass.call(this);
 191   };
 192
 193   /**
 194    * Enable this `Component`s element.
 195    *
 196    * @return {ClickableComponent}
 197    *         Returns itself; method can be chained.
 198    */
 199
 200
 201   ClickableComponent.prototype.enable = function enable() {
 202     this.removeClass('vjs-disabled');
 203     this.el_.setAttribute('aria-disabled', 'false');
 204     if (typeof this.tabIndex_ !== 'undefined') {
 205       this.el_.setAttribute('tabIndex', this.tabIndex_);
 206     }
 207     this.on('tap', this.handleClick);
 208     this.on('click', this.handleClick);
 209     this.on('focus', this.handleFocus);
 210     this.on('blur', this.handleBlur);
 211     return this;
 212   };
 213
 214   /**
 215    * Disable this `Component`s element.
 216    *
 217    * @return {ClickableComponent}
 218    *         Returns itself; method can be chained.
 219    */
 220
 221
 222   ClickableComponent.prototype.disable = function disable() {
 223     this.addClass('vjs-disabled');
 224     this.el_.setAttribute('aria-disabled', 'true');
 225     if (typeof this.tabIndex_ !== 'undefined') {
 226       this.el_.removeAttribute('tabIndex');
 227     }
 228     this.off('tap', this.handleClick);
 229     this.off('click', this.handleClick);
 230     this.off('focus', this.handleFocus);
 231     this.off('blur', this.handleBlur);
 232     return this;
 233   };
 234
 235   /**
 236    * This gets called when a `ClickableComponent` gets:
 237    * - Clicked (via the `click` event, listening starts in the constructor)
 238    * - Tapped (via the `tap` event, listening starts in the constructor)
 239    * - The following things happen in order:
 240    *   1. {@link ClickableComponent#handleFocus} is called via a `focus` event on the
 241    *      `ClickableComponent`.
 242    *   2. {@link ClickableComponent#handleFocus} adds a listener for `keydown` on using
 243    *      {@link ClickableComponent#handleKeyPress}.
 244    *   3. `ClickableComponent` has not had a `blur` event (`blur` means that focus was lost). The user presses
 245    *      the space or enter key.
 246    *   4. {@link ClickableComponent#handleKeyPress} calls this function with the `keydown`
 247    *      event as a parameter.
 248    *
 249    * @param {EventTarget~Event} event
 250    *        The `keydown`, `tap`, or `click` event that caused this function to be
 251    *        called.
 252    *
 253    * @listens tap
 254    * @listens click
 255    * @abstract
 256    */
 257
 258
 259   ClickableComponent.prototype.handleClick = function handleClick(event) {};
 260
 261   /**
 262    * This gets called when a `ClickableComponent` gains focus via a `focus` event.
 263    * Turns on listening for `keydown` events. When they happen it
 264    * calls `this.handleKeyPress`.
 265    *
 266    * @param {EventTarget~Event} event
 267    *        The `focus` event that caused this function to be called.
 268    *
 269    * @listens focus
 270    */
 271
 272
 273   ClickableComponent.prototype.handleFocus = function handleFocus(event) {
 274     Events.on(_document2['default'], 'keydown', Fn.bind(this, this.handleKeyPress));
 275   };
 276
 277   /**
 278    * Called when this ClickableComponent has focus and a key gets pressed down. By
 279    * default it will call `this.handleClick` when the key is space or enter.
 280    *
 281    * @param {EventTarget~Event} event
 282    *        The `keydown` event that caused this function to be called.
 283    *
 284    * @listens keydown
 285    */
 286
 287
 288   ClickableComponent.prototype.handleKeyPress = function handleKeyPress(event) {
 289
 290     // Support Space (32) or Enter (13) key operation to fire a click event
 291     if (event.which === 32 || event.which === 13) {
 292       event.preventDefault();
 293       this.handleClick(event);
 294     } else if (_Component.prototype.handleKeyPress) {
 295
 296       // Pass keypress handling up for unsupported keys
 297       _Component.prototype.handleKeyPress.call(this, event);
 298     }
 299   };
 300
 301   /**
 302    * Called when a `ClickableComponent` loses focus. Turns off the listener for
 303    * `keydown` events. Which Stops `this.handleKeyPress` from getting called.
 304    *
 305    * @param {EventTarget~Event} event
 306    *        The `blur` event that caused this function to be called.
 307    *
 308    * @listens blur
 309    */
 310
 311
 312   ClickableComponent.prototype.handleBlur = function handleBlur(event) {
 313     Events.off(_document2['default'], 'keydown', Fn.bind(this, this.handleKeyPress));
 314   };
 315
 316   return ClickableComponent;
 317 }(_component2['default']);
 318
 319 _component2['default'].registerComponent('ClickableComponent', ClickableComponent);
 320 exports['default'] = ClickableComponent;