Merge pull request #562 from return42/fix-img-alt

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

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 = w.searxng.static_path + w.searxng.theme.img_load_error;
+    }
+
     function throttleAlign() {
       if (obj.isAlignDone) {
         obj.isAlignDone = false;
@@ -146,15 +162,22 @@
       }
     }
 
+    // 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);
+        if (w.searxng.theme.img_load_error) {
+          img.addEventListener('error', img_load_error, {once: true});
+        }
       }
     }
   };

searx/static/themes/oscar/js/searxng.js

@@ -327,8 +327,19 @@ $(document).ready(function(){
 *
 * @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;
@@ -455,6 +466,11 @@ $(document).ready(function(){
     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 = w.searxng.static_path + w.searxng.theme.img_load_error;
+    }
+
     function throttleAlign() {
       if (obj.isAlignDone) {
         obj.isAlignDone = false;
@@ -465,15 +481,22 @@ $(document).ready(function(){
       }
     }
 
+    // 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);
+        if (w.searxng.theme.img_load_error) {
+          img.addEventListener('error', img_load_error, {once: true});
+        }
       }
     }
   };

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'
         }
       }
     },

searx/static/themes/simple/js/searxng.head.js

@@ -24,6 +24,10 @@
         hotkeys: script.getAttribute('data-hotkeys') === 'true',
         static_path: script.getAttribute('data-static-path'),
         translations: JSON.parse(script.getAttribute('data-translations')),
+        theme : {
+            // image that is displayed if load of <img src='...'> failed
+            img_load_error: 'img/img_load_error.svg'
+        }
     };
 
     // update the css

searx/static/themes/simple/js/searxng.js

@@ -879,8 +879,19 @@ searxng.ready(function() {
 *
 * @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;
@@ -1007,6 +1018,11 @@ searxng.ready(function() {
     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 = w.searxng.static_path + w.searxng.theme.img_load_error;
+    }
+
     function throttleAlign() {
       if (obj.isAlignDone) {
         obj.isAlignDone = false;
@@ -1017,15 +1033,22 @@ searxng.ready(function() {
       }
     }
 
+    // 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);
+        if (w.searxng.theme.img_load_error) {
+          img.addEventListener('error', img_load_error, {once: true});
+        }
       }
     }
   };

searx/static/themes/simple/src/js/head/00_init.js

@@ -24,6 +24,10 @@
         hotkeys: script.getAttribute('data-hotkeys') === 'true',
         static_path: script.getAttribute('data-static-path'),
         translations: JSON.parse(script.getAttribute('data-translations')),
+        theme : {
+            // image that is displayed if load of <img src='...'> failed
+            img_load_error: 'img/img_load_error.svg'
+        }
     };
 
     // update the css