Created
October 14, 2022 08:44
-
-
Save ezgranet/a77696eb8cd49f9e76804dea20d58df7 to your computer and use it in GitHub Desktop.
Interleave Annotations (jQueryless)
This file contains hidden or 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
| <p>The [note] sign is historically equal to the asterisks used by Aristarchus of Samothrace at the Mouseion at Alexandria. It was used for the critical editions of Homer's writings where it "marked a verse incorrectly repeated in another passage" and was used together with other signs such as the obelus.<a class="annotation-link" href="#"><sup>1</sup></a> | |
| <span class="annotation"> | |
| <a href="#">L.D. Reynolds and N.G. Wilson</a>. <i>Scribes and Scholars: A guide to the Transmission of Greek and Latin Literature</i>. Oxford University Press, 1991, 3rd edition, ISBN 0-19-872146-3, p. 10-11 | |
| </span> | |
| The London printer Richard Jugge is generally credited as the inventor of the footnote, first used in the Bishops' Bible of 1568.<a class="annotation-link" href="#"><sup>2</sup></a> | |
| <span class="annotation"> | |
| Chuck Zerby, <i><a href="#">The Devil's Details: A History of Footnotes</a></i>, 2007, ISBN 1931229058, p. 28 and <i>passim</i> | |
| </span> | |
| </p> | |
| <p>Early printings of the Douay Bible used two closely spaced colons (actually squared four dot punctuation mark U+2E2C) to indicate a marginal note. (Source: <a href="https://en.wikipedia.org/wiki/Note_(typography)">Wikipedia</a>)</p> |
This file contains hidden or 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
| // helper | |
| const selectAll = (selector, root = document) => { | |
| return Array.prototype.slice.call(root.querySelectorAll(selector), 0) | |
| } | |
| // select annotations and annotation links | |
| const annotationLinks = selectAll('.annotation-link') | |
| const annotations = selectAll('.annotation') | |
| const toggleAnnotation = ({ currentTarget: el }) => { | |
| const annotationLinkId = el.dataset.id | |
| const isSelected = el.classList.contains('annotation-link-selected') | |
| const annotationContainer = document.querySelector(`.annotation[data-id="${annotationLinkId}"]`) | |
| el.classList.toggle('annotation-link-selected') | |
| if (isSelected) { | |
| annotationContainer.classList.toggle('annotation-expanded') | |
| setTimeout(() => { annotationContainer.classList.toggle('annotation-displayed') }, 300) | |
| } else { | |
| annotationContainer.classList.toggle('annotation-displayed') | |
| setTimeout(() => { annotationContainer.classList.toggle('annotation-expanded') }, 300) | |
| } | |
| } | |
| const closeAnnotation = ({ currentTarget: el }) => { | |
| // https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection | |
| if (window.getSelection().type === "Range") { return } | |
| const annotationContainerId = el.dataset.id | |
| const annotationLink = document.querySelector(`.annotation-link[data-id="${annotationContainerId}"]`) | |
| annotationLink.classList.remove('annotation-link-selected') | |
| el.classList.toggle('annotation-expanded') | |
| setTimeout(() => { el.classList.toggle('annotation-displayed') }, 300) | |
| } | |
| // Loop through all annotation links | |
| annotationLinks.forEach((el, index) => { | |
| // Adds matching data ids to annotations and containers | |
| el.setAttribute('data-id', index + 1) | |
| // Clicking an annotation link expands/collapses the annotation | |
| el.addEventListener('click', toggleAnnotation) | |
| }) | |
| // Loop through all annotations | |
| annotations.forEach((el, index) => { | |
| // Adds matching data ids to annotations and containers | |
| el.setAttribute('data-id', index + 1) | |
| // Clicking the content of an annotation collapses it, too | |
| el.addEventListener('click', closeAnnotation) | |
| // Prevent annotation from hiding if link in annotation is clicked | |
| el.querySelector('a').addEventListener('click', e => e.stopPropagation()) | |
| }) |
This file contains hidden or 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
| // Styling only | |
| body { | |
| font: 1.1rem/130% sans-serif; | |
| line-height: 160%; | |
| padding: 3rem; | |
| } | |
| sup { | |
| line-height: 1; | |
| margin: 0 2px; | |
| } | |
| .annotation { | |
| color: grey; | |
| cursor: default; | |
| display: block; | |
| font-family: sans-serif; | |
| font-size: 0.9rem; | |
| padding: 0.5rem 0; | |
| } | |
| // Functional classes | |
| .annotation-link-selected { | |
| sup { | |
| opacity: 0; | |
| } | |
| &:after { | |
| content: "x"; | |
| display: inline-block; | |
| margin: -7px 0 0 -9px; | |
| opacity: 1; | |
| vertical-align: top; | |
| } | |
| } | |
| // Uses the max-height hack: http://bit.ly/2mpGSwW | |
| .annotation { | |
| display: none; | |
| max-height: 0; | |
| opacity: 0; | |
| overflow: hidden; | |
| transition: | |
| max-height .3s ease-out 0s, | |
| width .01s ease-out .3s, | |
| opacity .2s ease-out 0s; | |
| width: 0; | |
| } | |
| .annotation-expanded { | |
| max-height: 5000px; | |
| width: 100%; | |
| opacity: 1; | |
| transition: | |
| max-height .5s ease-in .01s, | |
| width .01s ease-in 0s, | |
| opacity .2s ease-in-out .21s; | |
| } | |
| .annotation-displayed { display: block; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment