forked from zaclys/searxng
[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
parent
0311eba538
commit
eff0884498
@ -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});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
71
src/brand/img_load_error.svg
Normal file
71
src/brand/img_load_error.svg
Normal 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.0 KiB |
Loading…
Reference in New Issue
Block a user