less javascript (#621)

Cargo.lock

@@ -3273,6 +3273,7 @@ dependencies = [
  "sync_wrapper",
  "tokio 1.40.0",
  "tokio-rustls",
+ "tokio-socks",
  "tokio-util",
  "tower-service",
  "url 2.5.2",
@@ -4103,6 +4104,18 @@ dependencies = [
  "tokio 1.40.0",
 ]
 
+[[package]]
+name = "tokio-socks"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0d4770b8024672c1101b3f6733eab95b18007dbe0847a8afe341fcf79e06043f"
+dependencies = [
+ "either",
+ "futures-util",
+ "thiserror",
+ "tokio 1.40.0",
+]
+
 [[package]]
 name = "tokio-sync"
 version = "0.1.8"

public/static/index.js

@@ -1,41 +1,6 @@
-/**
- * Selects the input element for the search box
- * @type {HTMLInputElement}
- */
-const searchBox = document.querySelector('input')
-
-/**
- * Redirects the user to the search results page with the query parameter
- */
-function searchWeb() {
-    const query = searchBox.value.trim()
-    try {
-        let safeSearchLevel = document.querySelector('.search_options select').value
-        if (query) {
-            window.location.href = `search?q=${encodeURIComponent(
-                query,
-            )}&safesearch=${encodeURIComponent(safeSearchLevel)}`
-        }
-    } catch (error) {
-        if (query) {
-            window.location.href = `search?q=${encodeURIComponent(query)}`
-        }
-    }
-}
-
-/**
- * Listens for the 'Enter' key press event on the search box and calls the searchWeb function
- * @param {KeyboardEvent} e - The keyboard event object
- */
-searchBox.addEventListener('keyup', (e) => {
-    if (e.key === 'Enter') {
-        searchWeb()
-    }
-})
-
 /**
 * A function that clears the search input text when the clear button is clicked.
 */
 function clearSearchText() {
-    document.querySelector('.search_bar input').value = ''
+    document.querySelector('.search_bar > input').value = ''
 }

public/static/pagination.js

@@ -1,39 +0,0 @@
-/**
- * Navigates to the next page by incrementing the current page number in the URL query string.
- * @returns {void}
- */
-function navigate_forward() {
-    let url = new URL(window.location);
-    let searchParams = url.searchParams;
-
-    let q = searchParams.get('q');
-    let page = parseInt(searchParams.get('page'));
-
-    if (isNaN(page)) {
-        page = 1;
-    } else {
-        page++;
-    }
-
-    window.location.href = `${url.origin}${url.pathname}?q=${encodeURIComponent(q)}&page=${page}`;
-}
-
-/**
- * Navigates to the previous page by decrementing the current page number in the URL query string.
- * @returns {void}
- */
-function navigate_backward() {
-    let url = new URL(window.location);
-    let searchParams = url.searchParams;
-
-    let q = searchParams.get('q');
-    let page = parseInt(searchParams.get('page'));
-
-    if (isNaN(page)) {
-        page = 0;
-    } else if (page > 0) {
-        page--;
-    }
-
-    window.location.href = `${url.origin}${url.pathname}?q=${encodeURIComponent(q)}&page=${page}`;
-}

public/static/search_area_options.js

@@ -1,18 +0,0 @@
-document.addEventListener(
-    'DOMContentLoaded',
-    () => {
-        let url = new URL(window.location)
-        let searchParams = url.searchParams
-
-        let safeSearchLevel = searchParams.get('safesearch')
-
-        if (
-            safeSearchLevel >= 0 &&
-            safeSearchLevel <= 2 &&
-            safeSearchLevel !== null
-        ) {
-            document.querySelector('.search_options select').value = safeSearchLevel
-        }
-    },
-    false,
-)

public/static/themes/simple.css

@@ -448,7 +448,7 @@ footer div {
   align-items: center;
 }
 
-.page_navigation button {
+.page_navigation a {
   background: var(--background-color);
   color: var(--foreground-color);
   padding: 1rem;
@@ -457,7 +457,7 @@ footer div {
   border: none;
 }
 
-.page_navigation button:active {
+.page_navigation a:active {
   filter: brightness(1.2);
 }
 

src/server/routes/search.rs

@@ -129,6 +129,7 @@ pub async fn search(
                     &config.style.theme,
                     &config.style.animation,
                     query,
+                    page,
                     &results.0,
                 )
                 .0,

src/templates/partials/bar.rs

@@ -14,12 +14,13 @@ use maud::{html, Markup, PreEscaped};
 /// It returns the compiled html code for the search bar as a result.
 pub fn bar(query: &str) -> Markup {
     html!(
+        (PreEscaped("<form action=\"/search\">"))
         (PreEscaped("<div class=\"search_bar\">"))
-            input type="search" name="search-box" value=(query) placeholder="Type to search";
-            button type="reset" onclick="clearSearchText()" {
+            input type="search" name="q" value=(query) placeholder="Type to search";
+            button type="button" onclick="clearSearchText()" {
                 img src="./images/close.svg" alt="Clear button icon for clearing search input text";
             }
-            button type="submit" onclick="searchWeb()" {
+            button type="submit" {
                 img src="./images/magnifying_glass.svg" alt="Info icon for error box";
             }
     )

src/templates/partials/search_bar.rs

@@ -29,7 +29,7 @@ pub fn search_bar(
             (bar(query))
                 .error_box {
                    @if !engine_errors_info.is_empty(){
-                      button onclick="toggleErrorBox()" class="error_box_toggle_button"{
+                      button type="button" onclick="toggleErrorBox()" class="error_box_toggle_button"{
                          img src="./images/warning.svg" alt="Info icon for error box";
                       }
                       .dropdown_error_box{
@@ -43,7 +43,7 @@ pub fn search_bar(
                       }
                    }
                    @else {
-                      button onclick="toggleErrorBox()" class="error_box_toggle_button"{
+                      button type="button" onclick="toggleErrorBox()" class="error_box_toggle_button"{
                          img src="./images/info.svg" alt="Warning icon for error box";
                       }
                       .dropdown_error_box {
@@ -56,10 +56,10 @@ pub fn search_bar(
             (PreEscaped("</div>"))
             .search_options {
                @if safe_search_level >= 3 {
-                   (PreEscaped("<select name=\"safe_search_levels\" disabled>"))
+                   (PreEscaped("<select name=\"safesearch\" disabled>"))
                }
                @else{
-                   (PreEscaped("<select name=\"safe_search_levels\">"))
+                   (PreEscaped(format!("<select name=\"safesearch\" value=\"{}\">", safe_search_level)))
                }
                @for (idx, name) in SAFE_SEARCH_LEVELS_NAME.iter().enumerate() {
                    @if (safe_search_level as usize) == idx {
@@ -71,6 +71,7 @@ pub fn search_bar(
                }
                (PreEscaped("</select>"))
             }
+            (PreEscaped("</form>"))
         }
     )
 }

src/templates/views/search.rs

@@ -24,6 +24,7 @@ pub fn search(
     theme: &str,
     animation: &Option<String>,
     query: &str,
+    page: u32,
     search_results: &SearchResults,
 ) -> Markup {
     html!(
@@ -108,15 +109,14 @@ pub fn search(
               }
             }
             .page_navigation {
-               button type="button" onclick="navigate_backward()"{
+               a href=(format!("/search?q={}&safesearch={}&page={}", query, search_results.safe_search_level, if page > 1 {page-1} else {1})) {
                    (PreEscaped("&#8592;")) "previous"
                }
-               button type="button" onclick="navigate_forward()"{"next" (PreEscaped("&#8594;"))}
+               a href=(format!("/search?q={}&safesearch={}&page={}", query, search_results.safe_search_level, page+2)) {
+                  "next" (PreEscaped("&#8594;"))}
             }
         }
         script src="static/index.js"{}
-        script src="static/search_area_options.js"{}
-        script src="static/pagination.js"{}
         script src="static/error_box.js"{}
         (footer())
     )