Home Reference Source

scripts/django_cradmin/widgets/TabButtonWidget.js

import AbstractWidget from "ievv_jsbase/widget/AbstractWidget";

export default class TabButtonWidget extends AbstractWidget {
  getDefaultConfig() {
    return {
      id: 'defaultTab',
      activeClass: "tabs__tab--active"
    }
  }

  constructor(element) {
    super(element);
    this._tabPanelDomId = this.element.getAttribute('href').substring(1);
    if(!this._tabPanelDomId) {
      throw new Error('A TabButtonWidget must have a href attribute');
    }
    if(!this._domId) {
      throw new Error('A TabButtonWidget must have an id attribute');
    }
    this._onClickTabButton = this._onClickTabButton.bind(this);
    this._onActivateTabSignal = this._onActivateTabSignal.bind(this);
    this._initializeSignalHandlers();
    this.element.addEventListener('click', this._onClickTabButton);
  }

  _initializeSignalHandlers() {
    new window.ievv_jsbase_core.SignalHandlerSingleton().addReceiver(
      `cradmin.ActivateTab.${this.config.id}`,
      `cradmin.TabButtonWidget.${this.config.id}.${this._tabPanelDomId}`,
      this._onActivateTabSignal
    );
  }

  destroy() {
    this.element.removeEventListener('click', this._onClickTabButton);
    new window.ievv_jsbase_core.SignalHandlerSingleton().removeReceiver(
      `cradmin.ActivateTab.${this.config.id}`,
      `cradmin.TabButtonWidget.${this.config.id}.${this._tabPanelDomId}`
    );
  }

  _onClickTabButton(event) {
    event.preventDefault();
    this._sendActivateTabSignal();
  }

  _sendActivateTabSignal() {
    new window.ievv_jsbase_core.SignalHandlerSingleton().send(
      `cradmin.ActivateTab.${this.config.id}`,
      {tabPanelDomId: this._tabPanelDomId}
    );
  }

  _hasActiveClass() {
    return this.element.classList.contains(this.config.activeClass);
  }

  _isAriaSelected() {
    return this.element.getAttribute('aria-selected') == 'true';
  }


  _activate() {
    if(!this._hasActiveClass()) {
      this.element.classList.add(this.config.activeClass);
    }
    if(!this._isAriaSelected()) {
      this.element.setAttribute('aria-selected', 'true');
    }
  }

  _deactivate() {
    if(this._hasActiveClass()) {
      this.element.classList.remove(this.config.activeClass);
    }
    if(this._isAriaSelected()) {
      this.element.setAttribute('aria-selected', 'false');
    }
  }

  _onActivateTabSignal(receivedSignalInfo) {
    const tabPanelDomId = receivedSignalInfo.data.tabPanelDomId;
    if(this._tabPanelDomId == tabPanelDomId) {
      this._activate();
    } else {
      this._deactivate();
    }
  }

  useAfterInitializeAllWidgets() {
    return true;
  }

  get _domId() {
    return this.element.getAttribute('id');
  }

  afterInitializeAllWidgets() {
    const widgetRegistry = new window.ievv_jsbase_core.WidgetRegistrySingleton();
    const tabPanelElement = document.getElementById(this._tabPanelDomId);
    const tabPanelWidget = widgetRegistry.getWidgetInstanceFromElement(tabPanelElement);
    const isActive = this._hasActiveClass();
    tabPanelWidget.initializeFromTabButton(isActive, this._domId);
    if(isActive) {
      // this._sendActivateTabSignal();
      this._activate();
    }
  }
}