From 01fe0c02a50b2fddd3bbdb03f5ef88019b413d2a Mon Sep 17 00:00:00 2001
From: Ben Busby <benbusby@protonmail.com>
Date: Wed, 21 Apr 2021 11:38:19 -0400
Subject: [PATCH] Add button to clear search input on mobile

This was unfortunately a bit more complex than just adding an HTML reset
button, since reset buttons only "reset" input content to its original
value rather than clearing it. This doesn't work for Whoogle's needs,
since inputs on search result pages are auto populated with the search
content as their default value.

A reset button was introduced anyways, but is controlled by a few lines
of javascript to allow completely clearing the search input. The button
will only appear on mobile searches.

At the moment, it isn't particularly pretty, but is functional. It uses
just a plain "x" character and is always visible on mobile search result
pages. This leaves plenty of room for improvement moving forward.

Fixes #291
---
 app/static/css/input.css   | 14 ++++++++++++++
 app/static/js/utils.js     |  8 ++++++++
 app/templates/display.html |  1 +
 app/templates/header.html  |  9 +++++----
 4 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 app/static/css/input.css

diff --git a/app/static/css/input.css b/app/static/css/input.css
new file mode 100644
index 0000000..96cc108
--- /dev/null
+++ b/app/static/css/input.css
@@ -0,0 +1,14 @@
+#search-bar {
+    background: transparent !important;
+    padding-right: 50px;
+}
+
+#search-reset {
+    all: unset;
+    margin-left: -50px;
+    text-align: center;
+    background-color: transparent !important;
+    cursor: pointer;
+    height: 40px;
+    width: 50px;
+}
diff --git a/app/static/js/utils.js b/app/static/js/utils.js
index 56e052f..3cf4a5d 100644
--- a/app/static/js/utils.js
+++ b/app/static/js/utils.js
@@ -57,4 +57,12 @@ const checkForTracking = () => {
 
 document.addEventListener("DOMContentLoaded", function() {
     checkForTracking();
+
+    // Clear input if reset button tapped
+    const search = document.getElementById("search-bar");
+    const resetBtn = document.getElementById("search-reset");
+    resetBtn.addEventListener("click", event => {
+        event.preventDefault();
+        search.value = "";
+    });
 });
diff --git a/app/templates/display.html b/app/templates/display.html
index d21bd6b..398e276 100644
--- a/app/templates/display.html
+++ b/app/templates/display.html
@@ -5,6 +5,7 @@
         <link rel="search" href="opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="referrer" content="no-referrer">
+        <link rel="stylesheet" href="static/css/input.css">
         <link rel="stylesheet" href="static/css/search.css">
         <link rel="stylesheet" href="static/css/variables.css">
         <link rel="stylesheet" href="static/css/header.css">
diff --git a/app/templates/header.html b/app/templates/header.html
index e9ab529..1e0cbd3 100644
--- a/app/templates/header.html
+++ b/app/templates/header.html
@@ -20,10 +20,11 @@
                             class="noHIxc" 
                             name="q"
                             style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
-                                       color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
-                                       border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;"
+                                   color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
+                                   border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;"
                             type="text" 
                             value="{{ query }}">
+                        <input style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}" id="search-reset" type="reset" value="x">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
                         <input type="submit" style="display: none;">
                         <div class="sc"></div>
@@ -56,8 +57,8 @@
                             type="text"
                             value="{{ query }}"
                             style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
-                                       color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
-                                       border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;">
+                                   color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
+                                   border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '0px' }}; border-radius: 8px;">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
                         <input type="submit" style="display: none;">
                         <div class="sc"></div>