Skip to content

Commit

Permalink
Keep all attributes that might contain image
Browse files Browse the repository at this point in the history
  • Loading branch information
@RadhiFadlillah @gijsk
RadhiFadlillah authored and gijsk committed Apr 3, 2020
1 parent e85122e commit d8366f0
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 11 deletions.
38 changes: 29 additions & 9 deletions Readability.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1343,18 +1343,26 @@ Readability.prototype = {
* @param Element
**/
_unwrapNoscriptImages: function(doc) {
// Find img without source and remove it. This is done to prevent a placeholder
// img is replaced by img from noscript in next step.
// Find img without source or attributes that might contains image, and remove it.
// This is done to prevent a placeholder img is replaced by img from noscript in next step.
var imgs = Array.from(doc.getElementsByTagName("img"));
this._forEachNode(imgs, function(img) {
var src = img.getAttribute("src");
var srcset = img.getAttribute("srcset");
var dataSrc = img.getAttribute("data-src");
var dataSrcset = img.getAttribute("data-srcset");
for (var i = 0; i < img.attributes.length; i++) {
var attr = img.attributes[i];
switch (attr.name) {
case "src":
case "srcset":
case "data-src":
case "data-srcset":
return
}

if (!src && !srcset && !dataSrc && !dataSrcset) {
img.parentNode.removeChild(img);
if (/\.(jpg|jpeg|png|webp)/i.test(attr.value)) {
return
}
}

img.parentNode.removeChild(img);
});

// Next find noscript and try to extract its image
Expand All @@ -1372,7 +1380,8 @@ Readability.prototype = {
// is possibility that img inside noscript has lower quality
// than the one in previous sibling, so we will keep the src
// and srcset attribute from old img as data attribute for
// img from noscript.
// img from noscript. We also keep old attributes that might
// contains image.
var prevElement = noscript.previousElementSibling;
if (prevElement && this._isSingleImage(prevElement)) {
var prevImg = prevElement;
Expand All @@ -1394,6 +1403,17 @@ Readability.prototype = {
newImg.setAttribute("data-old-srcset", prevImgSrcset);
}

for (var i = 0; i < prevImg.attributes.length; i++) {
var attr = prevImg.attributes[i];
if (attr.name == "src" || attr.name == "srcset" || newImg.hasAttribute(attr.name)) {
continue;
}

if (/\.(jpg|jpeg|png|webp)/i.test(attr.value)) {
newImg.setAttribute(attr.name, attr.value);
}
}

noscript.parentNode.replaceChild(tmp.children[0], prevElement);
}
});
Expand Down
2 changes: 1 addition & 1 deletion test/test-pages/mozilla-1/expected.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div id="designed-copy">
<h2>Designed to <br />be redesigned</h2>
<p>Get fast and easy access to the features you use most in the new menu. Open the “Customize” panel to add, move or remove any button you want. Keep your favorite features — add-ons, private browsing, Sync and more — one quick click away.</p>
<p><img src="http://mozorg.cdn.mozilla.net/media/img/firefox/desktop/customize/designed-redesigned.fbd3ee9402e6.png" alt="" id="designed-mobile" />
<p><img src="http://mozorg.cdn.mozilla.net/media/img/firefox/desktop/customize/designed-redesigned.fbd3ee9402e6.png" alt="" id="designed-mobile" data-src="//mozorg.cdn.mozilla.net/media/img/firefox/desktop/customize/designed-redesigned.fbd3ee9402e6.png" data-high-res-src="//mozorg.cdn.mozilla.net/media/img/firefox/desktop/customize/designed-redesigned-high-res.6efd60766484.png" />
</p>
</div>
<div id="flexible-bottom-animation">
Expand Down
2 changes: 1 addition & 1 deletion test/test-pages/seattletimes-1/expected.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<p> As it tries to convince people it has lower prices, Whole Foods has been very careful to maintain the reputation built on products like MSC-certified halibut. </p>
<div>
<figure id="image-11519494">
<img data-ratio="1.5" data-caption="Amazon-owned Whole Foods touted a price cut on halibut as part of an announcement recently about lower prices on hundreds of items. (Ellen M. Banner / The Seattle Times)" alt="Amazon-owned Whole Foods touted a price cut on halibut as part of an announcement recently about lower prices on hundreds of items. (Ellen M. Banner / The Seattle Times)" src="https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1020x680.jpg" srcset="https://static.seattletimes.com/wp-content/uploads/2019/04/120109-300x200.jpg 300w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-768x512.jpg 768w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1024x683.jpg 1024w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-780x520.jpg 780w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1020x680.jpg 1020w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1560x1040.jpg 1560w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-375x250.jpg 375w" sizes="(max-width: 767px) calc(100vw - 20px), (max-width: 1019px) calc(100vw - 30px), (max-width: 1044px) calc(100vw - 60px), 970px" data-sizes="(max-width: 767px) calc(100vw - 20px), (max-width: 1019px) calc(100vw - 30px), (max-width: 1044px) calc(100vw - 60px), 970px" data-old-src="https://www.seattletimes.com/wp-content/themes/st_refresh/img/lazy-loading-14x9.png" />
<img data-ratio="1.5" data-caption="Amazon-owned Whole Foods touted a price cut on halibut as part of an announcement recently about lower prices on hundreds of items. (Ellen M. Banner / The Seattle Times)" alt="Amazon-owned Whole Foods touted a price cut on halibut as part of an announcement recently about lower prices on hundreds of items. (Ellen M. Banner / The Seattle Times)" src="https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1020x680.jpg" srcset="https://static.seattletimes.com/wp-content/uploads/2019/04/120109-300x200.jpg 300w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-768x512.jpg 768w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1024x683.jpg 1024w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-780x520.jpg 780w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1020x680.jpg 1020w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1560x1040.jpg 1560w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-375x250.jpg 375w" sizes="(max-width: 767px) calc(100vw - 20px), (max-width: 1019px) calc(100vw - 30px), (max-width: 1044px) calc(100vw - 60px), 970px" data-sizes="(max-width: 767px) calc(100vw - 20px), (max-width: 1019px) calc(100vw - 30px), (max-width: 1044px) calc(100vw - 60px), 970px" data-old-src="https://www.seattletimes.com/wp-content/themes/st_refresh/img/lazy-loading-14x9.png" data-src="https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1020x680.jpg" data-srcset="https://static.seattletimes.com/wp-content/uploads/2019/04/120109-300x200.jpg 300w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-768x512.jpg 768w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1024x683.jpg 1024w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-780x520.jpg 780w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1020x680.jpg 1020w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-1560x1040.jpg 1560w, https://static.seattletimes.com/wp-content/uploads/2019/04/120109-375x250.jpg 375w" />
<figcaption>
<span class="caption">Amazon-owned Whole Foods touted a price cut on halibut as part of an announcement recently about lower prices on hundreds of items. (Ellen M. Banner / The Seattle Times)</span>
</figcaption>
Expand Down

0 comments on commit d8366f0

Please sign in to comment.