Icycoide/searxng
1
0
Fork 1
mirror of https://github.com/searxng/searxng.git synced 2025-07-15 01:09:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

[enh] simple theme: image detail

Browse source 
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.
This commit is contained in:
Alexandre Flament 2021-10-02 11:57:08 +02:00
parent 2624034cd6
commit fd374d6322
8 changed files with 390 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

15
searx/static/themes/__common__/js/image_layout.js
View file

@ -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');