OwlBurst/Ponysearch
1
0
Fork 0
forked from Ponysearch/Ponysearch
Code Pull requests Activity

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

Browse source 
[simple] ImageLayout.watch: `img_load_error.svg` if img load fails
This commit is contained in:
Alexandre Flament 2021-11-30 20:21:03 +01:00 committed by GitHub
commit 632ae7d175
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 178 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
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 = 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});
}
}
}
};

23
searx/static/themes/oscar/js/searxng.js
View file

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

12
searx/static/themes/oscar/js/searxng.min.js vendored
View file

@ -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

2
searx/static/themes/oscar/js/searxng.min.js.map
View file

File diff suppressed because one or more lines are too long

4
searx/static/themes/simple/gruntfile.js
View file

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

BIN
searx/static/themes/simple/img/img_load_error.svg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

4
searx/static/themes/simple/js/searxng.head.js
View file

@ -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

2
searx/static/themes/simple/js/searxng.head.min.js vendored
View file

@ -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

2
searx/static/themes/simple/js/searxng.head.min.js.map
View file

@ -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"}

23
searx/static/themes/simple/js/searxng.js
View file

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

16
searx/static/themes/simple/js/searxng.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/js/searxng.min.js.map
View file

File diff suppressed because one or more lines are too long

4
searx/static/themes/simple/src/js/head/00_init.js
View file

@ -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

71
src/brand/img_load_error.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB