Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Changes In Branch js-hamburger-menu Excluding Merge-Ins
This is equivalent to a diff from e93ae526 to dac9293b
2019-01-02
| ||
15:31 | Enhancements to the hamburger menu mechanism. ... (check-in: 724a9b8f user: drh tags: trunk) | |
07:24 | Oops, fallen for testing built-in versus customized skin, fix the previous check-in. ... (Closed-Leaf check-in: dac9293b user: florian tags: js-hamburger-menu) | |
07:03 | Less rigid string-to-number conversion for the custom "data-anim-ms" attribute. ... (check-in: e4a18b67 user: florian tags: js-hamburger-menu) | |
2018-10-12
| ||
16:08 | Alternative name for the "customskin" document in the document index. ... (check-in: 2aa4ef94 user: drh tags: trunk) | |
2018-10-11
| ||
16:36 | Allow the hamburger menu to be closed instantly by pressing ESC or by clicking outside. This is the patch initially submitted to https://fossil-scm.org/forum/forumpost/2abe305c2d, with the interim changes incorporated. ... (check-in: a44fdd17 user: florian tags: js-hamburger-menu) | |
09:39 | Fix minor inaccuracy in the number of years in the human_readable_age() function. ... (check-in: e93ae526 user: drh tags: trunk) | |
2018-10-10
| ||
19:49 | Applied a patch by forum user vor0nwe to allow the WYSIWYG wiki page editor to work in the face of the new CSP restrictions on inline JavaScript. The patch and explicit license for inclusion in Fossil are here: https://fossil-scm.org/forum/forumpost/6985a4754e ... (check-in: 543cdd47 user: wyoung tags: trunk) | |
Changes to skins/default/header.txt.
︙ | ︙ | |||
15 16 17 18 19 20 21 | 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" } } | | | 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 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 id='hbbtn' href='#'>☰</a>" menulink $index_page Home {} if {[anycap jor]} { menulink /timeline Timeline {} } if {[hascap oh]} { menulink /dir?ci=tip Files desktoponly } |
︙ | ︙ |
Changes to skins/default/js.txt.
︙ | ︙ | |||
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | ******************************************************************************* ** ** This file contains the JS code specific to the Fossil default skin. ** Currently, the only thing this does is handle clicks on its hamburger ** menu button. */ (function() { var panel = document.getElementById("hbdrop"); if (!panel) return; // site admin might've nuked it if (!panel.style) return; // shouldn't happen, but be sure var panelBorder = panel.style.border; // Disable animation if this browser doesn't support CSS transitions. // // We need this ugly calling form for old browsers that don't allow // panel.style.hasOwnProperty('transition'); catering to old browsers // is the whole point here. var animate = panel.style.transition !== null && (typeof(panel.style.transition) == "string"); | > > > > > > > > > > > > > > > > > > > > > | | > > > > > | 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | ******************************************************************************* ** ** This file contains the JS code specific to the Fossil default skin. ** Currently, the only thing this does is handle clicks on its hamburger ** menu button. */ (function() { var hbButton = document.getElementById("hbbtn"); if (!hbButton) return; // no hamburger button if (!document.addEventListener) { // Turn the button into a link to the sitemap for incompatible browsers. hbButton.href = "$home/sitemap"; return; } var panel = document.getElementById("hbdrop"); if (!panel) return; // site admin might've nuked it if (!panel.style) return; // shouldn't happen, but be sure var panelBorder = panel.style.border; var panelInitialized = false; // reset if browser window is resized var panelResetBorderTimerID = 0; // used to cancel post-animation tasks // Disable animation if this browser doesn't support CSS transitions. // // We need this ugly calling form for old browsers that don't allow // panel.style.hasOwnProperty('transition'); catering to old browsers // is the whole point here. var animate = panel.style.transition !== null && (typeof(panel.style.transition) == "string"); // The duration of the animation can be overridden from the default skin // header.txt by setting the "data-anim-ms" attribute of the panel. var animMS = panel.getAttribute("data-anim-ms"); if (animMS) { // not null or empty string, parse it animMS = parseInt(animMS); if (isNaN(animMS) || animMS == 0) animate = false; // disable animation if non-numeric or zero else if (animMS < 0) animMS = 400; // set default animation duration if negative } else // attribute is null or empty string, use default animMS = 400; // Calculate panel height despite its being hidden at call time. // Based on https://stackoverflow.com/a/29047447/142454 var panelHeight; // computed on first panel display function calculatePanelHeight() { // Clear the max-height CSS property in case the panel size is recalculated // after the browser window was resized. panel.style.maxHeight = ''; // Get initial panel styles so we can restore them below. var es = window.getComputedStyle(panel), edis = es.display, epos = es.position, evis = es.visibility; // Restyle the panel so we can measure its height while invisible. |
︙ | ︙ | |||
60 61 62 63 64 65 66 67 68 69 70 71 72 | // first call, where the div was initially invisible. If we were // to change the panel's visibility and height at the same time // instead, that would prevent the browser from seeing the height // change as a state transition, so it'd skip the CSS transition: // // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples function showPanel() { if (animate) { setTimeout(function() { panel.style.maxHeight = panelHeight; panel.style.border = panelBorder; }, 40); // 25ms is insufficient with Firefox 62 } | > > > > > > > > > > > > > > > > > > < | > > | | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | | > > > > > | > | > > > > > > > > | | | > | > | > | | | | | | | | | < | < | < < < < < < < < < < < | | | | | | | | | < | > | 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 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 | // first call, where the div was initially invisible. If we were // to change the panel's visibility and height at the same time // instead, that would prevent the browser from seeing the height // change as a state transition, so it'd skip the CSS transition: // // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples function showPanel() { // Cancel the timer to remove the panel border after the closing animation, // otherwise double-clicking the hamburger button with the panel opened will // remove the borders from the (closed and immediately reopened) panel. if (panelResetBorderTimerID) { clearTimeout(panelResetBorderTimerID); panelResetBorderTimerID = 0; } if (animate) { if (!panelInitialized) { panelInitialized = true; // Set up a CSS transition to animate the panel open and // closed. Only needs to be done once per page load. // Based on https://stackoverflow.com/a/29047447/142454 calculatePanelHeight(); panel.style.transition = 'max-height ' + animMS + 'ms ease-in-out'; panel.style.overflowY = 'hidden'; panel.style.maxHeight = '0'; } setTimeout(function() { panel.style.maxHeight = panelHeight; panel.style.border = panelBorder; }, 40); // 25ms is insufficient with Firefox 62 } panel.style.display = 'block'; document.addEventListener('keydown',panelKeydown,/* useCapture == */true); document.addEventListener('click',panelClick,false); } var panelKeydown = function(event) { var key = event.which || event.keyCode; if (key == 27) { event.stopPropagation(); // ignore other keydown handlers panelToggle(true); } }; var panelClick = function(event) { if (!panel.contains(event.target)) { // Call event.preventDefault() to have clicks outside the opened panel // just close the panel, and swallow clicks on links or form elements. //event.preventDefault(); panelToggle(true); } }; // Return true if the panel is showing. function panelShowing() { if (animate) { return panel.style.maxHeight == panelHeight; } else { return panel.style.display == 'block'; } } // Check if the specified HTML element has any child elements. Note that plain // text nodes, comments, and any spaces (presentational or not) are ignored. function hasChildren(element) { var childElement = element.firstChild; while (childElement) { if (childElement.nodeType == 1) // Node.ELEMENT_NODE == 1 return true; childElement = childElement.nextSibling; } return false; } // Reset the state of the panel to uninitialized if the browser window is // resized, so the dimensions are recalculated the next time it's opened. window.addEventListener('resize',function(event) { panelInitialized = false; },false); // Click handler for the hamburger button. hbButton.addEventListener('click',function(event) { // Break the event handler chain, or the handler for document → click // (about to be installed) may already be triggered by the current event. event.stopPropagation(); event.preventDefault(); // prevent browser from acting on <a> click panelToggle(false); },false); function panelToggle(suppressAnimation) { if (panelShowing()) { document.removeEventListener('keydown',panelKeydown,/* useCapture == */true); document.removeEventListener('click',panelClick,false); // Transition back to hidden state. if (animate) { if (suppressAnimation) { var transition = panel.style.transition; panel.style.transition = ''; panel.style.maxHeight = '0'; panel.style.border = 'none'; setTimeout(function() { // Make sure CSS transition won't take effect now, so restore it // asynchronously. Outer variable 'transition' still valid here. panel.style.transition = transition; }, 40); // 25ms is insufficient with Firefox 62 } else { panel.style.maxHeight = '0'; panelResetBorderTimerID = setTimeout(function() { // Browsers show a 1px high border line when maxHeight == 0, // our "hidden" state, so hide the borders in that state, too. panel.style.border = 'none'; panelResetBorderTimerID = 0; // clear ID of completed timer }, animMS); } } else { panel.style.display = 'none'; } } else { if (!hasChildren(panel)) { // Only get the sitemap 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) { // Got sitemap. Insert it into the drop-down panel. panel.innerHTML = sm.outerHTML; // Display the panel showPanel(); } } // else, can't parse response as HTML or XML } xhr.open("GET", "$home/sitemap?popup"); // note the TH1 substitution! xhr.responseType = "document"; xhr.send(); } else { showPanel(); // just show what we built above } } } })(); |
Changes to src/default_css.txt.
︙ | ︙ | |||
195 196 197 198 199 200 201 202 203 204 205 206 207 208 | padding: 0 0 0 1em; } div.columns > ul li:first-child { margin-top:0px; } .columns li { break-inside: avoid; } .filetree { margin: 1em 0; line-height: 1.5; } .filetree > ul { display: inline-block; | > | 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 | padding: 0 0 0 1em; } div.columns > ul li:first-child { margin-top:0px; } .columns li { break-inside: avoid; page-break-inside: avoid; } .filetree { margin: 1em 0; line-height: 1.5; } .filetree > ul { display: inline-block; |
︙ | ︙ |
Changes to www/customskin.md.
1 2 3 4 5 | Theming ======= Every HTML page generated by Fossil has the following basic structure: | < > | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Theming ======= Every HTML page generated by Fossil has the following basic structure: <blockquote><table border=1 cellpadding=10><tbody> <tr><td style='background-color:lightblue;text-align:center;'>Header</td></tr> <tr><td style='background-color:lightgreen;text-align:center;'> Fossil-Generated Content</td></tr> <tr><td style='background-color:lightblue;text-align:center;'>Footer</td></tr> <tr><td style='background-color:lightyellow;text-align:center;'>Javascript (optional)</td></tr> </tbody></table></blockquote> The header and footer control the "look" of Fossil pages. Those two sections can be customized separately for each repository to develop a new theme. The header will normally look something like this: |
︙ | ︙ | |||
132 133 134 135 136 137 138 139 140 141 142 143 144 145 | media="screen" /> </head> The same TH1 interpreter is used for both the header and the footer and for all scripts contained within them both. Hence, any global TH1 variables that are set by the header are available to the footer. TH1 Variables ------------- Before expanding the TH1 within the header and footer, Fossil first initializes a number of TH1 variables to values that depend on respository settings and the specific page being generated. | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 | media="screen" /> </head> The same TH1 interpreter is used for both the header and the footer and for all scripts contained within them both. Hence, any global TH1 variables that are set by the header are available to the footer. Customizing the ≡ Hamburger Menu -------------------------------- The menu bar of the default skin has an entry to open a drop-down menu with additional navigation links, represented by the ≡ button (hence the name "hamburger menu"). The Javascript logic to open and close the hamburger menu when the button is clicked is contained in the optional Javascript part (js.txt) of the default skin. Out of the box, the drop-down menu shows the [Site Map](../../../sitemap), loaded by an AJAX request prior to the first display. The ≡ button for the hamburger menu is added to the menu bar by the following TH1 command in the default skin header.txt, right before the menu bar links: html "<a id='hbbtn' href='#'>☰</a>" The hamburger button can be repositioned between the other menu links (but the drop-down menu is always left-aligned with the menu bar), or it can be removed by deleting the above statement (the Javascript logic detects this case and remains idle, so it's not necessary to modify the default skin js.txt). The following empty element at the bottom of the default skin header.txt serves as the panel to hold the drop-down menu elements: <div id='hbdrop'></div> Out of the box, the contents of the panel is populated with the [Site Map](../../../sitemap), but only if the panel does not already contain any HTML elements (that is, not just comments, plain text or non-presentational white space). So the hamburger menu can be customized by replacing the empty `<div id='hbdrop'></div>` element with a menu structure knitted according to the following template: <div id="hbdrop" data-anim-ms="400"> <ul class="columns" style="column-width: 20em; column-count: auto"> <!-- NEW GROUP WITH HEADING LINK --> <li> <a href="$home$index_page">Link: Home</a> <ul> <li><a href="$home/timeline">Link: Timeline</a></li> <li><a href="$home/dir?ci=tip">Link: File List</a></li> </ul> </li> <!-- NEW GROUP WITH HEADING TEXT --> <li> Heading Text <ul> <li><a href="$home/doc/trunk/www/customskin.md">Link: Theming</a></li> <li><a href="$home/doc/trunk/www/th1.md">Link: TH1 Scripts</a></li> </ul> </li> <!-- NEXT GROUP GOES HERE --> </ul> </div> The custom `data-anim-ms` attribute can be added to the panel element to direct the Javascript logic to override the default menu animation duration of 400 ms. A faster animation duration of 80-200 ms may be preferred for smaller menus. The animation is disabled by setting the attribute to `"0"`. TH1 Variables ------------- Before expanding the TH1 within the header and footer, Fossil first initializes a number of TH1 variables to values that depend on respository settings and the specific page being generated. |
︙ | ︙ |