Tab.ts

class Tab {
  static readonly ACTIVE_CLASS: string = 'active';
  static readonly EVENT_ACTIVE: string = 'click';
  static readonly ATTR: string = 'data-tab-content-id';

  public handler: HTMLAnchorElement;
  public content: Element;
  public swipers: NodeListOf<Element>;
  public selectors: NodeListOf<Element>;

  constructor(handler: HTMLAnchorElement) {
    this.handler = handler;
    this.content = document.getElementById(handler.getAttribute(Tab.ATTR));
    this.selectors = document.querySelectorAll('.selector-item');
    this.toggle = this.toggle.bind(this);
    this.handler.addEventListener(Tab.EVENT_ACTIVE, this.toggle);
  }

  public updateSwipers() {
    const swipers = this.content
      .querySelectorAll(`[${ Swiper.SWIPER_UID_ATTR }]`);

    DOMUtils.syncForEach(swiper => {
      const uId = swiper.getAttribute(Swiper.SWIPER_UID_ATTR);

      DOMUtils.dispatchCustomEvent(uId, swiper);
    }, swipers);
  }

  public toggle(event): void {
    event.preventDefault();

    if (!DOMUtils.containsClass(this.handler, Tab.ACTIVE_CLASS)) {
      const contentItems = this.content.parentElement.children;
      const handlerItems = this.handler.parentElement.children;
      const selector = document.querySelectorAll(`[data-tab-content-id = ${ this.handler.dataset.tabContentId }]`);

      DOMUtils.removeClassToItems(contentItems, Tab.ACTIVE_CLASS);
      DOMUtils.removeClassToItems(this.selectors, Tab.ACTIVE_CLASS);

      DOMUtils.addClass(this.content, Tab.ACTIVE_CLASS);
      DOMUtils.addClassToItems(selector, Tab.ACTIVE_CLASS);

      this.updateSwipers();
    }
  }
}

export { Tab };