[simple] ImageLayout.watch: `img_load_error.svg` if img load fails

Show default image `img/img_load_error.svg` when image can't be loaded.

----
Some words about class ImageLayout:

The https://github.com/searxng/searxng/blob/master/searx/static/themes/simple/js/searxng.js is build by a grunt task ..

https://github.com/searxng/searxng/blob/d0e21a01b4e14df905f25445a3f6bcbec481671c/searx/static/themes/simple/gruntfile.js#L91-L93

The `/__common__/js/*.js` concats also https://github.com/searxng/searxng/blob/master/searx/static/themes/__common__/js/image_layout.js where a modified copy of the of the "Google-image-layout" (`ImageLayout`) is implemented [1][2][3].

[1] https://ptgamr.github.io/2014-09-12-google-image-layout/
[2] https://ptgamr.github.io/google-image-layout/src/google-image-layout.js
[3] https://github.com/ptgamr/google-image-layout/tree/master
----

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

2 files changed, 23 insertions, 2 deletions

diff --git a/searx/static/themes/__common__/js/image_layout.js b/searx/static/themes/__common__/js/image_layout.js
index 653da95a0..e178c2968 100644
--- a/searx/static/themes/__common__/js/image_layout.js
+++ b/searx/static/themes/__common__/js/image_layout.js
@@ -8,8 +8,19 @@
 *
 * @license Free to use under the MIT License.
 *
+* @example <caption>Example usage of searxng.ImageLayout class.</caption>
+* searxng.image_thumbnail_layout = new searxng.ImageLayout(
+*     '#urls',                 // container_selector
+*     '#urls .result-images',  // results_selector
+*     'img.image_thumbnail',   // img_selector
+*     14,                      // verticalMargin
+*     6,                       // horizontalMargin
+*     200                      // maxHeight
+* );
+* searxng.image_thumbnail_layout.watch();
 */
 
+
 (function (w, d) {
   function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
     this.container_selector = container_selector;
@@ -136,6 +147,11 @@
     var results_nodes = d.querySelectorAll(this.results_selector);
     var results_length = results_nodes.length;
 
+    function img_load_error(event) {
+      // console.log("ERROR can't load: " + event.originalTarget.src);
+      event.originalTarget.src = window.searxng.static_path + 'img/img_load_error.svg';
+    }
+
     function throttleAlign() {
       if (obj.isAlignDone) {
         obj.isAlignDone = false;
@@ -146,15 +162,20 @@
       }
     }
 
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event
     w.addEventListener('pageshow', throttleAlign);
+    // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/load_event
     w.addEventListener('load', throttleAlign);
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
     w.addEventListener('resize', throttleAlign);
 
     for (i = 0; i < results_length; i++) {
       img = results_nodes[i].querySelector(this.img_selector);
       if (img !== null && img !== undefined) {
         img.addEventListener('load', throttleAlign);
+        // https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
         img.addEventListener('error', throttleAlign);
+        img.addEventListener('error', img_load_error, {once: true});
       }
     }
   };
diff --git a/searx/static/themes/simple/gruntfile.js b/searx/static/themes/simple/gruntfile.js
index b7501c732..762ba1087 100644
--- a/searx/static/themes/simple/gruntfile.js
+++ b/searx/static/themes/simple/gruntfile.js
@@ -164,8 +164,8 @@ module.exports = function(grunt) {
       favicon: {
         files: {
           'img/favicon.png': '<%= _brand %>/searxng-wordmark.svg',
-          'img/searxng.png': '<%= _brand %>/searxng.svg'
-
+          'img/searxng.png': '<%= _brand %>/searxng.svg',
+          'img/img_load_error.svg': '<%= _brand %>/img_load_error.svg'
         }
       }
     },