From cbbb46a77664d9b591132595740015890eafc2a4 Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Sat, 28 Dec 2019 00:05:16 -0600 Subject: [PATCH 1/9] Wrap tables in an overflow-x: auto; div --- Shared/Article Rendering/main.js | 14 ++++++++++++++ iOS/Resources/styleSheet.css | 6 ++++++ 2 files changed, 20 insertions(+) diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 4ecf8eb5f..187043d2f 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -21,6 +21,19 @@ function convertImgSrc() { }); } +// Wrap tables in an overflow-x: auto; div +function wrapTables() { + var tables = document.querySelectorAll("div.articleBody")[0].getElementsByTagName("table"); + + for (table of tables) { + var wrapper = document.createElement("div"); + wrapper.className = "nnw-overflow"; + var tableCopy = table.cloneNode(true); + wrapper.appendChild(tableCopy); + table.parentNode.replaceChild(wrapper, table); + } +} + function reloadArticleImage() { var image = document.getElementById("nnwImageIcon"); image.src = "nnwImageIcon://"; @@ -39,6 +52,7 @@ function render(data, scrollY) { wrapFrames() stripStyles() convertImgSrc() + wrapTables() postRenderProcessing() } diff --git a/iOS/Resources/styleSheet.css b/iOS/Resources/styleSheet.css index b90edd69e..157fcfea5 100644 --- a/iOS/Resources/styleSheet.css +++ b/iOS/Resources/styleSheet.css @@ -131,6 +131,12 @@ pre { word-break: normal; -webkit-hyphens: none; } +.nnw-overflow { + overflow-x: auto; +} +td > pre { + overflow-x: hidden; +} code, pre { font-family: "SF Mono", Menlo, "Courier New", Courier, monospace; font-size: 14px; From bb0fffcec25247edcbf49ea130230562e7deb259 Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Sat, 28 Dec 2019 01:26:02 -0600 Subject: [PATCH 2/9] Move wrapTables() to just after wrapFrames() --- Shared/Article Rendering/main.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 187043d2f..13705cbb1 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -50,9 +50,8 @@ function render(data, scrollY) { window.scrollTo(0, scrollY); wrapFrames() + wrapTables() stripStyles() convertImgSrc() - wrapTables() - postRenderProcessing() } From c2d3e9213d207a0190e9dcc5b9b4645817353ed9 Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Sat, 28 Dec 2019 01:27:31 -0600 Subject: [PATCH 3/9] Strip spans from pre elements inside table cells Works around a clipping issue. --- Shared/Article Rendering/main.js | 36 ++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 13705cbb1..e6c6c0b64 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -34,6 +34,40 @@ function wrapTables() { } } +// Remove some children (currently just spans) from pre elements to work around a strange clipping issue +var ElementUnwrapper = { + unwrapSelector: "span", + unwrapElement: function (element) { + var parent = element.parentNode; + var children = Array.from(element.childNodes); + + for (child of children) { + parent.insertBefore(child, element); + } + + parent.removeChild(element); + }, + // `elements` can be a selector string, a node, or a list of nodes + unwrapAppropriateChildren: function (elements) { + if (typeof elements[Symbol.iterator] !== 'function') + elements = [elements]; + else if (typeof elements === "string") + elements = document.querySelectorAll(elements); + + for (element of elements) { + for (unwrap of element.querySelectorAll(this.unwrapSelector)) { + this.unwrapElement(unwrap); + } + + element.normalize() + } + } +}; + +function flattenPreElements() { + ElementUnwrapper.unwrapAppropriateChildren(".articleBody td > pre"); +} + function reloadArticleImage() { var image = document.getElementById("nnwImageIcon"); image.src = "nnwImageIcon://"; @@ -53,5 +87,7 @@ function render(data, scrollY) { wrapTables() stripStyles() convertImgSrc() + flattenPreElements() + postRenderProcessing() } From 0800c7700255ec50e13d72f03a44f0c94e5f35ac Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Mon, 30 Dec 2019 14:42:05 -0600 Subject: [PATCH 4/9] Remove now-unneeded style rule --- iOS/Resources/styleSheet.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/iOS/Resources/styleSheet.css b/iOS/Resources/styleSheet.css index 157fcfea5..c84d79e0e 100644 --- a/iOS/Resources/styleSheet.css +++ b/iOS/Resources/styleSheet.css @@ -134,9 +134,6 @@ pre { .nnw-overflow { overflow-x: auto; } -td > pre { - overflow-x: hidden; -} code, pre { font-family: "SF Mono", Menlo, "Courier New", Courier, monospace; font-size: 14px; From 7a61a6a5b4a36c9605ae8d07dbb3aba08ebaa6b1 Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Mon, 30 Dec 2019 17:19:05 -0600 Subject: [PATCH 5/9] Specify div explicitly --- 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 e6c6c0b64..e66f7d068 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -65,7 +65,7 @@ var ElementUnwrapper = { }; function flattenPreElements() { - ElementUnwrapper.unwrapAppropriateChildren(".articleBody td > pre"); + ElementUnwrapper.unwrapAppropriateChildren("div.articleBody td > pre"); } function reloadArticleImage() { From 58ef7600fb12794e28c1b8dcf82de9ea8905e324 Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Mon, 30 Dec 2019 17:24:02 -0600 Subject: [PATCH 6/9] Avoid copying the table and use querySelector() (Since there's only one .articleBody.) --- Shared/Article Rendering/main.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index e66f7d068..1f856440c 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -23,14 +23,13 @@ function convertImgSrc() { // Wrap tables in an overflow-x: auto; div function wrapTables() { - var tables = document.querySelectorAll("div.articleBody")[0].getElementsByTagName("table"); + var tables = document.querySelector("div.articleBody").getElementsByTagName("table"); for (table of tables) { var wrapper = document.createElement("div"); wrapper.className = "nnw-overflow"; - var tableCopy = table.cloneNode(true); - wrapper.appendChild(tableCopy); - table.parentNode.replaceChild(wrapper, table); + table.parentNode.insertBefore(wrapper, table); + wrapper.appendChild(table); } } From 792fcddaf619106d4c1df35ad63fc4d837e8ca81 Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Mon, 30 Dec 2019 17:35:47 -0600 Subject: [PATCH 7/9] Update comment --- 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 1f856440c..3c66e0fe7 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -46,7 +46,7 @@ var ElementUnwrapper = { parent.removeChild(element); }, - // `elements` can be a selector string, a node, or a list of nodes + // `elements` can be a selector string, an element, or a list of elements unwrapAppropriateChildren: function (elements) { if (typeof elements[Symbol.iterator] !== 'function') elements = [elements]; From fcea33d61f73798a11b25f2414026df723087bb2 Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Mon, 30 Dec 2019 18:30:10 -0600 Subject: [PATCH 8/9] Only strip out color, background, and font css properties Prevents icon images from rendering super-huge. --- Shared/Article Rendering/main.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 4ecf8eb5f..78e01f8f0 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -8,10 +8,18 @@ function wrapFrames() { }); } -// Strip out all styling so that we have better control over layout +// Strip out color and font styling + +function stripStylesFromElement(element, propertiesToStrip) { + for (name of propertiesToStrip) { + element.style.removeProperty(name); + } +} + function stripStyles() { document.getElementsByTagName("body")[0].querySelectorAll("style, link[rel=stylesheet]").forEach(element => element.remove()); - document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => element.removeAttribute("style")); + // Removing "background" and "font" will also remove properties that would be reflected in them, e.g., "background-color" and "font-family" + document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => stripStylesFromElement(element, ["color", "background", "font"])); } // Convert all image locations to be absolute From fa6c21f4701f2bbdd1264c13740280ca7cee14ba Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Mon, 30 Dec 2019 18:30:21 -0600 Subject: [PATCH 9/9] Remove .wp-smiley rule --- iOS/Resources/styleSheet.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/iOS/Resources/styleSheet.css b/iOS/Resources/styleSheet.css index b90edd69e..b8f43e914 100644 --- a/iOS/Resources/styleSheet.css +++ b/iOS/Resources/styleSheet.css @@ -221,12 +221,6 @@ img[src*="share-buttons"] { display: none !important; } -/* Site specific styles */ -.wp-smiley { - height: 1em; - max-height: 1em; -} - /* Newsfoot specific styles. Structural styles come first, theme styles second */ .newsfoot-footnote-container { position: relative;