github.com/ddev/ddev@v1.23.2-0.20240519125000-d824ffe36ff3/docs/content/assets/temp-fix-header-links-in-tabs.js (about)

     1  const fixTabs = () => {
     2      // Get current hash
     3      let currentHash = window.location.href.split('#')[1];
     4      if (!currentHash) return
     5  
     6      // Get element associated with hash
     7      let hashElement = document.getElementById(currentHash);
     8      if (!hashElement) return
     9  
    10      // Detect if element is located in a tab
    11      let parentElement = hashElement.closest('.tabbed-block');
    12      if (!parentElement) return
    13  
    14      // Get all tab labels
    15      let allTabs = hashElement.closest('.tabbed-set').querySelector('.tabbed-labels').children;
    16      if (!allTabs) return
    17  
    18      // get index of tab to click on
    19      let index = [...parentElement.parentNode.children].indexOf(parentElement)
    20  
    21      // Simulate mouse click click on our tab label
    22      allTabs[index].click();
    23  
    24      // If our tab is nested within another tab, open parent tab..
    25      if (allTabs[0].getAttribute('for').startsWith('__tabbed_2')) {
    26          // Get outer tabs
    27          let outerTabs = document.querySelector('.tabbed-labels').children
    28  
    29          // Get outer tab block
    30          let outerParent = allTabs[0].closest('.tabbed-block');
    31  
    32          // Get outer tab index
    33          let outerIndex = [...outerParent.parentNode.children].indexOf(outerParent)
    34  
    35          // Active outer tab
    36          outerTabs[outerIndex].click();
    37      }
    38  
    39      if (allTabs[0].getAttribute('for').startsWith('__tabbed_3')) {
    40          console.log('While 1 nested tab is debatable 2 should be avoided as it is definitely not user friendly.')
    41      }
    42  
    43      // scroll to hash
    44      hashElement.scrollIntoView();
    45  };
    46  
    47  // Fires after initial page load
    48  window.addEventListener('load', fixTabs, false);
    49  
    50  // Fires whenever the hash changes
    51  window.addEventListener('hashchange', fixTabs, false);