-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add custom footer with RFC8174 conformance.
Fixes #468.
- Loading branch information
Showing
2 changed files
with
170 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,166 @@ | ||
</main> | ||
<div data-fill-with="conformance"> | ||
<h2 id="conformance" class="no-ref no-num"> | ||
Conformance</h2> | ||
|
||
<p> | ||
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL | ||
NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", | ||
"MAY", and "OPTIONAL" in this document are to be interpreted as | ||
described in BCP 14 [[!RFC2119]] [[!RFC8174]] when, and only when, they | ||
appear in all capitals, as shown here. | ||
|
||
<p> | ||
All of the text of this specification is normative | ||
except sections explicitly marked as non-normative, examples, and notes. [[!RFC2119]] | ||
|
||
<p> | ||
Examples in this specification are introduced with the words “for example” | ||
or are set apart from the normative text with <code nohighlight>class="example"</code>, like this: | ||
|
||
<div class="example" id="example-example"> | ||
This is an example of an informative example. | ||
</div> | ||
|
||
<p> | ||
Informative notes begin with the word “Note” | ||
and are set apart from the normative text with <code nohighlight>class="note"</code>, like this: | ||
|
||
<p class='note'> | ||
Note, this is an informative note.</p> | ||
|
||
<wpt title="Tests relating to the content of this specification | ||
may be documented in “Tests” blocks. | ||
Any such block is non-normative."></wpt> | ||
</div> | ||
</body> | ||
<script> | ||
(function() { | ||
"use strict"; | ||
var collapseSidebarText = '<span aria-hidden="true">←</span> ' | ||
+ '<span>Collapse Sidebar</span>'; | ||
var expandSidebarText = '<span aria-hidden="true">→</span> ' | ||
+ '<span>Pop Out Sidebar</span>'; | ||
var tocJumpText = '<span aria-hidden="true">↑</span> ' | ||
+ '<span>Jump to Table of Contents</span>'; | ||
|
||
var sidebarMedia = window.matchMedia('screen and (min-width: 78em)'); | ||
var autoToggle = function(e){ toggleSidebar(e.matches) }; | ||
if(sidebarMedia.addListener) { | ||
sidebarMedia.addListener(autoToggle); | ||
} | ||
|
||
function toggleSidebar(on) { | ||
if (on == undefined) { | ||
on = !document.body.classList.contains('toc-sidebar'); | ||
} | ||
|
||
/* Don't scroll to compensate for the ToC if we're above it already. */ | ||
var headY = 0; | ||
var head = document.querySelector('.head'); | ||
if (head) { | ||
// terrible approx of "top of ToC" | ||
headY += head.offsetTop + head.offsetHeight; | ||
} | ||
var skipScroll = window.scrollY < headY; | ||
|
||
var toggle = document.getElementById('toc-toggle'); | ||
var tocNav = document.getElementById('toc'); | ||
if (on) { | ||
var tocHeight = tocNav.offsetHeight; | ||
document.body.classList.add('toc-sidebar'); | ||
document.body.classList.remove('toc-inline'); | ||
toggle.innerHTML = collapseSidebarText; | ||
if (!skipScroll) { | ||
window.scrollBy(0, 0 - tocHeight); | ||
} | ||
tocNav.focus(); | ||
sidebarMedia.addListener(autoToggle); // auto-collapse when out of room | ||
} | ||
else { | ||
document.body.classList.add('toc-inline'); | ||
document.body.classList.remove('toc-sidebar'); | ||
toggle.innerHTML = expandSidebarText; | ||
if (!skipScroll) { | ||
window.scrollBy(0, tocNav.offsetHeight); | ||
} | ||
if (toggle.matches(':hover')) { | ||
/* Unfocus button when not using keyboard navigation, | ||
because I don't know where else to send the focus. */ | ||
toggle.blur(); | ||
} | ||
} | ||
} | ||
|
||
function createSidebarToggle() { | ||
/* Create the sidebar toggle in JS; it shouldn't exist when JS is off. */ | ||
var toggle = document.createElement('a'); | ||
/* This should probably be a button, but appearance isn't standards-track.*/ | ||
toggle.id = 'toc-toggle'; | ||
toggle.class = 'toc-toggle'; | ||
toggle.href = '#toc'; | ||
toggle.innerHTML = collapseSidebarText; | ||
|
||
sidebarMedia.addListener(autoToggle); | ||
var toggler = function(e) { | ||
e.preventDefault(); | ||
sidebarMedia.removeListener(autoToggle); // persist explicit off states | ||
toggleSidebar(); | ||
return false; | ||
} | ||
toggle.addEventListener('click', toggler, false); | ||
|
||
|
||
/* Get <nav id=toc-nav>, or make it if we don't have one. */ | ||
var tocNav = document.getElementById('toc-nav'); | ||
if (!tocNav) { | ||
tocNav = document.createElement('p'); | ||
tocNav.id = 'toc-nav'; | ||
/* Prepend for better keyboard navigation */ | ||
document.body.insertBefore(tocNav, document.body.firstChild); | ||
} | ||
/* While we're at it, make sure we have a Jump to Toc link. */ | ||
var tocJump = document.getElementById('toc-jump'); | ||
if (!tocJump) { | ||
tocJump = document.createElement('a'); | ||
tocJump.id = 'toc-jump'; | ||
tocJump.href = '#toc'; | ||
tocJump.innerHTML = tocJumpText; | ||
tocNav.appendChild(tocJump); | ||
} | ||
|
||
tocNav.appendChild(toggle); | ||
} | ||
|
||
var toc = document.getElementById('toc'); | ||
if (toc) { | ||
createSidebarToggle(); | ||
toggleSidebar(sidebarMedia.matches); | ||
|
||
/* If the sidebar has been manually opened and is currently overlaying the text | ||
(window too small for the MQ to add the margin to body), | ||
then auto-close the sidebar once you click on something in there. */ | ||
toc.addEventListener('click', function(e) { | ||
if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) { | ||
toggleSidebar(false); | ||
} | ||
}, false); | ||
} | ||
else { | ||
console.warn("Can't find Table of Contents. Please use <nav id='toc'> around the ToC."); | ||
} | ||
|
||
/* Wrap tables in case they overflow */ | ||
var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index'); | ||
var numTables = tables.length; | ||
for (var i = 0; i < numTables; i++) { | ||
var table = tables[i]; | ||
var wrapper = document.createElement('div'); | ||
wrapper.className = 'overlarge'; | ||
table.parentNode.insertBefore(wrapper, table); | ||
wrapper.appendChild(table); | ||
} | ||
|
||
})(); | ||
</script> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters