/**
 * @Datei klickbare-komponente.js
 * /
importiere Komponente von './komponente';
importiere * as Dom aus './utils/dom.js';
import log from './utils/log.js';
importiere {assign} von './utils/obj';
import keycode from 'keycode';

/**
 * Komponente, die anklickbar oder über die Tastatur bedienbar ist, aber keine
 * native HTML-Schaltfläche.
 *
 * @erweitert Komponente
 * /
class ClickableComponent extends Component {

  /**
   * Erzeugt eine Instanz dieser Klasse.
   *
   * @param {Player} Spieler
   *         Der `Player`, dem diese Klasse zugeordnet werden soll.
   *
   * @param {Object} [Optionen]
   *         Der Schlüssel/Wertspeicher der Komponentenoptionen.
   *
   * @param {function} [options.clickHandler]
   *         Die Funktion, die aufgerufen werden soll, wenn die Schaltfläche angeklickt/aktiviert wird
   *
   * @param {string} [options.controlText]
   *         Der Text, der auf der Schaltfläche erscheinen soll
   *
   * @param {string} [options.className]
   *         Eine Klasse oder eine durch Leerzeichen getrennte Liste von Klassen zum Hinzufügen der Komponente
   *
   * /
  constructor(spieler, optionen) {

    super(Spieler, Optionen);

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

  /**
   * Erstellen Sie das DOM-Element "ClickableComponent".
   *
   * @param {string} [tag=div]
   *        Der Knotentyp des Elements.
   *
   * @param {Object} [props={}]
   *        Ein Objekt mit Eigenschaften, die für das Element festgelegt werden sollen.
   *
   * @param {Object} [attributes={}]
   *        Ein Objekt mit Attributen, die für das Element festgelegt werden sollen.
   *
   * @return {Element}
   *         Das Element, das erstellt wird.
   * /
  createEl(tag = 'div', props = {}, attributes = {}) {
    props = assign({
      className: this.buildCSSClass(),
      tabIndex: 0
    }, props);

    if (tag === 'button') {
      log.error(`Die Erstellung einer ClickableComponent mit einem HTML-Element von ${tag} wird nicht unterstützt; verwenden Sie stattdessen eine Schaltfläche.`);
    }

    // Hinzufügen von ARIA-Attributen für anklickbare Elemente, die keine nativen HTML-Schaltflächen sind
    attribute = assign({
      rolle: 'Schaltfläche'
    }, attributes);

    this.tabIndex_ = props.tabIndex;

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

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

    this.createControlTextEl(el);

    zurück el;
  }

  dispose() {
    // Entfernen von controlTextEl_ bei Dispose
    this.controlTextEl_ = null;

    super.dispose();
  }

  /**
   * Erstellen Sie ein Steuerelement für diesen "ClickableComponent"
   *
   * @param {Element} [el]
   *        Übergeordnetes Element für den Kontrolltext.
   *
   * @return {Element}
   *         Das Steuerelement für den Text, das erstellt wird.
   * /
  createControlTextEl(el) {
    this.controlTextEl_ = Dom.createEl('span', {
      className: 'vjs-control-text'
    }, {
      // teilt dem Benutzer des Bildschirmlesegeräts mit, dass sich der Text des Elements ändern kann
      aria-live': 'höflich'
    });

    wenn (el) {
      el.appendChild(this.controlTextEl_);
    }

    this.controlText(this.controlText_, el);

    return this.controlTextEl_;
  }

  /**
   * Holt oder setzt den Lokalisierungstext, der für die Steuerelemente der `ClickableComponent` verwendet werden soll.
   *
   * @param {string} [text]
   *        Kontrolltext für das Element.
   *
   * @param {Element} [el=this.el()]
   *        Element, auf das der Titel gesetzt wird.
   *
   * @return {string}
   *         - Der Kontrolltext, wenn er
   * /
  controlText(text, el = this.el()) {
    if (text === undefiniert) {
      return this.controlText_ || 'Need Text';
    }

    const localizedText = this.localize(text);

    this.controlText_ = Text;
    Dom.textContent(this.controlTextEl_, localizedText);
    if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
      // Titelattribut setzen, wenn nur ein Symbol angezeigt wird
      el.setAttribute('Titel', localizedText);
    }
  }

  /**
   * Erzeugt den Standard-DOM "Klassenname".
   *
   * @return {string}
   *         Der DOM `className` für dieses Objekt.
   * /
  buildCSSClass() {
    return `vjs-control vjs-button ${super.buildCSSClass()}`;
  }

  /**
   * Diese "klickbare Komponente" aktivieren
   * /
  enable() {
    if (!this.enabled_) {
      this.enabled_ = true;
      this.removeClass('vjs-disabled');
      this.el_.setAttribute('aria-disabled', 'false');
      if (typeof this.tabIndex_ !== 'undefined') {
        this.el_.setAttribute('tabIndex', this.tabIndex_);
      }
      this.on(['tap', 'click'], this.handleClick_);
      this.on('keydown', this.handleKeyDown_);
    }
  }

  /**
   * Diese "klickbare Komponente" deaktivieren
   * /
  deaktivieren() {
    this.enabled_ = false;
    this.addClass('vjs-disabled');
    this.el_.setAttribute('aria-disabled', 'true');
    if (typeof this.tabIndex_ !== 'undefined') {
      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_);
  }

  /**
   * Behandelt Sprachwechsel in ClickableComponent für den Player in Komponenten
   *
   *
   * /
  handleLanguagechange() {
    this.controlText(this.controlText_);
  }

  /**
   * Ereignisbehandlungsroutine, die aufgerufen wird, wenn eine `ClickableComponent` einen
   * klick"- oder "Tipp"-Ereignis.
   *
   * @param {EventTarget~Event} event
   *        Das "tap"- oder "click"-Ereignis, das zum Aufruf dieser Funktion geführt hat.
   *
   * @listens tap
   * @listens klicken
   * @Abstrakt
   * /
  handleClick(event) {
    if (this.options_.clickHandler) {
      this.options_.clickHandler.call(this, arguments);
    }
  }

  /**
   * Ereignisbehandlungsroutine, die aufgerufen wird, wenn eine `ClickableComponent` einen
   * ereignis "Abbruch".
   *
   * Wenn die Taste die Leertaste oder die Eingabetaste ist, löst sie standardmäßig ein "Klick"-Ereignis aus.
   *
   * @param {EventTarget~Event} event
   *        Das "Keydown"-Ereignis, das zum Aufruf dieser Funktion geführt hat.
   *
   * @listens keydown
   * /
  handleKeyDown(event) {

    // Unterstützung der Leertaste oder der Eingabetaste zum Auslösen eines Klickereignisses. Auch,
    // verhindern, dass sich das Ereignis durch das DOM ausbreitet und das Ereignis auslöst
    // Hotkeys für Spieler.
    if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
      event.preventDefault();
      event.stopPropagation();
      this.trigger('click');
    } else {

      // Übergabe der Tastendruckbehandlung für nicht unterstützte Tasten
      super.handleKeyDown(event);
    }
  }
}

Component.registerComponent('ClickableComponent', ClickableComponent);
exportieren Sie standardmäßig ClickableComponent;