/**
 * @file menu-item.js
 */
'../clickable-component.js'에서 ClickableComponent 가져오기;
'../component.js'에서 컴포넌트 가져오기;
'../utils/obj'에서 {assign} 가져오기;
'./menu-keys.js'에서 {MenuKeys} 가져오기;
'키코드'에서 키코드 가져오기;
'../utils/dom.js'에서 {createEl} 가져오기;

/**
 * 메뉴 항목의 구성 요소입니다. `< 리> `
 *
 * @extends ClickableComponent
 */
클래스 MenuItem 확장 ClickableComponent {

  /**
   * 이 클래스의 인스턴스를 만듭니다.
   *
   * @param {플레이어} 플레이어
   * 이 클래스가 연결되어야 하는 `Player`.
   *
   * @param {객체} [옵션={}]
   * 플레이어 옵션의 키/값 저장소.
   *
   */
  생성자(플레이어, 옵션) {
    super(플레이어, 옵션);

    this.selectable = 옵션.선택 가능;
    this.isSelected_ = options.selected || 거짓;
    this.multiSelectable = options.multiSelectable;

    this.selected(this.isSelected_);

    if (이.선택 가능) {
      if (이.다중 선택 가능) {
        this.el_.setAttribute('역할', 'menuitemcheckbox');
      } else {
        this.el_.setAttribute('역할', 'menuitemradio');
      }
    } else {
      this.el_.setAttribute('역할', 'menuitem');
    }
  }

  /**
   * `MenuItem's DOM 요소 생성
   *
   * @param {문자열} [유형=li]
   * 실제로 사용되지 않는 요소의 노드 유형은 항상 `li`로 설정됩니다.
   *
   * @param {객체} [소품={}]
   * 요소에 설정해야 하는 속성의 개체
   *
   * @param {객체} [attrs={}]
   * 요소에 설정해야 하는 속성의 객체
   *
   * @return {요소}
   * 생성되는 요소.
   */
  createEl(유형, 소품, 속성) {
    // 컨트롤은 아이콘이 아니라 텍스트입니다.
    this.nonIconControl = 참;

    const el = super.createEl('리', 할당({
      className: 'vjs-메뉴-항목',
      탭 인덱스: -1
    }, 소품), attrs);

    // 아이콘을 메뉴 항목 텍스트로 교체합니다.
    el.replaceChild(createEl('스팬', {
      className: 'vjs-menu-item-text',
      textContent: this.localize(this.options_.label)
    }), el.querySelector('.vjs-icon-placeholder'));

    반환 엘;
  }

  /**
   * 메뉴에서 사용되는 키는 무시하고 다른 키는 위로 전달합니다. 보다
   * 이것이 호출되는 인스턴스에 대한 {@link ClickableComponent#handleKeyDown}.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 함수를 호출한 `keydown` 이벤트.
   *
   * @listens 키다운
   */
  handleKeyDown(이벤트) {
    if (!MenuKeys.some((key) => keycode.isEventKey(이벤트, 키))) {
      // 사용하지 않는 키에 대한 keydown 처리를 전달합니다.
      super.handleKeyDown(이벤트);
    }
  }

  /**
   * `MenuItem`을 클릭하면 선택한 상태로 전환됩니다.
   * 이것이 호출되는 인스턴스는 {@link ClickableComponent#handleClick}을 참조하세요.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 함수를 실행하게 만든 `keydown`, `tap` 또는 `click` 이벤트
   * 라고 불리는.
   *
   * @listens 탭
   * @듣기 클릭
   */
  handleClick(이벤트) {
    this.selected(true);
  }

  /**
   * 이 메뉴 항목의 상태를 선택 여부로 설정합니다.
   *
   * @param {부울} 선택됨
   * 메뉴 항목 선택 여부
   */
  선택됨(선택됨) {
    if (이.선택 가능) {
      if (선택) {
        this.addClass('vjs-selected');
        this.el_.setAttribute('aria-checked', 'true');
        // aria-checked는 브라우저/스크린 리더에서 완전히 지원되지 않습니다.
        // 따라서 제어 텍스트에서 화면 판독기에 선택된 상태를 나타냅니다.
        this.controlText(', selected');
        this.isSelected_ = 참;
      } else {
        this.removeClass('vjs-selected');
        this.el_.setAttribute('aria-checked', 'false');
        // 선택되지 않은 상태를 스크린 리더에 알립니다.
        this.controlText('');
        this.isSelected_ = 거짓;
      }
    }
  }
}

Component.registerComponent('MenuItem', MenuItem);
기본 MenuItem 내보내기;