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

htroot/js/yacysearch.js

@@ -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";
+	}
 }

htroot/yacysearch.html

@@ -204,6 +204,12 @@ document.getElementById("Enter").innerHTML = "search again";
 <!-- 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)#

htroot/yacysearchitem.html

@@ -56,7 +56,7 @@
   ::
   #(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)#