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 | SQL archive |
| Timelines: | family | ancestors | descendants | both | js-hamburger-menu |
| Files: | files | file ages | folders |
| SHA1: |
7c724cf7b2fd6325ce67191141ccc15e |
| User & Date: | florian 2018-10-11 16:36:05 |
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
Changes to skins/default/js.txt.
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 .. 42 43 44 45 46 47 48 49 50 51 52 53 54 55 ... 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
*/
(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");
................................................................................
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.
................................................................................
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();
|
| > > > > > > > > > > > > > > > |
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 .. 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 ... 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
*/
(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");
................................................................................
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.
................................................................................
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();
|