Fossil

<div class="footer">
This page was generated in about
<th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
Fossil $release_version $manifest_version $manifest_date
</div>

<th1>
  html "<script nonce='$nonce'>"
  html "  (function() { var home='$home'; "
</th1>
    var panel = document.getElementById("hbdrop");
    var panelBorder = panel.style.border;

    // Calculate panel height despite its being hidden at call time.
    // Based on https://stackoverflow.com/a/29047447/142454
    var panelHeight;  // computed on sitemap load
    function calculatePanelHeight() {
      // Get initial panel styles so we can restore them below.
      var es   = window.getComputedStyle(panel),
          edis = es.display,
          epos = es.position,
          evis = es.visibility;

      // Restyle the panel so we can measure its height while invisible.
      panel.style.visibility = 'hidden';
      panel.style.position   = 'absolute';
      panel.style.display    = 'block';
      panelHeight = panel.offsetHeight + 'px';

      // Revert styles now that job is done.
      panel.style.display    = edis;
      panel.style.position   = epos;
      panel.style.visibility = evis;
    }

    // Show the panel by changing the panel height, which kicks off the
    // slide-open/closed transition set up in the XHR onload handler.
    //
    // Schedule the change for a near-future time in case this is the
    // first call, where the div was initially invisible.  That causes
    // the browser to consider the height change as part of the same
    // state change as the visibility change, so it doesn't see a state
    // *transition*, hence never kicks off the *CSS* transition:
    //
    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples
    function showPanel() {
      setTimeout(function() {
        panel.style.maxHeight = panelHeight;
        panel.style.border    = panelBorder;
      }, 10);
    }

    // Click handler for the hamburger button.
    var needSitemapHTML = true;
    document.querySelector("div.mainmenu > a").onclick = function() {
      if (panel.style.maxHeight == panelHeight) {
        // Hamburger button clicked while panel visible.  Trigger the
        // transition back to hidden state.
        panel.style.maxHeight = '0';
        setTimeout(function() {
          // Browsers show a 1px high line when maxHeight == 0, so
          // temporarily hide the borders while hidden.
          panel.style.border = 'none';
        }, 300);
      }
      else if (needSitemapHTML) {
        // Only get it once per page load: it isn't likely to
        // change on us.
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
          var doc = xhr.responseXML;
          if (doc) {
            var sm = doc.querySelector("ul#sitemap");
            if (sm && xhr.status == 200) {
              // Got sitemap.  Insert it into the drop-down panel.
              needSitemapHTML = false;
              panel.innerHTML = sm.outerHTML;
              if (window.setAllHrefs) {
                setAllHrefs();   // don't need anti-robot defense here
              }

              // Set up the CSS transition to animate the panel open and
              // closed.  Only needs to be done once per page load.
              // Based on https://stackoverflow.com/a/29047447/142454
              calculatePanelHeight();
              panel.style.transition = 'max-height 0.5s ease-in-out';
              panel.style.overflowY  = 'hidden';
              panel.style.maxHeight  = '0';
              panel.style.display    = 'block';

              // Kick off the transition
              showPanel();
            }
          }
          // else, can't parse response as HTML or XML
        }
        xhr.open("GET", home + "/sitemap");
        xhr.responseType = "document";
        xhr.send();
      }
      else {
        showPanel();   // just show what we built above
      }
      return false;  // prevent browser from acting on <a> click
    }
  })();
</script>