Skip to content
Permalink
Browse files

Added possibility to hide or show image results with rendering errors

When searching images, thumbnails that could not be rendered (because of
a load error such as HTTP 404, networking issue or an internal error on
the rendering servlet) are now hidden as default. But can be revealed
with a button if desired.

Fix for issue #217
  • Loading branch information...
luccioman committed Aug 24, 2018
1 parent d03c098 commit 1b866c60767e6a376e0c8a213054b41accf1c2bc
Showing with 68 additions and 1 deletion.
  1. +61 −0 htroot/js/yacysearch.js
  2. +6 −0 htroot/yacysearch.html
  3. +1 −1 htroot/yacysearchitem.html
@@ -327,4 +327,65 @@ function handleAudioPlaying(event) {
}
}
}
}

/**
* Handle a rendering error on a result image thumbnail.
* @param imgElem {HTMLImageElement} the html img element that could not be rendered
*/
function handleResultThumbError(imgElem) {
if (imgElem.parentNode != null && imgElem.parentNode.parentNode != null
&& imgElem.parentNode.parentNode.className == "thumbcontainer") {
/* Hide the thumbnail container */
imgElem.parentNode.parentNode.className = "thumbcontainer thumbError hidden";
var errorsInfoElem = document.getElementById("imageErrorsInfo");
if (errorsInfoElem != null && errorsInfoElem.className.indexOf("hidden") >= 0) {
/* Show the image errors information block */
errorsInfoElem.className = errorsInfoElem.className.replace("hidden", "");
}
var errorsCountElem = document.getElementById("imageErrorsCount");
if (errorsCountElem != null) {
/* Increase the count of thumbnails rendering errors */
errorsCountElem.firstChild.nodeValue = parseInt(errorsCountElem.firstChild.nodeValue) + 1;
}
}
}

/**
* Show result thumbnails that were hidden because a rendering error occurred.
*/
function showErrThumbnails() {
var thumbs = document.getElementsByClassName("thumbError hidden");
var length = thumbs.length;
for (var i = 0; i < length && thumbs.length > 0; i++) {
thumbs[0].className = thumbs[0].className.replace("hidden", ""); // after that the element is removed from the thumbs live collection
}
var showBtn = document.getElementById("showErrorImagesBtn");
if(showBtn != null) {
showBtn.className = showBtn.className + " hidden";
}
var hideBtn = document.getElementById("hideErrorImagesBtn");
if(hideBtn != null) {
hideBtn.className = hideBtn.className.replace("hidden", "");
}
}

/**
* Hide result thumbnails that had a rendering error.
*/
function hideErrThumbnails() {
var thumbs = document.getElementsByClassName("thumbError");
for (var i = 0; i < thumbs.length; i++) {
if(thumbs[i].className.indexOf("hidden") < 0) {
thumbs[i].className = thumbs[i].className + " hidden";
}
}
var showBtn = document.getElementById("showErrorImagesBtn");
if(showBtn != null) {
showBtn.className = showBtn.className.replace("hidden", "");
}
var hideBtn = document.getElementById("hideErrorImagesBtn");
if(hideBtn != null) {
hideBtn.className = hideBtn.className + " hidden";
}
}
@@ -204,6 +204,12 @@ <h4 class="linktitle">
<!-- show date histogram if date navigation is active -->
<div id="datehistogram"></div>

<div id="imageErrorsInfo" class="info hidden">
Failed to render <strong id="imageErrorsCount">0</strong> thumbnail(s).
<button id="showErrorImagesBtn" class="btn btn-default btn-sm" onclick="showErrThumbnails()" title="Show anyway links to images that could not be rendered">Show</button>
<button id="hideErrorImagesBtn" class="btn btn-default btn-sm hidden" onclick="hideErrThumbnails()" title="Hide links to images that could not be rendered">Hide</button>
</div>

<!-- linklist begin -->
#(resultTable)#::<table width="100%"><tr class="TableHeader"><td width="30%">Media</td><td width="70%">URL</td></tr>
::<table width="100%"><tr class="TableHeader"><td width="30%">Media</td><td width="70%">URL</td>#(embed)#::<td>Player</td>#(/embed)#</tr>#(/resultTable)#
@@ -56,7 +56,7 @@ <h4 class="linktitle">
::
#(item)#::<div class="thumbcontainer">
<a href="#[hrefFullPreview]#" target="#[target]#" class="thumblink" onclick="return hs.expand(this)">
<img src="#[hrefCache]#" width="#[width]#" height="#[height]#" style="#[style]#" alt="#[name]#" />
<img src="#[hrefCache]#" width="#[width]#" height="#[height]#" style="#[style]#" alt="#[name]#" onerror="handleResultThumbError(this)"/>
</a>
<div class="highslide-caption"><a href="#[href]#" target="#[target]#" #(noreferrer)#::rel="noreferrer"#(/noreferrer)#>#[name]#</a><br /><a href="#[source]#" target="#[target]#" #(noreferrer)#::rel="noreferrer"#(/noreferrer)#>#[sourcedom]#</a></div>
</div>#(/item)#

0 comments on commit 1b866c6

Please sign in to comment.
You can’t perform that action at this time.