/**
 * @file clickable-component.js
 */
'./component'에서 컴포넌트 가져오기;
import * as Dom from './utils/dom.js';
'./utils/log.js'에서 로그 가져오기;
'./utils/obj'에서 {assign} 가져오기;
'키코드'에서 키코드 가져오기;

/**
 * 클릭 가능하거나 키보드로 실행 가능하지만
 * 기본 HTML 버튼.
 *
 * @extends 컴포넌트
 */
ClickableComponent 클래스는 Component {를 확장합니다.

  /**
   * 이 클래스의 인스턴스를 만듭니다.
   *
   * @param {플레이어} 플레이어
   * 이 클래스가 연결되어야 하는 `Player`.
   *
   * @param {객체} [옵션]
   * 구성 요소 옵션의 키/값 저장소입니다.
   *
   * @param {함수} [options.clickHandler]
   * 버튼 클릭/활성화 시 호출되는 기능
   *
   * @param {문자열} [옵션.제어 텍스트]
   * 버튼에 설정할 텍스트
   *
   * @param {문자열} [옵션.클래스 이름]
   * 구성 요소를 추가할 클래스 또는 공백으로 구분된 클래스 목록
   *
   */
  생성자(플레이어, 옵션) {

    super(플레이어, 옵션);

    if (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();

    this.enable();
  }

  /**
   * `ClickableComponent`의 DOM 요소를 생성합니다.
   *
   * @param {문자열} [태그=div]
   * 요소의 노드 유형.
   *
   * @param {객체} [소품={}]
   * 요소에 설정해야 하는 속성의 개체입니다.
   *
   * @param {객체} [속성={}]
   * 요소에 설정되어야 하는 속성의 객체.
   *
   * @return {요소}
   * 생성되는 요소.
   */
  createEl(태그 = 'div', 소품 = {}, 속성 = {}) {
    소품 = 할당({
      className: this.buildCSSClass(),
      탭 인덱스: 0
    }, 소품);

    if (태그 === '버튼') {
      log.error(`${tag}의 HTML 요소로 ClickableComponent를 생성하는 것은 지원되지 않습니다. 대신 버튼을 사용하세요.`);
    }

    // 기본 HTML 버튼이 아닌 클릭 가능한 요소에 대한 ARIA 속성 추가
    속성 = 할당({
      역할: '버튼'
    }, 속성);

    this.tabIndex_ = 소품.tabIndex;

    const el = Dom.createEl(태그, 소품, 속성);

    el.appendChild(Dom.createEl('스팬', {
      className: 'vjs-icon-placeholder'
    }, {
      '아리아 숨김': 참
    }));

    this.createControlTextEl(el);

    반환 엘;
  }

  폐기() {
    // 폐기 시 controlTextEl_ 제거
    this.controlTextEl_ = null;

    super.dispose();
  }

  /**
   * 이 `ClickableComponent`에 제어 텍스트 요소를 생성합니다.
   *
   * @param {요소} [엘]
   * 제어 텍스트의 부모 요소.
   *
   * @return {요소}
   * 생성되는 제어 텍스트 요소.
   */
  createControlTextEl(el) {
    this.controlTextEl_ = Dom.createEl('스팬', {
      className: 'vjs-제어-텍스트'
    }, {
      // 화면 판독기 사용자에게 요소의 텍스트가 변경될 수 있음을 알립니다.
      'aria-live': '정중한'
    });

    경우 (엘) {
      el.appendChild(this.controlTextEl_);
    }

    this.controlText(this.controlText_, el);

    this.controlTextEl_을 반환합니다.
  }

  /**
   * `ClickableComponent`의 컨트롤에 사용할 현지화 텍스트를 가져오거나 설정합니다.
   *
   * @param {문자열} [텍스트]
   * 요소에 대한 제어 텍스트.
   *
   * @param {요소} [el=this.el()]
   * 제목을 설정할 요소.
   *
   * @return {문자열}
   * - 가져올 때 제어 텍스트
   */
  controlText(텍스트, el = this.el()) {
    if (텍스트 === 정의되지 않음) {
      return this.controlText_ || '텍스트 필요';
    }

    const localizedText = this.localize(텍스트);

    this.controlText_ = 텍스트;
    Dom.textContent(this.controlTextEl_, localizedText);
    if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
      // 아이콘만 표시되는 경우 제목 속성 설정
      el.setAttribute('제목', localizedText);
    }
  }

  /**
   * 기본 DOM `className`을 빌드합니다.
   *
   * @return {문자열}
   * 이 개체의 DOM `className`입니다.
   */
  buildCSSClass() {
    `vjs-컨트롤 vjs-버튼 ${super.buildCSSClass()}` 반환;
  }

  /**
   * 이 `ClickableComponent` 활성화
   */
  할 수 있게 하다() {
    if (!this.enabled_) {
      this.enabled_ = 참;
      this.removeClass('vjs-disabled');
      this.el_.setAttribute('aria-disabled', 'false');
      if (typeof this.tabIndex_ !== '정의되지 않음') {
        this.el_.setAttribute('tabIndex', this.tabIndex_);
      }
      this.on(['탭', '클릭'], this.handleClick_);
      this.on('keydown', this.handleKeyDown_);
    }
  }

  /**
   * 이 `ClickableComponent` 비활성화
   */
  장애를 입히다() {
    this.enabled_ = 거짓;
    this.addClass('vjs-disabled');
    this.el_.setAttribute('aria-disabled', 'true');
    if (typeof this.tabIndex_ !== '정의되지 않음') {
      this.el_.removeAttribute('tabIndex');
    }
    this.off('mouseover', this.handleMouseOver_);
    this.off('마우스아웃', this.handleMouseOut_);
    this.off(['탭', '클릭'], this.handleClick_);
    this.off('키다운', this.handleKeyDown_);
  }

  /**
   * 구성 요소의 플레이어에 대한 ClickableComponent의 언어 변경 처리
   *
   *
   */
  핸들언어변경() {
    this.controlText(this.controlText_);
  }

  /**
   * `ClickableComponent`가
   * `클릭` 또는 `탭` 이벤트.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 함수를 호출하게 만든 `tap` 또는 `click` 이벤트.
   *
   * @listens 탭
   * @듣기 클릭
   * @추상적인
   */
  handleClick(이벤트) {
    if (this.options_.clickHandler) {
      this.options_.clickHandler.call(this, arguments);
    }
  }

  /**
   * `ClickableComponent`가
   * `키다운` 이벤트.
   *
   * 기본적으로 키가 Space 또는 Enter인 경우 '클릭' 이벤트가 트리거됩니다.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 함수를 호출한 `keydown` 이벤트.
   *
   * @listens 키다운
   */
  handleKeyDown(이벤트) {

    // 클릭 이벤트를 발생시키기 위해 Space 또는 Enter 키 조작을 지원합니다. 또한,
    // 이벤트가 DOM을 통해 전파되고 트리거되는 것을 방지합니다.
    // 플레이어 핫키.
    if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
      event.preventDefault();
      event.stopPropagation();
      this.trigger('클릭');
    } else {

      // 지원되지 않는 키에 대한 키 누르기 처리를 전달합니다.
      super.handleKeyDown(이벤트);
    }
  }
}

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