[feat] search: shift/ctrl click a category to select multiple categories

1 files changed, 39 insertions, 14 deletions

diff --git a/searx/static/themes/simple/src/js/main/search.js b/searx/static/themes/simple/src/js/main/search.js
index 46756507e..bc0f8b428 100644
--- a/searx/static/themes/simple/src/js/main/search.js
+++ b/searx/static/themes/simple/src/js/main/search.js
@@ -166,21 +166,46 @@
       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");
-        })
-      }
+    // remove CSS class that's only needed when the browser supports no JavaScript
+    const categoriesContainer = d.querySelector("#categories_container");
+    if (categoriesContainer) {
+      categoriesContainer.classList.remove("nojs");
+    }
+
+    const categoryButtons = d.querySelectorAll("button.category_button");
+    for (let button of categoryButtons) {
+      searxng.on(button, 'click', (event) => {
+        if (event.shiftKey) {
+          event.preventDefault();
+          button.classList.toggle("selected");
+          return;
+        }
+
+        // manually deselect the old selection when a new category is selected
+        const selectedCategories = d.querySelectorAll("button.category_button.selected");
+        for (let categoryButton of selectedCategories) {
+          categoryButton.classList.remove("selected");
+        }
+        button.classList.add("selected");
+      })
     }
+
+    // override form submit action to update the actually selected categories
+    const form = d.querySelector("#search");
+    searxng.on(form, 'submit', (event) => {
+      event.preventDefault();
+      const categoryValuesInput = d.querySelector("#selected-categories");
+      if (categoryValuesInput) {
+        let categoryValues = [];
+        for (let categoryButton of categoryButtons) {
+          if (categoryButton.classList.contains("selected")) {
+            categoryValues.push(categoryButton.name.replace("category_", ""));
+          }
+        }
+        categoryValuesInput.value = categoryValues.join(",");
+      }
+      form.submit();
+    });
   });
 
 })(window, document, window.searxng);