Seperated SearX and SearXNG in code #120

2 files changed, 100 insertions, 11 deletions

diff --git a/src/pages/options/search/search.html b/src/pages/options/search/search.html
index 3ad8353c..a90ad8ed 100644
--- a/src/pages/options/search/search.html
+++ b/src/pages/options/search/search.html
@@ -138,6 +138,7 @@
       <h4 id="frontend" data-localise="__MSG_frontend__">Frontend</h4>
       <select id="search-frontend">
         <option value="searx">SearX</option>
+        <option value="searxng">SearXNG</option>
         <option value="whoogle">Whoogle</option>
         <option value="startpage">Startpage</option>
       </select>
@@ -211,6 +212,58 @@
       </div>
     </div>
 
+    <div id="searxng">
+      <hr>
+      <div id="searxng-normal">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist" id="searxng-normal-checklist">
+        </div>
+        <hr>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+        </div>
+        <form id="custom-searxng-normal-instance-form">
+          <div class="some-block option-block">
+            <input id="searxng-normal-custom-instance" placeholder="https://searxng.com" type="url" />
+            <button type="submit" class="add" id="searxng-normal-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="searxng-normal-custom-checklist"></div>
+      </div>
+      <div id="searxng-tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist" id="searxng-tor-checklist">
+        </div>
+        <hr>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+        </div>
+        <form id="custom-searxng-tor-instance-form">
+          <div class="some-block option-block">
+            <input id="searxng-tor-custom-instance" placeholder="https://searxng.com" type="url" />
+            <button type="submit" class="add" id="searxng-tor-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="searxng-tor-custom-checklist"></div>
+      </div>
+    </div>
+
     <div id="whoogle">
       <hr>
       <div id="whoogle-normal">
@@ -264,8 +317,6 @@
     </div>
     </div>
 
-
-
   </section>
 
 
diff --git a/src/pages/options/search/search.js b/src/pages/options/search/search.js
index 68ae017f..cc4a44ea 100644
--- a/src/pages/options/search/search.js
+++ b/src/pages/options/search/search.js
@@ -2,13 +2,12 @@ import searchHelper from "../../../assets/javascripts/helpers/search.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableSearchElement = document.getElementById("disable-search");
-disableSearchElement.addEventListener("change",
-  (event) => searchHelper.setDisable(!event.target.checked)
-);
+disableSearchElement.addEventListener("change", event => searchHelper.setDisable(!event.target.checked));
 
 
-let searxDivElement = document.getElementById("searx")
-let whoogleDivElement = document.getElementById("whoogle")
+let searxDivElement = document.getElementById("searx");
+let searxngDivElement = document.getElementById("searxng")
+let whoogleDivElement = document.getElementById("whoogle");
 
 
 function changeFrontendsSettings(frontend) {
@@ -17,25 +16,35 @@ function changeFrontendsSettings(frontend) {
   if (frontend == 'searx') {
     frontendElement.innerHTML = 'Frontend';
     searxDivElement.style.display = 'block';
+    searxngDivElement.style.display = 'none';
+    whoogleDivElement.style.display = 'none';
+    SearxWhoogleElement.style.display = 'block';
+  }
+  else if (frontend == 'searxng') {
+    frontendElement.innerHTML = 'Frontend';
+    searxDivElement.style.display = 'none';
+    searxngDivElement.style.display = 'block';
     whoogleDivElement.style.display = 'none';
     SearxWhoogleElement.style.display = 'block';
   }
   else if (frontend == 'whoogle') {
     frontendElement.innerHTML = 'Frontend';
     searxDivElement.style.display = 'none';
+    searxngDivElement.style.display = 'none';
     whoogleDivElement.style.display = 'block';
     SearxWhoogleElement.style.display = 'block';
   }
   else if (frontend == 'startpage') {
     frontendElement.innerHTML = `Frontend: <span style="color:red;">This is a centralized service</span>`;
     searxDivElement.style.display = 'none';
+    searxngDivElement.style.display = 'none';
     whoogleDivElement.style.display = 'none';
     SearxWhoogleElement.style.display = 'none';
   }
 }
 let searchFrontendElement = document.getElementById("search-frontend");
 searchFrontendElement.addEventListener("change",
-  (event) => {
+  event => {
     let frontend = event.target.options[searchFrontendElement.selectedIndex].value
     searchHelper.setFrontend(frontend)
     changeFrontendsSettings(frontend);
@@ -44,7 +53,7 @@ searchFrontendElement.addEventListener("change",
 
 let protocolElement = document.getElementById("protocol")
 protocolElement.addEventListener("change",
-  (event) => {
+  event => {
     let protocol = event.target.options[protocolElement.selectedIndex].value
     searchHelper.setProtocol(protocol);
     changeProtocolSettings(protocol);
@@ -55,19 +64,26 @@ function changeProtocolSettings(protocol) {
   let normalsearxDiv = document.getElementById("searx-normal");
   let torsearxDiv = document.getElementById("searx-tor");
 
+  let normalsearxngDiv = document.getElementById("searxng-normal");
+  let torsearxngDiv = document.getElementById("searxng-tor");
+
   let normalwhoogleDiv = document.getElementById("whoogle-normal");
   let torwhoogleDiv = document.getElementById("whoogle-tor");
   if (protocol == 'normal') {
     normalsearxDiv.style.display = 'block';
+    normalsearxngDiv.style.display = 'block';
     normalwhoogleDiv.style.display = 'block';
-    torwhoogleDiv.style.display = 'none';
     torsearxDiv.style.display = 'none';
+    torsearxngDiv.style.display = 'none';
+    torwhoogleDiv.style.display = 'none';
   }
   else if (protocol == 'tor') {
     normalsearxDiv.style.display = 'none';
+    normalsearxngDiv.style.display = 'none';
     normalwhoogleDiv.style.display = 'none';
-    torwhoogleDiv.style.display = 'block';
     torsearxDiv.style.display = 'block';
+    torsearxngDiv.style.display = 'block';
+    torwhoogleDiv.style.display = 'block';
   }
 }
 
@@ -104,6 +120,28 @@ searchHelper.init().then(() => {
   );
 
   commonHelper.processDefaultCustomInstances(
+    'searxng',
+    'normal',
+    searchHelper,
+    document,
+    searchHelper.getSearxngNormalRedirectsChecks,
+    searchHelper.setSearxngNormalRedirectsChecks,
+    searchHelper.getSearxngNormalCustomRedirects,
+    searchHelper.setSearxngNormalCustomRedirects
+  );
+
+  commonHelper.processDefaultCustomInstances(
+    'searxng',
+    'tor',
+    searchHelper,
+    document,
+    searchHelper.getSearxngTorRedirectsChecks,
+    searchHelper.setSearxngTorRedirectsChecks,
+    searchHelper.getSearxngTorCustomRedirects,
+    searchHelper.setSearxngTorCustomRedirects
+  );
+
+  commonHelper.processDefaultCustomInstances(
     'whoogle',
     'normal',
     searchHelper,