Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Overview
| Comment: | 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. |
|---|---|
| Downloads: | Tarball | ZIP archive |
| Timelines: | family | ancestors | descendants | both | js-hamburger-menu |
| Files: | files | file ages | folders |
| SHA1: |
c73deeb69abaa0510eee20d374470e6c |
| User & Date: | florian 2018-10-11 16:36:06.000 |
Context
|
2018-10-12
| ||
| 16:16 | Switch away from classic (bubbling-only) event handling to simplify management of temporary handlers, and to have the ESC key listener use a priority (capturing) handler, to prevent any other keydown handlers or default actions for the ESC key while the panel is open. This does not change the compatibility test results summarized here: https://fossil-scm.org/forum/forumpost/f425a1756c. (IE8 halts JS processing at JSON.parse in antiRobotDefense, anyway.) Also, for non-compatible browsers, there's a new fallback to transform the hamburger button into a simple (non-scripted) link to the sitemap. ... (check-in: e3376829 user: florian tags: js-hamburger-menu) | |
|
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) | |
Changes
Changes to skins/default/js.txt.
| ︙ | ︙ | |||
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");
| > | 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
(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
var panelResetBorderTimerID = 0; // used to cancel post-animation tasks
// 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");
|
| ︙ | ︙ | |||
76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
// first call, where the div was initially invisible. If we were
// to change the panel's visibility and height at the same time
// instead, that would prevent the browser from seeing the height
// change as a state transition, so it'd skip the CSS transition:
//
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples
function showPanel() {
if (animate) {
if (!panelInitialized) {
panelInitialized = true;
// 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();
| > > > > > > > | 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
// first call, where the div was initially invisible. If we were
// to change the panel's visibility and height at the same time
// instead, that would prevent the browser from seeing the height
// change as a state transition, so it'd skip the CSS transition:
//
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples
function showPanel() {
// Cancel the timer to remove the panel border after the closing animation,
// otherwise double-clicking the hamburger button with the panel opened will
// remove the borders from the (closed and immediately reopened) panel.
if (panelResetBorderTimerID) {
clearTimeout(panelResetBorderTimerID);
panelResetBorderTimerID = 0;
}
if (animate) {
if (!panelInitialized) {
panelInitialized = true;
// 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();
|
| ︙ | ︙ | |||
174 175 176 177 178 179 180 |
// 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';
| | > | 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 |
// 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';
panelResetBorderTimerID = 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';
panelResetBorderTimerID = 0; // clear ID of completed timer
}, animMS);
}
}
else {
panel.style.display = 'none';
}
}
|
| ︙ | ︙ |