Fossil

Check-in [7c724cf7]
Login

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

Overview
Comment:Recalculate the dimensions of the hamburger menu if the browser window is resized.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | js-hamburger-menu
Files: files | file ages | folders
SHA1: 7c724cf7b2fd6325ce67191141ccc15e870583fc
User & Date: florian 2018-10-11 16:36:05.000
Context
2018-10-11
16:36
Cancel the timer to remove the border of the hamburger menu panel after the closing animation, if the menu is closed and immediately reopened by double-clicking the hamburger button. ... (check-in: c73deeb6 user: florian tags: js-hamburger-menu)
16:36
Recalculate the dimensions of the hamburger menu if the browser window is resized. ... (check-in: 7c724cf7 user: florian tags: js-hamburger-menu)
16:36
Fix the hamburger menu template from the documentation to ensure TH1 variables are properly HTMLized. ... (check-in: 4d384ed8 user: florian tags: js-hamburger-menu)
Changes
Unified Diff Ignore Whitespace Patch
Changes to skins/default/js.txt.
︙︙
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

*/
(function() {
  if (!document.getElementById("hbbtn")) return;   // no hamburger button
  var panel = document.getElementById("hbdrop");
  if (!panel) return;   // site admin might've nuked it
  if (!panel.style) return;  // shouldn't happen, but be sure
  var panelBorder = panel.style.border;
  var panelInitialized = false;   // track first panel display

  // 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");








|








19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

*/
(function() {
  if (!document.getElementById("hbbtn")) return;   // no hamburger button
  var panel = document.getElementById("hbdrop");
  if (!panel) return;   // site admin might've nuked it
  if (!panel.style) return;  // shouldn't happen, but be sure
  var panelBorder = panel.style.border;
  var panelInitialized = false;   // reset if browser window is resized

  // 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");
︙︙
42
43
44
45
46
47
48





49
50
51
52
53
54
55


  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 first panel display
  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.








>
>
>
>
>








42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60


  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 first panel display
  function calculatePanelHeight() {

    // Clear the max-height CSS property in case the panel size is recalculated
    // after the browser window was resized.
    panel.style.maxHeight = '';

    // 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.
︙︙
128
129
130
131
132
133
134










135
136
137
138
139
140
141

    while (childElement) {
      if (childElement.nodeType == 1) // Node.ELEMENT_NODE == 1
        return true;
      childElement = childElement.nextSibling;
    }
    return false;
  }











  // Click handler for the hamburger button.
  document.getElementById("hbbtn").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();








>
>
>
>
>
>
>
>
>
>








133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

    while (childElement) {
      if (childElement.nodeType == 1) // Node.ELEMENT_NODE == 1
        return true;
      childElement = childElement.nextSibling;
    }
    return false;
  }

  // Reset the state of the panel to uninitialized if the browser window is
  // resized, so the dimensions are recalculated the next time it's opened.
  originalEventHandlers.onresize = window.onresize;
  window.onresize = function(event) {
    panelInitialized = false;
    if (originalEventHandlers.onresize) {
      originalEventHandlers.onresize.call(window,event);
    }
  };

  // Click handler for the hamburger button.
  document.getElementById("hbbtn").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();
︙︙