From 509ef01213ebbe0aa2b330993ce78d2e538bf04d Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Mon, 24 Feb 2020 08:29:02 -0600 Subject: [PATCH 1/4] URL-decode the ID to make it work with non-ASCII characters Fixes #1812. --- Shared/Article Rendering/newsfoot.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Shared/Article Rendering/newsfoot.js b/Shared/Article Rendering/newsfoot.js index e841d3365..0f5b05bbd 100644 --- a/Shared/Article Rendering/newsfoot.js +++ b/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 = [ From 76dd3abff2acc71e3284b1e1f987f136198d7809 Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Mon, 24 Feb 2020 12:14:44 -0600 Subject: [PATCH 2/4] Properly style footnotes that have been absoluted --- Mac/MainWindow/Detail/styleSheet.css | 20 +++++--------------- Shared/Article Rendering/main.js | 19 +++++++++++++++++++ Shared/Article Rendering/newsfoot.js | 8 +------- iOS/Resources/styleSheet.css | 20 +++++--------------- 4 files changed, 30 insertions(+), 37 deletions(-) diff --git a/Mac/MainWindow/Detail/styleSheet.css b/Mac/MainWindow/Detail/styleSheet.css index 4fd43f4ba..1d7d1a37d 100644 --- a/Mac/MainWindow/Detail/styleSheet.css +++ b/Mac/MainWindow/Detail/styleSheet.css @@ -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; } diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index f11730264..403e5bdb1 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -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() } diff --git a/Shared/Article Rendering/newsfoot.js b/Shared/Article Rendering/newsfoot.js index 0f5b05bbd..99e80e15b 100644 --- a/Shared/Article Rendering/newsfoot.js +++ b/Shared/Article Rendering/newsfoot.js @@ -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); } } diff --git a/iOS/Resources/styleSheet.css b/iOS/Resources/styleSheet.css index 9bea3383f..30f87eede 100644 --- a/iOS/Resources/styleSheet.css +++ b/iOS/Resources/styleSheet.css @@ -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; } From 5bbda2a68eda8971c340f9ba9c70359f0867dc3a Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Mon, 24 Feb 2020 12:15:04 -0600 Subject: [PATCH 3/4] "footnotes" -> ".footnotes"; use idFromHash() --- Shared/Article Rendering/newsfoot.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Shared/Article Rendering/newsfoot.js b/Shared/Article Rendering/newsfoot.js index 99e80e15b..296c74d0b 100644 --- a/Shared/Article Rendering/newsfoot.js +++ b/Shared/Article Rendering/newsfoot.js @@ -152,11 +152,11 @@ document.addEventListener("click", (ev) => { if (!(ev.target && ev.target instanceof HTMLAnchorElement)) return; - if (!ev.target.matches(".footnotes .reversefootnote, .footnotes .footnoteBackLink, footnotes .footnote-return")) return; - const hash = ev.target.hash; - if (!hash) return; - const fnref = document.getElementById(hash.substring(1)); - + if (!ev.target.matches(".footnotes .reversefootnote, .footnotes .footnoteBackLink, .footnotes .footnote-return")) return; + const id = idFromHash(ev.target); + if (!id) return; + const fnref = document.getElementById(id); + window.scrollTo({ top: fnref.getBoundingClientRect().top + window.scrollY }); ev.preventDefault(); }); From 781dd2ff73b14191b103f5dcd3eab3b5133a0ecc Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Mon, 24 Feb 2020 12:24:42 -0600 Subject: [PATCH 4/4] Fix null error in wrapTables() --- Shared/Article Rendering/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 403e5bdb1..d5751a1b3 100644 --- a/Shared/Article Rendering/main.js +++ b/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");