#111 - Auto Rotating Tabs v0.1

<!-- 💙 MEMBERSCRIPT #111 v0.1 💙 - AUTO-ROTATING TABS -->
<script>
  // Function to rotate tabs
  function initializeTabRotator() {
    // Find all tab containers with the ms-code-rotate-tabs attribute
    const tabContainers = document.querySelectorAll('[ms-code-rotate-tabs]');

    tabContainers.forEach(container => {
      const interval = parseInt(container.getAttribute('ms-code-rotate-tabs'), 10);
      const tabLinks = container.querySelectorAll('.w-tab-link');
      const tabContent = container.closest('.w-tabs').querySelector('.w-tab-content');
      const tabPanes = tabContent.querySelectorAll('.w-tab-pane');
      let currentIndex = Array.from(tabLinks).findIndex(link => link.classList.contains('w--current'));
      let rotationTimer;

      // ANIMATION CONFIGURATION
      // Modify these values to adjust the animation behavior
      const FADE_OUT_DURATION = 300; // Duration for fading out the current tab (in milliseconds)
      const FADE_IN_DURATION = 100;  // Duration for fading in the new tab (in milliseconds)
      const EASING_FUNCTION = 'ease'; // Choose from: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'
      // or use a cubic-bezier function like 'cubic-bezier(0.1, 0.7, 1.0, 0.1)'
      // Additional easing options (uncomment to use):
      // const EASING_FUNCTION = 'ease-in-quad';
      // const EASING_FUNCTION = 'ease-out-quad';
      // const EASING_FUNCTION = 'ease-in-out-quad';
      // const EASING_FUNCTION = 'ease-in-cubic';
      // const EASING_FUNCTION = 'ease-out-cubic';
      // const EASING_FUNCTION = 'ease-in-out-cubic';
      // const EASING_FUNCTION = 'ease-in-quart';
      // const EASING_FUNCTION = 'ease-out-quart';
      // const EASING_FUNCTION = 'ease-in-out-quart';
      // const EASING_FUNCTION = 'ease-in-quint';
      // const EASING_FUNCTION = 'ease-out-quint';
      // const EASING_FUNCTION = 'ease-in-out-quint';
      // const EASING_FUNCTION = 'ease-in-sine';
      // const EASING_FUNCTION = 'ease-out-sine';
      // const EASING_FUNCTION = 'ease-in-out-sine';
      // const EASING_FUNCTION = 'ease-in-expo';
      // const EASING_FUNCTION = 'ease-out-expo';
      // const EASING_FUNCTION = 'ease-in-out-expo';
      // const EASING_FUNCTION = 'ease-in-circ';
      // const EASING_FUNCTION = 'ease-out-circ';
      // const EASING_FUNCTION = 'ease-in-out-circ';
      // const EASING_FUNCTION = 'ease-in-back';
      // const EASING_FUNCTION = 'ease-out-back';
      // const EASING_FUNCTION = 'ease-in-out-back';
      // END OF ANIMATION CONFIGURATION

      function switchToTab(index) {
        // Fade out current tab
        tabPanes[currentIndex].style.transition = `opacity ${FADE_OUT_DURATION}ms ${EASING_FUNCTION}`;
        tabPanes[currentIndex].style.opacity = '0';

        setTimeout(() => {
          // Remove active classes and update ARIA attributes for current tab and pane
          tabLinks[currentIndex].classList.remove('w--current');
          tabLinks[currentIndex].setAttribute('aria-selected', 'false');
          tabLinks[currentIndex].setAttribute('tabindex', '-1');
          tabPanes[currentIndex].classList.remove('w--tab-active');

          // Update current index
          currentIndex = index;

          // Add active classes and update ARIA attributes for new current tab and pane
          tabLinks[currentIndex].classList.add('w--current');
          tabLinks[currentIndex].setAttribute('aria-selected', 'true');
          tabLinks[currentIndex].setAttribute('tabindex', '0');
          tabPanes[currentIndex].classList.add('w--tab-active');

          // Fade in new tab
          tabPanes[currentIndex].style.transition = `opacity ${FADE_IN_DURATION}ms ${EASING_FUNCTION}`;
          tabPanes[currentIndex].style.opacity = '1';

          // Update the data-current attribute on the parent w-tabs element
          const wTabsElement = container.closest('.w-tabs');
          if (wTabsElement) {
            wTabsElement.setAttribute('data-current', tabLinks[currentIndex].getAttribute('data-w-tab'));
          }
        }, FADE_OUT_DURATION);
      }

      function rotateToNextTab() {
        const nextIndex = (currentIndex + 1) % tabLinks.length;
        switchToTab(nextIndex);
      }

      function startRotation() {
        clearInterval(rotationTimer);
        rotationTimer = setInterval(rotateToNextTab, interval);
      }

      // Add click event listeners to tab links
      tabLinks.forEach((link, index) => {
        link.addEventListener('click', (e) => {
          e.preventDefault();
          switchToTab(index);
          startRotation(); // Restart rotation from this tab
        });
      });

      // Start the initial rotation
      startRotation();
    });
  }

  // Run the function when the DOM is fully loaded
  document.addEventListener('DOMContentLoaded', initializeTabRotator);
</script>