From eff08844987eb184ea67a0a96d2ca4089f72f2d9 Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Mon, 29 Nov 2021 16:27:16 +0100 Subject: [PATCH] [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 --- .../themes/__common__/js/image_layout.js | 21 ++++++ searx/static/themes/simple/gruntfile.js | 4 +- src/brand/img_load_error.svg | 71 +++++++++++++++++++ 3 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 src/brand/img_load_error.svg diff --git a/searx/static/themes/__common__/js/image_layout.js b/searx/static/themes/__common__/js/image_layout.js index 653da95a..e178c296 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 Example usage of searxng.ImageLayout class. +* 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 b7501c73..762ba108 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' } } }, diff --git a/src/brand/img_load_error.svg b/src/brand/img_load_error.svg new file mode 100644 index 00000000..4bd867c5 --- /dev/null +++ b/src/brand/img_load_error.svg @@ -0,0 +1,71 @@ + + + + + + + + image/svg+xml + + + + + + + + +