Refactor heatmap UI: replace select elements with custom interactive components and improve event handling

Author: RIGAT-Pierre-andre-2326090par

_includes/heatmap.html

@@ -1,34 +1,34 @@
 {% assign e = site.data[page.lang]['heatmap-ui'] %}
 
-<div style="flex-basis: 100%; display: flex; justify-content: center; align-items: center; pointer-events: auto; gap: 30px">
-    <!--<div role="select" style="border: 1px solid #e8e8e8; border-radius: .5em; padding: .5em;">
-        <input type="checkbox" style="display: none">
-        <div class="hand-select">
-            <span id="hand-selected"></span>
-            <img src="/assets/img/arrow_down.png" alt="arrow_down" style="aspect-ratio: 1 / 1; height: 1.6em;">
+<div id="interface">
+    <div class="select active" role="select" style="width: 14em">
+        <input class="select-checkbox" id="hand-select-checkbox" type="checkbox">
+        <label for="hand-select-checkbox" style="display: flex; justify-content:  space-between">
+            <span id="hand-selected">{{ e.total }}</span>
+            <img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
+        </label>
+        <div id="hand-select-options" class="select-options">
+            <span class="select-option">{{ e.total }}</span>
+            <span class="select-option">{{ e.preferred }}</span>
+            <span class="select-option">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}</span>
+            <span class="select-option">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</span>
         </div>
-        <div class="hand-select-options" style="display: flex; flex-direction: column; color: #383838">
-            <span class="hand-select-option">{{ e.total }}</span>
-            <span class="hand-select-option">{{ e.preferred }}</span>
-            <span class="hand-select-option">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}</span>
-            <span class="hand-select-option">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</span>
+    </div>
+    <div class="select" id="finger-select" role="select" style="width: 8em">
+        <input class="select-checkbox" id="finger-select-checkbox" type="checkbox">
+        <label for="finger-select-checkbox" style="display: flex; justify-content: space-between">
+            <span id="finger-selected">{{ e.all_button }}</span>
+            <img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
+        </label>
+        <div id="finger-select-options" class="select-options">
+            <span class="select-option">{{ e.all_button }}</span>
+            <span class="select-option">{{ e.thumb }}</span>
+            <span class="select-option">{{ e.index }}</span>
+            <span class="select-option">{{ e.middle }}</span>
+            <span class="select-option">{{ e.ring }}</span>
+            <span class="select-option">{{ e.little }}</span>
         </div>
-    </div>-->
-
-    <select class="finger-select active" id="all-fingers">
-        <option value="total">{{ e.total }}</option>
-        <option value="preferred">{{ e.preferred }}</option>
-        <option value="L">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}</option>
-        <option value="R">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</option>
-    </select>
-    <select class="finger-select" id="finger-select">
-        <option value="H">{{ e.all_button }}</option>
-        <option value="T">{{ e.thumb }}</option>
-        <option value="I">{{ e.index }}</option>
-        <option value="M">{{ e.middle }}</option>
-        <option value="R">{{ e.ring }}</option>
-        <option value="L">{{ e.little }}</option>
-    </select>
+    </div>
 </div>
 
 <div id="model-container"></div>
@@ -69,11 +69,15 @@
     import langFinger from '/assets/js/ui-lang.json' with {type: 'json'};
 
     document.addEventListener('DOMContentLoaded', function () {
+        const handLabel = document.getElementById('hand-selected')
+        const fingerLabel = document.getElementById('finger-selected')
+        const fingerSelect = document.getElementById('finger-select')
+        const handCheckbox = document.getElementById('hand-select-checkbox')
+        const fingerCheckbox = document.getElementById('finger-select-checkbox')
+
         const selectionText = document.getElementById('selection-text');
         const selectionIcon = document.querySelector('#selection-badge .selection-icon');
         const fingerContext = document.getElementById('finger-context');
-        const fingerSelect = document.getElementById('finger-select');
-        const allFingers = document.getElementById('all-fingers');
 
         const FACES = ['R', 'B', 'G', 'W', 'Y'];
         const ALL_FINGERS = ['LT', 'LI', 'LM', 'LR', 'LL', 'RT', 'RI', 'RM', 'RR', 'RL'];
@@ -168,39 +172,104 @@
             updateUI('best', ALL_FINGERS);
         }
 
-        function handleSelect() {
-            let selectValue = allFingers.value;
+        function handleCustomSelect(value) {
+            switch (value) {
+                case "{{ e.total }}":
+                    return "total";
+                case "{{ e.preferred }}":
+                    return "preferred";
+                case "{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}":
+                    return "L";
+                case "{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}":
+                    return "R";
+                case "{{ e.all_button }}":
+                    return "H";
+                case "{{ e.thumb }}":
+                    return "T";
+                case "{{ e.index }}":
+                    return "I";
+                case "{{ e.middle }}":
+                    return "M";
+                case "{{ e.ring }}":
+                    return "R";
+                case "{{ e.little }}":
+                    return "L";
+            }
+        }
+
+        function handleFirstSelect(value) {
+            let selectValue = handleCustomSelect(value);
             if (selectValue === "total") {
                 if (fingerSelect.classList.contains('active')) {
                     fingerSelect.classList.remove('active');
-                    fingerSelect.value = "H"
+                    fingerCheckbox.checked = false;
+                    fingerLabel.textContent = '{{ e.all_button }}'
                 }
                 updateSelection("total");
+                handLabel.textContent = value;
             } else if (selectValue === "preferred") {
                 if (fingerSelect.classList.contains('active')) {
                     fingerSelect.classList.remove('active');
-                    fingerSelect.value = "H"
+                    fingerCheckbox.checked = false;
+                    fingerLabel.textContent = '{{ e.all_button }}'
                 }
                 handleBestFinger();
+                handLabel.textContent = value;
             } else {
                 fingerSelect.classList.add('active')
-                let selectFinger = fingerSelect.value;
-                if (selectFinger === 'H') {
-                    if (selectValue === 'L') {
+                if (selectValue === 'L') {
+                    handleHandAll('left')
+                    handLabel.textContent = value;
+                } else {
+                    handleHandAll('right')
+                    handLabel.textContent = value;
+                }
+            }
+        }
+
+        function handleSecondSelect(value) {
+            let selectValue = handleCustomSelect(value);
+            switch (selectValue) {
+                case "H":
+                    if (handleCustomSelect(handLabel.textContent) === 'L') {
                         handleHandAll('left')
+                        fingerLabel.textContent = value;
                     } else {
                         handleHandAll('right')
-                    }
-                } else {
-                    updateSelection(selectValue + selectFinger)
-                }
+                        fingerLabel.textContent = value;
+                    } break;
+                case "T":
+                case "I":
+                case "M":
+                case "R":
+                case "L":
+                    updateSelection(handleCustomSelect(handLabel.textContent) + selectValue);
+                    fingerLabel.textContent = value;
+                    break;
             }
         }
 
-        allFingers.addEventListener('change', handleSelect)
-        fingerSelect.addEventListener('change', handleSelect)
+        fingerCheckbox.addEventListener('change', () => {
+            handCheckbox.checked = false;
+        })
+
+        handCheckbox.addEventListener('change', () => {
+            fingerCheckbox.checked = false;
+        })
+
+        document.querySelectorAll('#hand-select-options .select-option').forEach(elem => {
+            elem.addEventListener('click', () => {
+                handleFirstSelect(elem.textContent);
+            });
+        })
+
+        document.querySelectorAll('#finger-select-options .select-option').forEach(elem => {
+            elem.addEventListener('click', () => {
+                handleSecondSelect(elem.textContent);
+            });
+        })
 
-        handleSelect();
+        handleFirstSelect('{{ e.total }}');
         document.getElementById('model-container').classList.add('active');
     });
 </script>

assets/css/heatmap.css

@@ -7,7 +7,7 @@
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
-    margin: 0 auto;
+    margin: 4rem auto 0;
     overflow: visible;
     object-fit: cover;
 
@@ -97,6 +97,53 @@
     pointer-events: auto;
 }
 
+#interface {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: flex-start;
+    pointer-events: auto;
+    gap: 30px;
+    user-select: none;
+}
+
+.select-checkbox {
+    display: none;
+}
+
+.select {
+    border: 1px solid #e8e8e8;
+    border-radius: .5em;
+    padding: .5em;
+    background-color: white;
+    flex-direction: row;
+
+    opacity: 50%;
+    pointer-events: none;
+}
+
+.select.active {
+    opacity: 100%;
+    pointer-events: auto;
+}
+
+.select-options {
+    display: flex;
+    flex-direction: column;
+    color: #383838;
+    background-color: white;
+}
+
+.select-checkbox ~ .select-options {
+    display: none;
+}
+
+.select-checkbox:checked ~ .select-options {
+    display: flex;
+    padding-top: 0.2em;
+}
+
 /* Finger context */
 .finger-context {
     display: flex;

assets/img/arrow_down.png

@@ -5,7 +5,6 @@ document.addEventListener('DOMContentLoaded', function () {
   const perFingerReachability = window.perFingerReachability;
 
   const defaultModeMeta = document.querySelector('meta[name="default-mode"]');
-  const currentMode = defaultModeMeta ? defaultModeMeta.getAttribute('content') : 'reachability';
 
   const FACES = ['R', 'B', 'G', 'W', 'Y'];
 
@@ -64,14 +63,6 @@ document.addEventListener('DOMContentLoaded', function () {
     });
   }
 
-  // Finger filter for reachability
-  const fingerSelect = document.getElementById('finger-select');
-  if (fingerSelect) {
-    fingerSelect.addEventListener('change', function () {
-      if (currentMode === 'reachability') applyReachabilityView();
-    });
-  }
-
   // ═══════════════════════════════════════════════════════
   //  SHARED CONTROLS
   // ═══════════════════════════════════════════════════════