ZaclysIndustries/searxngRebrandZaclys
2
0
Fork 0
forked from zaclys/searxng
Code Issues Pull requests Activity

Merge pull request #376 from dalf/simple-image-detail

Browse source 
Simple theme: image detail
This commit is contained in:
Alexandre Flament 2021-10-28 08:50:55 +02:00 • committed by GitHub
commit 8985d3e6ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 962 additions and 82 deletions
Show stats 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 (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.container_selector = container_selector;
this.results_selector = results_selector; this.results_selector = results_selector;
this.img_selector = img_selector; this.img_selector = img_selector;
this.margin = margin; this.verticalMargin = verticalMargin;
this.horizontalMargin = horizontalMargin;
this.maxHeight = maxHeight; this.maxHeight = maxHeight;
this.isAlignDone = true; 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) { ImageLayout.prototype._setSize = function (images, height) {
@ -62,10 +63,10 @@
} }
img.style.width = imgWidth + 'px'; img.style.width = imgWidth + 'px';
img.style.height = height + 'px'; img.style.height = height + 'px';
img.style.marginLeft = '3px'; img.style.marginLeft = this.horizontalMargin + 'px';
img.style.marginTop = '3px'; img.style.marginTop = this.horizontalMargin + 'px';
img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element img.style.marginRight = this.verticalMargin - 7 + 'px'; // -4 is the negative margin of the inline element
img.style.marginBottom = this.margin - 7 + 'px'; img.style.marginBottom = this.verticalMargin - 7 + 'px';
resultNode = img.parentNode.parentNode; resultNode = img.parentNode.parentNode;
if (!resultNode.classList.contains('js')) { if (!resultNode.classList.contains('js')) {
resultNode.classList.add('js'); resultNode.classList.add('js');

2
searx/static/themes/oscar/css/logicodev-dark.min.css.map
View file

File diff suppressed because one or more lines are too long

17
searx/static/themes/oscar/js/searxng.js
View file

@ -179,7 +179,7 @@ $(document).ready(function(){
/** /**
* Layout images according to their sizes * Layout images according to their sizes
*/ */
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 200); searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 3, 200);
searxng.image_thumbnail_layout.watch(); searxng.image_thumbnail_layout.watch();
}); });
;/** ;/**
@ -330,11 +330,12 @@ $(document).ready(function(){
*/ */
(function (w, d) { (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.container_selector = container_selector;
this.results_selector = results_selector; this.results_selector = results_selector;
this.img_selector = img_selector; this.img_selector = img_selector;
this.margin = margin; this.verticalMargin = verticalMargin;
this.horizontalMargin = horizontalMargin;
this.maxHeight = maxHeight; this.maxHeight = maxHeight;
this.isAlignDone = true; this.isAlignDone = true;
} }
@ -364,7 +365,7 @@ $(document).ready(function(){
} }
} }
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) { ImageLayout.prototype._setSize = function (images, height) {
@ -381,10 +382,10 @@ $(document).ready(function(){
} }
img.style.width = imgWidth + 'px'; img.style.width = imgWidth + 'px';
img.style.height = height + 'px'; img.style.height = height + 'px';
img.style.marginLeft = '3px'; img.style.marginLeft = this.horizontalMargin + 'px';
img.style.marginTop = '3px'; img.style.marginTop = this.horizontalMargin + 'px';
img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element img.style.marginRight = this.verticalMargin - 7 + 'px'; // -4 is the negative margin of the inline element
img.style.marginBottom = this.margin - 7 + 'px'; img.style.marginBottom = this.verticalMargin - 7 + 'px';
resultNode = img.parentNode.parentNode; resultNode = img.parentNode.parentNode;
if (!resultNode.classList.contains('js')) { if (!resultNode.classList.contains('js')) {
resultNode.classList.add('js'); resultNode.classList.add('js');

4
searx/static/themes/oscar/js/searxng.min.js vendored
View file

@ -20,7 +20,7 @@ $(document).ready(function(){var t,a="";searxng.autocompleter&&((t=new Bloodhoun
* (C) 2014 by Thomas Pointhuber, <thomas.pointhuber@gmx.at> * (C) 2014 by Thomas Pointhuber, <thomas.pointhuber@gmx.at>
* SPDX-License-Identifier: AGPL-3.0-or-later * SPDX-License-Identifier: AGPL-3.0-or-later
*/ */
$(document).ready(function(){$("#q.autofocus").focus(),$("#clear_search").click(function(){document.getElementById("q").value=""}),$(".select-all-on-click").click(function(){$(this).select()}),$(".btn-collapse").click(function(){var t=$(this).data("btn-text-collapsed"),e=$(this).data("btn-text-not-collapsed");""!==t&&""!==e&&(new_html=$(this).hasClass("collapsed")?$(this).html().replace(t,e):$(this).html().replace(e,t),$(this).html(new_html))}),$(".btn-toggle .btn").click(function(){var t="btn-"+$(this).data("btn-class"),e=$(this).data("btn-label-default"),a=$(this).data("btn-label-toggled");""!==a&&(new_html=$(this).hasClass("btn-default")?$(this).html().replace(e,a):$(this).html().replace(a,e),$(this).html(new_html)),$(this).toggleClass(t),$(this).toggleClass("btn-default")}),$(".media-loader").click(function(){var t=$(this).data("target"),e=$(t+" > iframe"),t=e.attr("src");void 0!==t&&!1!==t||e.attr("src",e.data("src"))}),$(".btn-sm").dblclick(function(){var t="btn-"+$(this).data("btn-class");$(this).hasClass("btn-default")?($(".btn-sm > input").attr("checked","checked"),$(".btn-sm > input").prop("checked",!0),$(".btn-sm").addClass(t),$(".btn-sm").addClass("active"),$(".btn-sm").removeClass("btn-default")):($(".btn-sm > input").attr("checked",""),$(".btn-sm > input").removeAttr("checked"),$(".btn-sm > input").checked=!1,$(".btn-sm").removeClass(t),$(".btn-sm").removeClass("active"),$(".btn-sm").addClass("btn-default"))}),$(".nav-tabs").click(function(t){$(t.target).parents("ul").children().attr("aria-selected","false"),$(t.target).parent().attr("aria-selected","true")}),searxng.image_thumbnail_layout=new searxng.ImageLayout("#main_results","#main_results .result-images","img.img-thumbnail",15,200),searxng.image_thumbnail_layout.watch()}), $(document).ready(function(){$("#q.autofocus").focus(),$("#clear_search").click(function(){document.getElementById("q").value=""}),$(".select-all-on-click").click(function(){$(this).select()}),$(".btn-collapse").click(function(){var t=$(this).data("btn-text-collapsed"),e=$(this).data("btn-text-not-collapsed");""!==t&&""!==e&&(new_html=$(this).hasClass("collapsed")?$(this).html().replace(t,e):$(this).html().replace(e,t),$(this).html(new_html))}),$(".btn-toggle .btn").click(function(){var t="btn-"+$(this).data("btn-class"),e=$(this).data("btn-label-default"),a=$(this).data("btn-label-toggled");""!==a&&(new_html=$(this).hasClass("btn-default")?$(this).html().replace(e,a):$(this).html().replace(a,e),$(this).html(new_html)),$(this).toggleClass(t),$(this).toggleClass("btn-default")}),$(".media-loader").click(function(){var t=$(this).data("target"),e=$(t+" > iframe"),t=e.attr("src");void 0!==t&&!1!==t||e.attr("src",e.data("src"))}),$(".btn-sm").dblclick(function(){var t="btn-"+$(this).data("btn-class");$(this).hasClass("btn-default")?($(".btn-sm > input").attr("checked","checked"),$(".btn-sm > input").prop("checked",!0),$(".btn-sm").addClass(t),$(".btn-sm").addClass("active"),$(".btn-sm").removeClass("btn-default")):($(".btn-sm > input").attr("checked",""),$(".btn-sm > input").removeAttr("checked"),$(".btn-sm > input").checked=!1,$(".btn-sm").removeClass(t),$(".btn-sm").removeClass("active"),$(".btn-sm").addClass("btn-default"))}),$(".nav-tabs").click(function(t){$(t.target).parents("ul").children().attr("aria-selected","false"),$(t.target).parent().attr("aria-selected","true")}),searxng.image_thumbnail_layout=new searxng.ImageLayout("#main_results","#main_results .result-images","img.img-thumbnail",15,3,200),searxng.image_thumbnail_layout.watch()}),
/** /**
* @license * @license
* (C) Copyright Contributors to the SearXNG project. * (C) Copyright Contributors to the SearXNG project.
@ -61,5 +61,5 @@ $(document).ready(function(){$("#allow-all-engines").click(function(){$(".onoffs
* @license Free to use under the MIT License. * @license Free to use under the MIT License.
* *
*/ */
function(o,c){function t(t,e,a,n,i){this.container_selector=t,this.results_selector=e,this.img_selector=a,this.margin=n,this.maxHeight=i,this.isAlignDone=!0}t.prototype._getHeigth=function(t,e){for(var a,n=0,i=0;i<t.length;i++)0<(a=t[i]).naturalWidth&&0<a.naturalHeight?n+=a.naturalWidth/a.naturalHeight:n+=1;return(e-t.length*this.margin)/n},t.prototype._setSize=function(t,e){for(var a,n,i=t.length,s=0;s<i;s++)a=0<(n=t[s]).naturalWidth&&0<n.naturalHeight?e*n.naturalWidth/n.naturalHeight:e,n.style.width=a+"px",n.style.height=e+"px",n.style.marginLeft="3px",n.style.marginTop="3px",n.style.marginRight=this.margin-7+"px",n.style.marginBottom=this.margin-7+"px",(n=n.parentNode.parentNode).classList.contains("js")||n.classList.add("js")},t.prototype._alignImgs=function(t){for(var e,a,n,i,s=c.querySelector(this.container_selector),o=window.getComputedStyle(s),r=parseInt(o.getPropertyValue("padding-left"),10),o=parseInt(o.getPropertyValue("padding-right"),10),l=s.clientWidth-r-o;0<t.length;){for(e=!0,n=1;n<=t.length&&e;n++)a=t.slice(0,n),(i=this._getHeigth(a,l))<this.maxHeight&&(this._setSize(a,i),t=t.slice(n),e=!1);if(e){this._setSize(a,Math.min(this.maxHeight,i));break}}},t.prototype.align=function(){for(var t=c.querySelectorAll(this.results_selector),e=t.length,a=null,n=null,i=[],s=0;s<e;s++)(n=t[s]).previousElementSibling!==a&&0<i.length&&(this._alignImgs(i),i=[]),i.push(n.querySelector(this.img_selector)),a=n;0<i.length&&this._alignImgs(i)},t.prototype.watch=function(){var t,e,a=this,n=c.querySelectorAll(this.results_selector),i=n.length;function s(){a.isAlignDone&&(a.isAlignDone=!1,setTimeout(function(){a.align(),a.isAlignDone=!0},100))}for(o.addEventListener("pageshow",s),o.addEventListener("load",s),o.addEventListener("resize",s),t=0;t<i;t++)null!=(e=n[t].querySelector(this.img_selector))&&(e.addEventListener("load",s),e.addEventListener("error",s))},o.searxng.ImageLayout=t}(window,document); function(o,c){function t(t,e,a,n,i,s){this.container_selector=t,this.results_selector=e,this.img_selector=a,this.verticalMargin=n,this.horizontalMargin=i,this.maxHeight=s,this.isAlignDone=!0}t.prototype._getHeigth=function(t,e){for(var a,n=0,i=0;i<t.length;i++)0<(a=t[i]).naturalWidth&&0<a.naturalHeight?n+=a.naturalWidth/a.naturalHeight:n+=1;return(e-t.length*this.verticalMargin)/n},t.prototype._setSize=function(t,e){for(var a,n,i=t.length,s=0;s<i;s++)a=0<(n=t[s]).naturalWidth&&0<n.naturalHeight?e*n.naturalWidth/n.naturalHeight:e,n.style.width=a+"px",n.style.height=e+"px",n.style.marginLeft=this.horizontalMargin+"px",n.style.marginTop=this.horizontalMargin+"px",n.style.marginRight=this.verticalMargin-7+"px",n.style.marginBottom=this.verticalMargin-7+"px",(n=n.parentNode.parentNode).classList.contains("js")||n.classList.add("js")},t.prototype._alignImgs=function(t){for(var e,a,n,i,s=c.querySelector(this.container_selector),o=window.getComputedStyle(s),r=parseInt(o.getPropertyValue("padding-left"),10),o=parseInt(o.getPropertyValue("padding-right"),10),l=s.clientWidth-r-o;0<t.length;){for(e=!0,n=1;n<=t.length&&e;n++)a=t.slice(0,n),(i=this._getHeigth(a,l))<this.maxHeight&&(this._setSize(a,i),t=t.slice(n),e=!1);if(e){this._setSize(a,Math.min(this.maxHeight,i));break}}},t.prototype.align=function(){for(var t=c.querySelectorAll(this.results_selector),e=t.length,a=null,n=null,i=[],s=0;s<e;s++)(n=t[s]).previousElementSibling!==a&&0<i.length&&(this._alignImgs(i),i=[]),i.push(n.querySelector(this.img_selector)),a=n;0<i.length&&this._alignImgs(i)},t.prototype.watch=function(){var t,e,a=this,n=c.querySelectorAll(this.results_selector),i=n.length;function s(){a.isAlignDone&&(a.isAlignDone=!1,setTimeout(function(){a.align(),a.isAlignDone=!0},100))}for(o.addEventListener("pageshow",s),o.addEventListener("load",s),o.addEventListener("resize",s),t=0;t<i;t++)null!=(e=n[t].querySelector(this.img_selector))&&(e.addEventListener("load",s),e.addEventListener("error",s))},o.searxng.ImageLayout=t}(window,document);
//# sourceMappingURL=searxng.min.js.map //# sourceMappingURL=searxng.min.js.map

2
searx/static/themes/oscar/js/searxng.min.js.map
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/oscar/src/js/element_modifiers.js
View file

@ -103,6 +103,6 @@ $(document).ready(function(){
/** /**
* Layout images according to their sizes * Layout images according to their sizes
*/ */
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 200); searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 3, 200);
searxng.image_thumbnail_layout.watch(); searxng.image_thumbnail_layout.watch();
}); });

237
searx/static/themes/simple/css/searxng-rtl.css
View file

@ -871,6 +871,13 @@ html {
--color-result-image-background: #000bbb; --color-result-image-background: #000bbb;
--color-settings-tr-hover: #f7f7f7; --color-settings-tr-hover: #f7f7f7;
--color-settings-engine-description-font: #909090; --color-settings-engine-description-font: #909090;
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
--color-toolkit-badge-font: #fff; --color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777; --color-toolkit-badge-background: #777;
--color-toolkit-kbd-font: #fff; --color-toolkit-kbd-font: #fff;
@ -941,6 +948,13 @@ html {
--color-result-engines-font: #777; --color-result-engines-font: #777;
--color-result-search-url-border: #333; --color-result-search-url-border: #333;
--color-result-search-url-font: #fff; --color-result-search-url-font: #fff;
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff; --color-result-image-span-font: #fff;
--color-result-image-background: #8af; --color-result-image-background: #8af;
@ -965,8 +979,8 @@ html {
--color-toolkit-engine-tooltip-border: #333; --color-toolkit-engine-tooltip-border: #333;
--color-toolkit-engine-tooltip-shadow: #444; --color-toolkit-engine-tooltip-shadow: #444;
--color-toolkit-engine-tooltip-background: #222; --color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2); --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
} }
} }
/* /*
@ -1971,6 +1985,213 @@ td:hover .engine-tooltip,
text-align: left; text-align: left;
} }
} }
#main_results #results.image-detail-open.only_template_images {
width: 59.25rem !important;
}
#main_results #results.only_template_images.image-detail-open #backToTop {
left: 56.75rem !important;
right: inherit;
}
article.result-images .detail {
display: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail {
display: flex;
flex-direction: column;
position: fixed;
left: 60rem;
right: 0;
top: 7rem;
bottom: 0;
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-background);
z-index: 10000;
padding: 4rem 3rem 3rem 3rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
display: block;
flex: 1;
text-align: left;
width: 100%;
border: none;
text-decoration: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
padding: 0;
margin: 0;
border: none;
object-fit: contain;
width: inherit;
max-width: 100%;
min-height: inherit;
max-height: calc(100vh - 25rem - 7rem);
background: inherit;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels {
color: var(--color-result-detail-font);
max-height: 16rem;
min-height: 16rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels hr {
border-top: 1px solid var(--color-result-detail-hr);
border-bottom: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4 {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.9rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
color: var(--color-result-detail-label-font);
font-size: 0.9rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
display: inline-block;
width: 12rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a {
text-align: left;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url:hover {
position: relative;
overflow: inherit !important;
background: var(--color-result-detail-background);
text-overflow: inherit !important;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:active {
color: var(--color-result-detail-link);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover {
text-decoration: underline;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close {
top: 1rem;
left: 1rem;
padding: 0.4rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
top: 1rem;
right: 6rem;
padding: 0.4rem 0.5rem 0.4rem 0.3rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
top: 1rem;
right: 2rem;
padding: 0.4rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
border-radius: 50%;
display: block;
width: 1.5rem;
height: 1.5rem;
position: absolute;
filter: opacity(40%);
z-index: 2000002;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close span,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span {
display: block;
width: 1.5rem;
height: 1.5rem;
text-align: center;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span::before,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span::before {
vertical-align: sub;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:active,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:active,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:active {
color: var(--color-result-detail-font);
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-font);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover {
filter: opacity(80%);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .loader {
position: absolute;
top: 1rem;
right: 50%;
border-top: 0.5em solid var(--color-result-detail-loader-border);
border-right: 0.5em solid var(--color-result-detail-loader-border);
border-bottom: 0.5em solid var(--color-result-detail-loader-border);
border-left: 0.5em solid var(--color-result-detail-loader-borderleft);
}
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail {
top: 0;
}
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail a.result-images-source img {
max-height: calc(100vh - 25rem);
}
@media screen and (max-width: 80em) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
display: flex;
flex-direction: column;
justify-content: center;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
width: 100%;
max-height: calc(100vh - 24rem);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
right: 1rem;
}
}
@media screen and (max-width: 50em) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
padding: 1rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
width: 100%;
max-height: calc(100vh - 20rem);
margin: 0;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
width: inherit;
margin-right: 1rem;
}
}
#main_index { #main_index {
margin-top: 16em; margin-top: 16em;
} }
@ -2457,6 +2678,9 @@ article[data-vim-selected]::before {
article.result-images[data-vim-selected] { article.result-images[data-vim-selected] {
background: var(--color-result-vim-arrow); background: var(--color-result-vim-arrow);
} }
article.result-images[data-vim-selected] .image_thumbnail {
filter: opacity(60%);
}
article.result-images[data-vim-selected]::before { article.result-images[data-vim-selected]::before {
display: none; display: none;
content: ""; content: "";
@ -2577,17 +2801,17 @@ article.result-images[data-vim-selected]::before {
} }
.result-images img { .result-images img {
float: inherit; float: inherit;
margin: 0; margin: 0.125rem;
padding: 0; padding: 0;
border: none; border: none;
max-height: 200px; max-height: 200px;
background: var(--color-result-image-background); background: var(--color-result-image-background);
} }
.result-images span a { .result-images span.title {
display: none; display: none;
color: var(--color-result-image-span-font); color: var(--color-result-image-span-font);
} }
.result-images:hover span a { .result-images:hover span.title {
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -2824,6 +3048,9 @@ article.result-images[data-vim-selected]::before {
margin: 0; margin: 0;
padding: 0.7em; padding: 0.7em;
} }
#results.scrolling #backToTop {
opacity: 1;
}
@media screen and (max-width: 80em) { @media screen and (max-width: 80em) {
#main_preferences, #main_preferences,
#main_about, #main_about,

2
searx/static/themes/simple/css/searxng-rtl.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/css/searxng-rtl.min.css.map
View file

File diff suppressed because one or more lines are too long

237
searx/static/themes/simple/css/searxng.css
View file

@ -871,6 +871,13 @@ html {
--color-result-image-background: #000bbb; --color-result-image-background: #000bbb;
--color-settings-tr-hover: #f7f7f7; --color-settings-tr-hover: #f7f7f7;
--color-settings-engine-description-font: #909090; --color-settings-engine-description-font: #909090;
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
--color-toolkit-badge-font: #fff; --color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777; --color-toolkit-badge-background: #777;
--color-toolkit-kbd-font: #fff; --color-toolkit-kbd-font: #fff;
@ -941,6 +948,13 @@ html {
--color-result-engines-font: #777; --color-result-engines-font: #777;
--color-result-search-url-border: #333; --color-result-search-url-border: #333;
--color-result-search-url-font: #fff; --color-result-search-url-font: #fff;
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff; --color-result-image-span-font: #fff;
--color-result-image-background: #8af; --color-result-image-background: #8af;
@ -965,8 +979,8 @@ html {
--color-toolkit-engine-tooltip-border: #333; --color-toolkit-engine-tooltip-border: #333;
--color-toolkit-engine-tooltip-shadow: #444; --color-toolkit-engine-tooltip-shadow: #444;
--color-toolkit-engine-tooltip-background: #222; --color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2); --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
} }
} }
/* /*
@ -1971,6 +1985,213 @@ td:hover .engine-tooltip,
text-align: left; text-align: left;
} }
} }
#main_results #results.image-detail-open.only_template_images {
width: 59.25rem !important;
}
#main_results #results.only_template_images.image-detail-open #backToTop {
left: 56.75rem !important;
right: inherit;
}
article.result-images .detail {
display: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail {
display: flex;
flex-direction: column;
position: fixed;
left: 60rem;
right: 0;
top: 7rem;
bottom: 0;
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-background);
z-index: 10000;
padding: 4rem 3rem 3rem 3rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
display: block;
flex: 1;
text-align: left;
width: 100%;
border: none;
text-decoration: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
padding: 0;
margin: 0;
border: none;
object-fit: contain;
width: inherit;
max-width: 100%;
min-height: inherit;
max-height: calc(100vh - 25rem - 7rem);
background: inherit;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels {
color: var(--color-result-detail-font);
max-height: 16rem;
min-height: 16rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels hr {
border-top: 1px solid var(--color-result-detail-hr);
border-bottom: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4 {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.9rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
color: var(--color-result-detail-label-font);
font-size: 0.9rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
display: inline-block;
width: 12rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a {
text-align: left;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url:hover {
position: relative;
overflow: inherit !important;
background: var(--color-result-detail-background);
text-overflow: inherit !important;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:active {
color: var(--color-result-detail-link);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover {
text-decoration: underline;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close {
top: 1rem;
left: 1rem;
padding: 0.4rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
top: 1rem;
right: 6rem;
padding: 0.4rem 0.5rem 0.4rem 0.3rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
top: 1rem;
right: 2rem;
padding: 0.4rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
border-radius: 50%;
display: block;
width: 1.5rem;
height: 1.5rem;
position: absolute;
filter: opacity(40%);
z-index: 2000002;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close span,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span {
display: block;
width: 1.5rem;
height: 1.5rem;
text-align: center;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span::before,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span::before {
vertical-align: sub;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:active,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:active,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:active {
color: var(--color-result-detail-font);
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-font);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:focus,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover {
filter: opacity(80%);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .loader {
position: absolute;
top: 1rem;
right: 50%;
border-top: 0.5em solid var(--color-result-detail-loader-border);
border-right: 0.5em solid var(--color-result-detail-loader-border);
border-bottom: 0.5em solid var(--color-result-detail-loader-border);
border-left: 0.5em solid var(--color-result-detail-loader-borderleft);
}
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail {
top: 0;
}
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail a.result-images-source img {
max-height: calc(100vh - 25rem);
}
@media screen and (max-width: 80em) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
display: flex;
flex-direction: column;
justify-content: center;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
width: 100%;
max-height: calc(100vh - 24rem);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
right: 1rem;
}
}
@media screen and (max-width: 50em) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
padding: 1rem;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
width: 100%;
max-height: calc(100vh - 20rem);
margin: 0;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
width: inherit;
margin-right: 1rem;
}
}
#main_index { #main_index {
margin-top: 16em; margin-top: 16em;
} }
@ -2457,6 +2678,9 @@ article[data-vim-selected]::before {
article.result-images[data-vim-selected] { article.result-images[data-vim-selected] {
background: var(--color-result-vim-arrow); background: var(--color-result-vim-arrow);
} }
article.result-images[data-vim-selected] .image_thumbnail {
filter: opacity(60%);
}
article.result-images[data-vim-selected]::before { article.result-images[data-vim-selected]::before {
display: none; display: none;
content: ""; content: "";
@ -2577,17 +2801,17 @@ article.result-images[data-vim-selected]::before {
} }
.result-images img { .result-images img {
float: inherit; float: inherit;
margin: 0; margin: 0.125rem;
padding: 0; padding: 0;
border: none; border: none;
max-height: 200px; max-height: 200px;
background: var(--color-result-image-background); background: var(--color-result-image-background);
} }
.result-images span a { .result-images span.title {
display: none; display: none;
color: var(--color-result-image-span-font); color: var(--color-result-image-span-font);
} }
.result-images:hover span a { .result-images:hover span.title {
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -2824,6 +3048,9 @@ article.result-images[data-vim-selected]::before {
margin: 0; margin: 0;
padding: 0.7em; padding: 0.7em;
} }
#results.scrolling #backToTop {
opacity: 1;
}
@media screen and (max-width: 80em) { @media screen and (max-width: 80em) {
#main_preferences, #main_preferences,
#main_about, #main_about,

2
searx/static/themes/simple/css/searxng.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/css/searxng.min.css.map
View file

File diff suppressed because one or more lines are too long

108
searx/static/themes/simple/js/searxng.js
View file

@ -276,9 +276,7 @@ searxng.ready(function() {
if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) { if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
var tagName = e.target.tagName.toLowerCase(); var tagName = e.target.tagName.toLowerCase();
if (e.keyCode === 27) { if (e.keyCode === 27) {
if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') { vimKeys[e.keyCode].fun(e);
vimKeys[e.keyCode].fun();
}
} else { } else {
if (e.target === document.body || tagName === 'a' || tagName === 'button') { if (e.target === document.body || tagName === 'a' || tagName === 'button') {
e.preventDefault(); e.preventDefault();
@ -365,9 +363,12 @@ searxng.ready(function() {
document.location.reload(true); document.location.reload(true);
} }
function removeFocus() { function removeFocus(e) {
if (document.activeElement) { const tagName = e.target.tagName.toLowerCase();
if (document.activeElement && (tagName === 'input' || tagName === 'select' || tagName === 'textarea')) {
document.activeElement.blur(); document.activeElement.blur();
} else {
searxng.closeDetail();
} }
} }
@ -437,6 +438,9 @@ searxng.ready(function() {
function openResult(newTab) { function openResult(newTab) {
return function() { return function() {
var link = document.querySelector('.result[data-vim-selected] h3 a'); var link = document.querySelector('.result[data-vim-selected] h3 a');
if (link === null) {
link = document.querySelector('.result[data-vim-selected] > a');
}
if (link !== null) { if (link !== null) {
var url = link.getAttribute('href'); var url = link.getAttribute('href');
if (newTab) { if (newTab) {
@ -520,6 +524,10 @@ searxng.ready(function() {
return; return;
} }
} }
searxng.scrollPageToSelected = scrollPageToSelected;
searxng.selectNext = highlightResult('down');
searxng.selectPrevious = highlightResult('up');
}); });
;/* SPDX-License-Identifier: AGPL-3.0-or-later */ ;/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* global L */ /* global L */
@ -628,7 +636,7 @@ searxng.ready(function() {
'use strict'; 'use strict';
searxng.ready(function() { searxng.ready(function() {
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200); searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
searxng.image_thumbnail_layout.watch(); searxng.image_thumbnail_layout.watch();
searxng.on('.btn-collapse', 'click', function() { searxng.on('.btn-collapse', 'click', function() {
@ -656,17 +664,74 @@ searxng.ready(function() {
} }
}); });
w.addEventListener('scroll', function() { function selectImage(e) {
var e = d.getElementById('backToTop'), /*eslint no-unused-vars: 0*/
scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let t = e.target;
if (e !== null) { while (t && t.nodeName != 'ARTICLE') {
if (scrollTop >= 200) { t = t.parentNode;
e.style.opacity = 1; }
} else { if (t) {
e.style.opacity = 0; // load full size image in background
const imgElement = t.querySelector('.result-images-source img');
const thumbnailElement = t.querySelector('.image_thumbnail');
const detailElement = t.querySelector('.detail');
if (imgElement) {
const imgSrc = imgElement.getAttribute('data-src');
if (imgSrc) {
const loader = d.createElement('div');
const imgLoader = new Image();
loader.classList.add('loader');
detailElement.appendChild(loader);
imgLoader.onload = e => {
imgElement.src = imgSrc;
loader.remove();
};
imgLoader.onerror = e => {
loader.remove();
};
imgLoader.src = imgSrc;
imgElement.src = thumbnailElement.src;
imgElement.removeAttribute('data-src');
}
} }
} }
d.getElementById('results').classList.add('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected();
}
searxng.closeDetail = function(e) {
d.getElementById('results').classList.remove('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected();
}
searxng.on('.result-images', 'click', e => {
e.preventDefault();
selectImage(e);
}); });
searxng.on('.result-images a', 'focus', selectImage, true);
searxng.on('.result-detail-close', 'click', e => {
e.preventDefault();
searxng.closeDetail();
});
searxng.on('.result-detail-previous', 'click', e => searxng.selectPrevious(false));
searxng.on('.result-detail-next', 'click', e => searxng.selectNext(false));
w.addEventListener('scroll', function() {
var e = d.getElementById('backToTop'),
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
results = d.getElementById('results');
if (e !== null) {
if (scrollTop >= 100) {
results.classList.add('scrolling');
} else {
results.classList.remove('scrolling');
}
}
}, true);
}); });
@ -791,11 +856,12 @@ searxng.ready(function() {
*/ */
(function (w, d) { (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.container_selector = container_selector;
this.results_selector = results_selector; this.results_selector = results_selector;
this.img_selector = img_selector; this.img_selector = img_selector;
this.margin = margin; this.verticalMargin = verticalMargin;
this.horizontalMargin = horizontalMargin;
this.maxHeight = maxHeight; this.maxHeight = maxHeight;
this.isAlignDone = true; this.isAlignDone = true;
} }
@ -825,7 +891,7 @@ searxng.ready(function() {
} }
} }
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) { ImageLayout.prototype._setSize = function (images, height) {
@ -842,10 +908,10 @@ searxng.ready(function() {
} }
img.style.width = imgWidth + 'px'; img.style.width = imgWidth + 'px';
img.style.height = height + 'px'; img.style.height = height + 'px';
img.style.marginLeft = '3px'; img.style.marginLeft = this.horizontalMargin + 'px';
img.style.marginTop = '3px'; img.style.marginTop = this.horizontalMargin + 'px';
img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element img.style.marginRight = this.verticalMargin - 7 + 'px'; // -4 is the negative margin of the inline element
img.style.marginBottom = this.margin - 7 + 'px'; img.style.marginBottom = this.verticalMargin - 7 + 'px';
resultNode = img.parentNode.parentNode; resultNode = img.parentNode.parentNode;
if (!resultNode.classList.contains('js')) { if (!resultNode.classList.contains('js')) {
resultNode.classList.add('js'); resultNode.classList.add('js');

4
searx/static/themes/simple/js/searxng.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/js/searxng.min.js.map
View file

File diff suppressed because one or more lines are too long

18
searx/static/themes/simple/src/js/main/searx_keyboard.js
View file

@ -124,9 +124,7 @@ searxng.ready(function() {
if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) { if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
var tagName = e.target.tagName.toLowerCase(); var tagName = e.target.tagName.toLowerCase();
if (e.keyCode === 27) { if (e.keyCode === 27) {
if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') { vimKeys[e.keyCode].fun(e);
vimKeys[e.keyCode].fun();
}
} else { } else {
if (e.target === document.body || tagName === 'a' || tagName === 'button') { if (e.target === document.body || tagName === 'a' || tagName === 'button') {
e.preventDefault(); e.preventDefault();
@ -213,9 +211,12 @@ searxng.ready(function() {
document.location.reload(true); document.location.reload(true);
} }
function removeFocus() { function removeFocus(e) {
if (document.activeElement) { const tagName = e.target.tagName.toLowerCase();
if (document.activeElement && (tagName === 'input' || tagName === 'select' || tagName === 'textarea')) {
document.activeElement.blur(); document.activeElement.blur();
} else {
searxng.closeDetail();
} }
} }
@ -285,6 +286,9 @@ searxng.ready(function() {
function openResult(newTab) { function openResult(newTab) {
return function() { return function() {
var link = document.querySelector('.result[data-vim-selected] h3 a'); var link = document.querySelector('.result[data-vim-selected] h3 a');
if (link === null) {
link = document.querySelector('.result[data-vim-selected] > a');
}
if (link !== null) { if (link !== null) {
var url = link.getAttribute('href'); var url = link.getAttribute('href');
if (newTab) { if (newTab) {
@ -368,4 +372,8 @@ searxng.ready(function() {
return; return;
} }
} }
searxng.scrollPageToSelected = scrollPageToSelected;
searxng.selectNext = highlightResult('down');
searxng.selectPrevious = highlightResult('up');
}); });

75
searx/static/themes/simple/src/js/main/searx_results.js
View file

@ -3,7 +3,7 @@
'use strict'; 'use strict';
searxng.ready(function() { searxng.ready(function() {
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200); searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
searxng.image_thumbnail_layout.watch(); searxng.image_thumbnail_layout.watch();
searxng.on('.btn-collapse', 'click', function() { searxng.on('.btn-collapse', 'click', function() {
@ -31,17 +31,74 @@
} }
}); });
w.addEventListener('scroll', function() { function selectImage(e) {
var e = d.getElementById('backToTop'), /*eslint no-unused-vars: 0*/
scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let t = e.target;
if (e !== null) { while (t && t.nodeName != 'ARTICLE') {
if (scrollTop >= 200) { t = t.parentNode;
e.style.opacity = 1; }
} else { if (t) {
e.style.opacity = 0; // load full size image in background
const imgElement = t.querySelector('.result-images-source img');
const thumbnailElement = t.querySelector('.image_thumbnail');
const detailElement = t.querySelector('.detail');
if (imgElement) {
const imgSrc = imgElement.getAttribute('data-src');
if (imgSrc) {
const loader = d.createElement('div');
const imgLoader = new Image();
loader.classList.add('loader');
detailElement.appendChild(loader);
imgLoader.onload = e => {
imgElement.src = imgSrc;
loader.remove();
};
imgLoader.onerror = e => {
loader.remove();
};
imgLoader.src = imgSrc;
imgElement.src = thumbnailElement.src;
imgElement.removeAttribute('data-src');
}
} }
} }
d.getElementById('results').classList.add('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected();
}
searxng.closeDetail = function(e) {
d.getElementById('results').classList.remove('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected();
}
searxng.on('.result-images', 'click', e => {
e.preventDefault();
selectImage(e);
}); });
searxng.on('.result-images a', 'focus', selectImage, true);
searxng.on('.result-detail-close', 'click', e => {
e.preventDefault();
searxng.closeDetail();
});
searxng.on('.result-detail-previous', 'click', e => searxng.selectPrevious(false));
searxng.on('.result-detail-next', 'click', e => searxng.selectNext(false));
w.addEventListener('scroll', function() {
var e = d.getElementById('backToTop'),
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
results = d.getElementById('results');
if (e !== null) {
if (scrollTop >= 100) {
results.classList.add('scrolling');
} else {
results.classList.remove('scrolling');
}
}
}, true);
}); });

20
searx/static/themes/simple/src/less/definitions.less
View file

@ -71,6 +71,14 @@ html {
/// Settings Colors /// Settings Colors
--color-settings-tr-hover: #f7f7f7; --color-settings-tr-hover: #f7f7f7;
--color-settings-engine-description-font: darken(#dcdcdc, 30%); --color-settings-engine-description-font: darken(#dcdcdc, 30%);
/// Detail modal
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
/// Toolkit Colors /// Toolkit Colors
--color-toolkit-badge-font: #fff; --color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777; --color-toolkit-badge-background: #777;
@ -156,6 +164,14 @@ html {
--color-result-engines-font: #777; --color-result-engines-font: #777;
--color-result-search-url-border: #333; --color-result-search-url-border: #333;
--color-result-search-url-font: #fff; --color-result-search-url-font: #fff;
/// Detail modal : same as the light version
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
// Images Colors // Images Colors
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff; --color-result-image-span-font: #fff;
@ -183,8 +199,8 @@ html {
--color-toolkit-engine-tooltip-border: #333; --color-toolkit-engine-tooltip-border: #333;
--color-toolkit-engine-tooltip-shadow: #444; --color-toolkit-engine-tooltip-shadow: #444;
--color-toolkit-engine-tooltip-background: #222; --color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2); --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
} }
} }

243
searx/static/themes/simple/src/less/detail.less Normal file
View file

@ -0,0 +1,243 @@
#main_results #results.image-detail-open.only_template_images {
width: 59.25rem !important;
}
#main_results #results.only_template_images.image-detail-open #backToTop {
left: 56.75rem !important;
right: inherit;
}
article.result-images .detail {
display: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail {
display: flex;
flex-direction: column;
position: fixed;
left: 60rem;
right: 0;
top: 7rem;
bottom: 0;
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-background);
z-index: 10000;
padding: 4rem 3rem 3rem 3rem;
a.result-images-source {
display: block;
flex: 1;
text-align: left;
width: 100%;
border: none;
text-decoration: none;
img {
padding: 0;
margin: 0;
border: none;
object-fit: contain;
width: inherit;
max-width: 100%;
min-height: inherit;
max-height: calc(100vh - 25rem - 7rem);
background: inherit;
}
}
.result-images-labels {
color: var(--color-result-detail-font);
max-height: 16rem;
min-height: 16rem;
hr {
border-top: 1px solid var(--color-result-detail-hr);
border-bottom: none;
}
h4 {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.9rem;
}
p {
color: var(--color-result-detail-label-font);
font-size: 0.9rem;
span {
display: inline-block;
width: 12rem;
}
}
h4,
p,
a {
text-align: left;
}
p.result-content {
height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
}
p.result-url {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
p.result-content:hover,
p.result-url:hover {
position: relative;
overflow: inherit !important;
background: var(--color-result-detail-background);
text-overflow: inherit !important;
}
a,
a:visited,
a:hover,
a:active {
color: var(--color-result-detail-link);
}
a:hover {
text-decoration: underline;
}
}
a.result-detail-close {
top: 1rem;
left: 1rem;
padding: 0.4rem;
}
a.result-detail-previous {
top: 1rem;
right: 6rem;
// center the icon by moving it slightly on the left
padding: 0.4rem 0.5rem 0.4rem 0.3rem;
}
a.result-detail-next {
top: 1rem;
right: 2rem;
padding: 0.4rem;
}
a.result-detail-close,
a.result-detail-next,
a.result-detail-previous {
border-radius: 50%;
display: block;
width: 1.5rem;
height: 1.5rem;
position: absolute;
filter: opacity(40%);
z-index: 2000002;
span {
display: block;
width: 1.5rem;
height: 1.5rem;
text-align: center;
}
}
a.result-detail-next,
a.result-detail-previous {
span::before {
// vertical center small icons
vertical-align: sub;
}
}
a.result-detail-close,
a.result-detail-close:visited,
a.result-detail-close:hover,
a.result-detail-close:active,
a.result-detail-previous,
a.result-detail-previous:visited,
a.result-detail-previous:hover,
a.result-detail-previous:active,
a.result-detail-next,
a.result-detail-next:visited,
a.result-detail-next:hover,
a.result-detail-next:active {
color: var(--color-result-detail-font);
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-font);
}
a.result-detail-close:focus,
a.result-detail-close:hover,
a.result-detail-previous:focus,
a.result-detail-previous:hover,
a.result-detail-next:focus,
a.result-detail-next:hover {
filter: opacity(80%);
}
.loader {
position: absolute;
top: 1rem;
right: 50%;
border-top: 0.5em solid var(--color-result-detail-loader-border);
border-right: 0.5em solid var(--color-result-detail-loader-border);
border-bottom: 0.5em solid var(--color-result-detail-loader-border);
border-left: 0.5em solid var(--color-result-detail-loader-borderleft);
}
}
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail {
top: 0;
a.result-images-source img {
max-height: calc(100vh - 25rem);
}
}
@media screen and (max-width: @tablet) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
a.result-images-source {
display: flex;
flex-direction: column;
justify-content: center;
img {
width: 100%;
max-height: calc(100vh - 24rem);
}
}
a.result-detail-next {
right: 1rem;
}
}
}
@media screen and (max-width: @phone) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
left: 0;
padding: 1rem;
a.result-images-source img {
width: 100%;
max-height: calc(100vh - 20rem);
margin: 0;
}
.result-images-labels p span {
width: inherit;
margin-right: 1rem;
}
}
}

16
searx/static/themes/simple/src/less/style.less
View file

@ -16,6 +16,7 @@
@import "code.less"; @import "code.less";
@import "toolkit.less"; @import "toolkit.less";
@import "autocomplete.less"; @import "autocomplete.less";
@import "detail.less";
// for index.html template // for index.html template
@import "index.less"; @import "index.less";
@ -138,6 +139,10 @@ article[data-vim-selected]::before {
article.result-images[data-vim-selected] { article.result-images[data-vim-selected] {
background: var(--color-result-vim-arrow); background: var(--color-result-vim-arrow);
.image_thumbnail {
filter: opacity(60%);
}
} }
article.result-images[data-vim-selected]::before { article.result-images[data-vim-selected]::before {
@ -283,25 +288,26 @@ article.result-images[data-vim-selected]::before {
img { img {
float: inherit; float: inherit;
margin: 0; margin: 0.125rem;
padding: 0; padding: 0;
border: none; border: none;
max-height: 200px; max-height: 200px;
background: var(--color-result-image-background); background: var(--color-result-image-background);
} }
span a { span.title {
display: none; display: none;
color: var(--color-result-image-span-font); color: var(--color-result-image-span-font);
} }
&:hover span a { &:hover span.title {
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
padding: 4px; padding: 4px;
margin: 0 0 4px 4px; margin: 0 0 4px 4px;
// color: @color-result-image-span-font;
background-color: var(--color-result-image-span-background-hover); background-color: var(--color-result-image-span-background-hover);
font-size: 0.7em; font-size: 0.7em;
} }
@ -569,6 +575,10 @@ article.result-images[data-vim-selected]::before {
} }
} }
#results.scrolling #backToTop {
opacity: 1;
}
@media screen and (max-width: @tablet) { @media screen and (max-width: @tablet) {
#main_preferences, #main_preferences,
#main_about, #main_about,

30
searx/templates/simple/result_templates/images.html
View file

@ -1,4 +1,28 @@
<article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}"> <article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">{{- "" -}}
<a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}><img class="image_thumbnail" src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}" /></a> <a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">{{- "" -}}
<span class="url"><a href="{{ result.url }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} class="small_font">{{ result.parsed_url[0] }}://{{ result.parsed_url[1] }}</a></span> <img class="image_thumbnail" src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" loading="lazy" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}" />{{- "" -}}
<span class="title">{{ result.title|striptags }}</span>{{- "" -}}
</a>{{- "" -}}
<div class="detail">{{- "" -}}
<a class="result-detail-close" href="#">{{ icon('close') }}</a>{{- "" -}}
<a class="result-detail-previous" href="#">{{ icon_small('chevron-left') }}</a>{{- "" -}}
<a class="result-detail-next" href="#">{{ icon_small('chevron-right') }}</a>{{- "" -}}
<a class="result-images-source" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">
{%- if result.thumbnail_src -%}
<img src="" data-src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}">
{%- else -%}
<img src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" loading="lazy">
{%- endif -%}
</a>{{- "" -}}
<div class="result-images-labels">{{- "" -}}
<h4>{{ result.title|striptags }}</h4>{{- "" -}}
<p class="result-content">{%- if result.content %}{{ result.content|striptags }}{% else %}&nbsp;{% endif -%}</p>{{- "" -}}
<hr>{{- "" -}}
<p class="result-author">{%- if result.author %}<span>{{ _('Author') }}:</span>{{ result.author|striptags }}{% else %}&nbsp;{% endif -%}</p>{{- "" -}}
<p class="result-format">{%- if result.img_format %}<span>{{ _('Format') }}:</span>{{ result.img_format }}{% else %}&nbsp;{% endif -%}</p>{{- "" -}}
<p class="result-source">{%- if result.source %}<span>{{ _('Source') }}:</span>{{ result.source }}{% else %}&nbsp;{% endif -%}</p>{{- "" -}}
<p class="result-engine"><span>{{ _('Engine') }}:</span>{{ result.engine }}</p>{{- "" -}}{{- "" -}}
<p class="result-url"><span>{{ _('View source') }}:</span><a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.url }}">{{ result.url }}</a></p>{{- "" -}}
</div>{{- "" -}}
</div>{{- "" -}}
</article> </article>