Update the docinfo-footer.html for AsciiDoctor preview #120489

     1 -<style>
     2 -  #toc ul li.has-children > ul {
     3 -    display: none;
     4 -  }
     5 -  #toc ul li.has-children.open > ul {
     6 -    display: block;
     7 -  }
     8 -  .toc-toggle {
     9 -    cursor: pointer;
    10 -    margin-right: 4px;
    11 -    font-size: 0.75em;
    12 -    user-select: none;
    13 -  }
    14 -</style>
    15 -<script>
    16 -  document.addEventListener('DOMContentLoaded', function() {
    17 -    document.querySelectorAll('#toc li').forEach(function(li) {
    18 -      var sublist = li.querySelector(':scope > ul');
    19 -      if (sublist) {
    20 -        li.classList.add('has-children');
    21 -        var toggle = document.createElement('span');
    22 -        toggle.className = 'toc-toggle';
    23 -        toggle.textContent = '▶';
    24 -        li.insertBefore(toggle, li.firstChild);
    25 -        toggle.addEventListener('click', function() {
    26 -          li.classList.toggle('open');
    27 -          toggle.textContent = li.classList.contains('open') ? '▼' : '▶';
    28 -        });
    29 -      }
    30 -    });
    31 -  });
    32 -</script>

      1 +<style>
      2 +  #toc ul li.has-children > ul {
      3 +    display: none;
      4 +  }
      5 +  #toc ul li.has-children.open > ul {
      6 +    display: block;
      7 +  }
      8 +  .toc-toggle {
      9 +    appearance: none;
     10 +    background: transparent;
     11 +    border: 0;
     12 +    color: inherit;
     13 +    cursor: pointer;
     14 +    display: inline-block;
     15 +    font: inherit;
     16 +    line-height: 1;
     17 +    margin: 0 4px 0 0;
     18 +    padding: 2px 4px;
     19 +    user-select: none;
     20 +    vertical-align: middle;
     21 +  }
     22 +  .toc-toggle:focus-visible {
     23 +    outline: 2px solid currentColor;
     24 +    outline-offset: 2px;
     25 +  }
     26 +  #toc li:has(> ul)::before {
     27 +    content: '▶';
     28 +    display: inline-block;
     29 +    font-size: 0.75em;
     30 +    margin-right: 4px;
     31 +    vertical-align: middle;
     32 +  }
     33 +  #toc li.has-children::before {
     34 +    content: none;
     35 +  }
     36 +</style>
     37 +<script>
     38 + (function() {
     39 +   var storageKey = 'microshift-preview-open-toc-sections';
     40 +
     41 +   function loadOpenSections() {
     42 +     try {
     43 +       return JSON.parse(window.localStorage.getItem(storageKey) || '{}');
     44 +     } catch (error) {
     45 +       return {};
     46 +     }
     47 +   }
     48 +
     49 +   function saveOpenSections(openSections) {
     50 +     try {
     51 +       window.localStorage.setItem(storageKey, JSON.stringify(openSections));
     52 +     } catch (error) {
     53 +       // Continue to support browsers that disable local storage.
     54 +     }
     55 +   }
     56 +
     57 +   function sectionKey(li, index) {
     58 +     var link = Array.prototype.find.call(li.children, function(child) {
     59 +       return child.tagName === 'A';
     60 +     });
     61 +     if (link && link.getAttribute('href')) {
     62 +       return link.getAttribute('href').split('#')[0];
     63 +     }
     64 +     return 'section-' + index;
     65 +   }
     66 +
     67 +   function initializeTocToggles() {
     68 +     var openSections = loadOpenSections();
     69 +     document.querySelectorAll('#toc li').forEach(function(li, index) {
     70 +       var sublist = Array.prototype.find.call(li.children, function(child) {
     71 +         return child.tagName === 'UL';
     72 +       });
     73 +       if (!sublist) {
     74 +         return;
     75 +       }
     76 +
     77 +       li.classList.add('has-children');
     78 +       sublist.id = sublist.id || 'microshift-toc-sublist-' + index;
     79 +       var key = sectionKey(li, index);
     80 +
     81 +       var toggle = li.querySelector(':scope > .toc-toggle');
     82 +       if (!toggle) {
     83 +         toggle = document.createElement('button');
     84 +         toggle.className = 'toc-toggle';
     85 +         toggle.type = 'button';
     86 +         toggle.textContent = '▶';
     87 +         li.insertBefore(toggle, li.firstChild);
     88 +       }
     89 +       toggle.setAttribute('aria-controls', sublist.id);
     90 +       toggle.setAttribute('data-toc-key', key);
     91 +       var initiallyOpen = Boolean(openSections[key]);
     92 +       li.classList.toggle('open', initiallyOpen);
     93 +       toggle.setAttribute('aria-expanded', String(initiallyOpen));
     94 +       toggle.setAttribute('aria-label', initiallyOpen ? 'Collapse section' : 'Expand section'
         );
     95 +       toggle.textContent = initiallyOpen ? '▼' : '▶';
     96 +
     97 +       if (toggle.dataset.tocBound === 'true') {
     98 +         return;
     99 +       }
    100 +       toggle.dataset.tocBound = 'true';
    101 +       toggle.addEventListener('click', function() {
    102 +         var open = li.classList.toggle('open');
    103 +         if (open) {
    104 +           openSections[key] = true;
    105 +         } else {
    106 +           delete openSections[key];
    107 +         }
    108 +         saveOpenSections(openSections);
    109 +         toggle.textContent = open ? '▼' : '▶';
    110 +         toggle.setAttribute('aria-expanded', String(open));
    111 +         toggle.setAttribute('aria-label', open ? 'Collapse section' : 'Expand section');
    112 +       });
    113 +     });
    114 +   }
    115 +
    116 +   // The shared footer is emitted after the TOC, so initialize immediately.
    117 +   // The ready-state fallback also covers consumers that move this fragment.
    118 +   initializeTocToggles();
    119 +   if (document.readyState === 'loading') {
    120 +     document.addEventListener('DOMContentLoaded', initializeTocToggles, { once: true });
    121 +   }
    122 + })();
    123 +</script>