Merge pull request #880 from genenetwork/chores/implement-clear-field-for-inputs

 Implement clear search field for global search.

1 files changed, 90 insertions, 55 deletions

diff --git a/gn2/wqflask/templates/gsearch.html b/gn2/wqflask/templates/gsearch.html
index 5bfc51e7..adf4481d 100644
--- a/gn2/wqflask/templates/gsearch.html
+++ b/gn2/wqflask/templates/gsearch.html
@@ -1,6 +1,6 @@
 <link rel="stylesheet" href="/static/new/css/autocomplete.css" />
 <style TYPE="text/css">
-  .global_search_input{
+.global_search_input{
   padding:9px 8px;
   text-decoration: none;
   border: none;
@@ -25,6 +25,22 @@
   right: 0;
   border-left: none;
   }
+
+  .clear-input-button:hover{
+  cursor: pointer
+  }
+
+  .clear-input-button {
+  position:absolute;
+  right:10px;
+  top:12px;
+  color:#336699;
+  display:none
+  }
+
+  .clear-input--touched:focus + .clear-input-button, .clear-input--touched:hover + .clear-input-button, .clear-input--touched + .clear-input-button:hover {
+  display: inline-flex;
+  }    
 </style>
 <div class="container-fluid"
      style="width: 100%;
@@ -41,80 +57,99 @@
            </select>
            <div class="col-8  autocomplete"
                 style="margin-left: 30px;
-                margin-right: 10px">
+                margin-right: 10px;
+                position:relative">
                 <input autocomplete="off"
-                       class="global_search_input"
+                       class="global_search_input clear-input"
                        id="term"
                        style="width:45vw"
                        type="text"
                        required
                        placeholder="Enter you search term here (ex: cytochrome AND P450)"
+                       style="position:relative"
                        name="terms">
+                       <span style="" title="Clear" class="glyphicon glyphicon-remove clear-input-button"></span>
                        <button type="submit"
-                               class="btn-stc"
+                               class="btn-stc "
                                style="position: absolute;
                                background-color: #336699">
                                <i class="fa fa-search" title="Search " style="color:white;"></i>
                        </button>
-           </div>
-           <!-- todo fix text overlap for this;;responsiveness-->
-           <span style="padding: 5px;margin-left: 65px;" id="gnqna_home">
-             <a href="/gnqna">GNQA Search</a>
-           </span>
-           <span style="padding: 5px;margin-left: 65px;">
-             <a style="text-decoration: none"
-                target="_blank"
-                href="https://issues.genenetwork.org/topics/xapian/xapian-search-queries">
-                <i style="text-align: center;
-                          color:#336699"
-                          class="fa fa-question-circle fa-2x"
-                          title="see more search hints"
-                          aria-hidden="true"></i>
-             </a>
-           </span>
+	   </div>
+           <span style="margin-left: 60px;">
+	       <a style=""
+                  target="_blank"
+		  title="See more Search Xapian Hints"
+                  href="https://issues.genenetwork.org/topics/xapian/xapian-search-queries">
+		   <sup>
+		       <i><b >See more Hints </b></i>
+		   </sup>
+	       </a> 
+               </span>
+               <span style="padding: 5px;margin-left: 60px;" id="gnqna_home">
+		   <a href="/gnqna"><b>GNQA Search</b></a>
+               </span>
+
          </div>
        </div>
      </form>
 </div>
 <script src="{{ url_for('js', filename='jquery/jquery.min.js') }}"
         type="text/javascript"></script>
-
 	<script src="/static/new/javascript/search_autocomplete.js"></script>
 	<script type="text/javascript">
-          $(document).ready(function() {
-          const urlParams = new  URLSearchParams(window.location.search)
-          let term = urlParams.get("terms")
-          //should web scrap
-          var global_search_hint = [
-          "cytochrome",
-          "cytochrome AND P450",
-          "cytochrome NEAR P450",
-          "cytochrome -P450",
-          "cytochrome NOT P450",
-          "species:human",
-          "group:BXD",
-          "Hs:chr4:9930021 species:mouse",
-          "Hs:chr4:9130000..9980000 species:mouse",
-          "mean:5..7",
-          "mean:7..",
-          "Hs:chr4:9930021",
-          "Hs:chr4:9930021 species:mouse",
-          "Hs:chr4:9130000..9980000 species:mouse",
-          "bx*",
-          "*"
-          ]
-          autocomplete(document.getElementById("term"), global_search_hint);
-          $("#term").keyup(function(event) {
-          if (event.keyCode === 13) {
-          event.preventDefault();
-          $('#globalsearchform').attr('action', "/gsearch").submit();
-          if ($("#term").val().trim() != "") {
-          saveBeforeSubmit($("#term").val().trim())
-          $("#globalsearchform")[0].submit();
-          }
+	  $(document).ready(function() {
+	  const urlParams = new  URLSearchParams(window.location.search)
+	  let term = urlParams.get("terms")
+	  //should web scrap
+	  var global_search_hint = [
+	  "cytochrome",
+	  "cytochrome AND P450",
+	  "cytochrome NEAR P450",
+	  "cytochrome -P450",
+	  "cytochrome NOT P450",
+	  "species:human",
+	  "group:BXD",
+	  "Hs:chr4:9930021 species:mouse",
+	  "Hs:chr4:9130000..9980000 species:mouse",
+	  "mean:5..7",
+	  "mean:7..",
+	  "Hs:chr4:9930021",
+	  "Hs:chr4:9930021 species:mouse",
+	  "Hs:chr4:9130000..9980000 species:mouse",
+	  "bx*",
+	  "*"
+	  ]
+	  autocomplete(document.getElementById("term"), global_search_hint);
+	  $("#term").keyup(function(event) {
+	  if (event.keyCode === 13) {
+	  event.preventDefault();
+	  $('#globalsearchform').attr('action', "/gsearch").submit();
+	  if ($("#term").val().trim() != "") {
+	  saveBeforeSubmit($("#term").val().trim())
+	  $("#globalsearchform")[0].submit();
+	  }
+
+	  }
+	  })
 
-          }
-          })
+	  });
 
-          });
+	  const input = document.querySelector(".clear-input");
+	  const clearButton = document.querySelector(".clear-input-button");
+	  const handleInputChange = e => {
+	  if (e.target.value && !input.classList.contains("clear-input--touched")) {
+	  input.classList.add("clear-input--touched");
+	  } else if (!e.target.value && input.classList.contains("clear-input--touched")) {
+	  input.classList.remove("clear-input--touched");
+	  }
+	  };
+	  const handleButtonClick = e => {
+	  console.log("clicked this button")
+	  input.value = '';
+	  input.focus();
+	  input.classList.remove("clear-input--touched");
+	  };
+	  clearButton.addEventListener("click", handleButtonClick);
+	  input.addEventListener("input", handleInputChange);	 	  
 	</script>