work on lake search and slider hover for tooltip

issue #5
TNRIS · May 24, 2018 · fe5fc92 · fe5fc92
1 parent f930414
commit fe5fc92
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 3 deletions.
diff --git a/lakegallery/map/static/map/images/glyphicons-remove-circle.png b/lakegallery/map/static/map/images/glyphicons-remove-circle.png
diff --git a/lakegallery/map/static/map/images/glyphicons-remove-sign.png b/lakegallery/map/static/map/images/glyphicons-remove-sign.png
diff --git a/lakegallery/map/static/map/images/glyphicons-remove.png b/lakegallery/map/static/map/images/glyphicons-remove.png
diff --git a/lakegallery/map/static/map/images/glyphicons-search.png b/lakegallery/map/static/map/images/glyphicons-search.png
diff --git a/lakegallery/map/static/map/style.css b/lakegallery/map/static/map/style.css
@@ -39,6 +39,15 @@ body {
 	opacity: .4;
 }
 
+#search {
+	max-width: auto;
+}
+
+#glyph-search {
+	height: 25px;
+	width: 25px;
+}
+
 /*LEAFLET FOR ALL*/
 .leaflet-control-layers-base > label > div > input {
 	display: none;

diff --git a/lakegallery/map/templates/map/base.html b/lakegallery/map/templates/map/base.html
@@ -76,7 +76,41 @@
             <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Lakes
             </a>
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+            <div class="dropdown-menu dropdown-menu-right" id="lakeMenu" aria-labelledby="navbarDropdownMenuLink">
+              <script>
+              //function to search and filter lakes
+                function lakeSearch() {
+                  var input, filter, lakeMenu, atags, atagsLength, i;
+                  input = document.getElementById("search");
+                  filter = input.value.toUpperCase();
+                  lakeMenu = document.getElementById("lakeMenu");
+                  atags = lakeMenu.getElementsByTagName("a");
+                  atagsLength = atags.length;
+
+                  // Loop through all enabled lake atags, and hide those who don't match the search query
+                  for (i = 0; i < atagsLength; i++) {
+                    var atag = atags[i];
+                    if (atag) {
+                      if (atag.innerHTML.toUpperCase().indexOf(filter) > -1) {
+                        atag.style.display = "";
+                      } else {
+                        atag.style.display = "none";
+                      }
+                    }
+                  }
+                }
+
+                //function to clear search text when click image to right of search/filter
+                function clearSearch() {
+                  var searchText = document.getElementById("search").value;
+                  searchText = "";
+                  // $("#search").value("test");
+                }
+              </script>
+              <div class="btn-group">
+                <input type="text" id="search" class="form-control" onkeyup="lakeSearch();" placeholder="Search for a lake...">
+                <img id="clearSearch" src="{% static 'map/images/glyphicons-remove-circle.png' %}" onclick="clearSearch();"/>
+              </div>
               {% for l in header_lakes %}
                 {% if l.class == "enabled" %}
                   <a class="dropdown-item {{ l.class }}" href="/{{ l.region }}/{{ l.name }}">{{ l.name }}</a>
@@ -90,11 +124,11 @@
             </a>
           </li>
         </ul>
-        
+
       </div>
     </nav>
 
     {% block content %}
     {% endblock %}
   </body>
-</html>
+</html>
diff --git a/lakegallery/static/map/images/glyphicons-remove-circle.png b/lakegallery/static/map/images/glyphicons-remove-circle.png
diff --git a/lakegallery/static/map/images/glyphicons-remove-sign.png b/lakegallery/static/map/images/glyphicons-remove-sign.png
diff --git a/lakegallery/static/map/images/glyphicons-remove.png b/lakegallery/static/map/images/glyphicons-remove.png
diff --git a/lakegallery/static/map/images/glyphicons-search.png b/lakegallery/static/map/images/glyphicons-search.png
diff --git a/lakegallery/static/map/style.css b/lakegallery/static/map/style.css
@@ -39,6 +39,15 @@ body {
 	opacity: .4;
 }
 
+#search {
+	max-width: auto;
+}
+
+#glyph-search {
+	height: 25px;
+	width: 25px;
+}
+
 /*LEAFLET FOR ALL*/
 .leaflet-control-layers-base > label > div > input {
 	display: none;