Fossil SCM

fossil-scm / src / hbmenu.js
Blame History Raw 260 lines
1
/*
2
** Originally: Copyright © 2018 Warren Young
3
**
4
** This program is free software; you can redistribute it and/or
5
** modify it under the terms of the Simplified BSD License (also
6
** known as the "2-Clause License" or "FreeBSD License".)
7
**
8
** This program is distributed in the hope that it will be useful,
9
** but without any warranty; without even the implied warranty of
10
** merchantability or fitness for a particular purpose.
11
**
12
** Contact: wyoung on the Fossil forum, https://fossil-scm.org/forum/
13
** Modified by others.
14
**
15
*******************************************************************************
16
**
17
** This file contains the JS code used to implement the expanding hamburger
18
** menu on various skins.
19
**
20
** This was original the "js.txt" file for the default skin. It was subsequently
21
** moved into src/hbmenu.js so that it could be more easily reused by other skins
22
** using the "builtin_request_js" TH1 command.
23
**
24
** Operation:
25
**
26
** This script expects the HTML to contain two elements:
27
**
28
** <a id="hbbtn"> <--- The hamburger menu button
29
** <nav id="hbdrop"> <--- Container for the hamburger menu
30
**
31
** Bindings are made on hbbtn so that when it is clicked, the following
32
** happens:
33
**
34
** 1. An XHR is made to /sitemap?popup to fetch the HTML for the
35
** popup menu.
36
**
37
** 2. The HTML for the popup is inserted into hddrop.
38
**
39
** 3. The hddrop container is made visible.
40
**
41
** CSS rules are also needed to cause the hddrop to be initially invisible,
42
** and to correctly style and position the hddrop container.
43
*/
44
(function() {
45
var hbButton = document.getElementById("hbbtn");
46
if (!hbButton) return; // no hamburger button
47
if (!document.addEventListener) return; // Incompatible browser
48
var panel = document.getElementById("hbdrop");
49
if (!panel) return; // site admin might've nuked it
50
if (!panel.style) return; // shouldn't happen, but be sure
51
var panelBorder = panel.style.border;
52
var panelInitialized = false; // reset if browser window is resized
53
var panelResetBorderTimerID = 0; // used to cancel post-animation tasks
54
55
// Disable animation if this browser doesn't support CSS transitions.
56
//
57
// We need this ugly calling form for old browsers that don't allow
58
// panel.style.hasOwnProperty('transition'); catering to old browsers
59
// is the whole point here.
60
var animate = panel.style.transition !== null && (typeof(panel.style.transition) == "string");
61
62
// The duration of the animation can be overridden from the default skin
63
// header.txt by setting the "data-anim-ms" attribute of the panel.
64
var animMS = panel.getAttribute("data-anim-ms");
65
if (animMS) { // not null or empty string, parse it
66
animMS = parseInt(animMS);
67
if (isNaN(animMS) || animMS == 0)
68
animate = false; // disable animation if non-numeric or zero
69
else if (animMS < 0)
70
animMS = 400; // set default animation duration if negative
71
}
72
else // attribute is null or empty string, use default
73
animMS = 400;
74
75
// Calculate panel height despite its being hidden at call time.
76
// Based on https://stackoverflow.com/a/29047447/142454
77
var panelHeight; // computed on first panel display
78
function calculatePanelHeight() {
79
80
// Clear the max-height CSS property in case the panel size is recalculated
81
// after the browser window was resized.
82
panel.style.maxHeight = '';
83
84
// Get initial panel styles so we can restore them below.
85
var es = window.getComputedStyle(panel),
86
edis = es.display,
87
epos = es.position,
88
evis = es.visibility;
89
90
// Restyle the panel so we can measure its height while invisible.
91
panel.style.visibility = 'hidden';
92
panel.style.position = 'absolute';
93
panel.style.display = 'block';
94
panelHeight = panel.offsetHeight + 'px';
95
96
// Revert styles now that job is done.
97
panel.style.display = edis;
98
panel.style.position = epos;
99
panel.style.visibility = evis;
100
}
101
102
// Show the panel by changing the panel height, which kicks off the
103
// slide-open/closed transition set up in the XHR onload handler.
104
//
105
// Schedule the change for a near-future time in case this is the
106
// first call, where the div was initially invisible. If we were
107
// to change the panel's visibility and height at the same time
108
// instead, that would prevent the browser from seeing the height
109
// change as a state transition, so it'd skip the CSS transition:
110
//
111
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples
112
function showPanel() {
113
// Cancel the timer to remove the panel border after the closing animation,
114
// otherwise double-clicking the hamburger button with the panel opened will
115
// remove the borders from the (closed and immediately reopened) panel.
116
if (panelResetBorderTimerID) {
117
clearTimeout(panelResetBorderTimerID);
118
panelResetBorderTimerID = 0;
119
}
120
if (animate) {
121
if (!panelInitialized) {
122
panelInitialized = true;
123
// Set up a CSS transition to animate the panel open and
124
// closed. Only needs to be done once per page load.
125
// Based on https://stackoverflow.com/a/29047447/142454
126
calculatePanelHeight();
127
panel.style.transition = 'max-height ' + animMS +
128
'ms ease-in-out';
129
panel.style.overflowY = 'hidden';
130
panel.style.maxHeight = '0';
131
}
132
setTimeout(function() {
133
panel.style.maxHeight = panelHeight;
134
panel.style.border = panelBorder;
135
}, 40); // 25ms is insufficient with Firefox 62
136
}
137
panel.style.display = 'block';
138
document.addEventListener('keydown',panelKeydown,/* useCapture == */true);
139
document.addEventListener('click',panelClick,false);
140
}
141
142
var panelKeydown = function(event) {
143
var key = event.which || event.keyCode;
144
if (key == 27) {
145
event.stopPropagation(); // ignore other keydown handlers
146
panelToggle(true);
147
}
148
};
149
150
var panelClick = function(event) {
151
if (!panel.contains(event.target)) {
152
// Call event.preventDefault() to have clicks outside the opened panel
153
// just close the panel, and swallow clicks on links or form elements.
154
//event.preventDefault();
155
panelToggle(true);
156
}
157
};
158
159
// Return true if the panel is showing.
160
function panelShowing() {
161
if (animate) {
162
return panel.style.maxHeight == panelHeight;
163
}
164
else {
165
return panel.style.display == 'block';
166
}
167
}
168
169
// Check if the specified HTML element has any child elements. Note that plain
170
// text nodes, comments, and any spaces (presentational or not) are ignored.
171
function hasChildren(element) {
172
var childElement = element.firstChild;
173
while (childElement) {
174
if (childElement.nodeType == 1) // Node.ELEMENT_NODE == 1
175
return true;
176
childElement = childElement.nextSibling;
177
}
178
return false;
179
}
180
181
// Reset the state of the panel to uninitialized if the browser window is
182
// resized, so the dimensions are recalculated the next time it's opened.
183
window.addEventListener('resize',function(event) {
184
panelInitialized = false;
185
},false);
186
187
// Click handler for the hamburger button.
188
hbButton.addEventListener('click',function(event) {
189
// Break the event handler chain, or the handler for document → click
190
// (about to be installed) may already be triggered by the current event.
191
event.stopPropagation();
192
event.preventDefault(); // prevent browser from acting on <a> click
193
panelToggle(false);
194
},false);
195
196
function panelToggle(suppressAnimation) {
197
if (panelShowing()) {
198
document.removeEventListener('keydown',panelKeydown,/* useCapture == */true);
199
document.removeEventListener('click',panelClick,false);
200
// Transition back to hidden state.
201
if (animate) {
202
if (suppressAnimation) {
203
var transition = panel.style.transition;
204
panel.style.transition = '';
205
panel.style.maxHeight = '0';
206
panel.style.border = 'none';
207
setTimeout(function() {
208
// Make sure CSS transition won't take effect now, so restore it
209
// asynchronously. Outer variable 'transition' still valid here.
210
panel.style.transition = transition;
211
}, 40); // 25ms is insufficient with Firefox 62
212
}
213
else {
214
panel.style.maxHeight = '0';
215
panelResetBorderTimerID = setTimeout(function() {
216
// Browsers show a 1px high border line when maxHeight == 0,
217
// our "hidden" state, so hide the borders in that state, too.
218
panel.style.border = 'none';
219
panelResetBorderTimerID = 0; // clear ID of completed timer
220
}, animMS);
221
}
222
}
223
else {
224
panel.style.display = 'none';
225
}
226
}
227
else {
228
if (!hasChildren(panel)) {
229
// Only get the sitemap once per page load: it isn't likely to
230
// change on us.
231
var xhr = new XMLHttpRequest();
232
xhr.onload = function() {
233
var doc = xhr.responseXML;
234
if (doc) {
235
var sm = doc.querySelector("ul#sitemap");
236
if (sm && xhr.status == 200) {
237
// Got sitemap. Insert it into the drop-down panel.
238
panel.innerHTML = sm.outerHTML;
239
// Display the panel
240
showPanel();
241
}
242
}
243
// else, can't parse response as HTML or XML
244
}
245
// The extra "popup" query parameter is a single to the server that the
246
// header and footer boiler-plate can be omitted. The boiler-plate is
247
// ignored if it is included. The popup query parameter is just an
248
// optimization.
249
var url = hbButton.href + (hbButton.href.includes("?")?"&popup":"?popup")
250
xhr.open("GET", url);
251
xhr.responseType = "document";
252
xhr.send();
253
}
254
else {
255
showPanel(); // just show what we built above
256
}
257
}
258
}
259
})();
260

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button