/**
 * @file 菜單項.js
 */
從 '../clickable-component.js' 導入 ClickableComponent；
從 '../component.js' 導入組件；
從'../utils/obj'導入{assign}；
從 './menu-keys.js' 導入 {MenuKeys}；
從“鍵碼”導入鍵碼；
從'../utils/dom.js'導入{createEl}；

/**
 * 菜單項的組件。 `<li>`
 *
 * @extends 可點擊組件
 */
類 MenuItem 擴展 ClickableComponent {

  /**
   * 創建此類的一個實例。
   *
   * @param {Player} 播放器
   * 此類應附加到的 `Player`。
   *
   * @param {對象} [選項={}]
   * 播放器選項的鍵/值存儲。
   *
   */
  構造函數（播放器，選項）{
    超級（播放器，選項）；

    this.selectable = options.selectable;
    this.isSelected_ = options.selected ||錯誤的;
    this.multiSelectable = options.multiSelectable;

    this.selected(this.isSelected_);

    如果（this.selectable）{
      如果（this.multiSelectable）{
        this.el_.setAttribute('角色', 'menuitemcheckbox');
      }其他{
        this.el_.setAttribute('角色', 'menuitemradio');
      }
    }其他{
      this.el_.setAttribute('角色', '菜單項');
    }
  }

  /**
   * 創建 `MenuItem 的 DOM 元素
   *
   * @param {字符串} [type=li]
   * 元素的節點類型，未實際使用，始終設置為 `li`。
   *
   * @param {對象} [道具={}]
   * 應在元素上設置的屬性對象
   *
   * @param {對象} [屬性={}]
   * 應在元素上設置的屬性對象
   *
   * @return {元素}
   * 被創建的元素。
   */
  createEl（類型，道具，屬性）{
    // 控件是文本的，而不僅僅是一個圖標
    this.nonIconControl = true;

    const el = super.createEl('li', assign({
      類名：'vjs-菜單項'，
      選項卡索引：-1
    }, 道具), 屬性);

    // 將圖標與菜單項文本交換。
    el.replaceChild(createEl('span', {
      className: 'vjs-menu-item-text',
      文本內容：this.localize(this.options_.label)
    }), el.querySelector('.vjs-icon-placeholder'));

    返回 el;
  }

  /**
   * 忽略菜單使用的鍵，但傳遞任何其他鍵。看
   * {@link ClickableComponent#handleKeyDown} 用於調用它的實例。
   *
   * @param {EventTarget~Event} 事件
   * 導致調用此函數的 `keydown` 事件。
   *
   * @listens 按鍵
   */
  handleKeyDown（事件）{
    如果 (!MenuKeys.some((key) => keycode.isEventKey(event, key))) {
      // 為未使用的鍵傳遞 keydown 處理
      super.handleKeyDown(事件);
    }
  }

  /**
   * 任何點擊 `MenuItem` 都會將其置於選中狀態。
   * 請參閱 {@link ClickableComponent#handleClick} 以了解調用此方法的實例。
   *
   * @param {EventTarget~Event} 事件
   * 導致此功能被執行的 `keydown`、`tap` 或 `click` 事件
   * 打電話。
   *
   * @listens 水龍頭
   * @listens 點擊
   */
  handleClick（事件）{
    這個。選擇（真）；
  }

  /**
   * 將此菜單項的狀態設置為選中或未選中。
   *
   * @param {boolean} 選中
   * 菜單項是否被選中
   */
  選擇（選擇）{
    如果（this.selectable）{
      如果（選擇）{
        this.addClass('vjs-selected');
        this.el_.setAttribute('aria-checked', 'true');
        // 瀏覽器/屏幕閱讀器不完全支持 aria-checked，
        // 因此在控製文本中向屏幕閱讀器指示選定狀態。
        this.controlText(', selected');
        this.isSelected_ = true;
      }其他{
        this.removeClass('vjs-selected');
        this.el_.setAttribute('aria-checked', 'false');
        // 向屏幕閱讀器指示未選擇狀態
        this.controlText('');
        this.isSelected_ = false;
      }
    }
  }
}

Component.registerComponent('MenuItem', MenuItem);
導出默認菜單項；