[enh] oscar: image thumbnail layout

Adjust thumbnail sizes to fill the container width
This commit is contained in:
Alexandre Flament 2021-03-22 12:00:48 +01:00
parent ba90c5a2e0
commit 7a0fbdecc4
25 changed files with 513 additions and 230 deletions

View file

@ -3,21 +3,21 @@
* Google Image Layout v0.0.1
* Description, by Anh Trinh.
* Heavily modified for searx
* http://trinhtrunganh.com
* 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.
*
*/
(function(w, d) {
'use strict';
function ImageLayout(container_selector, results_selector, img_selector, maxHeight) {
(function (w, d) {
function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
this.container_selector = container_selector;
this.results_selector = results_selector;
this.img_selector = img_selector;
this.margin = 10;
this.margin = margin;
this.maxHeight = maxHeight;
this._alignAllDone = true;
this.isAlignDone = true;
}
/**
@ -31,12 +31,11 @@
*
* @return {[type]} the height
*/
ImageLayout.prototype._getHeigth = function(images, width) {
var r = 0,
img;
ImageLayout.prototype._getHeigth = function (images, width) {
var i, img;
var r = 0;
width -= images.length * this.margin;
for (var i = 0; i < images.length; i++) {
for (i = 0; i < images.length; i++) {
img = images[i];
if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
r += img.naturalWidth / img.naturalHeight;
@ -46,12 +45,14 @@
}
}
return width / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
};
ImageLayout.prototype._setSize = function(images, height) {
var img, imgWidth, imagesLength = images.length;
for (var i = 0; i < imagesLength; i++) {
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;
@ -65,38 +66,52 @@
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';
resultNode = img.parentNode.parentNode;
if (!resultNode.classList.contains('js')) {
resultNode.classList.add('js');
}
}
};
ImageLayout.prototype._alignImgs = function(imgGroup) {
var slice, h,
containerWidth = d.querySelector(this.container_selector).clientWidth;
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;
w: while (imgGroup.length > 0) {
for (var i = 1; i <= imgGroup.length; i++) {
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);
continue w;
isSearching = false;
}
}
this._setSize(slice, Math.min(this.maxHeight, h));
break;
if (isSearching) {
this._setSize(slice, Math.min(this.maxHeight, h));
break;
}
}
};
ImageLayout.prototype.align = function(results_selector) {
var results_selectorNode = d.querySelectorAll(this.results_selector),
results_length = results_selectorNode.length,
previous = null,
current = null,
imgGroup = [];
for (var i = 0; i < results_length; i++) {
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 conected to previous one
// 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);
@ -114,32 +129,29 @@
}
};
ImageLayout.prototype.watch = function() {
var i, img, imgGroup, imgNodeLength,
obj = this,
results_nodes = d.querySelectorAll(this.results_selector),
results_length = results_nodes.length;
ImageLayout.prototype.watch = function () {
var i, img;
var obj = this;
var results_nodes = d.querySelectorAll(this.results_selector);
var results_length = results_nodes.length;
function align(e) {
obj.align();
}
function throttleAlign(e) {
if (obj._alignAllDone) {
obj._alignAllDone = false;
setTimeout(function() {
function throttleAlign() {
if (obj.isAlignDone) {
obj.isAlignDone = false;
setTimeout(function () {
obj.align();
obj._alignAllDone = true;
obj.isAlignDone = true;
}, 100);
}
}
w.addEventListener('pageshow', throttleAlign);
w.addEventListener('load', throttleAlign);
w.addEventListener('resize', throttleAlign);
w.addEventListener('pageshow', align);
for (i = 0; i < results_length; i++) {
img = results_nodes[i].querySelector(this.img_selector);
if (typeof img !== 'undefined') {
if (img !== null && img !== undefined) {
img.addEventListener('load', throttleAlign);
img.addEventListener('error', throttleAlign);
}
@ -148,4 +160,4 @@
w.searx.ImageLayout = ImageLayout;
})(window, document);
}(window, document));

View file

@ -202,14 +202,39 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
}
.result-images {
float: left !important;
width: 24%;
margin: 0.5%;
margin: 0;
padding: 0;
}
.result-images a {
display: block;
width: 100%;
background-size: cover;
}
.result-images a .img-thumbnail {
border: none !important;
padding: 0;
}
.result-images a:hover,
.result-images a:focus {
outline: 0;
}
.result-images a:hover .img-thumbnail,
.result-images a:focus .img-thumbnail {
box-shadow: 5px 5px 15px 0px black;
}
.result-images.js a .img-thumbnail {
max-height: inherit;
min-height: inherit;
}
.result-images:not(.js) {
width: 25%;
padding: 3px 13px 13px 3px;
}
.result-images:not(.js) a .img-thumbnail {
margin: 0;
max-height: 128px;
min-height: 128px;
}
.img-thumbnail {
margin: 5px;
max-height: 128px;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -175,14 +175,39 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
}
.result-images {
float: left !important;
width: 24%;
margin: 0.5%;
margin: 0;
padding: 0;
}
.result-images a {
display: block;
width: 100%;
background-size: cover;
}
.result-images a .img-thumbnail {
border: none !important;
padding: 0;
}
.result-images a:hover,
.result-images a:focus {
outline: 0;
}
.result-images a:hover .img-thumbnail,
.result-images a:focus .img-thumbnail {
box-shadow: 5px 5px 15px 0px black;
}
.result-images.js a .img-thumbnail {
max-height: inherit;
min-height: inherit;
}
.result-images:not(.js) {
width: 25%;
padding: 3px 13px 13px 3px;
}
.result-images:not(.js) a .img-thumbnail {
margin: 0;
max-height: 128px;
min-height: 128px;
}
.img-thumbnail {
margin: 5px;
max-height: 128px;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -60,7 +60,7 @@ module.exports = function(grunt) {
separator: ';'
},
dist: {
src: ['src/js/*.js'],
src: ['src/js/*.js', '../__common__/js/image_layout.js'],
dest: 'js/searx.js'
}
},
@ -76,7 +76,7 @@ module.exports = function(grunt) {
}
},
jshint: {
files: ['gruntfile.js', 'js/searx_src/*.js'],
files: ['gruntfile.js', 'js/searx_src/*.js', '../__common__/js/image_layout.js'],
options: {
reporterOutput: "",
// options here to override JSHint defaults

View file

@ -17,6 +17,9 @@
window.searx = (function(d) {
'use strict';
//
d.getElementsByTagName("html")[0].className = "js";
// add data- properties
var script = d.currentScript || (function() {
var scripts = d.getElementsByTagName('script');
@ -199,6 +202,12 @@ $(document).ready(function(){
tabs.children().attr("aria-selected", "false");
$(a.target).parent().attr("aria-selected", "true");
});
/**
* Layout images according to their sizes
*/
searx.image_thumbnail_layout = new searx.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 200);
searx.image_thumbnail_layout.watch();
});
;window.addEventListener('load', function() {
// Hide infobox toggle if shrunk size already fits all content.
@ -383,3 +392,166 @@ $(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.
*
*/
(function (w, d) {
function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
this.container_selector = container_selector;
this.results_selector = results_selector;
this.img_selector = img_selector;
this.margin = margin;
this.maxHeight = maxHeight;
this.isAlignDone = true;
}
/**
* 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.margin) / 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.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';
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.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.watch = function () {
var i, img;
var obj = this;
var results_nodes = d.querySelectorAll(this.results_selector);
var results_length = results_nodes.length;
function throttleAlign() {
if (obj.isAlignDone) {
obj.isAlignDone = false;
setTimeout(function () {
obj.align();
obj.isAlignDone = true;
}, 100);
}
}
w.addEventListener('pageshow', throttleAlign);
w.addEventListener('load', throttleAlign);
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);
img.addEventListener('error', throttleAlign);
}
}
};
w.searx.ImageLayout = ImageLayout;
}(window, document));

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -17,6 +17,9 @@
window.searx = (function(d) {
'use strict';
//
d.getElementsByTagName("html")[0].className = "js";
// add data- properties
var script = d.currentScript || (function() {
var scripts = d.getElementsByTagName('script');

View file

@ -108,4 +108,10 @@ $(document).ready(function(){
tabs.children().attr("aria-selected", "false");
$(a.target).parent().attr("aria-selected", "true");
});
/**
* Layout images according to their sizes
*/
searx.image_thumbnail_layout = new searx.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 200);
searx.image_thumbnail_layout.watch();
});

View file

@ -77,12 +77,39 @@
// image formating of results
.result-images {
float: left !important;
width: 24%;
margin: .5%;
margin: 0;
padding: 0;
a {
display: block;
width: 100%;
background-size: cover;
.img-thumbnail {
border: none !important;
padding: 0;
}
&:hover, &:focus {
outline: 0;
.img-thumbnail {
box-shadow: 5px 5px 15px 0px black;
}
}
}
}
.result-images.js a .img-thumbnail {
max-height: inherit;
min-height: inherit;
}
.result-images:not(.js) {
width: 25%;
padding: 3px 13px 13px 3px;
a {
.img-thumbnail {
margin: 0;
max-height: 128px;
min-height: 128px;
}
}
}

View file

@ -1,4 +1,4 @@
/*! searx | 16-03-2021 | */
/*! searx | 23-03-2021 | */
/*
* searx, A privacy-respecting, hackable metasearch engine
*

File diff suppressed because one or more lines are too long

View file

@ -1,4 +1,4 @@
/*! searx | 16-03-2021 | */
/*! searx | 23-03-2021 | */
/*
* searx, A privacy-respecting, hackable metasearch engine
*

File diff suppressed because one or more lines are too long

View file

@ -11,7 +11,7 @@ module.exports = function(grunt) {
}
},
jshint: {
files: ['js/searx_src/*.js', 'js/searx_header/*.js'],
files: ['js/searx_src/*.js', 'js/searx_header/*.js', '../__common__/js/*.js'],
options: {
reporterOutput: "",
proto: true,
@ -30,7 +30,7 @@ module.exports = function(grunt) {
},
files: {
'js/searx.head.js': ['js/searx_head/*.js'],
'js/searx.js': ['js/searx_src/*.js']
'js/searx.js': ['js/searx_src/*.js', '../__common__/js/*.js']
}
}
},

View file

@ -1,4 +1,4 @@
/*! simple/searx.min.js | 16-03-2021 | */
/*! simple/searx.min.js | 23-03-2021 | */
(function(t,e){"use strict";var a=e.currentScript||function(){var t=e.getElementsByTagName("script");return t[t.length-1]}();t.searx={touch:"ontouchstart"in t||t.DocumentTouch&&document instanceof DocumentTouch||false,method:a.getAttribute("data-method"),autocompleter:a.getAttribute("data-autocompleter")==="true",search_on_category_select:a.getAttribute("data-search-on-category-select")==="true",infinite_scroll:a.getAttribute("data-infinite-scroll")==="true",static_path:a.getAttribute("data-static-path"),translations:JSON.parse(a.getAttribute("data-translations"))};e.getElementsByTagName("html")[0].className=t.searx.touch?"js touch":"js"})(window,document);
//# sourceMappingURL=searx.head.min.js.map

View file

@ -698,157 +698,6 @@ module.exports = AutoComplete;
},{}]},{},[1])(1)
});
;/**
*
* Google Image Layout v0.0.1
* Description, by Anh Trinh.
* Heavily modified for searx
* http://trinhtrunganh.com
*
* @license Free to use under the MIT License.
*
*/
(function(w, d) {
'use strict';
function ImageLayout(container_selector, results_selector, img_selector, maxHeight) {
this.container_selector = container_selector;
this.results_selector = results_selector;
this.img_selector = img_selector;
this.margin = 10;
this.maxHeight = maxHeight;
this._alignAllDone = true;
}
/**
* 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 r = 0,
img;
width -= images.length * this.margin;
for (var 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 / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
};
ImageLayout.prototype._setSize = function(images, height) {
var img, imgWidth, imagesLength = images.length;
for (var 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.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';
}
};
ImageLayout.prototype._alignImgs = function(imgGroup) {
var slice, h,
containerWidth = d.querySelector(this.container_selector).clientWidth;
w: while (imgGroup.length > 0) {
for (var i = 1; i <= imgGroup.length; i++) {
slice = imgGroup.slice(0, i);
h = this._getHeigth(slice, containerWidth);
if (h < this.maxHeight) {
this._setSize(slice, h);
imgGroup = imgGroup.slice(i);
continue w;
}
}
this._setSize(slice, Math.min(this.maxHeight, h));
break;
}
};
ImageLayout.prototype.align = function(results_selector) {
var results_selectorNode = d.querySelectorAll(this.results_selector),
results_length = results_selectorNode.length,
previous = null,
current = null,
imgGroup = [];
for (var i = 0; i < results_length; i++) {
current = results_selectorNode[i];
if (current.previousElementSibling !== previous && imgGroup.length > 0) {
// the current image is not conected 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.watch = function() {
var i, img, imgGroup, imgNodeLength,
obj = this,
results_nodes = d.querySelectorAll(this.results_selector),
results_length = results_nodes.length;
function align(e) {
obj.align();
}
function throttleAlign(e) {
if (obj._alignAllDone) {
obj._alignAllDone = false;
setTimeout(function() {
obj.align();
obj._alignAllDone = true;
}, 100);
}
}
w.addEventListener('resize', throttleAlign);
w.addEventListener('pageshow', align);
for (i = 0; i < results_length; i++) {
img = results_nodes[i].querySelector(this.img_selector);
if (typeof img !== 'undefined') {
img.addEventListener('load', throttleAlign);
img.addEventListener('error', throttleAlign);
}
}
};
w.searx.ImageLayout = ImageLayout;
})(window, document);
;searx.ready(function() {
searx.on('.result', 'click', function() {
@ -1411,7 +1260,7 @@ module.exports = AutoComplete;
'use strict';
searx.ready(function() {
searx.image_thumbnail_layout = new searx.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 200);
searx.image_thumbnail_layout = new searx.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200);
searx.image_thumbnail_layout.watch();
searx.on('.btn-collapse', 'click', function(event) {
@ -1575,3 +1424,166 @@ module.exports = AutoComplete;
});
})(window, document, window.searx);
;/**
*
* 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.
*
*/
(function (w, d) {
function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
this.container_selector = container_selector;
this.results_selector = results_selector;
this.img_selector = img_selector;
this.margin = margin;
this.maxHeight = maxHeight;
this.isAlignDone = true;
}
/**
* 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.margin) / 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.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';
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.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.watch = function () {
var i, img;
var obj = this;
var results_nodes = d.querySelectorAll(this.results_selector);
var results_length = results_nodes.length;
function throttleAlign() {
if (obj.isAlignDone) {
obj.isAlignDone = false;
setTimeout(function () {
obj.align();
obj.isAlignDone = true;
}, 100);
}
}
w.addEventListener('pageshow', throttleAlign);
w.addEventListener('load', throttleAlign);
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);
img.addEventListener('error', throttleAlign);
}
}
};
w.searx.ImageLayout = ImageLayout;
}(window, document));

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -18,7 +18,7 @@
'use strict';
searx.ready(function() {
searx.image_thumbnail_layout = new searx.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 200);
searx.image_thumbnail_layout = new searx.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200);
searx.image_thumbnail_layout.watch();
searx.on('.btn-collapse', 'click', function(event) {

View file

@ -1,6 +1,6 @@
{% from 'oscar/macros.html' import icon %}
<!DOCTYPE html>
<html lang="{{ preferences.get_value('locale') }}" xml:lang="{{ preferences.get_value('locale') }}"{% if rtl %} dir="rtl"{% endif %}>
<html lang="{{ preferences.get_value('locale') }}" xml:lang="{{ preferences.get_value('locale') }}"{% if rtl %} dir="rtl"{% endif %} class="nojs">
<head>
<meta charset="UTF-8" />
<meta name="description" content="searx - a privacy-respecting, hackable metasearch engine" />