diff options
| -rw-r--r-- | searx/static/themes/__common__/js/image_layout.js | 21 | ||||
| -rw-r--r-- | searx/static/themes/simple/gruntfile.js | 4 | ||||
| -rw-r--r-- | src/brand/img_load_error.svg | 71 |
3 files changed, 94 insertions, 2 deletions
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 <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}); } } }; 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 000000000..4bd867c5c --- /dev/null +++ b/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> |
