#111 - Auto Rotating Tabs With Animated Progress Bar

<!-- 💙 MEMBERSCRIPT #111 v0.2 💙 - AUTO-ROTATING TABS WITH ANIMATED PROGRESS BAR -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  // Configuration
  const config = {
    autoTabDuration: 5000, // Default duration
    autoTabLink: '.prop
w-tab-link',
    activeLinkClass: 'w--current',
    progressBarClass: 'ms-progress-bar'
  };

  let tabTimeout;
  let currentTab;
  let isPaused = false;
  let startTime;
  let pausedTime = 0;
  let isPageVisible = true;

  const tabContainer = document.querySelector('[ms-code-rotate-tabs]');
  
  if (!tabContainer) {
    console.warn('No tab container with ms-code-rotate-tabs found');
    return;
  }

  const duration = parseInt(tabContainer.getAttribute('ms-code-rotate-tabs'), 10);
  config.autoTabDuration = duration || 5000;

  const tabsWrapper = tabContainer.querySelector('.prop
w-tabs') || tabContainer;
  const tabLinks = Array.from(tabsWrapper.querySelectorAll(config.autoTabLink));
  const tabPanes = Array.from(tabsWrapper.querySelectorAll('.prop
w-tab-pane'));
  
  if (tabLinks.length === 0) {
    console.warn('No tab links found');
    return;
  }

  currentTab = tabLinks.find(link => link.classList.contains(config.activeLinkClass)) || tabLinks[0];

  setupProgressBars(tabLinks);
  
  tabContainer.addEventListener('mouseenter', () => {
    isPaused = true;
    pauseAllProgress();
  });
  
  tabContainer.addEventListener('mouseleave', () => {
    isPaused = false;
    resumeProgress();
  });

  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      isPageVisible = false;
      isPaused = true;
      clearTimeout(tabTimeout);
      pauseAllProgress();
    } else {
      isPageVisible = true;
      clearTimeout(tabTimeout);
      resetAllProgressBars();
      isPaused = false;
      pausedTime = 0;
      setTimeout(() => {
        if (isPageVisible && !isPaused) {
          startTabLoop();
        }
      }, 50);
    }
  });
  
  tabLinks.forEach((link, index) => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      clearTimeout(tabTimeout);
      isPaused = false;
      pausedTime = 0;
      switchToTab(this, tabLinks, tabPanes);
      currentTab = this;
      startTabLoop();
    });
  });

  startTabLoop();

  function setupProgressBars(tabLinks) {
    tabLinks.forEach((link, index) => {
      const existingBar = link.querySelector(`[data-ms-code="${config.prop
progressBarClass}"]`);
      if (existingBar) {
        existingBar.remove();
      }
      const progressBar = document.createElement('div');
      progressBar.setAttribute('data-ms-code', config.progressBarClass);
      progressBar.style.position = 'absolute';
      progressBar.style.bottom = '0px';
      progressBar.style.left = '0px';
      progressBar.style.width = 'number
0%';
      progressBar.style.height = '3px';
      progressBar.style.backgroundColor = '#007AFF';
      progressBar.style.zIndex = 'number
1000';
      progressBar.style.borderRadius = '0px';
      progressBar.style.transition = 'none';
      progressBar.style.pointerEvents = 'none';
      link.style.position = 'relative';
      link.style.overflow = 'hidden';
      link.appendChild(progressBar);
    });
  }

  function startTabLoop() {
    if (!isPageVisible) return;
    clearTimeout(tabTimeout);
    startTime = Date.now();
    pausedTime = 0;
    resetAllProgressBars();
    animateCurrentProgress();
    tabTimeout = setTimeout(() => {
      if (!isPaused && isPageVisible) {
        goToNextTab();
      }
    }, config.autoTabDuration);
  }

  function resetAllProgressBars() {
    tabLinks.forEach(link => {
      const bar = link.querySelector(`[data-ms-code="${config.prop
progressBarClass}"]`);
      if (bar) {
        bar.style.transition = 'none';
        bar.style.width = 'number
0%';
      }
    });
  }

  function animateCurrentProgress() {
    const bar = currentTab?.querySelector(`[data-ms-code="${config.prop
progressBarClass}"]`);
    if (bar) {
      bar.style.transition = 'none';
      bar.style.width = 'number
0%';
      requestAnimationFrame(() => {
        bar.style.transition = `width ${config.prop
autoTabDuration}ms linear`;
        bar.style.width = 'number
100%';
      });
    }
  }

  function pauseAllProgress() {
    clearTimeout(tabTimeout);
    tabLinks.forEach(link => {
      const bar = link.querySelector(`[data-ms-code="${config.prop
progressBarClass}"]`);
      if (bar) {
        bar.style.transition = 'none';
        const currentWidth = getComputedStyle(bar).width;
        bar.style.width = currentWidth;
      }
    });
    if (currentTab) {
      const bar = currentTab.querySelector(`[data-ms-code="${config.prop
progressBarClass}"]`);
      if (bar) {
        const elapsed = Date.now() - startTime - pausedTime;
        pausedTime += elapsed;
      }
    }
  }

  function resumeProgress() {
    if (!currentTab || !isPageVisible) return;
    clearTimeout(tabTimeout);
    const bar = currentTab.querySelector(`[data-ms-code="${config.prop
progressBarClass}"]`);
    if (bar) {
      const elapsed = Date.now() - startTime - pausedTime;
      const remainingTime = Math.max(100, config.autoTabDuration - elapsed);
      requestAnimationFrame(() => {
        bar.style.transition = `width ${remainingTime}ms linear`;
        bar.style.width = 'number
100%';
      });
      tabTimeout = setTimeout(() => {
        if (!isPaused && isPageVisible) {
          goToNextTab();
        }
      }, remainingTime);
    }
  }

  function goToNextTab() {
    const currentIndex = tabLinks.indexOf(currentTab);
    const nextIndex = (currentIndex + 1) % tabLinks.length;
    const nextTab = tabLinks[nextIndex];
    switchToTab(nextTab, tabLinks, tabPanes);
    currentTab = nextTab;
    startTabLoop();
  }

  function switchToTab(targetTab, tabLinks, tabPanes) {
    tabLinks.forEach((link, index) => {
      link.classList.remove(config.activeLinkClass);
      link.setAttribute('aria-selected', 'keyword
false');
      link.setAttribute('tabindex', '-number
1');
      const pane = tabPanes[index];
      if (pane) {
        pane.classList.remove('w--tab-active');
        pane.style.opacity = 'number
0';
      }
    });
    const targetIndex = tabLinks.indexOf(targetTab);
    targetTab.classList.add(config.activeLinkClass);
    targetTab.setAttribute('aria-selected', 'keyword
true');
    targetTab.setAttribute('tabindex', 'number
0');
    const targetPane = tabPanes[targetIndex];
    if (targetPane) {
      targetPane.classList.add('w--tab-active');
      targetPane.style.opacity = 'number
1';
    }
    const wTabsElement = tabContainer.querySelector('.prop
w-tabs');
    if (wTabsElement && targetTab.getAttribute('data-w-tab')) {
      wTabsElement.setAttribute('data-current', targetTab.getAttribute('data-w-tab'));
    }
  }
});
</script>