Check-in [a44fdd17de]
Not logged in

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

Overview
Comment:Allow the hamburger menu to be closed instantly by pressing ESC or by clicking outside. This is the patch initially submitted to https://fossil-scm.org/forum/forumpost/2abe305c2d, with the interim changes incorporated.
Timelines: family | ancestors | descendants | both | js-hamburger-menu
Files: files | file ages | folders
SHA1:a44fdd17de89debf29f3a940df02b18d40f4b746
User & Date: florian 2018-10-11 16:36:00
Context
2018-10-11
16:36
Read the CSS transition style to be restored later directly from the (previously initialized) style property, as window.getComputedStyle() seems to return null with Firefox, in this specific case. This fixes a problem introduced with the previous check-in. check-in: c6735b38b4 user: florian tags: js-hamburger-menu
16:36
Allow the hamburger menu to be closed instantly by pressing ESC or by clicking outside. This is the patch initially submitted to https://fossil-scm.org/forum/forumpost/2abe305c2d, with the interim changes incorporated. check-in: a44fdd17de user: florian tags: js-hamburger-menu
09:39
Fix minor inaccuracy in the number of years in the human_readable_age() function. check-in: e93ae526ef user: drh tags: trunk
Changes

Changes to skins/default/js.txt.

26
27
28
29
30
31
32

33
34
35
36
37
38
39
..
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



94

95








96
97
98
99

100
101
102
103
104
105
106
...
135
136
137
138
139
140
141
142
143
144
  // Disable animation if this browser doesn't support CSS transitions.
  //
  // We need this ugly calling form for old browsers that don't allow
  // panel.style.hasOwnProperty('transition'); catering to old browsers
  // is the whole point here.
  var animate = panel.style.transition !== null && (typeof(panel.style.transition) == "string");
  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),
................................................................................
        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
................................................................................
      xhr.open("GET", "$home/sitemap?popup");   // note the TH1 substitution!
      xhr.responseType = "document";
      xhr.send();
    }
    else {
      showPanel();   // just show what we built above
    }
    return false;  // prevent browser from acting on <a> click
  }
})();







>







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







|
>
>
>
>
>
>
>
>
>
>

>
>


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







 







<


26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
..
70
71
72
73
74
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
...
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
...
177
178
179
180
181
182
183

184
185
  // Disable animation if this browser doesn't support CSS transitions.
  //
  // We need this ugly calling form for old browsers that don't allow
  // panel.style.hasOwnProperty('transition'); catering to old browsers
  // is the whole point here.
  var animate = panel.style.transition !== null && (typeof(panel.style.transition) == "string");
  var animMS = 400;
  var originalEventHandlers = { };   // original event handlers to be restored

  // 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),
................................................................................
        panel.style.maxHeight = panelHeight;
        panel.style.border    = panelBorder;
      }, 40);   // 25ms is insufficient with Firefox 62
    }
    else {
      panel.style.display = 'block';
    }
    originalEventHandlers.onkeydown = document.onkeydown;
    document.onkeydown = function(event) {
      event = event || window.event;
      var key = event.which || event.keyCode;
      if (key == 27) {
        panelToggle(true);
      }
    };
    originalEventHandlers.onclick = document.onclick;
    document.onclick = function(event) {
      event = event || window.event;
      if (!panel.contains(event.target)) {
        panelToggle(true);
        //return false;   // prevent default action (i.e. open clicked links)
      }
    };
  }

  // 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(event) {
    // Break the event handler chain, or the handler for document.onclick
    // (about to be installed) may already be triggered by the current event.
    if (event.stopPropagation)
      event.stopPropagation();
    else
      event.cancelBubble = true;
    panelToggle(false);
    return false;  // prevent browser from acting on <a> click
  };
  function panelToggle(suppressAnimation) {
    if (panelShowing()) {
      document.onkeydown = originalEventHandlers.onkeydown;
      document.onclick = originalEventHandlers.onclick;
      // Transition back to hidden state.
      if (animate) {
        if (suppressAnimation) {
          var transition = window.getComputedStyle(panel).transition;
          panel.style.transition = '';
          panel.style.maxHeight = '0';
          panel.style.border = 'none';
          setTimeout(function() {
            // Make sure CSS transition won't take effect now, so restore it
            // asynchronously. Outer variable 'transition' still valid here.
            panel.style.transition = transition;
          }, 40);   // 25ms is insufficient with Firefox 62
        }
        else {
          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
................................................................................
      xhr.open("GET", "$home/sitemap?popup");   // note the TH1 substitution!
      xhr.responseType = "document";
      xhr.send();
    }
    else {
      showPanel();   // just show what we built above
    }

  }
})();