Merge pull request #562 from return42/fix-img-alt

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

searx/static/themes/__common__/js/image_layout.js

@@ -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 = w.searxng.static_path + w.searxng.theme.img_load_error;
+    }
+
     function throttleAlign() {
       if (obj.isAlignDone) {
         obj.isAlignDone = false;
@@ -146,15 +162,22 @@
       }
     }
 
+    // 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});
+        }
       }
     }
   };

searx/static/themes/oscar/js/searxng.js

@@ -327,8 +327,19 @@ $(document).ready(function(){
 *
 * @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;
@@ -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});
+        }
       }
     }
   };

searx/static/themes/oscar/js/searxng.min.js

@@ -60,6 +60,16 @@ $(document).ready(function(){$("#allow-all-engines").click(function(){$(".onoffs
 *
 * @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(o,c){function t(t,e,a,n,i,s){this.container_selector=t,this.results_selector=e,this.img_selector=a,this.verticalMargin=n,this.horizontalMargin=i,this.maxHeight=s,this.isAlignDone=!0}t.prototype._getHeigth=function(t,e){for(var a,n=0,i=0;i<t.length;i++)0<(a=t[i]).naturalWidth&&0<a.naturalHeight?n+=a.naturalWidth/a.naturalHeight:n+=1;return(e-t.length*this.verticalMargin)/n},t.prototype._setSize=function(t,e){for(var a,n,i=t.length,s=0;s<i;s++)a=0<(n=t[s]).naturalWidth&&0<n.naturalHeight?e*n.naturalWidth/n.naturalHeight:e,n.style.width=a+"px",n.style.height=e+"px",n.style.marginLeft=this.horizontalMargin+"px",n.style.marginTop=this.horizontalMargin+"px",n.style.marginRight=this.verticalMargin-7+"px",n.style.marginBottom=this.verticalMargin-7+"px",(n=n.parentNode.parentNode).classList.contains("js")||n.classList.add("js")},t.prototype._alignImgs=function(t){for(var e,a,n,i,s=c.querySelector(this.container_selector),o=window.getComputedStyle(s),r=parseInt(o.getPropertyValue("padding-left"),10),o=parseInt(o.getPropertyValue("padding-right"),10),l=s.clientWidth-r-o;0<t.length;){for(e=!0,n=1;n<=t.length&&e;n++)a=t.slice(0,n),(i=this._getHeigth(a,l))<this.maxHeight&&(this._setSize(a,i),t=t.slice(n),e=!1);if(e){this._setSize(a,Math.min(this.maxHeight,i));break}}},t.prototype.align=function(){for(var t=c.querySelectorAll(this.results_selector),e=t.length,a=null,n=null,i=[],s=0;s<e;s++)(n=t[s]).previousElementSibling!==a&&0<i.length&&(this._alignImgs(i),i=[]),i.push(n.querySelector(this.img_selector)),a=n;0<i.length&&this._alignImgs(i)},t.prototype.watch=function(){var t,e,a=this,n=c.querySelectorAll(this.results_selector),i=n.length;function s(){a.isAlignDone&&(a.isAlignDone=!1,setTimeout(function(){a.align(),a.isAlignDone=!0},100))}for(o.addEventListener("pageshow",s),o.addEventListener("load",s),o.addEventListener("resize",s),t=0;t<i;t++)null!=(e=n[t].querySelector(this.img_selector))&&(e.addEventListener("load",s),e.addEventListener("error",s))},o.searxng.ImageLayout=t}(window,document);
+function(r,c){function t(t,e,a,n,i,s){this.container_selector=t,this.results_selector=e,this.img_selector=a,this.verticalMargin=n,this.horizontalMargin=i,this.maxHeight=s,this.isAlignDone=!0}t.prototype._getHeigth=function(t,e){for(var a,n=0,i=0;i<t.length;i++)0<(a=t[i]).naturalWidth&&0<a.naturalHeight?n+=a.naturalWidth/a.naturalHeight:n+=1;return(e-t.length*this.verticalMargin)/n},t.prototype._setSize=function(t,e){for(var a,n,i=t.length,s=0;s<i;s++)a=0<(n=t[s]).naturalWidth&&0<n.naturalHeight?e*n.naturalWidth/n.naturalHeight:e,n.style.width=a+"px",n.style.height=e+"px",n.style.marginLeft=this.horizontalMargin+"px",n.style.marginTop=this.horizontalMargin+"px",n.style.marginRight=this.verticalMargin-7+"px",n.style.marginBottom=this.verticalMargin-7+"px",(n=n.parentNode.parentNode).classList.contains("js")||n.classList.add("js")},t.prototype._alignImgs=function(t){for(var e,a,n,i,s=c.querySelector(this.container_selector),o=window.getComputedStyle(s),r=parseInt(o.getPropertyValue("padding-left"),10),o=parseInt(o.getPropertyValue("padding-right"),10),l=s.clientWidth-r-o;0<t.length;){for(e=!0,n=1;n<=t.length&&e;n++)a=t.slice(0,n),(i=this._getHeigth(a,l))<this.maxHeight&&(this._setSize(a,i),t=t.slice(n),e=!1);if(e){this._setSize(a,Math.min(this.maxHeight,i));break}}},t.prototype.align=function(){for(var t=c.querySelectorAll(this.results_selector),e=t.length,a=null,n=null,i=[],s=0;s<e;s++)(n=t[s]).previousElementSibling!==a&&0<i.length&&(this._alignImgs(i),i=[]),i.push(n.querySelector(this.img_selector)),a=n;0<i.length&&this._alignImgs(i)},t.prototype.watch=function(){var t,e,a=this,n=c.querySelectorAll(this.results_selector),i=n.length;function s(t){t.originalTarget.src=r.searxng.static_path+r.searxng.theme.img_load_error}function o(){a.isAlignDone&&(a.isAlignDone=!1,setTimeout(function(){a.align(),a.isAlignDone=!0},100))}for(r.addEventListener("pageshow",o),r.addEventListener("load",o),r.addEventListener("resize",o),t=0;t<i;t++)null!=(e=n[t].querySelector(this.img_selector))&&(e.addEventListener("load",o),e.addEventListener("error",o),r.searxng.theme.img_load_error&&e.addEventListener("error",s,{once:!0}))},r.searxng.ImageLayout=t}(window,document);
 //# sourceMappingURL=searxng.min.js.map

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'
         }
       }
     },

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 <img src='...'> failed
+            img_load_error: 'img/img_load_error.svg'
+        }
     };
 
     // update the css

searx/static/themes/simple/js/searxng.head.min.js

@@ -4,5 +4,5 @@
  * (C) Copyright Contributors to the searx project (2014 - 2021).
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-(function(t,e){"use strict";var a=e.currentScript||function(){var t=e.getElementsByTagName("script");return t[t.length-1]}();t.searxng={touch:"ontouchstart"in t||t.DocumentTouch&&document instanceof DocumentTouch||false,method:a.getAttribute("data-method"),autocompleter:a.getAttribute("data-autocompleter")==="true",search_on_category_select:a.getAttribute("data-search-on-category-select")==="true",infinite_scroll:a.getAttribute("data-infinite-scroll")==="true",hotkeys:a.getAttribute("data-hotkeys")==="true",static_path:a.getAttribute("data-static-path"),translations:JSON.parse(a.getAttribute("data-translations"))};var r=e.getElementsByTagName("html")[0];r.classList.remove("no-js");r.classList.add("js");if(t.searxng.touch){r.classList.add("touch")}})(window,document);
+(function(t,e){"use strict";var a=e.currentScript||function(){var t=e.getElementsByTagName("script");return t[t.length-1]}();t.searxng={touch:"ontouchstart"in t||t.DocumentTouch&&document instanceof DocumentTouch||false,method:a.getAttribute("data-method"),autocompleter:a.getAttribute("data-autocompleter")==="true",search_on_category_select:a.getAttribute("data-search-on-category-select")==="true",infinite_scroll:a.getAttribute("data-infinite-scroll")==="true",hotkeys:a.getAttribute("data-hotkeys")==="true",static_path:a.getAttribute("data-static-path"),translations:JSON.parse(a.getAttribute("data-translations")),theme:{img_load_error:"img/img_load_error.svg"}};var r=e.getElementsByTagName("html")[0];r.classList.remove("no-js");r.classList.add("js");if(t.searxng.touch){r.classList.add("touch")}})(window,document);
 //# sourceMappingURL=searxng.head.min.js.map

searx/static/themes/simple/js/searxng.head.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"searxng.head.min.js","sources":["searxng.head.js"],"names":["w","d","script","currentScript","scripts","getElementsByTagName","length","searxng","touch","DocumentTouch","document","method","getAttribute","autocompleter","search_on_category_select","infinite_scroll","hotkeys","static_path","translations","JSON","parse","hmtlElement","classList","remove","add","window"],"mappings":";;;;;;CAOA,SAAUA,EAAGC,gBAIT,IAAIC,EAASD,EAAEE,eAAkB,WAC7B,IAAIC,EAAUH,EAAEI,qBAAqB,UACrC,OAAOD,EAAQA,EAAQE,OAAS,GAFH,GAMjCN,EAAEO,QAAU,CACRC,MAAS,iBAAkBR,GAAMA,EAAES,eAAiBC,oBAAoBD,eAAkB,MAC1FE,OAAQT,EAAOU,aAAa,eAC5BC,cAAeX,EAAOU,aAAa,wBAA0B,OAC7DE,0BAA2BZ,EAAOU,aAAa,oCAAsC,OACrFG,gBAAiBb,EAAOU,aAAa,0BAA4B,OACjEI,QAASd,EAAOU,aAAa,kBAAoB,OACjDK,YAAaf,EAAOU,aAAa,oBACjCM,aAAcC,KAAKC,MAAMlB,EAAOU,aAAa,uBAIjD,IAAIS,EAAcpB,EAAEI,qBAAqB,QAAQ,GACjDgB,EAAYC,UAAUC,OAAO,SAC7BF,EAAYC,UAAUE,IAAI,MAC1B,GAAIxB,EAAEO,QAAQC,MAAO,CACjBa,EAAYC,UAAUE,IAAI,WA1BlC,CA4BGC,OAAQf"}
+{"version":3,"file":"searxng.head.min.js","sources":["searxng.head.js"],"names":["w","d","script","currentScript","scripts","getElementsByTagName","length","searxng","touch","DocumentTouch","document","method","getAttribute","autocompleter","search_on_category_select","infinite_scroll","hotkeys","static_path","translations","JSON","parse","theme","img_load_error","hmtlElement","classList","remove","add","window"],"mappings":";;;;;;CAOA,SAAUA,EAAGC,gBAIT,IAAIC,EAASD,EAAEE,eAAkB,WAC7B,IAAIC,EAAUH,EAAEI,qBAAqB,UACrC,OAAOD,EAAQA,EAAQE,OAAS,GAFH,GAMjCN,EAAEO,QAAU,CACRC,MAAS,iBAAkBR,GAAMA,EAAES,eAAiBC,oBAAoBD,eAAkB,MAC1FE,OAAQT,EAAOU,aAAa,eAC5BC,cAAeX,EAAOU,aAAa,wBAA0B,OAC7DE,0BAA2BZ,EAAOU,aAAa,oCAAsC,OACrFG,gBAAiBb,EAAOU,aAAa,0BAA4B,OACjEI,QAASd,EAAOU,aAAa,kBAAoB,OACjDK,YAAaf,EAAOU,aAAa,oBACjCM,aAAcC,KAAKC,MAAMlB,EAAOU,aAAa,sBAC7CS,MAAQ,CAEJC,eAAgB,2BAKxB,IAAIC,EAActB,EAAEI,qBAAqB,QAAQ,GACjDkB,EAAYC,UAAUC,OAAO,SAC7BF,EAAYC,UAAUE,IAAI,MAC1B,GAAI1B,EAAEO,QAAQC,MAAO,CACjBe,EAAYC,UAAUE,IAAI,WA9BlC,CAgCGC,OAAQjB"}

searx/static/themes/simple/js/searxng.js

@@ -879,8 +879,19 @@ searxng.ready(function() {
 *
 * @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;
@@ -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});
+        }
       }
     }
   };

searx/static/themes/simple/src/js/head/00_init.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 <img src='...'> failed
+            img_load_error: 'img/img_load_error.svg'
+        }
     };
 
     // update the css

src/brand/img_load_error.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 92 92"
+   height="92mm"
+   width="92mm"
+   sodipodi:docname="img_load_error.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3840"
+     inkscape:window-height="1536"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="2.2374547"
+     inkscape:cx="-12.067286"
+     inkscape:cy="218.38203"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     d="M 39.581382,41.421315 H 30.62689 v -1.21543 q 0,-2.033984 0.818554,-3.59668 0.818555,-1.5875 3.447852,-4.018359 l 1.5875,-1.438672 q 1.413867,-1.289844 2.058789,-2.43086 0.669727,-1.141015 0.669727,-2.282031 0,-1.736328 -1.190625,-2.703711 -1.190625,-0.992188 -3.323828,-0.992188 -2.00918,0 -4.340821,0.84336 -2.331641,0.818554 -4.861719,2.455664 v -7.788673 q 3.001367,-1.041796 5.481836,-1.53789 2.480469,-0.496094 4.787305,-0.496094 6.052344,0 9.227344,2.480469 3.175001,2.455664 3.175001,7.19336 0,2.430859 -0.967383,4.365625 -0.967383,1.909961 -3.299024,4.117578 l -1.5875,1.413868 q -1.686719,1.53789 -2.207617,2.480469 -0.520899,0.917773 -0.520899,2.033984 z m -8.954492,3.671094 h 8.954492 v 8.830469 H 30.62689 Z"
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.80000305px;line-height:1;font-family:'DejaVu Sans';-inkscape-font-specification:'DejaVu Sans Bold';display:inline;fill:#db3434;fill-opacity:1;stroke-width:0.26458335"
+     id="path827"
+     inkscape:connector-curvature="0" />
+  <circle
+     style="fill:none;fill-opacity:1;stroke:#db3434;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path834"
+     cx="35"
+     cy="36.486031"
+     r="30" />
+  <rect
+     style="opacity:1;fill:#db3434;fill-opacity:1;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect912"
+     width="18.846331"
+     height="39.963303"
+     x="-12.021294"
+     y="80.490318"
+     ry="1.8669105e-13"
+     transform="rotate(-46.234709)" />
+</svg>