diff --git a/searx/static/themes/oscar/css/logicodev-dark.min.css.map b/searx/static/themes/oscar/css/logicodev-dark.min.css.map
index e9928c467..6cb083bcf 100644
Binary files a/searx/static/themes/oscar/css/logicodev-dark.min.css.map and b/searx/static/themes/oscar/css/logicodev-dark.min.css.map differ
diff --git a/searx/static/themes/oscar/js/searxng.js b/searx/static/themes/oscar/js/searxng.js
index edeeaee84..29423e1dd 100644
--- a/searx/static/themes/oscar/js/searxng.js
+++ b/searx/static/themes/oscar/js/searxng.js
@@ -183,6 +183,230 @@ $(document).ready(function(){
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 3, 200);
searxng.image_thumbnail_layout.watch();
});
+;/**
+*
+* Google Image Layout v0.0.1
+* Description, by Anh Trinh.
+* Heavily modified for searx
+* https://ptgamr.github.io/2014-09-12-google-image-layout/
+* https://ptgamr.github.io/google-image-layout/src/google-image-layout.js
+*
+* @license Free to use under the MIT License.
+*
+* @example Example usage of searxng.ImageLayout class.
+* 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;
+ this.results_selector = results_selector;
+ this.img_selector = img_selector;
+ this.verticalMargin = verticalMargin;
+ this.horizontalMargin = horizontalMargin;
+ this.maxHeight = maxHeight;
+ this.trottleCallToAlign = null;
+ this.alignAfterThrotteling = false;
+ }
+
+ /**
+ * Get the height that make all images fit the container
+ *
+ * width = w1 + w2 + w3 + ... = r1*h + r2*h + r3*h + ...
+ *
+ * @param {[type]} images the images to be calculated
+ * @param {[type]} width the container witdth
+ * @param {[type]} margin the margin between each image
+ *
+ * @return {[type]} the height
+ */
+ ImageLayout.prototype._getHeigth = function (images, width) {
+ var i, img;
+ var r = 0;
+
+ for (i = 0; i < images.length; i++) {
+ img = images[i];
+ if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
+ r += img.naturalWidth / img.naturalHeight;
+ } else {
+ // assume that not loaded images are square
+ r += 1;
+ }
+ }
+
+ return (width - images.length * this.verticalMargin) / r; // have to round down because Firefox will automatically roundup value with number of decimals > 3
+ };
+
+ ImageLayout.prototype._setSize = function (images, height) {
+ var i, img, imgWidth;
+ var imagesLength = images.length, resultNode;
+
+ for (i = 0; i < imagesLength; i++) {
+ img = images[i];
+ if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
+ imgWidth = height * img.naturalWidth / img.naturalHeight;
+ } else {
+ // not loaded image : make it square as _getHeigth said it
+ imgWidth = height;
+ }
+ img.setAttribute('width', Math.round(imgWidth));
+ img.setAttribute('height', Math.round(height));
+ img.style.marginLeft = Math.round(this.horizontalMargin) + 'px';
+ img.style.marginTop = Math.round(this.horizontalMargin) + 'px';
+ img.style.marginRight = Math.round(this.verticalMargin - 7) + 'px'; // -4 is the negative margin of the inline element
+ img.style.marginBottom = Math.round(this.verticalMargin - 7) + 'px';
+ resultNode = img.parentNode.parentNode;
+ if (!resultNode.classList.contains('js')) {
+ resultNode.classList.add('js');
+ }
+ }
+ };
+
+ ImageLayout.prototype._alignImgs = function (imgGroup) {
+ var isSearching, slice, i, h;
+ var containerElement = d.querySelector(this.container_selector);
+ var containerCompStyles = window.getComputedStyle(containerElement);
+ var containerPaddingLeft = parseInt(containerCompStyles.getPropertyValue('padding-left'), 10);
+ var containerPaddingRight = parseInt(containerCompStyles.getPropertyValue('padding-right'), 10);
+ var containerWidth = containerElement.clientWidth - containerPaddingLeft - containerPaddingRight;
+
+ while (imgGroup.length > 0) {
+ isSearching = true;
+ for (i = 1; i <= imgGroup.length && isSearching; i++) {
+ slice = imgGroup.slice(0, i);
+ h = this._getHeigth(slice, containerWidth);
+ if (h < this.maxHeight) {
+ this._setSize(slice, h);
+ // continue with the remaining images
+ imgGroup = imgGroup.slice(i);
+ isSearching = false;
+ }
+ }
+ if (isSearching) {
+ this._setSize(slice, Math.min(this.maxHeight, h));
+ break;
+ }
+ }
+ };
+
+ ImageLayout.prototype.throttleAlign = function () {
+ var obj = this;
+ if (obj.trottleCallToAlign) {
+ obj.alignAfterThrotteling = true;
+ } else {
+ obj.alignAfterThrotteling = false;
+ obj.align();
+ obj.trottleCallToAlign = setTimeout(function () {
+ if (obj.alignAfterThrotteling) {
+ obj.align();
+ }
+ obj.alignAfterThrotteling = false;
+ obj.trottleCallToAlign = null;
+ }, 20);
+ }
+ };
+
+ ImageLayout.prototype.align = function () {
+ var i;
+ var results_selectorNode = d.querySelectorAll(this.results_selector);
+ var results_length = results_selectorNode.length;
+ var previous = null;
+ var current = null;
+ var imgGroup = [];
+
+ for (i = 0; i < results_length; i++) {
+ current = results_selectorNode[i];
+ if (current.previousElementSibling !== previous && imgGroup.length > 0) {
+ // the current image is not connected to previous one
+ // so the current image is the start of a new group of images.
+ // so call _alignImgs to align the current group
+ this._alignImgs(imgGroup);
+ // and start a new empty group of images
+ imgGroup = [];
+ }
+ // add the current image to the group (only the img tag)
+ imgGroup.push(current.querySelector(this.img_selector));
+ // update the previous variable
+ previous = current;
+ }
+ // align the remaining images
+ if (imgGroup.length > 0) {
+ this._alignImgs(imgGroup);
+ }
+ };
+
+ ImageLayout.prototype._monitorImages = function () {
+ var i, img;
+ var objthrottleAlign = this.throttleAlign.bind(this);
+ 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;
+ }
+
+ for (i = 0; i < results_length; i++) {
+ img = results_nodes[i].querySelector(this.img_selector);
+ if (img !== null && img !== undefined && !img.classList.contains('aligned')) {
+ img.addEventListener('load', objthrottleAlign);
+ // https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+ img.addEventListener('error', objthrottleAlign);
+ img.addEventListener('timeout', objthrottleAlign);
+ if (w.searxng.theme.img_load_error) {
+ img.addEventListener('error', img_load_error, {once: true});
+ }
+ img.classList.add('aligned');
+ }
+ }
+ };
+
+ ImageLayout.prototype.watch = function () {
+ var objthrottleAlign = this.throttleAlign.bind(this);
+
+ // https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event
+ w.addEventListener('pageshow', objthrottleAlign);
+ // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/load_event
+ w.addEventListener('load', objthrottleAlign);
+ // https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
+ w.addEventListener('resize', objthrottleAlign);
+
+ this._monitorImages();
+
+ var obj = this;
+
+ let observer = new MutationObserver(entries => {
+ let newElement = false;
+ for (let i = 0; i < entries.length; i++) {
+ if (entries[i].addedNodes.length > 0 && entries[i].addedNodes[0].classList.contains('result')) {
+ newElement = true;
+ break;
+ }
+ }
+ if (newElement) {
+ obj._monitorImages();
+ }
+ });
+ observer.observe(d.querySelector(this.container_selector), {
+ childList: true,
+ subtree: true,
+ attributes: false,
+ characterData: false,
+ });
+ };
+
+ w.searxng.ImageLayout = ImageLayout;
+
+}(window, document));
;/**
* @license
* (C) Copyright Contributors to the SearXNG project.
@@ -368,227 +592,3 @@ $(document).ready(function(){
});
});
-;/**
-*
-* Google Image Layout v0.0.1
-* Description, by Anh Trinh.
-* Heavily modified for searx
-* https://ptgamr.github.io/2014-09-12-google-image-layout/
-* https://ptgamr.github.io/google-image-layout/src/google-image-layout.js
-*
-* @license Free to use under the MIT License.
-*
-* @example Example usage of searxng.ImageLayout class.
-* 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;
- this.results_selector = results_selector;
- this.img_selector = img_selector;
- this.verticalMargin = verticalMargin;
- this.horizontalMargin = horizontalMargin;
- this.maxHeight = maxHeight;
- this.trottleCallToAlign = null;
- this.alignAfterThrotteling = false;
- }
-
- /**
- * Get the height that make all images fit the container
- *
- * width = w1 + w2 + w3 + ... = r1*h + r2*h + r3*h + ...
- *
- * @param {[type]} images the images to be calculated
- * @param {[type]} width the container witdth
- * @param {[type]} margin the margin between each image
- *
- * @return {[type]} the height
- */
- ImageLayout.prototype._getHeigth = function (images, width) {
- var i, img;
- var r = 0;
-
- for (i = 0; i < images.length; i++) {
- img = images[i];
- if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
- r += img.naturalWidth / img.naturalHeight;
- } else {
- // assume that not loaded images are square
- r += 1;
- }
- }
-
- return (width - images.length * this.verticalMargin) / r; // have to round down because Firefox will automatically roundup value with number of decimals > 3
- };
-
- ImageLayout.prototype._setSize = function (images, height) {
- var i, img, imgWidth;
- var imagesLength = images.length, resultNode;
-
- for (i = 0; i < imagesLength; i++) {
- img = images[i];
- if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
- imgWidth = height * img.naturalWidth / img.naturalHeight;
- } else {
- // not loaded image : make it square as _getHeigth said it
- imgWidth = height;
- }
- img.setAttribute('width', Math.round(imgWidth));
- img.setAttribute('height', Math.round(height));
- img.style.marginLeft = Math.round(this.horizontalMargin) + 'px';
- img.style.marginTop = Math.round(this.horizontalMargin) + 'px';
- img.style.marginRight = Math.round(this.verticalMargin - 7) + 'px'; // -4 is the negative margin of the inline element
- img.style.marginBottom = Math.round(this.verticalMargin - 7) + 'px';
- resultNode = img.parentNode.parentNode;
- if (!resultNode.classList.contains('js')) {
- resultNode.classList.add('js');
- }
- }
- };
-
- ImageLayout.prototype._alignImgs = function (imgGroup) {
- var isSearching, slice, i, h;
- var containerElement = d.querySelector(this.container_selector);
- var containerCompStyles = window.getComputedStyle(containerElement);
- var containerPaddingLeft = parseInt(containerCompStyles.getPropertyValue('padding-left'), 10);
- var containerPaddingRight = parseInt(containerCompStyles.getPropertyValue('padding-right'), 10);
- var containerWidth = containerElement.clientWidth - containerPaddingLeft - containerPaddingRight;
-
- while (imgGroup.length > 0) {
- isSearching = true;
- for (i = 1; i <= imgGroup.length && isSearching; i++) {
- slice = imgGroup.slice(0, i);
- h = this._getHeigth(slice, containerWidth);
- if (h < this.maxHeight) {
- this._setSize(slice, h);
- // continue with the remaining images
- imgGroup = imgGroup.slice(i);
- isSearching = false;
- }
- }
- if (isSearching) {
- this._setSize(slice, Math.min(this.maxHeight, h));
- break;
- }
- }
- };
-
- ImageLayout.prototype.throttleAlign = function () {
- var obj = this;
- if (obj.trottleCallToAlign) {
- obj.alignAfterThrotteling = true;
- } else {
- obj.alignAfterThrotteling = false;
- obj.align();
- obj.trottleCallToAlign = setTimeout(function () {
- if (obj.alignAfterThrotteling) {
- obj.align();
- }
- obj.alignAfterThrotteling = false;
- obj.trottleCallToAlign = null;
- }, 20);
- }
- }
-
- ImageLayout.prototype.align = function () {
- var i;
- var results_selectorNode = d.querySelectorAll(this.results_selector);
- var results_length = results_selectorNode.length;
- var previous = null;
- var current = null;
- var imgGroup = [];
-
- for (i = 0; i < results_length; i++) {
- current = results_selectorNode[i];
- if (current.previousElementSibling !== previous && imgGroup.length > 0) {
- // the current image is not connected to previous one
- // so the current image is the start of a new group of images.
- // so call _alignImgs to align the current group
- this._alignImgs(imgGroup);
- // and start a new empty group of images
- imgGroup = [];
- }
- // add the current image to the group (only the img tag)
- imgGroup.push(current.querySelector(this.img_selector));
- // update the previous variable
- previous = current;
- }
- // align the remaining images
- if (imgGroup.length > 0) {
- this._alignImgs(imgGroup);
- }
- };
-
- ImageLayout.prototype._monitorImages = function () {
- var i, img;
- var objthrottleAlign = this.throttleAlign.bind(this);
- 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;
- }
-
- for (i = 0; i < results_length; i++) {
- img = results_nodes[i].querySelector(this.img_selector);
- if (img !== null && img !== undefined && !img.classList.contains('aligned')) {
- img.addEventListener('load', objthrottleAlign);
- // https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
- img.addEventListener('error', objthrottleAlign);
- img.addEventListener('timeout', objthrottleAlign);
- if (w.searxng.theme.img_load_error) {
- img.addEventListener('error', img_load_error, {once: true});
- }
- img.classList.add('aligned');
- }
- }
- }
-
- ImageLayout.prototype.watch = function () {
- var objthrottleAlign = this.throttleAlign.bind(this);
-
- // https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event
- w.addEventListener('pageshow', objthrottleAlign);
- // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/load_event
- w.addEventListener('load', objthrottleAlign);
- // https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
- w.addEventListener('resize', objthrottleAlign);
-
- this._monitorImages();
-
- var obj = this;
-
- let observer = new MutationObserver(entries => {
- let newElement = false;
- for (let i = 0; i < entries.length; i++) {
- if (entries[i].addedNodes.length > 0 && entries[i].addedNodes[0].classList.contains('result')) {
- newElement = true;
- break;
- }
- }
- if (newElement) {
- obj._monitorImages();
- }
- });
- observer.observe(d.querySelector(this.container_selector), {
- childList: true,
- subtree: true,
- attributes: false,
- characterData: false,
- })
- };
-
- w.searxng.ImageLayout = ImageLayout;
-
-}(window, document));
diff --git a/searx/static/themes/oscar/js/searxng.min.js b/searx/static/themes/oscar/js/searxng.min.js
index e0573b888..ab130cdad 100644
Binary files a/searx/static/themes/oscar/js/searxng.min.js and b/searx/static/themes/oscar/js/searxng.min.js differ
diff --git a/searx/static/themes/oscar/js/searxng.min.js.map b/searx/static/themes/oscar/js/searxng.min.js.map
index 6156eea02..8fe21b87a 100644
Binary files a/searx/static/themes/oscar/js/searxng.min.js.map and b/searx/static/themes/oscar/js/searxng.min.js.map differ
diff --git a/searx/static/themes/simple/css/searxng-rtl.min.css b/searx/static/themes/simple/css/searxng-rtl.min.css
index 64c1ac234..267545e7c 100644
Binary files a/searx/static/themes/simple/css/searxng-rtl.min.css and b/searx/static/themes/simple/css/searxng-rtl.min.css differ
diff --git a/searx/static/themes/simple/css/searxng-rtl.min.css.map b/searx/static/themes/simple/css/searxng-rtl.min.css.map
index b4ce34408..b8828a7d8 100644
Binary files a/searx/static/themes/simple/css/searxng-rtl.min.css.map and b/searx/static/themes/simple/css/searxng-rtl.min.css.map differ
diff --git a/searx/static/themes/simple/css/searxng.min.css b/searx/static/themes/simple/css/searxng.min.css
index f300d236c..d5162c65b 100644
Binary files a/searx/static/themes/simple/css/searxng.min.css and b/searx/static/themes/simple/css/searxng.min.css differ
diff --git a/searx/static/themes/simple/css/searxng.min.css.map b/searx/static/themes/simple/css/searxng.min.css.map
index 4929bedc9..842cd6748 100644
Binary files a/searx/static/themes/simple/css/searxng.min.css.map and b/searx/static/themes/simple/css/searxng.min.css.map differ
diff --git a/searx/static/themes/simple/js/searxng.min.js b/searx/static/themes/simple/js/searxng.min.js
index 7a74e677f..ebf718f30 100644
Binary files a/searx/static/themes/simple/js/searxng.min.js and b/searx/static/themes/simple/js/searxng.min.js differ
diff --git a/searx/static/themes/simple/js/searxng.min.js.map b/searx/static/themes/simple/js/searxng.min.js.map
index 1f64e949e..42b9f8cad 100644
Binary files a/searx/static/themes/simple/js/searxng.min.js.map and b/searx/static/themes/simple/js/searxng.min.js.map differ