less javascript (#621)

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/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())
     )