Fossil SCM
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.
Commit
c73deeb69abaa0510eee20d374470e6ce7ca001f
Parent
7c724cf7b2fd632…
1 file changed
+10
-1
+10
-1
| --- skins/default/js.txt | ||
| +++ skins/default/js.txt | ||
| @@ -22,10 +22,11 @@ | ||
| 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 | 26 | var panelInitialized = false; // reset if browser window is resized |
| 27 | + var panelResetBorderTimerID = 0; // used to cancel post-animation tasks | |
| 27 | 28 | |
| 28 | 29 | // Disable animation if this browser doesn't support CSS transitions. |
| 29 | 30 | // |
| 30 | 31 | // We need this ugly calling form for old browsers that don't allow |
| 31 | 32 | // panel.style.hasOwnProperty('transition'); catering to old browsers |
| @@ -78,10 +79,17 @@ | ||
| 78 | 79 | // instead, that would prevent the browser from seeing the height |
| 79 | 80 | // change as a state transition, so it'd skip the CSS transition: |
| 80 | 81 | // |
| 81 | 82 | // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples |
| 82 | 83 | function showPanel() { |
| 84 | + // Cancel the timer to remove the panel border after the closing animation, | |
| 85 | + // otherwise double-clicking the hamburger button with the panel opened will | |
| 86 | + // remove the borders from the (closed and immediately reopened) panel. | |
| 87 | + if (panelResetBorderTimerID) { | |
| 88 | + clearTimeout(panelResetBorderTimerID); | |
| 89 | + panelResetBorderTimerID = 0; | |
| 90 | + } | |
| 83 | 91 | if (animate) { |
| 84 | 92 | if (!panelInitialized) { |
| 85 | 93 | panelInitialized = true; |
| 86 | 94 | // Set up a CSS transition to animate the panel open and |
| 87 | 95 | // closed. Only needs to be done once per page load. |
| @@ -176,14 +184,15 @@ | ||
| 176 | 184 | panel.style.transition = transition; |
| 177 | 185 | }, 40); // 25ms is insufficient with Firefox 62 |
| 178 | 186 | } |
| 179 | 187 | else { |
| 180 | 188 | panel.style.maxHeight = '0'; |
| 181 | - setTimeout(function() { | |
| 189 | + panelResetBorderTimerID = setTimeout(function() { | |
| 182 | 190 | // Browsers show a 1px high border line when maxHeight == 0, |
| 183 | 191 | // our "hidden" state, so hide the borders in that state, too. |
| 184 | 192 | panel.style.border = 'none'; |
| 193 | + panelResetBorderTimerID = 0; // clear ID of completed timer | |
| 185 | 194 | }, animMS); |
| 186 | 195 | } |
| 187 | 196 | } |
| 188 | 197 | else { |
| 189 | 198 | panel.style.display = 'none'; |
| 190 | 199 |
| --- skins/default/js.txt | |
| +++ skins/default/js.txt | |
| @@ -22,10 +22,11 @@ | |
| 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 |
| @@ -78,10 +79,17 @@ | |
| 78 | // instead, that would prevent the browser from seeing the height |
| 79 | // change as a state transition, so it'd skip the CSS transition: |
| 80 | // |
| 81 | // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples |
| 82 | function showPanel() { |
| 83 | if (animate) { |
| 84 | if (!panelInitialized) { |
| 85 | panelInitialized = true; |
| 86 | // Set up a CSS transition to animate the panel open and |
| 87 | // closed. Only needs to be done once per page load. |
| @@ -176,14 +184,15 @@ | |
| 176 | panel.style.transition = transition; |
| 177 | }, 40); // 25ms is insufficient with Firefox 62 |
| 178 | } |
| 179 | else { |
| 180 | panel.style.maxHeight = '0'; |
| 181 | setTimeout(function() { |
| 182 | // Browsers show a 1px high border line when maxHeight == 0, |
| 183 | // our "hidden" state, so hide the borders in that state, too. |
| 184 | panel.style.border = 'none'; |
| 185 | }, animMS); |
| 186 | } |
| 187 | } |
| 188 | else { |
| 189 | panel.style.display = 'none'; |
| 190 |
| --- skins/default/js.txt | |
| +++ skins/default/js.txt | |
| @@ -22,10 +22,11 @@ | |
| 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 | var panelResetBorderTimerID = 0; // used to cancel post-animation tasks |
| 28 | |
| 29 | // Disable animation if this browser doesn't support CSS transitions. |
| 30 | // |
| 31 | // We need this ugly calling form for old browsers that don't allow |
| 32 | // panel.style.hasOwnProperty('transition'); catering to old browsers |
| @@ -78,10 +79,17 @@ | |
| 79 | // instead, that would prevent the browser from seeing the height |
| 80 | // change as a state transition, so it'd skip the CSS transition: |
| 81 | // |
| 82 | // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples |
| 83 | function showPanel() { |
| 84 | // Cancel the timer to remove the panel border after the closing animation, |
| 85 | // otherwise double-clicking the hamburger button with the panel opened will |
| 86 | // remove the borders from the (closed and immediately reopened) panel. |
| 87 | if (panelResetBorderTimerID) { |
| 88 | clearTimeout(panelResetBorderTimerID); |
| 89 | panelResetBorderTimerID = 0; |
| 90 | } |
| 91 | if (animate) { |
| 92 | if (!panelInitialized) { |
| 93 | panelInitialized = true; |
| 94 | // Set up a CSS transition to animate the panel open and |
| 95 | // closed. Only needs to be done once per page load. |
| @@ -176,14 +184,15 @@ | |
| 184 | panel.style.transition = transition; |
| 185 | }, 40); // 25ms is insufficient with Firefox 62 |
| 186 | } |
| 187 | else { |
| 188 | panel.style.maxHeight = '0'; |
| 189 | panelResetBorderTimerID = setTimeout(function() { |
| 190 | // Browsers show a 1px high border line when maxHeight == 0, |
| 191 | // our "hidden" state, so hide the borders in that state, too. |
| 192 | panel.style.border = 'none'; |
| 193 | panelResetBorderTimerID = 0; // clear ID of completed timer |
| 194 | }, animMS); |
| 195 | } |
| 196 | } |
| 197 | else { |
| 198 | panel.style.display = 'none'; |
| 199 |