Properly style footnotes that have been absoluted

This commit is contained in:
Nate Weaver 2020-02-24 12:14:44 -06:00
parent 509ef01213
commit 76dd3abff2
4 changed files with 30 additions and 37 deletions

View File

@ -293,9 +293,7 @@ sup[id^='fn'] {
vertical-align: baseline;
}
a.footnote,
sup > a[href^='#fn'],
sup > div > a[href^='#fn'] {
a.footnote {
display: inline-block;
text-decoration: none;
padding: 0.05em 0.75em;
@ -324,17 +322,13 @@ sup > div > a[href^='#fn'] {
}
body a.footnote,
body a.footnote:visited,
.newsfoot-footnote-popover + a.footnote:hover,
sup > a[href^='#fn'],
sup > div > a[href^='#fn'] {
.newsfoot-footnote-popover + a.footnote:hover {
background: #aaa;
color: white;
transition: background-color 200ms ease-out;
}
a.footnote:hover,
.newsfoot-footnote-popover + a.footnote,
sup > a[href^='#fn']:hover,
sup > div > a[href^='#fn']:hover {
.newsfoot-footnote-popover + a.footnote {
background: #666;
transition: background-color 200ms ease-out;
}
@ -355,17 +349,13 @@ sup > div > a[href^='#fn']:hover {
}
body a.footnote,
body a.footnote:visited,
.newsfoot-footnote-popover + a.footnote:hover,
sup > a[href^='#fn'],
sup > div > a[href^='#fn'] {
.newsfoot-footnote-popover + a.footnote:hover {
background: #aaa;
color: white;
transition: background-color 200ms ease-out;
}
a.footnote:hover,
.newsfoot-footnote-popover + a.footnote,
sup > a[href^='#fn']:hover,
sup > div > a[href^='#fn']:hover {
.newsfoot-footnote-popover + a.footnote {
background: #666;
transition: background-color 200ms ease-out;
}

View File

@ -88,6 +88,24 @@ function error() {
document.body.innerHTML = "error";
}
// Takes into account absoluting of URLs.
function isLocalFootnote(target) {
return target.hash.startsWith("#fn") && target.href.indexOf(document.baseURI) === 0;
}
function styleLocalFootnotes() {
for (elem of document.querySelectorAll("sup > a[href*='#fn'], sup > div > a[href*='#fn']")) {
if (isLocalFootnote(elem)) {
if (elem.className.indexOf("footnote") === -1) {
if (elem.className.length === 0)
elem.className = "footnote";
else
elem.className = elem.className + " " + "footnote";
}
}
}
}
function render(data, scrollY) {
document.getElementsByTagName("style")[0].innerHTML = data.style;
@ -106,6 +124,7 @@ function render(data, scrollY) {
stripStyles()
convertImgSrc()
flattenPreElements()
styleLocalFootnotes()
postRenderProcessing()
}

View File

@ -124,13 +124,7 @@
const footnoteFormats = [
{ // Multimarkdown
fnref(target) {
if (!target.matches(".footnote")) return;
return idFromHash(target);
}
},
{// Daring Fireball
fnref(target) {
if (!target.matches("sup > a[href^='#fn'], sup > div > a[href^='#fn']")) return;
if (!target.matches(".footnote")) return;
return idFromHash(target);
}
}

View File

@ -347,9 +347,7 @@ sup[id^='fn'] {
vertical-align: baseline;
}
a.footnote,
sup > a[href^='#fn'],
sup > div > a[href^='#fn'] {
a.footnote {
display: inline-block;
text-decoration: none;
padding: 0.05em 0.75em;
@ -378,17 +376,13 @@ sup > div > a[href^='#fn'] {
}
body a.footnote,
body a.footnote:visited,
.newsfoot-footnote-popover + a.footnote:hover,
sup > a[href^='#fn'],
sup > div > a[href^='#fn'] {
.newsfoot-footnote-popover + a.footnote:hover {
background: #aaa;
color: white;
transition: background-color 200ms ease-out;
}
a.footnote:hover,
.newsfoot-footnote-popover + a.footnote,
sup > a[href^='#fn']:hover,
sup > div > a[href^='#fn']:hover {
.newsfoot-footnote-popover + a.footnote {
background: #666;
transition: background-color 200ms ease-out;
}
@ -409,17 +403,13 @@ sup > div > a[href^='#fn']:hover {
}
body a.footnote,
body a.footnote:visited,
.newsfoot-footnote-popover + a.footnote:hover,
sup > a[href^='#fn'],
sup > div > a[href^='#fn'] {
.newsfoot-footnote-popover + a.footnote:hover {
background: #aaa;
color: white;
transition: background-color 200ms ease-out;
}
a.footnote:hover,
.newsfoot-footnote-popover + a.footnote,
sup > a[href^='#fn']:hover,
sup > div > a[href^='#fn']:hover {
.newsfoot-footnote-popover + a.footnote {
background: #666;
transition: background-color 200ms ease-out;
}