function handleTab()

in web/wp-content/themes/mozilla-builders/static/js/plugins/tabs.js [103:264]
125 lines of code
37 McCabe index (conditional complexity)

function handleTab(el, Alpine, config) {
  if (!config.value) {
    return console.error('x-tabs:tab must have a value.', el);
  }

  Alpine.bind(el, {
    'x-data'() {
      return {
        value: config.value,
      };
    },

    'x-init'() {
      if (!this.__list) {
        console.error('x-tabs:tab must be placed inside an x-tabs:list.', el);
      }

      if (el.tagName !== 'BUTTON') {
        console.error('x-tabs:tab must be a <button> element.', el);
      }

      // Assume this tab is the first if there is no active tab.
      if (!this.activeTab) {
        this.activeTab = this.value;
      }

      this.tabs.push(el);
    },

    ':id'() {
      return `${this.$id('tb-tabs-tab')}-${this.value}`;
    },

    role: 'tab',

    ':tabindex'() {
      return this.activeTab === this.value ? '0' : -1;
    },

    ':aria-selected'() {
      return this.activeTab === this.value;
    },

    ':aria-controls'() {
      return `${this.$id('tb-tabs-panel')}-${this.value}`;
    },

    ':data-state'() {
      return this.activeTab === this.value ? 'active' : 'inactive';
    },

    '@click'() {
      this.activeTab = this.value;
    },

    '@keydown.home.prevent.stop'() {
      const tab = this.tabs.at(0);

      if (tab) {
        tab.focus();
      }

      if (tab && this.automatic) {
        tab.click();
      }
    },

    '@keydown.end.prevent.stop'() {
      const tab = this.tabs.at(-1);

      if (tab) {
        tab.focus();
      }

      if (tab && this.automatic) {
        tab.click();
      }
    },

    '@keydown.left.prevent.stop'() {
      if (this.orientation === 'horizontal') {
        const index = this.tabs.indexOf(el);

        if (index >= 0) {
          const next = this.loop ? index - 1 : Math.max(index - 1, 0);
          const tab = this.tabs.at(next);

          if (tab) {
            tab.focus();
          }

          if (tab && this.automatic) {
            tab.click();
          }
        }
      }
    },

    '@keydown.right.prevent.stop'() {
      if (this.orientation === 'horizontal') {
        const index = this.tabs.indexOf(el);

        if (index >= 0) {
          const previous = this.loop
            ? (index + 1) % this.tabs.length
            : Math.min(index + 1, this.tabs.length - 1);

          const tab = this.tabs.at(previous);

          if (tab) {
            tab.focus();
          }

          if (tab && this.automatic) {
            tab.click();
          }
        }
      }
    },

    '@keydown.up.prevent.stop'() {
      if (this.orientation === 'vertical') {
        const index = this.tabs.indexOf(el);

        if (index >= 0) {
          const next = this.loop ? index - 1 : Math.max(index - 1, 0);
          const tab = this.tabs.at(next);

          if (tab) {
            tab.focus();
          }

          if (tab && this.automatic) {
            tab.click();
          }
        }
      }
    },

    '@keydown.down.prevent.stop'() {
      if (this.orientation === 'vertical') {
        const index = this.tabs.indexOf(el);

        if (index >= 0) {
          const previous = this.loop
            ? (index + 1) % this.tabs.length
            : Math.min(index + 1, this.tabs.length - 1);

          const tab = this.tabs.at(previous);

          if (tab) {
            tab.focus();
          }

          if (tab && this.automatic) {
            tab.click();
          }
        }
      }
    },
  });
}