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 | SQL 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
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
Hide Diffs Side-by-Side Diffs Ignore Whitespace Patch

Changes to skins/default/footer.txt.

     1      1   <div class="footer">
     2      2   This page was generated in about
     3      3   <th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
     4      4   Fossil $release_version $manifest_version $manifest_date
     5      5   </div>
     6      6   
     7         -<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     8      7   <th1>
     9      8     html "<script nonce='$nonce'>"
    10      9     html "  (function() { var home='$home'; "
    11     10   </th1>
    12         -    var panel = $("div#hbdrop");
           11  +    var panel = document.getElementById("hbdrop");
    13     12   
    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  +    }
    18     19   
    19     20       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') {
    22     23           // Hamburger button clicked a second time.
    23         -        hidePanel();
           24  +        panel.hide();
    24     25         }
    25     26         else if (needSitemapHTML) {
    26     27           // Only get it once per page load: it isn't likely to
    27     28           // 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
           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  +            }
    33     42             }
    34         -          showPanel();
    35         -        });
           43  +          // else, can't parse response as HTML or XML
           44  +        }
           45  +        xhr.open("GET", home + "/sitemap");
           46  +        xhr.responseType = "document";
           47  +        xhr.send();
    36     48         }
    37     49         else {
    38         -        showPanel();   // just show what we built above
           50  +        panel.show();   // just show what we built above
    39     51         }
    40     52         return false;  // prevent browser from acting on <a> click
    41         -    });
           53  +    }
    42     54     })();
    43     55   </script>

Changes to src/style.c.

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