Fossil

Check-in [5d9a3454]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Added a guard on the use of CSS transitions so it falls back to a non-animated menu pull down if they appear not to be available on the current browser. Also added a check for the existence of the hamburger menu item in case the skin admin diked it out, and did a few other minor tweaks to the footer JS code.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | js-hamburger-menu
Files: files | file ages | folders
SHA3-256:5d9a3454816e1f57ea6df6e70a40013ad93aca7222712a0c2b8f1ce6ed6cb4c4
User & Date: wyoung 2018-09-10 13:41:53
Context
2018-09-10
23:57
Merge in the ability to define a script for a skin. check-in: 666c4f9a user: drh tags: js-hamburger-menu
13:41
Added a guard on the use of CSS transitions so it falls back to a non-animated menu pull down if they appear not to be available on the current browser. Also added a check for the existence of the hamburger menu item in case the skin admin diked it out, and did a few other minor tweaks to the footer JS code. check-in: 5d9a3454 user: wyoung tags: js-hamburger-menu
10:01
Timing tweaks: made "hide borders" hack occur about the same time as the CSS transition finishes, and increased the menu show delay still further to make it work for Firefox. check-in: 7bb68023 user: wyoung tags: js-hamburger-menu
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to skins/default/footer.txt.

5
6
7
8
9
10
11

12


13
14
15
16
17
18
19
..
40
41
42
43
44
45
46

47
48
49
50
51


52












53
54
55
56
57

58

59
60
61
62
63
64





65
66
67
68
69
70
71
..
75
76
77
78
79
80
81


82
83
84
85
86

87
88
89
90
91
92


93
94
95
96
97
98
99
</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),
................................................................................
    // 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;
      }, 40);   // 10ms is insufficient with Firefox 62
    }















    // 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 border line when maxHeight == 0,
          // our "hidden" state, so hide the borders in that state, too.
          panel.style.border = 'none';
        }, 500);    // same as transition time below





      }
      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;
................................................................................
              // 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();







>

>
>







 







>
|
|
|
|
|
>
>
|
>
>
>
>
>
>
>
>
>
>
>
>



<
<
>
|
>
|
|
|
|
|
<
>
>
>
>
>







 







>
>
|
|
|
|
|
>
|
|
<
<
<
|
>
>







5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
..
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73


74
75
76
77
78
79
80
81

82
83
84
85
86
87
88
89
90
91
92
93
..
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113



114
115
116
117
118
119
120
121
122
123
</div>

<th1>
  html "<script nonce='$nonce'>"
  html "  (function() { var home='$home'; "
</th1>
    var panel = document.getElementById("hbdrop");
    if (!panel) return;   // site admin might've nuked it
    var panelBorder = panel.style.border;
    var animate = panel.style.hasOwnProperty('transition');
    var animMS = 400;

    // 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),
................................................................................
    // 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() {
      if (animate) {
        setTimeout(function() {
          panel.style.maxHeight = panelHeight;
          panel.style.border    = panelBorder;
        }, 40);   // 25ms is insufficient with Firefox 62
      }
      else {
        panel.style.display = 'block';
      }
    }

    // Return true if the panel is showing.
    function panelShowing() {
      if (animate) {
        return panel.style.maxHeight == panelHeight;
      }
      else {
        return panel.style.display == 'block';
      }
    }

    // Click handler for the hamburger button.
    var needSitemapHTML = true;
    document.querySelector("div.mainmenu > a").onclick = function() {


      if (panelShowing()) {
        // Transition back to hidden state.
        if (animate) {
          panel.style.maxHeight = '0';
          setTimeout(function() {
            // Browsers show a 1px high border line when maxHeight == 0,
            // our "hidden" state, so hide the borders in that state, too.
            panel.style.border = 'none';

          }, animMS);
        }
        else {
          panel.style.display = 'none';
        }
      }
      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;
................................................................................
              // 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
              }

              // Display the panel
              if (animate) {
                // Set up a 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 ' +
                    (animMS / 1000) + 's ease-in-out';
                panel.style.overflowY  = 'hidden';
                panel.style.maxHeight  = '0';



                showPanel();
              }
              panel.style.display = 'block';
            }
          }
          // else, can't parse response as HTML or XML
        }
        xhr.open("GET", home + "/sitemap");
        xhr.responseType = "document";
        xhr.send();