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

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>

After

Width:  |  Height:  |  Size: 3 KiB