clear buttons on inputs on /map

pinballmap · Dec 19, 2024 · 995abb5 · 995abb5
1 parent e89a564
commit 995abb5
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb
@@ -1312,6 +1312,16 @@ span.single_hide {
   width: 84px;
 }
 
+#clearButton1,
+#clearButton2,
+#clearButton3 {
+  display: none;
+  cursor: pointer;
+  text-decoration: none;
+  margin-left: -20px;
+  margin-right: 9px;
+}
+
 input.single_hide {
   margin-left: 8px;
 }
@@ -2180,6 +2190,7 @@ input.search,
 .lookup_search_input {
   margin: 0 0 5px 10px;
   width: 84%;
+  padding-right: 20px;
 }
 
 input.lookup_search_input:focus {

diff --git a/app/views/pages/map.html.haml b/app/views/pages/map.html.haml
@@ -17,11 +17,13 @@
         .map_input
           %span.input_title Machine
           = text_field_tag "by_machine_name", params["by_machine_name"], :class => 'lookup_search_input', :placeholder => @machine_placeholder
+          #clearButton1 X
           %input{:type => "checkbox", :id => "singleVersion", :name => "singleVersion", :class => "m_0 single_hide"}
           %span.single_hide Exact machine version?
         .map_input
           %span.input_title Near
           = text_field_tag "address", params[:address], :class => 'lookup_search_input', :placeholder => @big_cities_placeholder
+          #clearButton2 X
         .map_input
           %div.limit.filter
             %span.info Limit to
@@ -34,6 +36,7 @@
         .map_input
           %span.input_title Venue
           = text_field_tag "by_location_name", params["by_location_name"], :class => 'lookup_search_input', :placeholder => @location_placeholder
+          #clearButton3 X
           = image_submit_tag('search_icon.png', :class => 'map search', :id => "location_search_button")
 
   #map
@@ -75,6 +78,47 @@
 
 :javascript
   var ismap = 1;
+  const inputField1 = document.getElementById("by_machine_name");
+  const clearButton1 = document.getElementById("clearButton1");
+  const inputField2 = document.getElementById("address");
+  const clearButton2 = document.getElementById("clearButton2");
+  const inputField3 = document.getElementById("by_location_name");
+  const clearButton3 = document.getElementById("clearButton3");
+
+  inputField1.addEventListener("input", () => {
+    if (inputField1.value.length > 0) {
+      clearButton1.style.display = "block";
+    } else {
+      clearButton1.style.display = "none";
+    }
+  });
+  inputField2.addEventListener("input", () => {
+    if (inputField2.value.length > 0) {
+      clearButton2.style.display = "block";
+    } else {
+      clearButton2.style.display = "none";
+    }
+  });
+  inputField3.addEventListener("input", () => {
+    if (inputField3.value.length > 0) {
+      clearButton3.style.display = "block";
+    } else {
+      clearButton3.style.display = "none";
+    }
+  });
+
+  clearButton1.addEventListener("click", () => {
+    inputField1.value = "";
+    clearButton1.style.display = "none";
+  });
+  clearButton2.addEventListener("click", () => {
+    inputField2.value = "";
+    clearButton2.style.display = "none";
+  });
+  clearButton3.addEventListener("click", () => {
+    inputField3.value = "";
+    clearButton3.style.display = "none";
+  });
   $(function () {
     $('#by_location_name').bind('input', function(event, ui) {
       event.preventDefault();