[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 ..

d0e21a01b4/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>
This commit is contained in:
Markus Heiser 2021-11-29 16:27:16 +01:00
parent 0311eba538
commit eff0884498
3 changed files with 23 additions and 2 deletions

View File

@ -8,8 +8,19 @@
* *
* @license Free to use under the MIT License. * @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 (w, d) {
function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) { function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
this.container_selector = container_selector; this.container_selector = container_selector;
@ -136,6 +147,11 @@
var results_nodes = d.querySelectorAll(this.results_selector); var results_nodes = d.querySelectorAll(this.results_selector);
var results_length = results_nodes.length; 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() { function throttleAlign() {
if (obj.isAlignDone) { if (obj.isAlignDone) {
obj.isAlignDone = false; obj.isAlignDone = false;
@ -146,15 +162,20 @@
} }
} }
// https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event
w.addEventListener('pageshow', throttleAlign); w.addEventListener('pageshow', throttleAlign);
// https://developer.mozilla.org/en-US/docs/Web/API/FileReader/load_event
w.addEventListener('load', throttleAlign); w.addEventListener('load', throttleAlign);
// https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
w.addEventListener('resize', throttleAlign); w.addEventListener('resize', throttleAlign);
for (i = 0; i < results_length; i++) { for (i = 0; i < results_length; i++) {
img = results_nodes[i].querySelector(this.img_selector); img = results_nodes[i].querySelector(this.img_selector);
if (img !== null && img !== undefined) { if (img !== null && img !== undefined) {
img.addEventListener('load', throttleAlign); img.addEventListener('load', throttleAlign);
// https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
img.addEventListener('error', throttleAlign); img.addEventListener('error', throttleAlign);
img.addEventListener('error', img_load_error, {once: true});
} }
} }
}; };

View File

@ -164,8 +164,8 @@ module.exports = function(grunt) {
favicon: { favicon: {
files: { files: {
'img/favicon.png': '<%= _brand %>/searxng-wordmark.svg', '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'
} }
} }
}, },

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB