Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Overview
Comment: | Allow the hamburger menu to be closed instantly by pressing ESC or by clicking outside. This is the patch initially submitted to https://fossil-scm.org/forum/forumpost/2abe305c2d, with the interim changes incorporated. |
---|---|
Downloads: | Tarball | ZIP archive | SQL archive |
Timelines: | family | ancestors | descendants | both | js-hamburger-menu |
Files: | files | file ages | folders |
SHA1: |
a44fdd17de89debf29f3a940df02b18d |
User & Date: | florian 2018-10-11 16:36:00 |
Context
2018-10-11
| ||
16:36 | Read the CSS transition style to be restored later directly from the (previously initialized) style property, as window.getComputedStyle() seems to return null with Firefox, in this specific case. This fixes a problem introduced with the previous check-in. check-in: c6735b38 user: florian tags: js-hamburger-menu | |
16:36 | Allow the hamburger menu to be closed instantly by pressing ESC or by clicking outside. This is the patch initially submitted to https://fossil-scm.org/forum/forumpost/2abe305c2d, with the interim changes incorporated. check-in: a44fdd17 user: florian tags: js-hamburger-menu | |
09:39 | Fix minor inaccuracy in the number of years in the human_readable_age() function. check-in: e93ae526 user: drh tags: trunk | |
Changes
Changes to skins/default/js.txt.
26 27 28 29 30 31 32 33 34 35 36 37 38 39 .. 69 70 71 72 73 74 75 76 77 78 79 80 81 82 .. 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 ... 135 136 137 138 139 140 141 142 143 144 |
// 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 animMS = 400; // Calculate panel height despite its being hidden at call time. // Based on https://stackoverflow.com/a/29047447/142454 var panelHeight; // computed on sitemap load function calculatePanelHeight() { // Get initial panel styles so we can restore them below. var es = window.getComputedStyle(panel), ................................................................................ panel.style.maxHeight = panelHeight; panel.style.border = panelBorder; }, 40); // 25ms is insufficient with Firefox 62 } else { panel.style.display = 'block'; } } // Return true if the panel is showing. function panelShowing() { if (animate) { return panel.style.maxHeight == panelHeight; } ................................................................................ else { return panel.style.display == 'block'; } } // Click handler for the hamburger button. var needSitemapHTML = true; document.querySelector("div.mainmenu > a").onclick = function() { if (panelShowing()) { // Transition back to hidden state. if (animate) { panel.style.maxHeight = '0'; 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'; }, animMS); } else { panel.style.display = 'none'; } } else if (needSitemapHTML) { // Only get it once per page load: it isn't likely to ................................................................................ xhr.open("GET", "$home/sitemap?popup"); // note the TH1 substitution! xhr.responseType = "document"; xhr.send(); } else { showPanel(); // just show what we built above } return false; // prevent browser from acting on <a> click } })(); |
> > > > > > > > > > > > > > > > > | > > > > > > > > > > > > > > > | > | > > > > > > > > | | | | > < |
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 .. 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 ... 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 ... 177 178 179 180 181 182 183 184 185 |
// 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 animMS = 400; 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 sitemap load function calculatePanelHeight() { // Get initial panel styles so we can restore them below. var es = window.getComputedStyle(panel), ................................................................................ panel.style.maxHeight = panelHeight; panel.style.border = panelBorder; }, 40); // 25ms is insufficient with Firefox 62 } else { panel.style.display = 'block'; } originalEventHandlers.onkeydown = document.onkeydown; document.onkeydown = function(event) { event = event || window.event; var key = event.which || event.keyCode; if (key == 27) { panelToggle(true); } }; originalEventHandlers.onclick = document.onclick; document.onclick = function(event) { event = event || window.event; if (!panel.contains(event.target)) { panelToggle(true); //return false; // prevent default action (i.e. open clicked links) } }; } // Return true if the panel is showing. function panelShowing() { if (animate) { return panel.style.maxHeight == panelHeight; } ................................................................................ else { return panel.style.display == 'block'; } } // Click handler for the hamburger button. var needSitemapHTML = true; document.querySelector("div.mainmenu > a").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(); else event.cancelBubble = true; panelToggle(false); return false; // prevent browser from acting on <a> click }; function panelToggle(suppressAnimation) { if (panelShowing()) { document.onkeydown = originalEventHandlers.onkeydown; document.onclick = originalEventHandlers.onclick; // Transition back to hidden state. if (animate) { if (suppressAnimation) { var transition = window.getComputedStyle(panel).transition; panel.style.transition = ''; panel.style.maxHeight = '0'; panel.style.border = 'none'; setTimeout(function() { // 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'; 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'; }, animMS); } } else { panel.style.display = 'none'; } } else if (needSitemapHTML) { // Only get it once per page load: it isn't likely to ................................................................................ xhr.open("GET", "$home/sitemap?popup"); // note the TH1 substitution! xhr.responseType = "document"; xhr.send(); } else { showPanel(); // just show what we built above } } })(); |