Skip to content

Commit da1d10f

Browse files
RIGAT-Pierre-andre-2326090parRIGAT-Pierre-andre-2326090par
committed
Refactor heatmap UI by removing unused elements and simplifying update logic
1 parent b156ce4 commit da1d10f

2 files changed

Lines changed: 5 additions & 61 deletions

File tree

‎_includes/heatmap-ui.html‎

Lines changed: 4 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -48,41 +48,19 @@
4848
const selectionText = document.getElementById('selection-text');
4949
const selectionIcon = document.querySelector('#selection-badge .selection-icon');
5050
const fingerContext = document.getElementById('finger-context');
51-
const allFingerDots = document.querySelectorAll('.finger-dot');
52-
const analogRings = document.querySelectorAll('.analog-ring');
53-
const btnAllFingers = document.getElementById('btn-all-fingers');
54-
const btnBestFinger = document.getElementById('btn-best-finger');
55-
const handActionBtns = document.querySelectorAll('.hand-action-btn');
51+
5652
const FACES = ['R', 'B', 'G', 'W', 'Y'];
5753
const ALL_FINGERS = ['LT', 'LI', 'LM', 'LR', 'LL', 'RT', 'RI', 'RM', 'RR', 'RL'];
5854

5955
const lang = document.documentElement.lang
6056
const fingerData = langFinger[lang] ? langFinger[lang] : langFinger["en"];
6157

6258

63-
function updateUI(key, activeFingers) {
59+
function updateUI(key) {
6460
const data = fingerData[key] || {name: key, icon: '', info: ''};
6561
if (selectionText) selectionText.textContent = data.name;
6662
if (selectionIcon) selectionIcon.textContent = data.icon;
6763
if (fingerContext) fingerContext.textContent = data.info;
68-
69-
allFingerDots.forEach(function (dot) {
70-
const f = dot.getAttribute('data-finger');
71-
dot.classList.toggle('active', activeFingers ? activeFingers.indexOf(f) !== -1 : f === key);
72-
});
73-
analogRings.forEach(function (ring) { ring.classList.remove('active'); });
74-
if (activeFingers && activeFingers.length === ALL_FINGERS.length) {
75-
const leftRing = document.querySelector('.analog-ring[data-hand="left"]');
76-
const rightRing = document.querySelector('.analog-ring[data-hand="right"]');
77-
if (leftRing) leftRing.classList.add('active');
78-
if (rightRing) rightRing.classList.add('active');
79-
} else if (key.charAt(0) === 'L' || key === 'left-all') {
80-
const lr = document.querySelector('.analog-ring[data-hand="left"]');
81-
if (lr) lr.classList.add('active');
82-
} else if (key.charAt(0) === 'R' || key === 'right-all') {
83-
const rr = document.querySelector('.analog-ring[data-hand="right"]');
84-
if (rr) rr.classList.add('active');
85-
}
8664
}
8765

8866
function applyHeatmap(data, fixedRange) {
@@ -113,17 +91,14 @@
11391
}
11492

11593
function updateSelection(fingerValue) {
116-
if (fingerSelect) { fingerSelect.value = fingerValue; fingerSelect.dispatchEvent(new Event('change')); }
94+
applyHeatmap(computeHandData(fingerValue === 'total' ? ALL_FINGERS : [fingerValue]));
11795
updateUI(fingerValue, fingerValue === 'total' ? ALL_FINGERS : null);
118-
handActionBtns.forEach(function (btn) { btn.classList.remove('active'); });
119-
if (fingerValue === 'total') btnAllFingers.classList.add('active');
12096
}
12197

12298
function handleHandAll(hand) {
12399
const fingers = hand === 'left' ? ['LT', 'LI', 'LM', 'LR', 'LL'] : ['RT', 'RI', 'RM', 'RR', 'RL'];
124100
applyHeatmap(computeHandData(fingers));
125101
updateUI(hand + '-all', fingers);
126-
handActionBtns.forEach(function (btn) { btn.classList.remove('active'); });
127102
}
128103

129104
function handleBestFinger() {
@@ -146,8 +121,6 @@
146121
});
147122
applyHeatmap(result, { min: 0, max: 66 });
148123
updateUI('best', ALL_FINGERS);
149-
handActionBtns.forEach(function (btn) { btn.classList.remove('active'); });
150-
btnBestFinger.classList.add('active');
151124
}
152125

153126
function handleSelect() {
@@ -169,19 +142,11 @@
169142
}
170143
}
171144

172-
allFingerDots.forEach(function (dot) {
173-
dot.addEventListener('click', function (e) { e.stopPropagation(); updateSelection(dot.getAttribute('data-finger')); });
174-
});
175-
analogRings.forEach(function (ring) {
176-
ring.addEventListener('click', function (e) { if (!e.target.closest('.finger-dot')) handleHandAll(ring.getAttribute('data-hand')); });
177-
});
178-
if (btnAllFingers) btnAllFingers.addEventListener('click', function () { updateSelection('total'); });
179-
if (btnBestFinger) btnBestFinger.addEventListener('click', handleBestFinger);
180-
181145
if (fingerSelect) {
182146
fingerSelect.addEventListener('change', handleSelect);
183147
}
184148

149+
handleSelect();
185150
document.getElementById('model-container').classList.add('active');
186151
});
187152
</script>

‎_includes/heatmap-ui2.html‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,6 @@
7575
const selectionText = document.getElementById('selection-text');
7676
const selectionIcon = document.querySelector('#selection-badge .selection-icon');
7777
const fingerContext = document.getElementById('finger-context');
78-
const allFingerDots = document.querySelectorAll('.finger-dot');
79-
const analogRings = document.querySelectorAll('.analog-ring');
8078
const fingerRadio = document.getElementById('finger-radio');
8179

8280
const FACES = ['R', 'B', 'G', 'W', 'Y'];
@@ -85,29 +83,11 @@
8583
const lang = document.documentElement.lang
8684
const fingerData = langFinger[lang] ? langFinger[lang] : langFinger["en"];
8785

88-
function updateUI(key, activeFingers) {
86+
function updateUI(key) {
8987
const data = fingerData[key] || {name: key, icon: '', info: ''};
9088
if (selectionText) selectionText.textContent = data.name;
9189
if (selectionIcon) selectionIcon.textContent = data.icon;
9290
if (fingerContext) fingerContext.textContent = data.info;
93-
94-
allFingerDots.forEach(function (dot) {
95-
const f = dot.getAttribute('data-finger');
96-
dot.classList.toggle('active', activeFingers ? activeFingers.indexOf(f) !== -1 : f === key);
97-
});
98-
analogRings.forEach(function (ring) { ring.classList.remove('active'); });
99-
if (activeFingers && activeFingers.length === ALL_FINGERS.length) {
100-
const leftRing = document.querySelector('.analog-ring[data-hand="left"]');
101-
const rightRing = document.querySelector('.analog-ring[data-hand="right"]');
102-
if (leftRing) leftRing.classList.add('active');
103-
if (rightRing) rightRing.classList.add('active');
104-
} else if (key.charAt(0) === 'L' || key === 'left-all') {
105-
const lr = document.querySelector('.analog-ring[data-hand="left"]');
106-
if (lr) lr.classList.add('active');
107-
} else if (key.charAt(0) === 'R' || key === 'right-all') {
108-
const rr = document.querySelector('.analog-ring[data-hand="right"]');
109-
if (rr) rr.classList.add('active');
110-
}
11191
}
11292

11393
function applyHeatmap(data, fixedRange) {
@@ -201,7 +181,6 @@
201181
});
202182

203183
handleSelect();
204-
205184
document.getElementById('model-container').classList.add('active');
206185
});
207186
</script>

0 commit comments

Comments
 (0)