Hide-able gradient picking section

hkbus · Dec 3, 2024 · e88a7a9 · e88a7a9
1 parent 0555118
commit e88a7a9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -214,9 +214,12 @@
 
             <div class="field">
                 <label class="label">熱圖顏色漸層<br>Heatmap Gradient</label>
-                <div id="gradient-picker"></div>
-                <div class="control gradient-entry" id="gradient-entry-control">
-                    <button class="button is-small gradient-add" id="gradient-add" onclick="addGradientPicker();">+</button>
+                <button id="gradient-toggle-button" class="button is-small gradient-toggle" onclick="toggleGradientPicker();">展示 Show</button>
+                <div class="gradient-section" id="gradient-section" style="display: none;">
+                    <div id="gradient-picker"></div>
+                    <div class="control gradient-entry" id="gradient-entry-control">
+                        <button class="button is-small gradient-add" id="gradient-add" onclick="addGradientPicker();">+</button>
+                    </div>
                 </div>
             </div>
 

diff --git a/main.js b/main.js
@@ -178,6 +178,18 @@ function generateGradientPicker(value) {
     div.innerHTML = innerHTML;
 }
 
+function toggleGradientPicker() {
+    const div = document.getElementById("gradient-section");
+    const button = document.getElementById("gradient-toggle-button");
+    if (div.style.display === "none") {
+        div.style.display = "block";
+        button.innerHTML = "隱藏 Hide";
+    } else {
+        div.style.display = "none";
+        button.innerHTML = "展示 Show";
+    }
+}
+
 function initMap() {
     tileLayers.clearLayers();
     if (basemapUrl) {

diff --git a/style.css b/style.css
@@ -227,6 +227,14 @@ html {
     width: 15%;
 }
 
+.gradient-toggle {
+    width: 100%;
+}
+
+.gradient-section {
+    margin-top: 10px;
+}
+
 .error {
     border: 1px solid red !important;
     box-shadow: 0 0 0 3px #ff000054 !important;