Fossil

Check-in [d7c43c5a]
Login
☰Home Timeline Docs ForumDownload

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

Overview
Comment:Ajaxy animated drop-down menu on clicking a new hamburger button in the default skin, as requested by drh on the forum: https://fossil-scm.org/forum/forumpost/40a18bd742

Initial version uses jQuery loaded from Google Hosted APIs for ease of development.

Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | js-hamburger-menu
Files: files | file ages | folders
SHA3-256:d7c43c5aa7761cbc1ab4ce04fed48e48951ad465450ad4d448a375e0a13b77e2
User & Date: wyoung 2018-09-05 23:08:48
Original Comment: Ajaxy animated hamburger button as requested by drh on the forum: https://fossil-scm.org/forum/forumpost/40a18bd742
Context
2018-09-05
23:45
Fixed a bug in the onclick handler for the new hamburger button which allowed the browser to follow our empty 'a href="#"' link. For some reason, Chrome only did this sometimes, not always, which lead to me thinking it was some kind of race condition. check-in: e806e5c4 user: wyoung tags: js-hamburger-menu
23:08
Ajaxy animated drop-down menu on clicking a new hamburger button in the default skin, as requested by drh on the forum: https://fossil-scm.org/forum/forumpost/40a18bd742

Initial version uses jQuery loaded from Google Hosted APIs for ease of development. check-in: d7c43c5a user: wyoung tags: js-hamburger-menu

15:16
Avoid column breaks inside a top-level bullet in the /sitemap. check-in: dc5e06ff user: drh tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to skins/default/css.txt. 

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

    clear:both;
    background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x;
    border:1px solid #eaeaea;
    border-radius:5px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

}

.mainmenu a {
    text-decoration:none;
    color: #777;
    border-right:1px solid #eaeaea;
}
.mainmenu a.active,
.mainmenu a:hover {
    color: #000;
    border-bottom:2px solid #D26911;
}














.submenu {
    font-size: .7em;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}









>












>
>
>
>
>
>
>
>
>
>
>
>
>








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

    clear:both;
    background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x;
    border:1px solid #eaeaea;
    border-radius:5px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    z-index: 21;  /* just above hbdrop */
}

.mainmenu a {
    text-decoration:none;
    color: #777;
    border-right:1px solid #eaeaea;
}
.mainmenu a.active,
.mainmenu a:hover {
    color: #000;
    border-bottom:2px solid #D26911;
}

div#hbdrop {
    background-color: white;
    border: 1px solid black;
    border-top: white;
    border-radius: 0 0 0.5em 0.5em;
    display: none;
    font-size: 80%;
    left: 2em;
    max-width: 33%;
    position: absolute;
    z-index: 20;  /* just below mainmenu, but above timeline bubbles */
}

.submenu {
    font-size: .7em;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

Changes to skins/default/footer.txt. 

1
2
3
4
5



































<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>








































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

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

<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;
          showPanel();
        });
      }
      else {
        showPanel();   // just show what we built above
      }
    });
  })();
</script>

Changes to skins/default/header.txt. 

15
16
17
18
19
20
21

22
23
24
25
26
27
28
..
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51


  upvar home home
  if {[string range $url 0 [string length $current]] eq "/$current"} {
    html "<a href='$home$url' class='active $cls'>$name</a>\n"
  } else {
    html "<a href='$home$url' class='$cls'>$name</a>\n"
  }
}

menulink $index_page Home {}
if {[anycap jor]} {
  menulink /timeline Timeline {}
}
if {[hascap oh]} {
  menulink /dir?ci=tip Files desktoponly
}
................................................................................
  menulink /ticket Tickets wideonly
}
if {[hascap j]} {
  menulink /wiki Wiki wideonly
}
if {[hascap s]} {
  menulink /setup Admin {}
  menulink /sitemap More... wideonly
} elseif {[hascap a]} {
  menulink /setup_ulist Users {}
  menulink /sitemap More... {}
} else {
  menulink /sitemap More... {}
}
</th1></div>









>







 







<


<
<
<


>

15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
..
38
39
40
41
42
43
44

45
46



47
48
49

  upvar home home
  if {[string range $url 0 [string length $current]] eq "/$current"} {
    html "<a href='$home$url' class='active $cls'>$name</a>\n"
  } else {
    html "<a href='$home$url' class='$cls'>$name</a>\n"
  }
}
html "<a href='#'>&#9776;</a>"
menulink $index_page Home {}
if {[anycap jor]} {
  menulink /timeline Timeline {}
}
if {[hascap oh]} {
  menulink /dir?ci=tip Files desktoponly
}
................................................................................
  menulink /ticket Tickets wideonly
}
if {[hascap j]} {
  menulink /wiki Wiki wideonly
}
if {[hascap s]} {
  menulink /setup Admin {}

} elseif {[hascap a]} {
  menulink /setup_ulist Users {}



}
</th1></div>
<div id='hbdrop'></div>

Changes to src/sitemap.c. 

44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

  };

  login_check_credentials();
  srchFlags = search_restrict(SRCH_ALL);
  style_header("Site Map");
  style_adunit_config(ADUNIT_RIGHT_OK);
  @ <div class="columns" style="column-width:20em">
  @ <ul>
  @ <li>%z(href("%R/home"))Home Page</a>
  for(i=0; i<sizeof(aExtra)/sizeof(aExtra[0]); i++){
    char *z = db_get(aExtra[i].zProperty,0);
    if( z==0 || z[0]==0 ) continue;
    if( !inSublist ){
      @ <ul>
      inSublist = 1;








|








44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

  };

  login_check_credentials();
  srchFlags = search_restrict(SRCH_ALL);
  style_header("Site Map");
  style_adunit_config(ADUNIT_RIGHT_OK);
  @ <div class="columns" style="column-width:20em">
  @ <ul id="sitemap">
  @ <li>%z(href("%R/home"))Home Page</a>
  for(i=0; i<sizeof(aExtra)/sizeof(aExtra[0]); i++){
    char *z = db_get(aExtra[i].zProperty,0);
    if( z==0 || z[0]==0 ) continue;
    if( !inSublist ){
      @ <ul>
      inSublist = 1;

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>' ;\
@  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>' 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" />

This page was generated in about 0.007s by Fossil 2.7 [d3f454fa33] 2018-11-13 16:20:59