Merge pull request #1826 from Wevah/footnote-fixes

Footnote fixes

Mac/MainWindow/Detail/styleSheet.css

@@ -293,9 +293,7 @@ sup[id^='fn'] {
 	vertical-align: baseline;
 }
 
-a.footnote,
+a.footnote {
-sup > a[href^='#fn'],
-sup > div > a[href^='#fn'] {
 	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,
+.newsfoot-footnote-popover + a.footnote:hover {
-sup > a[href^='#fn'],
-sup > div > a[href^='#fn'] {
 	background: #aaa;
 	color: white;
 	transition: background-color 200ms ease-out;
 }
 a.footnote:hover,
-.newsfoot-footnote-popover + a.footnote,
+.newsfoot-footnote-popover + a.footnote {
-sup > a[href^='#fn']:hover,
-sup > div > a[href^='#fn']:hover {
 	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,
+	.newsfoot-footnote-popover + a.footnote:hover {
-	sup > a[href^='#fn'],
-	sup > div > a[href^='#fn'] {
 		background: #aaa;
 		color: white;
 		transition: background-color 200ms ease-out;
 	}
 	a.footnote:hover,
-	.newsfoot-footnote-popover + a.footnote,
+	.newsfoot-footnote-popover + a.footnote {
-	sup > a[href^='#fn']:hover,
-	sup > div > a[href^='#fn']:hover {
 		background: #666;
 		transition: background-color 200ms ease-out;
 	}

Shared/Article Rendering/main.js

@@ -35,7 +35,7 @@ function convertImgSrc() {
 
 // Wrap tables in an overflow-x: auto; div
 function wrapTables() {
-	var tables = document.querySelector("div.articleBody").getElementsByTagName("table");
+	var tables = document.querySelectorAll("div.articleBody table");
 
 	for (table of tables) {
 		var wrapper = document.createElement("div");
@@ -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()
 }

Shared/Article Rendering/newsfoot.js

@@ -118,7 +118,7 @@
 			
 	function idFromHash(target) {
 		if (!target.hash) return;
-		return target.hash.substring(1);
+		return decodeURIComponent(target.hash.substring(1));
 	}
 	/** @type {{fnref(target:HTMLAnchorElement): string|undefined}[]} */
 	const footnoteFormats = [
@@ -127,12 +127,6 @@
 				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;
-				return idFromHash(target);
-			}
 		}
 	];
 	
@@ -158,10 +152,10 @@
     document.addEventListener("click", (ev) =>
     {
 	    if (!(ev.target && ev.target instanceof HTMLAnchorElement)) return;
-        if (!ev.target.matches(".footnotes .reversefootnote, .footnotes .footnoteBackLink, footnotes .footnote-return")) return;
+        if (!ev.target.matches(".footnotes .reversefootnote, .footnotes .footnoteBackLink, .footnotes .footnote-return")) return;
-		const hash = ev.target.hash;
+		const id = idFromHash(ev.target);
-		if (!hash) return;
+		if (!id) return;
-		const fnref = document.getElementById(hash.substring(1));
+		const fnref = document.getElementById(id);
 
 		window.scrollTo({ top: fnref.getBoundingClientRect().top + window.scrollY });
 	    ev.preventDefault();

iOS/Resources/styleSheet.css

@@ -347,9 +347,7 @@ sup[id^='fn'] {
 	vertical-align: baseline;
 }
 
-a.footnote,
+a.footnote {
-sup > a[href^='#fn'],
-sup > div > a[href^='#fn'] {
 	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,
+.newsfoot-footnote-popover + a.footnote:hover {
-sup > a[href^='#fn'],
-sup > div > a[href^='#fn'] {
 	background: #aaa;
 	color: white;
 	transition: background-color 200ms ease-out;
 }
 a.footnote:hover,
-.newsfoot-footnote-popover + a.footnote,
+.newsfoot-footnote-popover + a.footnote {
-sup > a[href^='#fn']:hover,
-sup > div > a[href^='#fn']:hover {
 	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,
+	.newsfoot-footnote-popover + a.footnote:hover {
-	sup > a[href^='#fn'],
-	sup > div > a[href^='#fn'] {
 		background: #aaa;
 		color: white;
 		transition: background-color 200ms ease-out;
 	}
 	a.footnote:hover,
-	.newsfoot-footnote-popover + a.footnote,
+	.newsfoot-footnote-popover + a.footnote {
-	sup > a[href^='#fn']:hover,
-	sup > div > a[href^='#fn']:hover {
 		background: #666;
 		transition: background-color 200ms ease-out;
 	}