Fossil SCM

Converted JS hamburger button menu code to use standard JS only, no jQuery. Not sure how portable it is yet; I wouldn't be surprised if it broke on old IE, since we're using xhr.onload instead of the horrid mess that is xhr.onreadystatechange.

wyoung 2018-09-10 07:17 js-hamburger-menu
Commit 113ba3d9deb2e77d200a00c341869c5f70beb8d7247395f23fd88d9c2f350baf
Parent 96b1a9ca4d4ffd5…
2 files changed +31 -19 +1 -1
~ skins/default/footer.txt ~ src/style.c
M skins/default/footer.txt
+31 -19
--- skins/default/footer.txt
+++ skins/default/footer.txt
@@ -2,42 +2,54 @@
22
 This page was generated in about
33
 <th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
44
 Fossil $release_version $manifest_version $manifest_date
55
 </div>
66
7
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
87
 <th1>
98
 html "<script nonce='$nonce'>"
109
 html " (function() { var home='$home'; "
1110
 </th1>
12
- var panel = $("div#hbdrop");
11
+ var panel = document.getElementById("hbdrop");
1312
14
- function hidePanel() { panel.slideUp() }
15
- function showPanel() { panel.slideDown() }
16
-
17
- panel.on('click', hidePanel);
13
+ panel.onclick = panel.hide = function() {
14
+ panel.style.display = 'none';
15
+ }
16
+ panel.show = function() {
17
+ panel.style.display = 'block';
18
+ }
1819
1920
 var needSitemapHTML = true;
20
- $("div.mainmenu > a").first().on('click', function() {
21
- if (panel.is(":visible")) {
21
+ document.querySelector("div.mainmenu > a").onclick = function() {
22
+ if (panel.style.display == 'block') {
2223
 // Hamburger button clicked a second time.
23
- hidePanel();
24
+ panel.hide();
2425
 }
2526
 else if (needSitemapHTML) {
2627
 // Only get it once per page load: it isn't likely to
2728
 // change on us.
28
- $.get(home + '/sitemap', function(reply) {
29
- panel.html($("ul#sitemap", reply));
30
- needSitemapHTML = false;
31
- if (window.setAllHrefs) {
32
- setAllHrefs(); // don't need anti-robot defense here
33
- }
34
- showPanel();
35
- });
29
+ var xhr = new XMLHttpRequest();
30
+ xhr.onload = function() {
31
+ var doc = xhr.responseXML;
32
+ if (doc) {
33
+ var sm = doc.querySelector("ul#sitemap");
34
+ if (sm && xhr.status == 200) {
35
+ needSitemapHTML = false;
36
+ panel.innerHTML = sm.outerHTML;
37
+ if (window.setAllHrefs) {
38
+ setAllHrefs(); // don't need anti-robot defense here
39
+ }
40
+ panel.show();
41
+ }
42
+ }
43
+ // else, can't parse response as HTML or XML
44
+ }
45
+ xhr.open("GET", home + "/sitemap");
46
+ xhr.responseType = "document";
47
+ xhr.send();
3648
 }
3749
 else {
38
- showPanel(); // just show what we built above
50
+ panel.show(); // just show what we built above
3951
 }
4052
 return false; // prevent browser from acting on <a> click
41
- });
53
+ }
4254
 })();
4355
 </script>
4456
--- skins/default/footer.txt
+++ skins/default/footer.txt
@@ -2,42 +2,54 @@
2 This page was generated in about
3 <th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
4 Fossil $release_version $manifest_version $manifest_date
5 </div>
6
7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8 <th1>
9 html "<script nonce='$nonce'>"
10 html " (function() { var home='$home'; "
11 </th1>
12 var panel = $("div#hbdrop");
13
14 function hidePanel() { panel.slideUp() }
15 function showPanel() { panel.slideDown() }
16
17 panel.on('click', hidePanel);
 
 
18
19 var needSitemapHTML = true;
20 $("div.mainmenu > a").first().on('click', function() {
21 if (panel.is(":visible")) {
22 // Hamburger button clicked a second time.
23 hidePanel();
24 }
25 else if (needSitemapHTML) {
26 // Only get it once per page load: it isn't likely to
27 // change on us.
28 $.get(home + '/sitemap', function(reply) {
29 panel.html($("ul#sitemap", reply));
30 needSitemapHTML = false;
31 if (window.setAllHrefs) {
32 setAllHrefs(); // don't need anti-robot defense here
33 }
34 showPanel();
35 });
 
 
 
 
 
 
 
 
 
 
 
36 }
37 else {
38 showPanel(); // just show what we built above
39 }
40 return false; // prevent browser from acting on <a> click
41 });
42 })();
43 </script>
44
--- skins/default/footer.txt
+++ skins/default/footer.txt
@@ -2,42 +2,54 @@
2 This page was generated in about
3 <th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
4 Fossil $release_version $manifest_version $manifest_date
5 </div>
6
 
7 <th1>
8 html "<script nonce='$nonce'>"
9 html " (function() { var home='$home'; "
10 </th1>
11 var panel = document.getElementById("hbdrop");
12
13 panel.onclick = panel.hide = function() {
14 panel.style.display = 'none';
15 }
16 panel.show = function() {
17 panel.style.display = 'block';
18 }
19
20 var needSitemapHTML = true;
21 document.querySelector("div.mainmenu > a").onclick = function() {
22 if (panel.style.display == 'block') {
23 // Hamburger button clicked a second time.
24 panel.hide();
25 }
26 else if (needSitemapHTML) {
27 // Only get it once per page load: it isn't likely to
28 // change on us.
29 var xhr = new XMLHttpRequest();
30 xhr.onload = function() {
31 var doc = xhr.responseXML;
32 if (doc) {
33 var sm = doc.querySelector("ul#sitemap");
34 if (sm && xhr.status == 200) {
35 needSitemapHTML = false;
36 panel.innerHTML = sm.outerHTML;
37 if (window.setAllHrefs) {
38 setAllHrefs(); // don't need anti-robot defense here
39 }
40 panel.show();
41 }
42 }
43 // else, can't parse response as HTML or XML
44 }
45 xhr.open("GET", home + "/sitemap");
46 xhr.responseType = "document";
47 xhr.send();
48 }
49 else {
50 panel.show(); // just show what we built above
51 }
52 return false; // prevent browser from acting on <a> click
53 }
54 })();
55 </script>
56
M src/style.c
+1 -1
--- src/style.c
+++ src/style.c
@@ -391,11 +391,11 @@
391391
 @ <html>
392392
 @ <head>
393393
 @ <base href="$baseurl/$current_page" />
394394
 @ <meta http-equiv="Content-Security-Policy" \
395395
 @ content="default-src 'self' data: ; \
396
-@ script-src 'self' 'nonce-$<nonce>' ajax.googleapis.com ;\
396
+@ script-src 'self' 'nonce-$<nonce>' ;\
397397
 @ style-src 'self' 'unsafe-inline'" />
398398
 @ <meta name="viewport" content="width=device-width, initial-scale=1.0">
399399
 @ <title>$<project_name>: $<title></title>
400400
 @ <link rel="alternate" type="application/rss+xml" title="RSS Feed" \
401401
 @ href="$home/timeline.rss" />
402402
--- src/style.c
+++ src/style.c
@@ -391,11 +391,11 @@
391 @ <html>
392 @ <head>
393 @ <base href="$baseurl/$current_page" />
394 @ <meta http-equiv="Content-Security-Policy" \
395 @ content="default-src 'self' data: ; \
396 @ script-src 'self' 'nonce-$<nonce>' ajax.googleapis.com ;\
397 @ style-src 'self' 'unsafe-inline'" />
398 @ <meta name="viewport" content="width=device-width, initial-scale=1.0">
399 @ <title>$<project_name>: $<title></title>
400 @ <link rel="alternate" type="application/rss+xml" title="RSS Feed" \
401 @ href="$home/timeline.rss" />
402
--- src/style.c
+++ src/style.c
@@ -391,11 +391,11 @@
391 @ <html>
392 @ <head>
393 @ <base href="$baseurl/$current_page" />
394 @ <meta http-equiv="Content-Security-Policy" \
395 @ content="default-src 'self' data: ; \
396 @ script-src 'self' 'nonce-$<nonce>' ;\
397 @ style-src 'self' 'unsafe-inline'" />
398 @ <meta name="viewport" content="width=device-width, initial-scale=1.0">
399 @ <title>$<project_name>: $<title></title>
400 @ <link rel="alternate" type="application/rss+xml" title="RSS Feed" \
401 @ href="$home/timeline.rss" />
402

Keyboard Shortcuts

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