@ussebastian/kitdigital/src/js/components/ComponentTab.js

Kit Digital de la Universidad San Sebastián

export default class ComponentTab {
  constructor(el, options) {
    this.options = {
      navItemClass: '.uss-tab__nav-item',
      contentItemsClass: '.uss-tab__body-content',
      dataShowDataAttributeName: 'data-uss-show',
      buttonActiveClass: 'active',
    };

    this.options = Object.assign(this.options, options);
    this.el = el;
    this.navIButtonItems = this.el.querySelectorAll(`${this.options.navItemClass} button`);
    this.contentItems = this.el.querySelectorAll(this.options.contentItemsClass);
  }

  init() {
    this.navIButtonItems.forEach((item) => {
      item.addEventListener('click', () => {
        this.setActiveButton(item);
        this.showItem(item.dataset.ussTabtarget);
      });
    });

    const { hash } = window.location;
    if (hash) {
      this.showItem(hash.replace('#', ''));
    }
  }

  setActiveButton(item) {
    this.navIButtonItems.forEach((button) => {
      button.classList.remove(this.options.buttonActiveClass);
    });
    item.classList.add(this.options.buttonActiveClass);
  }

  showItem(id) {
    this.contentItems.forEach((item) => {
      if (item.dataset.ussTab === id) {
        this.closeAll();
        item.setAttribute(this.options.dataShowDataAttributeName, '');
      }
    });
  }

  closeItem(id) {
    this.contentItems.forEach((item) => {
      if (item.dataset.ussTab === id) {
        item.removeAttribute(this.options.dataShowDataAttributeName, '');
      }
    });
  }

  closeAll() {
    this.contentItems.forEach((item) => {
      item.removeAttribute(this.options.dataShowDataAttributeName);
    });
  }
}