Icycoide/searxng
1
0
Fork 1
mirror of https://github.com/searxng/searxng.git synced 2025-07-17 02:09:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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 94 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

21
searx/static/themes/__common__/js/image_layout.js
View file

@ -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});
}
}
};