Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit eff08844 authored by Markus Heiser's avatar Markus Heiser
Browse files

[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 ..

https://github.com/searxng/searxng/blob/d0e21a01b4e14df905f25445a3f6bcbec481671c/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: default avatarMarkus Heiser <markus.heiser@darmarit.de>
parent 0311eba5

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

+21 −0
Original line number Diff line number Diff line
@@ -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});

      }

    }

  };

searx/static/themes/simple/gruntfile.js

+2 −2
Original line number Diff line number Diff line
@@ -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'

        }

      }

    },

src/brand/img_load_error.svg

0 → 100644
+0 −0

File added.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View file