Finished adding default & custom instances

2 files changed, 99 insertions, 15 deletions

diff --git a/src/pages/options/search/search.html b/src/pages/options/search/search.html
index 489ed38a..654292a8 100644
--- a/src/pages/options/search/search.html
+++ b/src/pages/options/search/search.html
@@ -28,15 +28,6 @@
             <h4>Enable</h4>
             <input id="disable-search" type="checkbox" checked />
         </div>
-        <!-- <div class="some-block option-block">
-            <h4>Instance</h4>
-            <div class="autocomplete">
-                <input id="search-instance" type="url"
-                    data-localise-placeholder="__MSG_randomInstancePlaceholder__"
-                    placeholder="Random instance (none selected)" />
-            </div>
-        </div> -->
-
         <div class="some-block option-block">
             <h4>Frontend</h4>
             <select id="search-frontend">
@@ -44,6 +35,57 @@
                 <option value="whoogle">Whoogle</option>
             </select>
         </div>
+        <hr>
+
+        <div id="searx">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="searx-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-searx-instance-form">
+                <div class="some-block option-block">
+                    <input id="searx-custom-instance" placeholder="https://searx.com" type="url" />
+                    <button type="submit" class="add" id="searx-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="searx-custom-checklist"></div>
+        </div>
+
+        <div id="whoogle">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="whoogle-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-whoogle-instance-form">
+                <div class="some-block option-block">
+                    <input id="whoogle-custom-instance" placeholder="https://whoogle.com" type="url" />
+                    <button type="submit" class="add" id="whoogle-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="whoogle-custom-checklist"></div>
+        </div>
     </section>
 
 
diff --git a/src/pages/options/search/search.js b/src/pages/options/search/search.js
index e38480e2..c50fbb15 100644
--- a/src/pages/options/search/search.js
+++ b/src/pages/options/search/search.js
@@ -1,16 +1,58 @@
 import searchHelper from "../../../assets/javascripts/helpers/search.js";
-
-let searchFrontendElement = document.getElementById("search-frontend");
-searchFrontendElement.addEventListener("change",
-  (event) => searchHelper.setSearchFrontend(event.target.options[searchFrontendElement.selectedIndex].value)
-);
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableSearchElement = document.getElementById("disable-search");
 disableSearchElement.addEventListener("change",
   (event) => searchHelper.setDisableSearch(!event.target.checked)
 );
 
+
+let searxDivElement = document.getElementById("searx")
+let whoogleDivElement = document.getElementById("whoogle")
+
+
+function changeFrontendsSettings(frontend) {
+  if (frontend == 'searx') {
+    searxDivElement.style.display = 'block';
+    whoogleDivElement.style.display = 'none';
+  }
+  else if (frontend == 'whoogle') {
+    searxDivElement.style.display = 'none';
+    whoogleDivElement.style.display = 'block';
+  }
+}
+let searchFrontendElement = document.getElementById("search-frontend");
+searchFrontendElement.addEventListener("change",
+  (event) => {
+    let frontend = event.target.options[searchFrontendElement.selectedIndex].value
+    searchHelper.setSearchFrontend(frontend)
+    changeFrontendsSettings(frontend);
+  }
+);
+
 searchHelper.init().then(() => {
   disableSearchElement.checked = !searchHelper.getDisableSearch();
-  searchFrontendElement.value = searchHelper.getSearchFrontend();
+  let frontend = searchHelper.getSearchFrontend();
+  searchFrontendElement.value = frontend;
+  changeFrontendsSettings(frontend);
+
+  commonHelper.processDefaultCustomInstances(
+    'searx',
+    searchHelper,
+    document,
+    searchHelper.getSearxRedirectsChecks,
+    searchHelper.setSearxRedirectsChecks,
+    searchHelper.getSearxCustomRedirects,
+    searchHelper.setSearxCustomRedirects
+  )
+
+  commonHelper.processDefaultCustomInstances(
+    'whoogle',
+    searchHelper,
+    document,
+    searchHelper.getWhoogleRedirectsChecks,
+    searchHelper.setWhoogleRedirectsChecks,
+    searchHelper.getWhoogleCustomRedirects,
+    searchHelper.setWhoogleCustomRedirects
+  )
 });