/**
 * @file clickable-component.js
 */
從 './component' 導入組件；
import * as Dom from './utils/dom.js';
從 './utils/log.js' 導入日誌；
從'./utils/obj'導入{assign}；
從“鍵碼”導入鍵碼；

/**
 * 可點擊或鍵盤操作的組件，但不是
 * 本機 HTML 按鈕。
 *
 * @extends 組件
 */
類 ClickableComponent 擴展組件 {

  /**
   * 創建此類的一個實例。
   *
   * @param {Player} 播放器
   * 此類應附加到的 `Player`。
   *
   * @param {對象} [選項]
   * 組件選項的鍵/值存儲。
   *
   * @param {function} [options.clickHandler]
   * 單擊/激活按鈕時調用的函數
   *
   * @param {string} [options.controlText]
   * 在按鈕上設置的文本
   *
   * @param {string} [options.className]
   * 類或空格分隔的類列表以添加組件
   *
   */
  構造函數（播放器，選項）{

    超級（播放器，選項）；

    如果（this.options_.controlText）{
      this.controlText(this.options_.controlText);
    }

    this.handleMouseOver_ = (e) => this.handleMouseOver(e);
    this.handleMouseOut_ = (e) => this.handleMouseOut(e);
    this.handleClick_ = (e) => this.handleClick(e);
    this.handleKeyDown_ = (e) => this.handleKeyDown(e);

    this.emitTapEvents();

    這個。啟用（）；
  }

  /**
   * 創建 `ClickableComponent` 的 DOM 元素。
   *
   * @param {string} [tag=div]
   * 元素的節點類型。
   *
   * @param {對象} [道具={}]
   * 應在元素上設置的屬性對象。
   *
   * @param {對象} [屬性={}]
   * 應在元素上設置的屬性對象。
   *
   * @return {元素}
   * 被創建的元素。
   */
  createEl(tag = 'div', props = {}, attributes = {}) {
    道具=分配（{
      類名：this.buildCSSClass(),
      選項卡索引： 0
    }， 道具）;

    如果（標籤==='按鈕'）{
      log.error(`不支持使用 ${tag} 的 HTML 元素創建 ClickableComponent；請改用 Button。`);
    }

    // 為不是原生 HTML 按鈕的可點擊元素添加 ARIA 屬性
    屬性=分配（{
      作用：“按鈕”
    }， 屬性）;

    this.tabIndex_ = props.tabIndex;

    const el = Dom.createEl(tag, props, attributes);

    el.appendChild(Dom.createEl('span', {
      className: 'vjs-icon-placeholder'
    }，{
      'aria-hidden': true
    }));

    this.createControlTextEl(el);

    返回 el;
  }

  處置（）{
    // 在處理時刪除 controlTextEl_
    this.controlTextEl_ = null;

    super.dispose();
  }

  /**
   * 在此 `ClickableComponent` 上創建一個控製文本元素
   *
   * @param {元素} [el]
   * 控件文本的父元素。
   *
   * @return {元素}
   * 創建的控製文本元素。
   */
  createControlTextEl(el) {
    this.controlTextEl_ = Dom.createEl('span', {
      類名：'vjs-control-text'
    }，{
      // 讓屏幕閱讀器用戶知道元素的文本可能會改變
      'aria-live'：'禮貌'
    }）；

    如果（EL）{
      el.appendChild(this.controlTextEl_);
    }

    this.controlText(this.controlText_, el);

    返回 this.controlTextEl_;
  }

  /**
   * 獲取或設置本地化文本以用於 `ClickableComponent` 上的控件。
   *
   * @param {字符串} [文本]
   * 元素的控製文本。
   *
   * @param {元素} [el=this.el()]
   * 設置標題的元素。
   *
   * @return {字符串}
   * - 獲取時的控製文本
   */
  controlText(text, el = this.el()) {
    如果（文本===未定義）{
      返回 this.controlText_ || '需要文字';
    }

    const localizedText = this.localize(文本);

    this.controlText_ = 文本；
    Dom.textContent(this.controlTextEl_, localizedText);
    如果（！this.nonIconControl && ！this.player_.options_.noUITitleAttributes）{
      // 如果只顯示一個圖標，設置 title 屬性
      el.setAttribute('title', localizedText);
    }
  }

  /**
   * 構建默認的 DOM `className`。
   *
   * @return {字符串}
   * 此對象的 DOM `className`。
   */
  buildCSSClass() {
    返回`vjs-control vjs-button ${super.buildCSSClass()}`;
  }

  /**
   * 啟用這個 `ClickableComponent`
   */
  使能夠（） {
    如果（！this.enabled_）{
      this.enabled_ = true;
      this.removeClass('vjs-disabled');
      this.el_.setAttribute('aria-disabled', 'false');
      如果（這種類型。標籤索引 _！== '未定義') {
        this.el_.setAttribute('tabIndex', this.tabIndex_);
      }
      this.on(['點擊', '點擊'], this.handleClick_);
      this.on('keydown', this.handleKeyDown_);
    }
  }

  /**
   * 禁用這個 `ClickableComponent`
   */
  禁用（）{
    this.enabled_ = false;
    this.addClass('vjs-disabled');
    this.el_.setAttribute('aria-disabled', 'true');
    如果（這種類型。標籤索引 _！== '未定義') {
      this.el_.removeAttribute('tabIndex');
    }
    this.off('mouseover', this.handleMouseOver_);
    this.off('mouseout', this.handleMouseOut_);
    this.off(['tap', 'click'], this.handleClick_);
    this.off('keydown', this.handleKeyDown_);
  }

  /**
   * 為組件中的播放器處理 ClickableComponent 中的語言更改
   *
   *
   */
  handleLanguagechange() {
    this.controlText(this.controlText_);
  }

  /**
   * 當 `ClickableComponent` 接收到
   * `click` 或 `tap` 事件。
   *
   * @param {EventTarget~Event} 事件
   * 導致調用此函數的 `tap` 或 `click` 事件。
   *
   * @listens 水龍頭
   * @listens 點擊
   * @抽象的
   */
  handleClick（事件）{
    如果（this.options_.clickHandler）{
      this.options_.clickHandler.call(this, arguments);
    }
  }

  /**
   * 當 `ClickableComponent` 接收到
   * `keydown` 事件。
   *
   * 默認情況下，如果按鍵是Space或Enter，它會觸發一個`click`事件。
   *
   * @param {EventTarget~Event} 事件
   * 導致調用此函數的 `keydown` 事件。
   *
   * @listens 按鍵
   */
  handleKeyDown（事件）{

    // 支持空格鍵或回車鍵操作觸發點擊事件。還，
    // 防止事件通過 DOM 傳播並觸發
    // 播放器熱鍵。
    if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
      事件.preventDefault();
      事件.stopPropagation();
      this.trigger('點擊');
    }其他{

      // 為不支持的鍵傳遞按鍵處理
      super.handleKeyDown(事件);
    }
  }
}

Component.registerComponent('ClickableComponent', ClickableComponent);
導出默認的 ClickableComponent；