From 72ce1e3f007bd659fe41bcff6922ae9d08e19fea Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Fri, 20 Nov 2020 11:02:30 -0600 Subject: [PATCH 1/5] Strip position from style attributes --- Shared/Article Rendering/main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 413906197..f0aceebee 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -18,10 +18,11 @@ function stripStylesFromElement(element, propertiesToStrip) { } } +// Strip inline styles that could harm readability. function stripStyles() { document.getElementsByTagName("body")[0].querySelectorAll("style, link[rel=stylesheet]").forEach(element => element.remove()); // 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", "max-width", "max-height"])); + document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => stripStylesFromElement(element, ["color", "background", "font", "max-width", "max-height", "position"])); } // Convert all Feedbin proxy images to be used as src, otherwise change image locations to be absolute if not already From 6d7cc4d38671cf381fd2d1e14ba6c06f8a363683 Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Fri, 20 Nov 2020 11:22:07 -0600 Subject: [PATCH 2/5] Constrain the height of iframes that are percent-sized relative to the document body to 50% of the viewport width --- Shared/Article Rendering/main.js | 17 +++++++++++++++++ Shared/Article Rendering/shared.css | 4 ++++ 2 files changed, 21 insertions(+) diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index f0aceebee..db27502e6 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -25,6 +25,22 @@ function stripStyles() { document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => stripStylesFromElement(element, ["color", "background", "font", "max-width", "max-height", "position"])); } +// Constrain the height of iframes whose heights are a percent of the document body to be at most +// 50% of the viewport width. +function constrainBodyRelativeIframes() { + let iframes = document.getElementsByTagName("iframe"); + + for (iframe of iframes) { + if (iframe.offsetParent === document.body) { + let heightAttribute = iframe.style.height; + + if (/^\d+%$/.test(heightAttribute)) { + iframe.classList.add("nnw-constrained"); + } + } + } +} + // Convert all Feedbin proxy images to be used as src, otherwise change image locations to be absolute if not already function convertImgSrc() { document.querySelectorAll("img").forEach(element => { @@ -137,6 +153,7 @@ function processPage() { wrapTables(); inlineVideos(); stripStyles(); + constrainBodyRelativeIframes(); convertImgSrc(); flattenPreElements(); styleLocalFootnotes(); diff --git a/Shared/Article Rendering/shared.css b/Shared/Article Rendering/shared.css index 0c5705eda..fa2a5920d 100644 --- a/Shared/Article Rendering/shared.css +++ b/Shared/Article Rendering/shared.css @@ -204,6 +204,10 @@ iframe { margin: 0 auto; } +iframe.nnw-constrained { + max-height: 50vw; +} + figure { margin-bottom: 1em; margin-top: 1em; From a227d6124a5ba1cf3d65379fb85aaec8ee9ce35f Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Fri, 20 Nov 2020 11:26:15 -0600 Subject: [PATCH 3/5] Add vh/vw to the relative unit check; checking for digits isn't needed --- Shared/Article Rendering/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index db27502e6..e440ddb81 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -25,7 +25,7 @@ function stripStyles() { document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => stripStylesFromElement(element, ["color", "background", "font", "max-width", "max-height", "position"])); } -// Constrain the height of iframes whose heights are a percent of the document body to be at most +// Constrain the height of iframes whose heights are defined relative to the document body to be at most // 50% of the viewport width. function constrainBodyRelativeIframes() { let iframes = document.getElementsByTagName("iframe"); @@ -34,7 +34,7 @@ function constrainBodyRelativeIframes() { if (iframe.offsetParent === document.body) { let heightAttribute = iframe.style.height; - if (/^\d+%$/.test(heightAttribute)) { + if (/%|vw|vh$/.test(heightAttribute)) { iframe.classList.add("nnw-constrained"); } } From 470b8514e42235dfb10669aead7ce97d2e9dafca Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Fri, 20 Nov 2020 11:28:59 -0600 Subject: [PATCH 4/5] Make regex case-insensitive --- 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 e440ddb81..9eed62e59 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -34,7 +34,7 @@ function constrainBodyRelativeIframes() { if (iframe.offsetParent === document.body) { let heightAttribute = iframe.style.height; - if (/%|vw|vh$/.test(heightAttribute)) { + if (/%|vw|vh$/i.test(heightAttribute)) { iframe.classList.add("nnw-constrained"); } } From 755ca7998ef0e3779a73bb269e023bd290e1457e Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Fri, 20 Nov 2020 11:30:32 -0600 Subject: [PATCH 5/5] Replace String.match() with RegExp.test(); it's slightly more efficient when we don't need the actual result --- 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 9eed62e59..0b42889bd 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -46,7 +46,7 @@ function convertImgSrc() { document.querySelectorAll("img").forEach(element => { if (element.hasAttribute("data-canonical-src")) { element.src = element.getAttribute("data-canonical-src") - } else if (!element.src.match(/^[a-z]+\:\/\//i)) { + } else if (!/^[a-z]+\:\/\//i.test(element.src)) { element.src = new URL(element.src, document.baseURI).href; } });