diff --git a/searx/static/themes/oscar/js/searxng.js b/searx/static/themes/oscar/js/searxng.js index 1bbf75ed9..d3aef35e3 100644 --- a/searx/static/themes/oscar/js/searxng.js +++ b/searx/static/themes/oscar/js/searxng.js @@ -327,8 +327,19 @@ $(document).ready(function(){ * * @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; @@ -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}); + } } } }; diff --git a/searx/static/themes/oscar/js/searxng.min.js b/searx/static/themes/oscar/js/searxng.min.js index cc61d1c29..9da3a8b75 100644 Binary files a/searx/static/themes/oscar/js/searxng.min.js and b/searx/static/themes/oscar/js/searxng.min.js differ diff --git a/searx/static/themes/oscar/js/searxng.min.js.map b/searx/static/themes/oscar/js/searxng.min.js.map index 3ce24b689..33b340aa6 100644 Binary files a/searx/static/themes/oscar/js/searxng.min.js.map and b/searx/static/themes/oscar/js/searxng.min.js.map differ diff --git a/searx/static/themes/simple/img/img_load_error.svg b/searx/static/themes/simple/img/img_load_error.svg new file mode 100644 index 000000000..8b7415f4d Binary files /dev/null and b/searx/static/themes/simple/img/img_load_error.svg differ diff --git a/searx/static/themes/simple/js/searxng.head.js b/searx/static/themes/simple/js/searxng.head.js index 21b1754bf..dab0e368a 100644 --- a/searx/static/themes/simple/js/searxng.head.js +++ b/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 failed + img_load_error: 'img/img_load_error.svg' + } }; // update the css diff --git a/searx/static/themes/simple/js/searxng.head.min.js b/searx/static/themes/simple/js/searxng.head.min.js index f42fcbe77..9ccc8d1fd 100644 Binary files a/searx/static/themes/simple/js/searxng.head.min.js and b/searx/static/themes/simple/js/searxng.head.min.js differ diff --git a/searx/static/themes/simple/js/searxng.head.min.js.map b/searx/static/themes/simple/js/searxng.head.min.js.map index 5c841a70d..92faff1d6 100644 Binary files a/searx/static/themes/simple/js/searxng.head.min.js.map and b/searx/static/themes/simple/js/searxng.head.min.js.map differ diff --git a/searx/static/themes/simple/js/searxng.js b/searx/static/themes/simple/js/searxng.js index 830c21d61..c84227541 100644 --- a/searx/static/themes/simple/js/searxng.js +++ b/searx/static/themes/simple/js/searxng.js @@ -879,8 +879,19 @@ searxng.ready(function() { * * @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; @@ -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}); + } } } }; diff --git a/searx/static/themes/simple/js/searxng.min.js b/searx/static/themes/simple/js/searxng.min.js index eafe89618..c88e39c65 100644 Binary files a/searx/static/themes/simple/js/searxng.min.js and b/searx/static/themes/simple/js/searxng.min.js differ diff --git a/searx/static/themes/simple/js/searxng.min.js.map b/searx/static/themes/simple/js/searxng.min.js.map index dbf4eea89..ee2728abd 100644 Binary files a/searx/static/themes/simple/js/searxng.min.js.map and b/searx/static/themes/simple/js/searxng.min.js.map differ