#544 Better handling of the footnote reverse links

* Uses a stylesheet to hide the reverse link in the popover rather than monkeying around with the dom in JS
* Javascript event handler catches clicks on the reverse buttons in the footnote list at the bottom of the page
  and scrolls the document back to the source, rather than opening the document in a browser window.
This commit is contained in:
Andrew Brehaut 2019-09-23 19:56:58 +12:00
parent 8fcc61b769
commit af5d510c80
2 changed files with 17 additions and 3 deletions

View File

@ -199,6 +199,9 @@ img[src*="share-buttons"] {
border-radius: 0.3em;
box-sizing: border-box;
}
.newsfoot-footnote-popover .reversefootnote {
display: none;
}
a.footnote {
display: inline-block;
text-decoration: none;

View File

@ -107,16 +107,27 @@
}
}
// Handle clicks on the footnote reference
document.addEventListener("click", (ev) => {
if (!(ev.target && ev.target instanceof HTMLAnchorElement)) return;
if (!ev.target.matches(".footnote")) return;
ev.preventDefault();
const content = document.querySelector(`[id='${ev.target.hash.substring(1)}']`).cloneNode(true);
if (content instanceof HTMLElement) {
remove(content.querySelector(".reversefootnote"));
}
installContainer(ev.target);
void new Footnote(fragFromContents(content), ev.target);
});
// Handle clicks on the footnote reverse link
document.addEventListener("click", (ev) =>
{
if (!(ev.target && ev.target instanceof HTMLAnchorElement)) return;
if (!ev.target.matches(".footnotes .reversefootnote")) return;
const hash = ev.target.hash;
if (!hash) return;
const fnref = document.getElementById(hash.substring(1));
window.scrollTo({ top: fnref.getBoundingClientRect().top + window.scrollY });
ev.preventDefault();
});
}());