summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--searx/static/themes/__common__/js/image_layout.js15
-rw-r--r--searx/static/themes/oscar/src/js/element_modifiers.js2
-rw-r--r--searx/static/themes/simple/src/js/main/searx_keyboard.js20
-rw-r--r--searx/static/themes/simple/src/js/main/searx_results.js69
-rw-r--r--searx/static/themes/simple/src/less/definitions.less20
-rw-r--r--searx/static/themes/simple/src/less/detail.less243
-rw-r--r--searx/static/themes/simple/src/less/style.less16
-rw-r--r--searx/templates/simple/result_templates/images.html30
8 files changed, 387 insertions, 28 deletions
diff --git a/searx/static/themes/__common__/js/image_layout.js b/searx/static/themes/__common__/js/image_layout.js
index fa96f62c5..653da95a0 100644
--- a/searx/static/themes/__common__/js/image_layout.js
+++ b/searx/static/themes/__common__/js/image_layout.js
@@ -11,11 +11,12 @@
*/
(function (w, d) {
- function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
+ function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
this.container_selector = container_selector;
this.results_selector = results_selector;
this.img_selector = img_selector;
- this.margin = margin;
+ this.verticalMargin = verticalMargin;
+ this.horizontalMargin = horizontalMargin;
this.maxHeight = maxHeight;
this.isAlignDone = true;
}
@@ -45,7 +46,7 @@
}
}
- return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
+ return (width - images.length * this.verticalMargin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
};
ImageLayout.prototype._setSize = function (images, height) {
@@ -62,10 +63,10 @@
}
img.style.width = imgWidth + 'px';
img.style.height = height + 'px';
- img.style.marginLeft = '3px';
- img.style.marginTop = '3px';
- img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
- img.style.marginBottom = this.margin - 7 + 'px';
+ img.style.marginLeft = this.horizontalMargin + 'px';
+ img.style.marginTop = this.horizontalMargin + 'px';
+ img.style.marginRight = this.verticalMargin - 7 + 'px'; // -4 is the negative margin of the inline element
+ img.style.marginBottom = this.verticalMargin - 7 + 'px';
resultNode = img.parentNode.parentNode;
if (!resultNode.classList.contains('js')) {
resultNode.classList.add('js');
diff --git a/searx/static/themes/oscar/src/js/element_modifiers.js b/searx/static/themes/oscar/src/js/element_modifiers.js
index e9de297e0..dff1a5e97 100644
--- a/searx/static/themes/oscar/src/js/element_modifiers.js
+++ b/searx/static/themes/oscar/src/js/element_modifiers.js
@@ -103,6 +103,6 @@ $(document).ready(function(){
/**
* 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();
});
diff --git a/searx/static/themes/simple/src/js/main/searx_keyboard.js b/searx/static/themes/simple/src/js/main/searx_keyboard.js
index c00a1a45e..394f97730 100644
--- a/searx/static/themes/simple/src/js/main/searx_keyboard.js
+++ b/searx/static/themes/simple/src/js/main/searx_keyboard.js
@@ -4,7 +4,7 @@
searxng.ready(function() {
searxng.on('.result', 'click', function() {
- highlightResult(this)(true);
+ highlightResult(this)(true);
});
searxng.on('.result a', 'focus', function(e) {
@@ -124,9 +124,7 @@ searxng.ready(function() {
if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
var tagName = e.target.tagName.toLowerCase();
if (e.keyCode === 27) {
- if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') {
- vimKeys[e.keyCode].fun();
- }
+ vimKeys[e.keyCode].fun(e);
} else {
if (e.target === document.body || tagName === 'a' || tagName === 'button') {
e.preventDefault();
@@ -213,9 +211,12 @@ searxng.ready(function() {
document.location.reload(true);
}
- function removeFocus() {
- if (document.activeElement) {
+ function removeFocus(e) {
+ const tagName = e.target.tagName.toLowerCase();
+ if (document.activeElement && (tagName === 'input' || tagName === 'select' || tagName === 'textarea')) {
document.activeElement.blur();
+ } else {
+ searxng.closeDetail();
}
}
@@ -285,6 +286,9 @@ searxng.ready(function() {
function openResult(newTab) {
return function() {
var link = document.querySelector('.result[data-vim-selected] h3 a');
+ if (link === null) {
+ link = document.querySelector('.result[data-vim-selected] > a');
+ }
if (link !== null) {
var url = link.getAttribute('href');
if (newTab) {
@@ -368,4 +372,8 @@ searxng.ready(function() {
return;
}
}
+
+ searxng.scrollPageToSelected = scrollPageToSelected;
+ searxng.selectNext = highlightResult('down');
+ searxng.selectPrevious = highlightResult('up');
});
diff --git a/searx/static/themes/simple/src/js/main/searx_results.js b/searx/static/themes/simple/src/js/main/searx_results.js
index 79af25af8..5ccbb38b5 100644
--- a/searx/static/themes/simple/src/js/main/searx_results.js
+++ b/searx/static/themes/simple/src/js/main/searx_results.js
@@ -3,7 +3,7 @@
'use strict';
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.on('.btn-collapse', 'click', function() {
@@ -31,17 +31,74 @@
}
});
+ function selectImage(e) {
+ /*eslint no-unused-vars: 0*/
+ let t = e.target;
+ while (t && t.nodeName != 'ARTICLE') {
+ t = t.parentNode;
+ }
+ if (t) {
+ // 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;
+ scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
+ results = d.getElementById('results');
if (e !== null) {
- if (scrollTop >= 200) {
- e.style.opacity = 1;
+ if (scrollTop >= 100) {
+ results.classList.add('scrolling');
} else {
- e.style.opacity = 0;
+ results.classList.remove('scrolling');
}
}
- });
+ }, true);
});
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 9caf4f3f5..6a199b56b 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -71,6 +71,14 @@ html {
/// Settings Colors
--color-settings-tr-hover: #f7f7f7;
--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
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
@@ -156,6 +164,14 @@ html {
--color-result-engines-font: #777;
--color-result-search-url-border: #333;
--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
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
@@ -183,8 +199,8 @@ html {
--color-toolkit-engine-tooltip-border: #333;
--color-toolkit-engine-tooltip-shadow: #444;
--color-toolkit-engine-tooltip-background: #222;
- --color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
- --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
+ --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
+ --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
}
}
diff --git a/searx/static/themes/simple/src/less/detail.less b/searx/static/themes/simple/src/less/detail.less
new file mode 100644
index 000000000..6c4022765
--- /dev/null
+++ b/searx/static/themes/simple/src/less/detail.less
@@ -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;
+ }
+ }
+}
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 261e36792..ea95e3682 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -16,6 +16,7 @@
@import "code.less";
@import "toolkit.less";
@import "autocomplete.less";
+@import "detail.less";
// for index.html template
@import "index.less";
@@ -138,6 +139,10 @@ article[data-vim-selected]::before {
article.result-images[data-vim-selected] {
background: var(--color-result-vim-arrow);
+
+ .image_thumbnail {
+ filter: opacity(60%);
+ }
}
article.result-images[data-vim-selected]::before {
@@ -283,25 +288,26 @@ article.result-images[data-vim-selected]::before {
img {
float: inherit;
- margin: 0;
+ margin: 0.125rem;
padding: 0;
border: none;
max-height: 200px;
background: var(--color-result-image-background);
}
- span a {
+ span.title {
display: none;
color: var(--color-result-image-span-font);
}
- &:hover span a {
+ &:hover span.title {
display: block;
position: absolute;
bottom: 0;
right: 0;
padding: 4px;
margin: 0 0 4px 4px;
+ // color: @color-result-image-span-font;
background-color: var(--color-result-image-span-background-hover);
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) {
#main_preferences,
#main_about,
diff --git a/searx/templates/simple/result_templates/images.html b/searx/templates/simple/result_templates/images.html
index f756acbe3..0f3069c98 100644
--- a/searx/templates/simple/result_templates/images.html
+++ b/searx/templates/simple/result_templates/images.html
@@ -1,4 +1,28 @@
-<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>
- <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>
+<article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">{{- "" -}}
+ <a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">{{- "" -}}
+ <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>
7apu2bq3rhoylwmucxizk54afw5jyda7pho4j5zdcqpwkufke7zdzwad.onion