Skip to content

Commit e29cc76

Browse files
RIGAT-Pierre-andre-2326090parRIGAT-Pierre-andre-2326090par
committed
Refactor heatmap UI: update select option styles and improve event handling for selection
1 parent 8b4ed62 commit e29cc76

2 files changed

Lines changed: 120 additions & 39 deletions

File tree

‎_includes/heatmap.html‎

Lines changed: 93 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<span id="hand-selected">{{ e.total }}</span>
88
<img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
99
</label>
10-
<div id="hand-select-options" class="select-options">
11-
<span class="select-option">{{ e.total }}</span>
10+
<div class="select-options" id="hand-select-options">
11+
<span class="select-option choose">{{ e.total }}</span>
1212
<span class="select-option">{{ e.preferred }}</span>
1313
<span class="select-option">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}</span>
1414
<span class="select-option">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</span>
@@ -20,8 +20,8 @@
2020
<span id="finger-selected">{{ e.all_button }}</span>
2121
<img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
2222
</label>
23-
<div id="finger-select-options" class="select-options">
24-
<span class="select-option">{{ e.all_button }}</span>
23+
<div class="select-options" id="finger-select-options">
24+
<span class="select-option choose">{{ e.all_button }}</span>
2525
<span class="select-option">{{ e.thumb }}</span>
2626
<span class="select-option">{{ e.index }}</span>
2727
<span class="select-option">{{ e.middle }}</span>
@@ -78,6 +78,11 @@
7878
const selectionText = document.getElementById('selection-text');
7979
const selectionIcon = document.querySelector('#selection-badge .selection-icon');
8080
const fingerContext = document.getElementById('finger-context');
81+
const handOptions = document.querySelectorAll('#hand-select-options .select-option');
82+
console.log(handOptions)
83+
const fingerOptions = document.querySelectorAll('#finger-select-options .select-option');
84+
85+
let allFingerOption = fingerOptions[0];
8186

8287
const FACES = ['R', 'B', 'G', 'W', 'Y'];
8388
const ALL_FINGERS = ['LT', 'LI', 'LM', 'LR', 'LL', 'RT', 'RI', 'RM', 'RR', 'RL'];
@@ -157,6 +162,7 @@
157162
const preferredFingers = preferenceAggregate.tiedFingers[face][i];
158163
preferredFingers.forEach(function (f) {
159164
const fData = window.perFingerReachability[f];
165+
allFingerOption.classList.add('choose');
160166
if (fData) {
161167
let s = 0;
162168
fData.forEach(function (p) {
@@ -197,54 +203,103 @@
197203
}
198204
}
199205

200-
function handleFirstSelect(value) {
201-
let selectValue = handleCustomSelect(value);
202-
if (selectValue === "total") {
203-
if (fingerSelect.classList.contains('active')) {
204-
fingerSelect.classList.remove('active');
205-
fingerCheckbox.checked = false;
206-
fingerLabel.textContent = '{{ e.all_button }}'
207-
}
206+
function handleFirstSelect(e) {
207+
if (e === 'start') {
208208
updateSelection("total");
209-
handLabel.textContent = value;
210-
} else if (selectValue === "preferred") {
211-
if (fingerSelect.classList.contains('active')) {
212-
fingerSelect.classList.remove('active');
213-
fingerCheckbox.checked = false;
214-
fingerLabel.textContent = '{{ e.all_button }}'
215-
}
216-
handleBestFinger();
217-
handLabel.textContent = value;
218209
} else {
219-
fingerSelect.classList.add('active')
220-
if (selectValue === 'L') {
221-
handleHandAll('left')
222-
handLabel.textContent = value;
210+
let selectValue = handleCustomSelect(e.textContent);
211+
debugger;
212+
if (selectValue === "total") {
213+
if (fingerSelect.classList.contains('active')) {
214+
fingerSelect.classList.remove('active');
215+
fingerCheckbox.checked = false;
216+
fingerLabel.textContent = '{{ e.all_button }}'
217+
fingerOptions.forEach(elem => {
218+
elem.classList.remove('choose')
219+
})
220+
allFingerOption.classList.add('choose');
221+
}
222+
updateSelection("total");
223+
handLabel.textContent = e.textContent;
224+
handCheckbox.checked = false;
225+
handOptions.forEach(elem => {
226+
elem.classList.remove('choose')
227+
})
228+
e.classList.add('choose');
229+
} else if (selectValue === "preferred") {
230+
if (fingerSelect.classList.contains('active')) {
231+
fingerSelect.classList.remove('active');
232+
fingerCheckbox.checked = false;
233+
fingerLabel.textContent = '{{ e.all_button }}'
234+
fingerOptions.forEach(elem => {
235+
elem.classList.remove('choose')
236+
})
237+
allFingerOption.classList.add('choose');
238+
}
239+
handleBestFinger();
240+
handLabel.textContent = e.textContent;
241+
handCheckbox.checked = false;
242+
handOptions.forEach(elem => {
243+
elem.classList.remove('choose')
244+
})
245+
e.classList.add('choose');
223246
} else {
224-
handleHandAll('right')
225-
handLabel.textContent = value;
247+
fingerSelect.classList.add('active')
248+
if (selectValue === 'L') {
249+
handleHandAll('left')
250+
handLabel.textContent = e.textContent;
251+
handCheckbox.checked = false;
252+
handOptions.forEach(elem => {
253+
elem.classList.remove('choose')
254+
})
255+
e.classList.add('choose');
256+
} else {
257+
handleHandAll('right')
258+
handLabel.textContent = e.textContent;
259+
handCheckbox.checked = false;
260+
handOptions.forEach(elem => {
261+
elem.classList.remove('choose')
262+
})
263+
e.classList.add('choose');
264+
}
226265
}
227266
}
228267
}
229268

230-
function handleSecondSelect(value) {
231-
let selectValue = handleCustomSelect(value);
269+
function handleSecondSelect(e) {
270+
let selectValue = handleCustomSelect(e.textContent);
232271
switch (selectValue) {
233272
case "H":
234273
if (handleCustomSelect(handLabel.textContent) === 'L') {
235274
handleHandAll('left')
236-
fingerLabel.textContent = value;
275+
fingerLabel.textContent = e.textContent;
276+
fingerCheckbox.checked = false;
277+
fingerOptions.forEach(elem => {
278+
elem.classList.remove('choose')
279+
})
280+
e.classList.add('choose');
237281
} else {
238282
handleHandAll('right')
239-
fingerLabel.textContent = value;
240-
} break;
283+
fingerLabel.textContent = e.textContent;
284+
fingerCheckbox.checked = false;
285+
fingerOptions.forEach(elem => {
286+
elem.classList.remove('choose')
287+
})
288+
e.classList.add('choose');
289+
}
290+
break;
241291
case "T":
242292
case "I":
243293
case "M":
244294
case "R":
245295
case "L":
246296
updateSelection(handleCustomSelect(handLabel.textContent) + selectValue);
247-
fingerLabel.textContent = value;
297+
fingerLabel.textContent = e.textContent;
298+
fingerCheckbox.checked = false;
299+
fingerOptions.forEach(elem => {
300+
elem.classList.remove('choose')
301+
})
302+
e.classList.add('choose');
248303
break;
249304
}
250305
}
@@ -257,19 +312,19 @@
257312
fingerCheckbox.checked = false;
258313
})
259314

260-
document.querySelectorAll('#hand-select-options .select-option').forEach(elem => {
315+
handOptions.forEach(elem => {
261316
elem.addEventListener('click', () => {
262-
handleFirstSelect(elem.textContent);
317+
handleFirstSelect(elem);
263318
});
264319
})
265320

266-
document.querySelectorAll('#finger-select-options .select-option').forEach(elem => {
321+
fingerOptions.forEach(elem => {
267322
elem.addEventListener('click', () => {
268-
handleSecondSelect(elem.textContent);
323+
handleSecondSelect(elem);
269324
});
270325
})
271326

272-
handleFirstSelect('{{ e.total }}');
327+
handleFirstSelect('start');
273328
document.getElementById('model-container').classList.add('active');
274329
});
275330
</script>

‎assets/css/heatmap.css‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
display: flex;
5151
align-items: flex-start;
5252
pointer-events: auto;
53-
gap: 30px;
53+
gap: 2em;
5454
user-select: none;
5555
}
5656

@@ -81,6 +81,15 @@
8181
background-color: white;
8282
}
8383

84+
.select-option {
85+
margin-top: 0.4em;
86+
color: #DC800F;
87+
}
88+
89+
.select-option:hover, .select-option.choose {
90+
color: #111
91+
}
92+
8493
.select-checkbox ~ .select-options {
8594
display: none;
8695
}
@@ -90,6 +99,22 @@
9099
padding-top: 0.2em;
91100
}
92101

102+
.select-checkbox:checked ~ label[for="hand-select-checkbox"] img {
103+
transform: rotate(0deg);
104+
}
105+
106+
.select-checkbox ~ label[for="hand-select-checkbox"] img {
107+
transform: rotate(-90deg);
108+
}
109+
110+
.select-checkbox:checked ~ label[for="finger-select-checkbox"] img {
111+
transform: rotate(0deg);
112+
}
113+
114+
.select-checkbox ~ label[for="finger-select-checkbox"] img {
115+
transform: rotate(-90deg);
116+
}
117+
93118
/* Finger context */
94119
.finger-context {
95120
display: flex;
@@ -169,4 +194,5 @@
169194
select { min-width: 140px; font-size: 12px; padding: 6px 10px; }
170195
.heatmap-legend { font-size: 10px; }
171196
.heatmap-gradient { width: 60px; height: 8px; }
197+
#interface { gap: 1em; }
172198
}

0 commit comments

Comments
 (0)