Fossil

Check-in [113ba3d9]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Converted JS hamburger button menu code to use standard JS only, no jQuery.

Temporarily lost the animation with this change: I'm checking this in separately to make the difference between this and the jQuery version clearer.

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.

Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | js-hamburger-menu
Files: files | file ages | folders
SHA3-256: 113ba3d9deb2e77d200a00c341869c5f70beb8d7247395f23fd88d9c2f350baf
User & Date: wyoung 2018-09-10 07:17:48.420
Original Comment: 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.
Context
2018-09-10
08:48
Using CSS transitions to mimic jQuery's slideUp/Down() transitions. This probably restricts browser compatibility still further above the XHR issue noted in the earlier checkin on this branch. According to MDN, we're probably restricted to IE 10+ with this, and maybe not even that due to not using vendor-specific extensions for the transitional browser versions. ... (check-in: 90bd6675 user: wyoung tags: js-hamburger-menu)
07:17
Converted JS hamburger button menu code to use standard JS only, no jQuery.

Temporarily lost the animation with this change: I'm checking this in separately to make the difference between this and the jQuery version clearer.

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. ... (check-in: 113ba3d9 user: wyoung tags: js-hamburger-menu)

2018-09-09
17:42
Merged in trunk improvements ... (check-in: 96b1a9ca user: wyoung tags: js-hamburger-menu)
Changes
Unified Diff Ignore Whitespace Patch
Changes to skins/default/footer.txt. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

18

19
20
21
22
23
24
25
26
27

28


29

30

31
32
33
34






35
36
37
38
39
40
41

42
43

<div class="footer">
This page was generated in about
<th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
Fossil $release_version $manifest_version $manifest_date
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<th1>
  html "<script nonce='$nonce'>"
  html "  (function() { var home='$home'; "
</th1>
    var panel = $("div#hbdrop");

    function hidePanel() { panel.slideUp() }
    function showPanel() { panel.slideDown() }

    panel.on('click', hidePanel);



    var needSitemapHTML = true;
    $("div.mainmenu > a").first().on('click', function() {
      if (panel.is(":visible")) {
        // Hamburger button clicked a second time.
        hidePanel();
      }
      else if (needSitemapHTML) {
        // Only get it once per page load: it isn't likely to
        // change on us.

        $.get(home + '/sitemap', function(reply) {


          panel.html($("ul#sitemap", reply));

          needSitemapHTML = false;

          if (window.setAllHrefs) {
            setAllHrefs();   // don't need anti-robot defense here
          }
          showPanel();






        });
      }
      else {
        showPanel();   // just show what we built above
      }
      return false;  // prevent browser from acting on <a> click
    });

  })();
</script>







<




|

|
|
|
|
>
|
>

|
|

|




>
|
>
>
|
>
|
>
|
|
|
|
>
>
>
>
>
>
|


|


<
>



1
2
3
4
5
6

7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

53
54
55

<div class="footer">
This page was generated in about
<th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
Fossil $release_version $manifest_version $manifest_date
</div>


<th1>
  html "<script nonce='$nonce'>"
  html "  (function() { var home='$home'; "
</th1>
    var panel = document.getElementById("hbdrop");

    panel.onclick = panel.hide = function() {
      panel.style.display = 'none';
    }
    panel.show = function() {
      panel.style.display = 'block';
    }

    var needSitemapHTML = true;
    document.querySelector("div.mainmenu > a").onclick = function() {
      if (panel.style.display == 'block') {
        // Hamburger button clicked a second time.
        panel.hide();
      }
      else if (needSitemapHTML) {
        // Only get it once per page load: it isn't likely to
        // change on us.
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
          var doc = xhr.responseXML;
          if (doc) {
            var sm = doc.querySelector("ul#sitemap");
            if (sm && xhr.status == 200) {
              needSitemapHTML = false;
              panel.innerHTML = sm.outerHTML;
              if (window.setAllHrefs) {
                setAllHrefs();   // don't need anti-robot defense here
              }
              panel.show();
            }
          }
          // else, can't parse response as HTML or XML
        }
        xhr.open("GET", home + "/sitemap");
        xhr.responseType = "document";
        xhr.send();
      }
      else {
        panel.show();   // just show what we built above
      }
      return false;  // prevent browser from acting on <a> click

    }
  })();
</script>
Changes to src/style.c.
︙︙
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403

*/
static char zDfltHeader[] = 
@ <html>
@ <head>
@ <base href="$baseurl/$current_page" />
@ <meta http-equiv="Content-Security-Policy" \
@  content="default-src 'self' data: ; \
@  script-src 'self' 'nonce-$<nonce>' ajax.googleapis.com ;\
@  style-src 'self' 'unsafe-inline'" />
@ <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ <title>$<project_name>: $<title></title>
@ <link rel="alternate" type="application/rss+xml" title="RSS Feed" \
@  href="$home/timeline.rss" />
@ <link rel="stylesheet" href="$stylesheet_url" type="text/css" \
@  media="screen" />








|








389
390
391
392
393
394
395
396
397
398
399
400
401
402
403

*/
static char zDfltHeader[] = 
@ <html>
@ <head>
@ <base href="$baseurl/$current_page" />
@ <meta http-equiv="Content-Security-Policy" \
@  content="default-src 'self' data: ; \
@  script-src 'self' 'nonce-$<nonce>' ;\
@  style-src 'self' 'unsafe-inline'" />
@ <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ <title>$<project_name>: $<title></title>
@ <link rel="alternate" type="application/rss+xml" title="RSS Feed" \
@  href="$home/timeline.rss" />
@ <link rel="stylesheet" href="$stylesheet_url" type="text/css" \
@  media="screen" />
︙︙