Bühnen-Einschub (Zielgruppen): Target Groups Orderlist

import randomId from '../../../javascripts/utils/random-id';

class StageInsertAudience {
  constructor($el) {
    this.$el = $el;
    this.$menu = this.$el
      .querySelector('.stage-insert-audience__menu');

    this.$menuItems = this.$el
      .querySelectorAll('.stage-insert-audience__menu-item');

    this.initMediaQuery({
      s: '(max-width: 581px)',
      m: '(max-width: 750px)',
    });
    this.initAccessibleAttributes();
    this.initEvents();

    this.calculateHeight();

    this.resizeHandler = this.handleResize.bind(this);
    window.addEventListener('resize', this.resizeHandler);
  }

  initAccessibleAttributes() {
    this.$menu.setAttribute('role', 'tablist');

    this.$menuItems.forEach(($menuItem, index) => {
      const id = randomId();
      const $content = $menuItem
        .querySelector('.stage-insert-audience__tab');

      // Set IDs
      $menuItem.setAttribute('id', `menu-item-${id}`);
      $content.setAttribute('id', `menu-item-tab-${id}`);

      // Set roles
      $menuItem.setAttribute('role', 'tab');
      $menuItem.setAttribute('tabindex', 0);
      $content.setAttribute('role', 'tabpanel');

      // Setup relationship
      $menuItem.setAttribute('aria-controls', `menu-item-tab-${id}`);
      $content.setAttribute('aria-labelledby', `menu-item-${id}`);

      // Other attributes
      $menuItem.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
      $content.setAttribute('aria-hidden', index === 0 ? 'false' : 'true');
    });
  }

  initEvents() {
    this.$menuItems.forEach(
      ($menuItem) => {
        const $header = $menuItem
          .querySelector('.stage-insert-audience__menu-item-header');

        $header.addEventListener('click', () => {
          this.toggleShow($menuItem);
        });
      },
    );

    this.$menuItems.forEach(
      ($menuItem) => {
        $menuItem.addEventListener('keydown', (event) => {
          const $first =
            this.$menuItems[0];
          const $last =
            this.$menuItems[this.$menuItems.length - 1];
          const $next =
            $last !== $menuItem ? $menuItem.nextElementSibling : false;
          const $prev =
            $first !== $menuItem ? $menuItem.previousElementSibling : false;

          // Prevent default event
          if ([13, 32, 35, 36, 37, 38, 39, 40].indexOf(event.which) >= 0) {
            event.preventDefault();
            event.stopPropagation();
          }

          // eslint-disable-next-line default-case
          switch (event.which) {
            // Left/Up
            case 37:
            case 38:
              // Check for previous tab
              if (!$prev) { $last.focus(); } else { $prev.focus(); }
              break;

            // Right/Down
            case 39:
            case 40:
              // Check for next tab
              if (!$next) { $first.focus(); } else { $next.focus(); }
              break;

            // Home
            case 36:
              // Set focus on first tab
              $first.focus();
              break;

            // End
            case 35:
              // Set focus on last tab
              $last.focus();
              break;

            // Enter/Space
            case 13:
            case 32:
              // Show content
              $menuItem
                .querySelector('.stage-insert-audience__menu-item-header')
                .click();
              break;
          }
        });
      },
    );
  }

  initMediaQuery(constraints) {
    this.mediaQuery = {};
    Object.keys(constraints).forEach((key) => {
      this.mediaQuery[key] = window.matchMedia(constraints[key]);
    });
  }

  toggleShow($el) {
    const selected = this.mediaQuery.s.matches ?
      $el.getAttribute('aria-selected') === 'true' : false;

    this.hideAll();

    $el.setAttribute('aria-selected', (!selected).toString());
    $el.querySelector('.stage-insert-audience__tab')
      .setAttribute('aria-hidden', (selected).toString());
  }

  hideAll() {
    this.$menuItems.forEach(
      ($menuItem) => {
        $menuItem
          .setAttribute('aria-selected', 'false');

        $menuItem
          .querySelector('.stage-insert-audience__tab')
          .setAttribute('aria-hidden', 'true');
      },
    );
  }

  calculateHeight() {
    this.$menu.removeAttribute('style');
    if (!this.mediaQuery.m.matches) {
      const menuHeight = this.$menu.offsetHeight;
      let maxHeight = menuHeight;

      this.$menuItems.forEach(
        ($menuItem) => {
          // make element visible to get height
          this.toggleShow($menuItem);

          const $content = $menuItem.querySelector(
            '.stage-insert-audience__tab'
          );

          const height = parseInt($content.scrollHeight, 10);

          if (height > maxHeight) {
            maxHeight = height;
          }
          // hide element
          this.toggleShow($menuItem);
        }
      );
      // show first tab
      this.toggleShow(this.$menuItems[0]);
      // set menu height
      this.$menu.setAttribute('style', `height: ${maxHeight}px`);
    }
  }

  handleResize() {
    this.calculateHeight();
  }
}

document.querySelectorAll('.stage-insert-audience').forEach(
  $el => new StageInsertAudience($el),
);