From 3de28b283a2eb61a04138bf5d5a841124fa65b74 Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Sat, 2 Jul 2022 21:09:26 +0200 Subject: [PATCH] Theme: implement search_on_category_select as a preference The implementation is change to work without javascript: When enabled, the HTML page contains buttons instead of checkboxes. * Related to https://github.com/searxng/searxng/issues/769#issuecomment-1132481995 * Fix https://github.com/searxng/searxng/issues/854 --- searx/plugins/search_on_category_select.py | 24 --------- searx/preferences.py | 11 ++++ searx/settings.yml | 3 ++ searx/settings_defaults.py | 1 + .../themes/simple/src/js/main/search.js | 21 ++------ .../static/themes/simple/src/less/search.less | 54 +++++++++++++++---- searx/templates/simple/categories.html | 13 ++++- searx/templates/simple/preferences.html | 12 +++++ searx/webapp.py | 3 +- 9 files changed, 87 insertions(+), 55 deletions(-) delete mode 100644 searx/plugins/search_on_category_select.py diff --git a/searx/plugins/search_on_category_select.py b/searx/plugins/search_on_category_select.py deleted file mode 100644 index 85b73a9bd..000000000 --- a/searx/plugins/search_on_category_select.py +++ /dev/null @@ -1,24 +0,0 @@ -''' -searx is free software: you can redistribute it and/or modify -it under the terms of the GNU Affero General Public License as published by -the Free Software Foundation, either version 3 of the License, or -(at your option) any later version. - -searx is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -GNU Affero General Public License for more details. - -You should have received a copy of the GNU Affero General Public License -along with searx. If not, see < http://www.gnu.org/licenses/ >. - -(C) 2015 by Adam Tauber, -''' -from flask_babel import gettext - -name = gettext('Search on category select') -description = gettext( - 'Perform search immediately if a category selected. Disable to select multiple categories. (JavaScript required)' -) -default_on = True -preference_section = 'ui' diff --git a/searx/preferences.py b/searx/preferences.py index a7ecac55e..7175a46c6 100644 --- a/searx/preferences.py +++ b/searx/preferences.py @@ -408,6 +408,17 @@ class Preferences: 'False': False } ), + 'search_on_category_select': MapSetting( + settings['ui']['search_on_category_select'], + locked=is_locked('search_on_category_select'), + map={ + '': settings['ui']['search_on_category_select'], + '0': False, + '1': True, + 'True': True, + 'False': False + } + ), # fmt: on } diff --git a/searx/settings.yml b/searx/settings.yml index 5757a4160..e6a18b111 100644 --- a/searx/settings.yml +++ b/searx/settings.yml @@ -90,6 +90,9 @@ ui: default_locale: "" # Open result links in a new tab by default # results_on_new_tab: false + # Search when the user clicks category name + # false to allow the user to select multiple categories + search_on_category_select: true theme_args: # style of simple theme: auto, light, dark simple_style: auto diff --git a/searx/settings_defaults.py b/searx/settings_defaults.py index ccbbbf287..76e2989a9 100644 --- a/searx/settings_defaults.py +++ b/searx/settings_defaults.py @@ -189,6 +189,7 @@ SCHEMA = { 'advanced_search': SettingsValue(bool, False), 'query_in_title': SettingsValue(bool, False), 'infinite_scroll': SettingsValue(bool, False), + 'search_on_category_select': SettingsValue(bool, True), }, 'preferences': { 'lock': SettingsValue(list, []), diff --git a/searx/static/themes/simple/src/js/main/search.js b/searx/static/themes/simple/src/js/main/search.js index 97c9ea541..e011a89fe 100644 --- a/searx/static/themes/simple/src/js/main/search.js +++ b/searx/static/themes/simple/src/js/main/search.js @@ -73,24 +73,9 @@ } } - // vanilla js version of search_on_category_select.js - if (qinput !== null && d.querySelector('.help') != null && searxng.settings.search_on_category_select) { - d.querySelector('.help').className = 'invisible'; - - searxng.on('#categories input', 'change', function () { - var i, categories = d.querySelectorAll('#categories input[type="checkbox"]'); - for (i = 0; i < categories.length; i++) { - if (categories[i] !== this && categories[i].checked) { - categories[i].click(); - } - } - if (! this.checked) { - this.click(); - } - submitIfQuery(); - return false; - }); - + // when search_on_category_select is enabled, autosubmit the query when the user + // change the filters (safesearch, time_range, language) + if (qinput !== null && searxng.settings.search_on_category_select) { searxng.on(d.getElementById('safesearch'), 'change', submitIfQuery); searxng.on(d.getElementById('time_range'), 'change', submitIfQuery); searxng.on(d.getElementById('language'), 'change', submitIfQuery); diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index e70ef30ad..077953764 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -23,12 +23,15 @@ "spacer categories"; } -.category { +.category_checkbox, +.category_button { display: inline-block; position: relative; .ltr-margin-right(1rem); padding: 0; +} +.category_checkbox { input { display: none; } @@ -57,6 +60,33 @@ } } +button.category_button { + background-color: inherit; + color: var(--color-base-font); + cursor: pointer; + padding: 0.2rem 0; + display: inline-flex; + align-items: center; + text-transform: capitalize; + font-size: 0.9em; + border: none; + border-bottom: 2px solid transparent; + + svg { + padding-right: 0.2rem; + } + + &:focus-within { + outline: 2px solid blue; + } + + &.selected, + &:active { + color: var(--color-categories-item-selected-font); + border-bottom: 2px solid var(--color-categories-item-border-selected); + } +} + #search_logo { grid-area: logo; display: flex; @@ -205,11 +235,6 @@ html.no-js #clear_search.hide_if_nojs { #categories { font-size: 90%; clear: both; - - .checkbox_container { - margin: auto; - margin-top: 2px; - } } } @@ -219,7 +244,7 @@ html.no-js #clear_search.hide_if_nojs { #categories_container { width: max-content; - .category { + .category_checkbox { display: inline-block; width: auto; } @@ -271,16 +296,23 @@ html.no-js #clear_search.hide_if_nojs { width: auto; margin: 0; + svg { + display: none; + } + } + + .category_checkbox { label { padding: 1rem !important; margin: 0 !important; - - svg { - display: none; - } } } + .category_button { + padding: 1rem !important; + margin: 0 !important; + } + #search_view:focus-within { display: block; background-color: var(--color-search-background); diff --git a/searx/templates/simple/categories.html b/searx/templates/simple/categories.html index cee9f1e35..bfb492bbc 100644 --- a/searx/templates/simple/categories.html +++ b/searx/templates/simple/categories.html @@ -13,8 +13,10 @@ } -%}
{{- '' -}}
+ {%- if not search_on_category_select or not display_tooltip -%} {%- for category in categories_as_tabs -%} -
+
{{- '' -}} +
{%- endfor -%} {%- if display_tooltip %}
{{ _('Click on the magnifier to perform search') }}
{% endif -%} + {%- else -%} + {%- for category in categories_as_tabs -%}{{- '\n' -}} + {{- '' -}} + {%- endfor -%} + {{- '\n' -}} + {%- endif -%}
{{- '' -}}
diff --git a/searx/templates/simple/preferences.html b/searx/templates/simple/preferences.html index aa0e65e28..a1a0f485b 100644 --- a/searx/templates/simple/preferences.html +++ b/searx/templates/simple/preferences.html @@ -248,6 +248,18 @@
{{ _('Automatically load next page when scrolling to bottom of current page') }}
{% endif %} + {% if 'search_on_category_select' not in locked_preferences %} +
+ {{ _('Search on category select') }} +

+ +

+
{{ _('Perform search immediately if a category selected. Disable to select multiple categories. (JavaScript required)') }}
+
+ {% endif %} {{ plugin_preferences('ui') }} {{ tab_footer() }} diff --git a/searx/webapp.py b/searx/webapp.py index d4fb1c7dc..02e6372b2 100755 --- a/searx/webapp.py +++ b/searx/webapp.py @@ -395,7 +395,7 @@ def get_client_settings(): 'http_method': req_pref.get_value('method'), 'infinite_scroll': req_pref.get_value('infinite_scroll'), 'translations': get_translations(), - 'search_on_category_select': req_pref.plugins.choices['searx.plugins.search_on_category_select'], + 'search_on_category_select': req_pref.get_value('search_on_category_select'), 'hotkeys': req_pref.plugins.choices['searx.plugins.vim_hotkeys'], 'theme_static_path': custom_url_for('static', filename='themes/simple'), } @@ -422,6 +422,7 @@ def render(template_name: str, **kwargs): kwargs['preferences'] = request.preferences kwargs['autocomplete'] = request.preferences.get_value('autocomplete') kwargs['infinite_scroll'] = request.preferences.get_value('infinite_scroll') + kwargs['search_on_category_select'] = request.preferences.get_value('search_on_category_select') kwargs['results_on_new_tab'] = request.preferences.get_value('results_on_new_tab') kwargs['advanced_search'] = request.preferences.get_value('advanced_search') kwargs['query_in_title'] = request.preferences.get_value('query_in_title')