Toggle UI controls

Author: banesullivan

django_large_image/static/django_large_image/styles/style.css

@@ -19,6 +19,20 @@
   margin: 0;
   opacity: 0.75;
   z-index: 15;
-  bottom: 5px;
+  bottom: 25px;
   right: 5px;
 }
+
+.collapsible {
+  background-color: #DCDCDC;
+  cursor: pointer;
+  padding: 2px;
+  border: none;
+  text-align: left;
+  outline: none;
+}
+
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.collapsible:hover {
+  background-color: #D3D3D3;
+}

django_large_image/templates/django_large_image/_include/base.html

@@ -45,5 +45,25 @@
   for (const [option, value] of Object.entries(windowSearchParams)) {
     updateTileUrlOption(option, value);
   }
+
+  function addToggleListener(uiToggle, uiContent, callback = null) {
+    uiToggle.addEventListener('click', function() {
+      this.classList.toggle('active');
+      var state = null;
+      if (uiContent.style.display === 'block') {
+        uiContent.style.display = 'none';
+        state = false;
+      } else {
+        uiContent.style.display = 'block';
+        state = true;
+      }
+      // Call the custom callback if given
+      if (callback != null) {
+        callback(state);
+      }
+    });
+    // Hide by default
+    uiContent.style.display = 'none';
+  }
 </script>
 {% endblock %}

django_large_image/templates/django_large_image/_include/cesium.html

@@ -21,14 +21,7 @@
 <!-- Load the script to initialize the viewer -->
 <script src="{% static 'django_large_image/js/cesium.js' %}"></script>
 
-
-<div class="slidecontainer" id="opacityTool">
-  <label for="rasterOpacityRange">Raster Layer Opacity: </label>
-  <input type="range" min="1" max="100" value="100" class="overlay" id="rasterOpacityRange" onChange="updateTilesOpacity(event, value)" onInput="updateTilesOpacity(event, value)" style="top: 5px; left: 5px;">
-  <br />
-  {% include 'django_large_image/_include/colors.html' %}
-</div>
-
+{% include 'django_large_image/_include/colors.html' %}
 
 <script>
   var tileProvider;

django_large_image/templates/django_large_image/_include/colors.html

@@ -1,23 +1,35 @@
 {% block colormaps %}
 
-<label for="bandChoice">Choose a band:</label>
-<select id="bandChoice" onChange='bandChange();'>
-  <option>-- none --</option>
-</select>
-<br />
-<div id='colorsSubGroup' style="display: none;">
-  <label for="colors">Choose a colormap:</label>
-  <select id="colors" onChange='changeColors();'>
-    <option>-- none --</option>
-  </select>
-  <br />
-  <input id="mincolor" type="number" step="0.01" onChange='changeColors();'>
-  <input id="maxcolor" type="number" step="0.01" onChange='changeColors();'>
-</div>
-<div>
-  <img id="thumbnail" />
+<div class="slidecontainer">
+  <button type="button" class="collapsible" id="displayControlsToggle">Toggle Controls</button>
+  <div id="displayControls">
+    <label for="rasterOpacityRange">Raster Layer Opacity: </label>
+    <input type="range" min="1" max="100" value="100" class="overlay" id="rasterOpacityRange" onChange="updateTilesOpacity(event, value)" onInput="updateTilesOpacity(event, value)" style="top: 5px; left: 5px;">
+    <br />
+    <label for="bandChoice">Choose a band:</label>
+    <select id="bandChoice" onChange='bandChange();'>
+      <option>-- none --</option>
+    </select>
+    <br />
+    <div id='colorsSubGroup' style="display: none;">
+      <label for="colors">Choose a colormap:</label>
+      <select id="colors" onChange='changeColors();'>
+        <option>-- none --</option>
+      </select>
+      <br />
+      <input id="mincolor" type="number" step="0.01" onChange='changeColors();'>
+      <input id="maxcolor" type="number" step="0.01" onChange='changeColors();'>
+    </div>
+    <div>
+      <img id="thumbnail" />
+    </div>
+  </div>
 </div>
 <script>
+  const displayControlsToggle = document.getElementById('displayControlsToggle');
+  const displayControls = document.getElementById('displayControls');
+  addToggleListener(displayControlsToggle, displayControls);
+
   var colorsSubGroup = document.getElementById('colorsSubGroup');
   var colorsDropdown = document.getElementById('colors');
   var bandDropdown = document.getElementById('bandChoice');
@@ -52,7 +64,6 @@
     });
   })
 
-
   fetch(`${host}/api/large-image/colormaps`)
     .then(response => response.json())
     .then(data => {

django_large_image/templates/django_large_image/_include/geojs.html

@@ -5,15 +5,10 @@
 
 <div id="imageViewer" style="width: 100%; height: 100%; z-index: 10;"></div>
 
-<div class="slidecontainer" id="opacityTool">
-  <label for="rasterOpacityRange">Raster Layer Opacity: </label>
-  <input type="range" min="1" max="100" value="100" class="overlay" id="rasterOpacityRange" onChange="updateTilesOpacity(event, value)" onInput="updateTilesOpacity(event, value)" style="top: 5px; left: 5px;">
-  <br />
-  {% include 'django_large_image/_include/colors.html' %}
-</div>
+{% include 'django_large_image/_include/colors.html' %}
 
 <script>
-  var containerRef = document.getElementById('imageViewer')
+  const containerRef = document.getElementById('imageViewer')
   var imageLayer;
   var viewer;