scripts/django_cradmin/widgets/TabButtonWidget.js | django_cradmin API Document

# 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();
        }
      }
    }