update js and less

beetroot_static/src/js/main/keyboard.js

@@ -55,26 +55,14 @@ searxng.ready(function () {
     }
   }, true);
 
-  // these bindings are always on
-  var keyBindings = {
+  /* common base for layouts */
+  var baseKeyBinding = {
     'Escape': {
       key: 'ESC',
       fun: removeFocus,
       des: 'remove focus from the focused input',
       cat: 'Control'
     },
-    'ArrowLeft': {
-      key: '⬅',
-      fun: highlightResult('up'),
-      des: 'Use left arrow to select previous search result',
-      cat: 'Results'
-    },
-    'ArrowRight': {
-      key: '➡',
-      fun: highlightResult('down'),
-      des: 'Use right arrow to select next search result',
-      cat: 'Results'
-    },
     'h': {
       key: 'h',
       fun: toggleHelp,
@@ -117,10 +105,27 @@ searxng.ready(function () {
       des: 'open the result in a new tab',
       cat: 'Results'
     },
-  }
+  };
+  var keyBindingLayouts = {
 
-  // these bindings are enabled by user preferences
-  var vimKeys = {
+    "default": Object.assign(
+      { /* SearXNG layout */
+        'ArrowLeft': {
+          key: '←',
+          fun: highlightResult('up'),
+          des: 'select previous search result',
+          cat: 'Results'
+        },
+        'ArrowRight': {
+          key: '→',
+          fun: highlightResult('down'),
+          des: 'select next search result',
+          cat: 'Results'
+        },
+      }, baseKeyBinding),
+
+    'vim': Object.assign(
+      { /* Vim-like Key Layout. */
         'b': {
           key: 'b',
           fun: scrollPage(-window.innerHeight),
@@ -169,13 +174,11 @@ searxng.ready(function () {
           des: 'select next search result',
           cat: 'Results'
         },
-  };
-
-  if (searxng.settings.hotkeys) {
-    // To add Vim-like key bindings, merge the 'vimKeys' into 'keyBindings'.
-    Object.assign(keyBindings, vimKeys);
+      }, baseKeyBinding)
   }
 
+  var keyBindings = keyBindingLayouts[searxng.settings.hotkeys] || keyBindingLayouts.default;
+
   searxng.on(document, "keydown", function (e) {
     // check for modifiers so we don't break browser's hotkeys
     if (

beetroot_static/src/js/main/results.js

@@ -16,6 +16,10 @@
           }
         ));
 
+    if (d.querySelector('#search_url button#copy_url')) {
+      d.querySelector('#search_url button#copy_url').style.display = "block";
+    }
+
     searxng.on('.btn-collapse', 'click', function () {
       var btnLabelCollapsed = this.getAttribute('data-btn-text-collapsed');
       var btnLabelNotCollapsed = this.getAttribute('data-btn-text-not-collapsed');
@@ -41,6 +45,12 @@
       }
     });
 
+    searxng.on('#copy_url', 'click', function () {
+      var target = this.parentElement.querySelector('pre');
+      navigator.clipboard.writeText(target.innerText);
+      this.innerText = this.dataset.copiedText;
+    });
+
     searxng.selectImage = function (resultElement) {
       /* eslint no-unused-vars: 0 */
       if (resultElement) {

beetroot_static/src/js/main/search.js

@@ -150,29 +150,37 @@
       }
     }
 
-    // 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;
-      });
-
+    // Additionally to searching when selecting a new category, we also
+    // automatically start a new search request when the user changes a search
+    // filter (safesearch, time range or language) (this requires JavaScript
+    // though)
+    if (
+      qinput !== null
+        && searxng.settings.search_on_category_select
+      // If .search_filters is undefined (invisible) we are on the homepage and
+      // hence don't have to set any listeners
+        && d.querySelector(".search_filters") != null
+    ) {
       searxng.on(d.getElementById('safesearch'), 'change', submitIfQuery);
       searxng.on(d.getElementById('time_range'), 'change', submitIfQuery);
       searxng.on(d.getElementById('language'), 'change', submitIfQuery);
     }
 
+    // most common browsers at the time of writing this support :has, except for Firefox
+    // can be removed when Firefox / Firefox ESL starts supporting it as well
+    try {
+      // this fails when the browser does not support :has
+      d.querySelector("html:has(body)");
+    } catch (_) {
+      // manually deselect the old selection when a new category is selected
+      for (let button of d.querySelectorAll("button.category_button")) {
+        searxng.on(button, 'click', () => {
+          const selected = d.querySelector("button.category_button.selected");
+          console.log(selected);
+          selected.classList.remove("selected");
+        })
+      }
+    }
   });
 
 })(window, document, window.searxng);

beetroot_static/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,7 +60,37 @@
   }
 }
 
+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;
+  }
+
+  &.selected,
+  &:active,
+  &:focus-within {
+    color: var(--color-categories-item-selected-font);
+    border-bottom: 2px solid var(--color-categories-item-border-selected);
+  }
+}
+
+#categories_container:has(button.category_button:focus-within) button.category_button.selected {
+  color: var(--color-base-font);
+  border-bottom: none;
+}
+
 #search_logo {
+  padding: 0.5rem 10px 0 10px;
   grid-area: logo;
   display: flex;
   align-items: center;
@@ -90,7 +123,12 @@
 }
 
 #search_view {
+  padding: 0.5rem 0.3rem 0 0.5rem;
   grid-area: search;
+
+  body.results_endpoint & {
+    padding: 0.5rem 2.8rem 0 0;
+  }
 }
 
 .search_box {
@@ -205,11 +243,6 @@ html.no-js #clear_search.hide_if_nojs {
   #categories {
     font-size: 90%;
     clear: both;
-
-    .checkbox_container {
-      margin: auto;
-      margin-top: 2px;
-    }
   }
 }
 
@@ -219,7 +252,7 @@ html.no-js #clear_search.hide_if_nojs {
     #categories_container {
       width: max-content;
 
-      .category {
+      .category_checkbox {
         display: inline-block;
         width: auto;
       }
@@ -254,7 +287,6 @@ html.no-js #clear_search.hide_if_nojs {
   .search_box {
     width: 98%;
     display: flex;
-    margin: 0 auto;
   }
 
   #q {
@@ -263,7 +295,8 @@ html.no-js #clear_search.hide_if_nojs {
   }
 
   .search_filters {
-    margin: 0;
+    margin: 0 10px;
+    padding: 0.5rem 0;
   }
 
   .category {
@@ -271,14 +304,21 @@ html.no-js #clear_search.hide_if_nojs {
     width: auto;
     margin: 0;
 
-    label {
-      padding: 1rem !important;
-      margin: 0 !important;
-
     svg {
       display: none;
     }
   }
+
+  .category_checkbox {
+    label {
+      padding: 1rem !important;
+      margin: 0 !important;
+    }
+  }
+
+  .category_button {
+    padding: 1rem !important;
+    margin: 0 !important;
   }
 
   #search_view:focus-within {

beetroot_static/src/less/style.less

@@ -522,8 +522,7 @@ article[data-vim-selected].category-social {
     "pagination sidebar";
 }
 
-#results #sidebar *:first-child,
-#results #urls *:first-child {
+#results #sidebar *:first-child {
   margin-top: 0;
 }
 
@@ -731,16 +730,25 @@ summary.title {
 #search_url {
   div.selectable_url {
     pre {
+      float: left;
       width: 200em;
     }
   }
+
+  button#copy_url {
+    float: right;
+    padding: 0.4rem;
+    margin-left: 0.5rem;
+    border-radius: 0.3rem;
+    display: none;    // will be shown by JS.
+  }
 }
 
 #links_on_top {
   position: absolute;
-  .ltr-right(1.8rem);
+  .ltr-right(1rem);
   .ltr-text-align-right();
-  top: 2.2rem;
+  top: 2.7rem;
   padding: 0;
   border: 0;
   display: flex;
@@ -920,7 +928,7 @@ summary.title {
   }
 
   #main_results div#results {
-    margin: 1rem auto 0 auto;
+    margin: 0 auto;
     justify-content: center;
     display: grid;
     grid-template-columns: @results-width;
@@ -1017,12 +1025,12 @@ summary.title {
 
   #main_results div#results {
     grid-template-columns: 100%;
-    margin: 1rem 0 0 0;
+    margin: 0 auto;
   }
 
   #links_on_top {
-    top: 0.8rem;
-    .ltr-right(0.7rem);
+    top: 1.4rem;
+    .ltr-right(10px);
   }
 
   #main_index #links_on_top {
@@ -1046,7 +1054,9 @@ summary.title {
 
   .result {
     background: var(--color-result-background);
-    margin: 1rem 0;
+    border: 1px solid var(--color-result-background);
+    margin: 1rem 10px;
+    .rounded-corners;
   }
 
   .result-images {

beetroot_static/src/less/toolkit.less

@@ -176,6 +176,15 @@ div.selectable_url {
   border-color: var(--color-error);
 }
 
+.dialog-error-block {
+  .dialog();
+
+  display: block;
+  color: var(--color-error);
+  background: var(--color-error-background);
+  border-color: var(--color-error);
+}
+
 .dialog-warning {
   .dialog();