[fix] make autofocus configurable (#1984) (#3285)

* [fix] make autofocus configurable (#1984)

"Results page: having text cursor still in search field is annoying #1984"

Allows autofocus on the results page to be configured either in the UI
or in the searx server config.

* fix commented code

Co-authored-by: Ben Collerson <benc@benon.com>

searx/preferences.py

@@ -344,6 +344,16 @@ class Preferences:
                 is_locked('autocomplete'),
                 choices=list(autocomplete.backends.keys()) + ['']
             ),
+            'autofocus': MapSetting(
+                settings['ui'].get('autofocus', True),
+                is_locked('autofocus'),
+                map={
+                    '0': False,
+                    '1': True,
+                    'False': False,
+                    'True': True
+                }
+            ),
             'image_proxy': MapSetting(
                 settings['server'].get('image_proxy', False),
                 is_locked('image_proxy'),

searx/settings.yml

@@ -37,6 +37,7 @@ server:
         Referrer-Policy : no-referrer
 
 ui:
+    autofocus : True # Autofocus search input
     static_path : "" # Custom static path - leave it blank if you didn't change
     templates_path : "" # Custom templates path - leave it blank if you didn't change
     default_theme : oscar # ui theme

searx/static/themes/simple/css/searx-rtl.css

@@ -1,4 +1,4 @@
-/*! searx | 23-03-2021 |  */
+/*! searx | 25-07-2022 | https://github.com/searx/searx */
 /*
 * searx, A privacy-respecting, hackable metasearch engine
 *
@@ -1902,6 +1902,30 @@ article.result-images[data-vim-selected]::before {
   background-color: rgba(0, 0, 0, 0.6);
   font-size: 0.7em;
 }
+.result-map img.image {
+  float: right !important;
+  height: 100px !important;
+  width: auto !important;
+}
+.result-map table {
+  font-size: .9em;
+  width: auto;
+  border-collapse: separate;
+  border-spacing: 0 0.35rem;
+}
+.result-map table th {
+  font-weight: inherit;
+  width: 17rem;
+  vertical-align: top;
+  text-align: left;
+}
+.result-map table td {
+  vertical-align: top;
+  text-align: left;
+}
+.hidden {
+  display: none !important;
+}
 .torrent_result {
   border-left: 10px solid lightgray;
   padding-left: 3px;

searx/static/themes/simple/css/searx.css

@@ -1,4 +1,4 @@
-/*! searx | 23-03-2021 |  */
+/*! searx | 25-07-2022 | https://github.com/searx/searx */
 /*
 * searx, A privacy-respecting, hackable metasearch engine
 *
@@ -1902,6 +1902,30 @@ article.result-images[data-vim-selected]::before {
   background-color: rgba(0, 0, 0, 0.6);
   font-size: 0.7em;
 }
+.result-map img.image {
+  float: right !important;
+  height: 100px !important;
+  width: auto !important;
+}
+.result-map table {
+  font-size: .9em;
+  width: auto;
+  border-collapse: separate;
+  border-spacing: 0 0.35rem;
+}
+.result-map table th {
+  font-weight: inherit;
+  width: 17rem;
+  vertical-align: top;
+  text-align: left;
+}
+.result-map table td {
+  vertical-align: top;
+  text-align: left;
+}
+.hidden {
+  display: none !important;
+}
 .torrent_result {
   border-left: 10px solid lightgray;
   padding-left: 3px;

searx/static/themes/simple/js/searx.head.min.js

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

searx/static/themes/simple/js/searx.js

@@ -1235,7 +1235,7 @@ module.exports = AutoComplete;
 (function(w, d, searx) {
   'use strict';
 
-  var firstFocus = true, qinput_id = "q", qinput;
+  var firstFocus = true, qinput_id = "q.autofocus", qinput;
 
   function placeCursorAtEnd(element) {
     if (element.setSelectionRange) {

searx/static/themes/simple/js/searx_src/searx_search.js

@@ -17,7 +17,7 @@
 (function(w, d, searx) {
   'use strict';
 
-  var firstFocus = true, qinput_id = "q", qinput;
+  var firstFocus = true, qinput_id = "q.autofocus", qinput;
 
   function placeCursorAtEnd(element) {
     if (element.setSelectionRange) {

searx/templates/oscar/preferences.html

@@ -150,6 +150,17 @@
                     {{ preferences_item_footer(info, label, rtl) }}
                     {% endif %}
 
+                    {% if 'autofocus' not in locked_preferences %}
+                    {% set label = _('Autofocus search field') %}
+                    {% set info = _('Turn off if you use your keyboard to scroll') %}
+                    {{ preferences_item_header(info, label, rtl, 'autofocus') }}
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="autofocus" id="autofocus">
+                            <option value="1" {% if autofocus %}selected="selected"{% endif %}>{{ _('On') }}</option>
+                            <option value="0" {% if not autofocus %}selected="selected"{% endif %}>{{ _('Off')}}</option>
+                        </select>
+                    {{ preferences_item_footer(info, label, rtl) }}
+                    {% endif %}
+
                     {% set label = _('Show advanced settings') %}
                     {% set info = _('Show advanced settings panel in the home page by default') %}
                     {{ preferences_item_header(info, label, rtl, 'advanced_search') }}

searx/templates/oscar/search.html

@@ -3,7 +3,7 @@
   <div class="row">
     <div class="col-xs-12 col-md-8">
       <div class="input-group search-margin">
-        <input type="search" autofocus name="q" class="form-control" id="q" placeholder="{{ _('Search for...') }}" aria-label="{{ _('Search for...') }}" autocomplete="off" value="{{ q }}" accesskey="s">
+        <input type="search" {% if autofocus %}autofocus{% endif %} name="q" class="form-control" id="q" placeholder="{{ _('Search for...') }}" aria-label="{{ _('Search for...') }}" autocomplete="off" value="{{ q }}" accesskey="s">
         <span class="input-group-btn">
             <button type="submit" class="btn btn-default" aria-label="{{ _('Start search') }}"><span class="hide_if_nojs">{{ icon('search') }}</span><span class="hidden active_if_nojs">{{ _('Start search') }}</span></button>
 	    <button type="button" id="clear_search" class="btn btn-default hide_if_nojs" aria-label="{{ _('Clear search') }}">{{ icon('remove') }}</button>

searx/templates/simple/preferences.html

@@ -188,6 +188,18 @@
     <div class="description">{{_('Open result links on new browser tabs') }}</div>
   </fieldset>
   {% endif %}
+  {% if 'autofocus' not in locked_preferences %}
+  <fieldset>
+    <legend>{{ _('Autofocus search field') }}</legend>
+    <p class="value">
+      <select name='autofocus'>
+        <option value="1" {% if autofocus %}selected="selected"{% endif %}>{{ _('On') }}</option>
+        <option value="0" {% if not autofocus %}selected="selected"{% endif %}>{{ _('Off')}}</option>
+      </select>
+    </p>
+    <div class="description">{{_('Turn off if you use your keyboard to scroll') }}</div>
+  </fieldset>
+  {% endif %}
   {{ plugin_preferences('ui') }}
   {{ tab_footer() }}
 

searx/templates/simple/search.html

@@ -1,7 +1,7 @@
 <form id="search" method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
   <div id="search_wrapper">
     <div class="search_box">
-      <input id="q" autofocus name="q" type="text" placeholder="{{ _('Search for...') }}" tabindex="1" autocomplete="off" spellcheck="false" dir="auto" {% if q %}value="{{ q }}"{% endif %} >
+      <input id="q" {% if autofocus %}autofocus{% endif %} name="q" type="text" placeholder="{{ _('Search for...') }}" tabindex="1" autocomplete="off" spellcheck="false" dir="auto" {% if q %}value="{{ q }}"{% endif %} >
       <button id="clear_search" type="button" tabindex="-1"><span class="hide_if_nojs">{{ icon('close') }}</span><span class="show_if_nojs">{{ _('Clear search') }}</span></button>
       <button id="send_search" type="submit" tabindex="-1"><span class="hide_if_nojs">{{ icon('search') }}</span><span class="show_if_nojs">{{ _('Start search') }}</span></button>
     </div>

searx/webapp.py

@@ -387,6 +387,8 @@ def render(template_name, override_theme=None, **kwargs):
 
     kwargs['method'] = request.preferences.get_value('method')
 
+    kwargs['autofocus'] = request.preferences.get_value('autofocus')
+
     kwargs['safesearch'] = str(request.preferences.get_value('safesearch'))
 
     kwargs['language_codes'] = languages