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 | Bin 0 -> 3067 bytes 3 files changed, 23 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 653da95a0..e178c2968 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 b7501c732..762ba1087 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 0000000000000000000000000000000000000000..4bd867c5c398435bee13647c1d1c1833476f7abe GIT binary patch literal 3067 zcmbtW+iu)85Pi>A5XwUmbVczdij;R9AP9=~p)XC^0(}W&iR)FO%T|)TcD}xcx~(^H zfdF0DfHWM=oO3vu;r8uAU6Fg&^<~@a0!~>#T$8s&+1&1eKR*5(nt=2}))ZOQHf|R* zZSeN`#kRk{eL)Dp=B7`Jd>0&s;h09z@vf_A+ucS*9=XcZt{M7>Qyv9p_x$XhcP<;s zdzZI$-8TKWv*}+xaqf!!8vJxR(UTmVxV1K7A`&8mN7z3$L-r6}ZUx5YwhG2rgtc>$ zAM;9ksB*;r>b@9g-`;h(+k>~GjT@r(AKypIV#sJQ6z61V*?j5q>!Za!?k|g70N`ePd2(iaGL-K0u6@`Aj4)ya{zmh`mA8js7g$l(qv2E*!{N#M z0yHh!yg}w&P}aAfsx~V=xvpzFx@fgvN!QejT0vv-S}@IA&i8h|A%Y1OG8HoOCb-6- zZ`b%fcySMuz7z;KX16%^s_k~c%l-Hp;SqAvc7^MfB|ZKwmRe|24v#3;+1%cIcKI;0 zmFu!52LsOLmD>(%pR?bUg?nycCF$X+S4wWbS7k7Je3U=!dYl()OXuw zkL7H5EcFc7pYbZxN~1rtCr@P;?6azOi|<@X>DRWcfrAQ}s8}W6F6StUkPFImBFvg- z*_=a2!3~v0F!}A)8K|$S|5)<7zsopptFwo)F26e9UXE%NDZlGFbce9Y9vw;fbJ)&JtziAOpZ3EduTix} z7kwDYs`}L@nQ8g_Kd zR0%G5OnxDfQ7yEwBJuUtYC172P_iFjO29GT*Y)g-105=uSlB|#Rf zm0?PQHKWREW))Egkw^v(t4Tu}A(a9)ONB`MF*rx4>koM|AD#h6m^A1@1gwpOpp;+_s>D78#u7A(Xrym|GwD*0B z#xXvpjsIk;tI=|wb!FBJ7q-(l{?ePaDki6X=-iMWE}VMws5C|$;A+5dD#wSbs%%_1 z_2-mNJNH>#R*&hc_wIA{=NL+m&J`#QjIU+Jado~NZT)N8Y3yALaW$F883YppSl0$&G+3mZ<_}5u!2Afc2jrF%Pz0x&b8?2Q8c*UJr7|8c!7ws1tHp+>ne2mAytd5$S@we4ot_m z^UjsrwP#X gu0XvXWV@hihiq`KL#1&uPzked#v0iA(RTgfUu#2D$N&HU literal 0 HcmV?d00001