/**
 * @file menu-item.js
 * /
importiere ClickableComponent aus '.. /clickable-component.js ';
importiere Komponente aus '../component.js';
importiere {assign} von '../utils/obj';
importiere {MenuKeys} aus '. /menu-keys.js ';
import keycode from 'keycode';
importiere {createEL} aus '.. /utils/dom.js ';

/**
 * Die Komponente für einen Menüpunkt. `<li>`
 *
 * @erweitert ClickableComponent
 * /
Klasse MenuItem erweitert ClickableComponent {

  /**
   * Erzeugt eine Instanz der Klasse this.
   *
   * @param {Player} Spieler
   *        Der `Player`, dem diese Klasse zugeordnet werden soll.
   *
   * @param {Object} [options={}]
   *        Der Schlüssel/Wertspeicher der Playeroptionen.
   *
   * /
  constructor(spieler, optionen) {
    super(Spieler, Optionen);

    this.selectable = Optionen.auswählbar;
    this.isSelected_ = optionen.ausgewählt || falsch;
    this.multiSelectable = Optionen.multiSelectable;

    this.selected (this.isSelected_);

    if (this.selectable) {
      wenn (this.multiSelectable) {
        this.el_.setAttribute ('role', 'menuitemcheckbox');
      } sonst {
        this.el_.setAttribute ('role', 'menuitemradio');
      }
    } sonst {
      this.el_.setAttribute ('Rolle', 'Menüpunkt');
    }
  }

  /**
   * Erstelle das DOM-Element von `MenuItem
   *
   * @param {string} [typ=li]
   * Der Knotentyp des Elements, der nicht wirklich verwendet wird, ist immer auf `li` gesetzt.
   *
   * @param {Object} [props={}]
   * Ein Objekt mit Eigenschaften, die für das Element festgelegt werden sollten
   *
   * @param {Objekt} [attrs= {}]
   * Ein Objekt mit Attributen, die für das Element gesetzt werden sollen
   *
   * @return {Element}
   *         Das Element, das erstellt wird.
   * /
  createEl(type, props, attrs) {
    //Das Steuerelement ist textuell, nicht nur ein Symbol
    this.noIconControl = wahr;

    const el = super.createEl ('li', assign ({
      Klassenname: 'vjs-menu-item',
      tabIndex: -1
    }, Requisiten), Attren);

    //tausche das Symbol mit dem Text des Menüeintrags aus.
    el.replaceChild (createEl ('span', {
      Klassenname: 'vjs-menu-item-text',
      TextInhalt: this.localize (this.options_.label)
    }), el.querySelector ('.vjs-icon-placeholder'));

    zurück el;
  }

  /**
   * Ignoriere Tasten, die vom Menü benutzt werden, übergib aber alle anderen. Sehen
   * {@link ClickableComponent#handleKeyDown} für Instanzen, in denen dies aufgerufen wird.
   *
   * @param {EventTarget~Event} event
   *        Das "Keydown"-Ereignis, das zum Aufruf dieser Funktion geführt hat.
   *
   * @listens keydown
   * /
  handleKeyDown(event) {
    wenn (! menuKeys.some ((Schlüssel) => keycode.isEventKey (Ereignis, Schlüssel)) {
      //Keydown-Behandlung für ungenutzte Schlüssel weiterleiten
      super.handleKeyDown(event);
    }
  }

  /**
   * Jeder Klick auf ein `MenuItem` versetzt es in den ausgewählten Zustand.
   * Siehe {@link ClickableComponent#handleClick} für Instanzen, in denen dies aufgerufen wird.
   *
   * @param {EventTarget~Event} event
   *        Das `Keydown`-, `Tap`- oder `Click`-Ereignis, das diese Funktion ausgelöst hat
   *        genannt.
   *
   * @listens tap
   * @listens klicken
   * /
  handleClick(event) {
    this.selected (wahr);
  }

  /**
   * Stellen Sie den Status für diesen Menüpunkt als ausgewählt ein oder nicht.
   *
   * @param {boolean} ausgewählt
   * ob der Menüpunkt ausgewählt ist oder nicht
   * /
  ausgewählt (ausgewählt) {
    if (this.selectable) {
      wenn (ausgewählt) {
        this.addClass ('vjs-selected');
        this.el_.setAttribute ('aria-checked', 'wahr');
        //aria-checked wird von Browsern/Screenreadern nicht vollständig unterstützt,
        //geben Sie dem Screenreader also den ausgewählten Status im Steuertext an.
        this.controlText (', ausgewählt');
        this.isSelected_ = wahr;
      } sonst {
        this.removeClass ('vjs-selected');
        this.el_.setAttribute ('aria-checked', 'falsch');
        //Zeigt dem Bildschirmleser einen nicht ausgewählten Status an
        this.controlText („);
        this.isSelected_ = falsch;
      }
    }
  }
}

component.registerComponent ('MenuItem', MenuItem);
Exportieren Sie das Standard-MenuItem;