From f9dc2d5723408e83e7dd60b568b829cef3309aa6 Mon Sep 17 00:00:00 2001 From: Shane Church Date: Mon, 24 Oct 2016 13:46:26 -0500 Subject: [PATCH 1/3] Article image formatting fix Fixed issue where full article images use .lightbox class resulting in the image being absolutely positioned in the top left corner and overlaying all of the Feedly UI and content. Feedly also uses the .lightbox class, resulting in the mismatch. The fix involves removing all class and width attributes from all images in the full-article content and setting the style attribute to max-width:100% in order to keep larger images contained within the article container and flow. --- app/scripts/content.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/app/scripts/content.js b/app/scripts/content.js index 22b928e..7c1a36d 100644 --- a/app/scripts/content.js +++ b/app/scripts/content.js @@ -177,13 +177,16 @@ function onBoilerpipeArticleExtracted(data, overlay) { // Replace the preview of the article with the full text var articlePreviewHTML = contentElement.innerHTML; - contentElement.innerText = articleContent; + contentElement.innerHTML = articleContent; - // Put the image back at the beginning of the article - if (articleImage !== null) { - contentElement.insertBefore(articleImage, contentElement.firstChild); - } + // Clear image styles to fix formatting of images with class/style/width information in article markup + Array.prototype.slice.call(document.querySelectorAll('img')).forEach(function(el) { + el.removeAttribute('class'); + el.removeAttribute('width'); + el.setAttribute('style', 'max-width:100%;'); + }); + //Toggle Success Overlay addUndoButton(articlePreviewHTML); successOverlay('done', overlay); } @@ -239,6 +242,15 @@ function onMercuryReadabilityArticleExtracted(data, overlay) { // Replace the preview of the article with the full text var articlePreviewHTML = contentElement.innerHTML; contentElement.innerHTML = articleContent; + + // Clear image styles to fix formatting of images with class/style/width information in article markup + Array.prototype.slice.call(document.querySelectorAll('img')).forEach(function(el) { + el.removeAttribute('class'); + el.removeAttribute('width'); + el.setAttribute('style', 'max-width:100%;'); + }); + + //Toggle success overlay successOverlay('done', overlay); // Put the image back at the beginning of the article From 43c2a23618b8fe9e71865ebb963fd547a4566141 Mon Sep 17 00:00:00 2001 From: Shane Church Date: Mon, 24 Oct 2016 14:33:41 -0500 Subject: [PATCH 2/3] Fixed bug causing formatting with other Feedly elements Replaced document with contentElement to contain image fixes to just the article being loaded. --- app/scripts/content.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/scripts/content.js b/app/scripts/content.js index 7c1a36d..8edceaf 100644 --- a/app/scripts/content.js +++ b/app/scripts/content.js @@ -180,7 +180,7 @@ function onBoilerpipeArticleExtracted(data, overlay) { contentElement.innerHTML = articleContent; // Clear image styles to fix formatting of images with class/style/width information in article markup - Array.prototype.slice.call(document.querySelectorAll('img')).forEach(function(el) { + Array.prototype.slice.call(contentElement.querySelectorAll('img')).forEach(function(el) { el.removeAttribute('class'); el.removeAttribute('width'); el.setAttribute('style', 'max-width:100%;'); @@ -244,7 +244,7 @@ function onMercuryReadabilityArticleExtracted(data, overlay) { contentElement.innerHTML = articleContent; // Clear image styles to fix formatting of images with class/style/width information in article markup - Array.prototype.slice.call(document.querySelectorAll('img')).forEach(function(el) { + Array.prototype.slice.call(contentElement.querySelectorAll('img')).forEach(function(el) { el.removeAttribute('class'); el.removeAttribute('width'); el.setAttribute('style', 'max-width:100%;'); From 06b8a5b80f5062a0197352f629ba9a7f52b513a4 Mon Sep 17 00:00:00 2001 From: Andrea Grandi Date: Sat, 5 Nov 2016 18:01:33 +0000 Subject: [PATCH 3/3] Correct missing spaces in comments --- app/scripts/content.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/scripts/content.js b/app/scripts/content.js index 8edceaf..b1784ee 100644 --- a/app/scripts/content.js +++ b/app/scripts/content.js @@ -186,7 +186,7 @@ function onBoilerpipeArticleExtracted(data, overlay) { el.setAttribute('style', 'max-width:100%;'); }); - //Toggle Success Overlay + // Toggle Success Overlay addUndoButton(articlePreviewHTML); successOverlay('done', overlay); } @@ -250,7 +250,7 @@ function onMercuryReadabilityArticleExtracted(data, overlay) { el.setAttribute('style', 'max-width:100%;'); }); - //Toggle success overlay + // Toggle success overlay successOverlay('done', overlay); // Put the image back at the beginning of the article