Fossil SCM
Recalculate the dimensions of the hamburger menu if the browser window is resized.
Commit
7c724cf7b2fd6325ce67191141ccc15e870583fc
Parent
4d384ed8754c5c2…
1 file changed
+16
-1
+16
-1
| --- skins/default/js.txt | ||
| +++ skins/default/js.txt | ||
| @@ -21,11 +21,11 @@ | ||
| 21 | 21 | if (!document.getElementById("hbbtn")) return; // no hamburger button |
| 22 | 22 | var panel = document.getElementById("hbdrop"); |
| 23 | 23 | if (!panel) return; // site admin might've nuked it |
| 24 | 24 | if (!panel.style) return; // shouldn't happen, but be sure |
| 25 | 25 | var panelBorder = panel.style.border; |
| 26 | - var panelInitialized = false; // track first panel display | |
| 26 | + var panelInitialized = false; // reset if browser window is resized | |
| 27 | 27 | |
| 28 | 28 | // Disable animation if this browser doesn't support CSS transitions. |
| 29 | 29 | // |
| 30 | 30 | // We need this ugly calling form for old browsers that don't allow |
| 31 | 31 | // panel.style.hasOwnProperty('transition'); catering to old browsers |
| @@ -44,10 +44,15 @@ | ||
| 44 | 44 | |
| 45 | 45 | // Calculate panel height despite its being hidden at call time. |
| 46 | 46 | // Based on https://stackoverflow.com/a/29047447/142454 |
| 47 | 47 | var panelHeight; // computed on first panel display |
| 48 | 48 | function calculatePanelHeight() { |
| 49 | + | |
| 50 | + // Clear the max-height CSS property in case the panel size is recalculated | |
| 51 | + // after the browser window was resized. | |
| 52 | + panel.style.maxHeight = ''; | |
| 53 | + | |
| 49 | 54 | // Get initial panel styles so we can restore them below. |
| 50 | 55 | var es = window.getComputedStyle(panel), |
| 51 | 56 | edis = es.display, |
| 52 | 57 | epos = es.position, |
| 53 | 58 | evis = es.visibility; |
| @@ -130,10 +135,20 @@ | ||
| 130 | 135 | return true; |
| 131 | 136 | childElement = childElement.nextSibling; |
| 132 | 137 | } |
| 133 | 138 | return false; |
| 134 | 139 | } |
| 140 | + | |
| 141 | + // Reset the state of the panel to uninitialized if the browser window is | |
| 142 | + // resized, so the dimensions are recalculated the next time it's opened. | |
| 143 | + originalEventHandlers.onresize = window.onresize; | |
| 144 | + window.onresize = function(event) { | |
| 145 | + panelInitialized = false; | |
| 146 | + if (originalEventHandlers.onresize) { | |
| 147 | + originalEventHandlers.onresize.call(window,event); | |
| 148 | + } | |
| 149 | + }; | |
| 135 | 150 | |
| 136 | 151 | // Click handler for the hamburger button. |
| 137 | 152 | document.getElementById("hbbtn").onclick = function(event) { |
| 138 | 153 | // Break the event handler chain, or the handler for document.onclick |
| 139 | 154 | // (about to be installed) may already be triggered by the current event. |
| 140 | 155 |
| --- skins/default/js.txt | |
| +++ skins/default/js.txt | |
| @@ -21,11 +21,11 @@ | |
| 21 | if (!document.getElementById("hbbtn")) return; // no hamburger button |
| 22 | var panel = document.getElementById("hbdrop"); |
| 23 | if (!panel) return; // site admin might've nuked it |
| 24 | if (!panel.style) return; // shouldn't happen, but be sure |
| 25 | var panelBorder = panel.style.border; |
| 26 | var panelInitialized = false; // track first panel display |
| 27 | |
| 28 | // Disable animation if this browser doesn't support CSS transitions. |
| 29 | // |
| 30 | // We need this ugly calling form for old browsers that don't allow |
| 31 | // panel.style.hasOwnProperty('transition'); catering to old browsers |
| @@ -44,10 +44,15 @@ | |
| 44 | |
| 45 | // Calculate panel height despite its being hidden at call time. |
| 46 | // Based on https://stackoverflow.com/a/29047447/142454 |
| 47 | var panelHeight; // computed on first panel display |
| 48 | function calculatePanelHeight() { |
| 49 | // Get initial panel styles so we can restore them below. |
| 50 | var es = window.getComputedStyle(panel), |
| 51 | edis = es.display, |
| 52 | epos = es.position, |
| 53 | evis = es.visibility; |
| @@ -130,10 +135,20 @@ | |
| 130 | return true; |
| 131 | childElement = childElement.nextSibling; |
| 132 | } |
| 133 | return false; |
| 134 | } |
| 135 | |
| 136 | // Click handler for the hamburger button. |
| 137 | document.getElementById("hbbtn").onclick = function(event) { |
| 138 | // Break the event handler chain, or the handler for document.onclick |
| 139 | // (about to be installed) may already be triggered by the current event. |
| 140 |
| --- skins/default/js.txt | |
| +++ skins/default/js.txt | |
| @@ -21,11 +21,11 @@ | |
| 21 | if (!document.getElementById("hbbtn")) return; // no hamburger button |
| 22 | var panel = document.getElementById("hbdrop"); |
| 23 | if (!panel) return; // site admin might've nuked it |
| 24 | if (!panel.style) return; // shouldn't happen, but be sure |
| 25 | var panelBorder = panel.style.border; |
| 26 | var panelInitialized = false; // reset if browser window is resized |
| 27 | |
| 28 | // Disable animation if this browser doesn't support CSS transitions. |
| 29 | // |
| 30 | // We need this ugly calling form for old browsers that don't allow |
| 31 | // panel.style.hasOwnProperty('transition'); catering to old browsers |
| @@ -44,10 +44,15 @@ | |
| 44 | |
| 45 | // Calculate panel height despite its being hidden at call time. |
| 46 | // Based on https://stackoverflow.com/a/29047447/142454 |
| 47 | var panelHeight; // computed on first panel display |
| 48 | function calculatePanelHeight() { |
| 49 | |
| 50 | // Clear the max-height CSS property in case the panel size is recalculated |
| 51 | // after the browser window was resized. |
| 52 | panel.style.maxHeight = ''; |
| 53 | |
| 54 | // Get initial panel styles so we can restore them below. |
| 55 | var es = window.getComputedStyle(panel), |
| 56 | edis = es.display, |
| 57 | epos = es.position, |
| 58 | evis = es.visibility; |
| @@ -130,10 +135,20 @@ | |
| 135 | return true; |
| 136 | childElement = childElement.nextSibling; |
| 137 | } |
| 138 | return false; |
| 139 | } |
| 140 | |
| 141 | // Reset the state of the panel to uninitialized if the browser window is |
| 142 | // resized, so the dimensions are recalculated the next time it's opened. |
| 143 | originalEventHandlers.onresize = window.onresize; |
| 144 | window.onresize = function(event) { |
| 145 | panelInitialized = false; |
| 146 | if (originalEventHandlers.onresize) { |
| 147 | originalEventHandlers.onresize.call(window,event); |
| 148 | } |
| 149 | }; |
| 150 | |
| 151 | // Click handler for the hamburger button. |
| 152 | document.getElementById("hbbtn").onclick = function(event) { |
| 153 | // Break the event handler chain, or the handler for document.onclick |
| 154 | // (about to be installed) may already be triggered by the current event. |
| 155 |