From fd374d6322c6f0919832b6465bc311dac68bb753 Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Sat, 2 Oct 2021 11:57:08 +0200 Subject: [enh] simple theme: image detail When an image is selected, the detail with the full size image is displayed on the right side of the screen (or full screen on tablet and phone). When Javascript is disabled, the thumbnail is a linked to the full size image, as it was before. When the image proxy is enabled, the full size image is also proxied, in consequence this commit increases the bandwidth usage of instances. The detail can be closed by the close button or the Esc key. It is possible to go to the next and previous images using the j and k keys or the button on the top right of the screen. --- searx/static/themes/__common__/js/image_layout.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'searx/static/themes/__common__/js/image_layout.js') diff --git a/searx/static/themes/__common__/js/image_layout.js b/searx/static/themes/__common__/js/image_layout.js index fa96f62c5..653da95a0 100644 --- a/searx/static/themes/__common__/js/image_layout.js +++ b/searx/static/themes/__common__/js/image_layout.js @@ -11,11 +11,12 @@ */ (function (w, d) { - function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) { + 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.margin = margin; + this.verticalMargin = verticalMargin; + this.horizontalMargin = horizontalMargin; this.maxHeight = maxHeight; this.isAlignDone = true; } @@ -45,7 +46,7 @@ } } - return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3 + 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) { @@ -62,10 +63,10 @@ } img.style.width = imgWidth + 'px'; img.style.height = height + 'px'; - img.style.marginLeft = '3px'; - img.style.marginTop = '3px'; - img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element - img.style.marginBottom = this.margin - 7 + 'px'; + img.style.marginLeft = this.horizontalMargin + 'px'; + img.style.marginTop = this.horizontalMargin + 'px'; + img.style.marginRight = this.verticalMargin - 7 + 'px'; // -4 is the negative margin of the inline element + img.style.marginBottom = this.verticalMargin - 7 + 'px'; resultNode = img.parentNode.parentNode; if (!resultNode.classList.contains('js')) { resultNode.classList.add('js'); -- cgit v1.2.3