Skip to content

Commit 34a648e

Browse files
RIGAT-Pierre-andre-2326090parRIGAT-Pierre-andre-2326090par
committed
Refactor heatmap UI: update finger selection elements and improve layout
1 parent 2b41f55 commit 34a648e

5 files changed

Lines changed: 72 additions & 439 deletions

File tree

‎_includes/heatmap.html‎

Lines changed: 70 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
11
{% assign e = site.data[page.lang]['heatmap-ui'] %}
22

3-
<div style="flex-basis: 100%; display: flex; justify-content: center; align-items: center; pointer-events: auto">
4-
<select class="finger-select" id="finger-select">
3+
<div style="flex-basis: 100%; display: flex; justify-content: center; align-items: center; pointer-events: auto; gap: 30px">
4+
<!--<div role="select" style="border: 1px solid #e8e8e8; border-radius: .5em; padding: .5em;">
5+
<input type="checkbox" style="display: none">
6+
<div class="hand-select">
7+
<span id="hand-selected"></span>
8+
<img src="/assets/img/arrow_down.png" alt="arrow_down" style="aspect-ratio: 1 / 1; height: 1.6em;">
9+
</div>
10+
<div class="hand-select-options" style="display: flex; flex-direction: column; color: #383838">
11+
<span class="hand-select-option">{{ e.total }}</span>
12+
<span class="hand-select-option">{{ e.preferred }}</span>
13+
<span class="hand-select-option">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}</span>
14+
<span class="hand-select-option">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</span>
15+
</div>
16+
</div>-->
17+
18+
<select class="finger-select active" id="all-fingers">
519
<option value="total">{{ e.total }}</option>
620
<option value="preferred">{{ e.preferred }}</option>
7-
<option value="LH">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}</option>
8-
<option value="RH">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</option>
9-
<option value="LT">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.thumb }}</option>
10-
<option value="LI">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.index }}</option>
11-
<option value="LM">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.middle }}</option>
12-
<option value="LR">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.ring }}</option>
13-
<option value="LL">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.little }}</option>
14-
<option value="RT">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.thumb }}</option>
15-
<option value="RI">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.index }}</option>
16-
<option value="RM">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.middle }}</option>
17-
<option value="RR">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.ring }}</option>
18-
<option value="RL">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.little }}</option>
21+
<option value="L">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}</option>
22+
<option value="R">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</option>
23+
</select>
24+
<select class="finger-select" id="finger-select">
25+
<option value="H">{{ e.all_button }}</option>
26+
<option value="T">{{ e.thumb }}</option>
27+
<option value="I">{{ e.index }}</option>
28+
<option value="M">{{ e.middle }}</option>
29+
<option value="R">{{ e.ring }}</option>
30+
<option value="L">{{ e.little }}</option>
1931
</select>
2032
</div>
2133

@@ -54,21 +66,21 @@
5466

5567
<script src="/assets/js/dataviz.js"></script>
5668
<script type="module">
57-
import langFinger from '/assets/js/ui-lang.json' with {type:"json"};
69+
import langFinger from '/assets/js/ui-lang.json' with {type: 'json'};
5870

5971
document.addEventListener('DOMContentLoaded', function () {
60-
const fingerSelect = document.getElementById('finger-select');
6172
const selectionText = document.getElementById('selection-text');
6273
const selectionIcon = document.querySelector('#selection-badge .selection-icon');
6374
const fingerContext = document.getElementById('finger-context');
75+
const fingerSelect = document.getElementById('finger-select');
76+
const allFingers = document.getElementById('all-fingers');
6477

6578
const FACES = ['R', 'B', 'G', 'W', 'Y'];
6679
const ALL_FINGERS = ['LT', 'LI', 'LM', 'LR', 'LL', 'RT', 'RI', 'RM', 'RR', 'RL'];
6780

6881
const lang = document.documentElement.lang
6982
const fingerData = langFinger[lang] ? langFinger[lang] : langFinger["en"];
7083

71-
7284
function updateUI(key) {
7385
const data = fingerData[key] || {name: key, icon: '', info: ''};
7486
if (selectionText) selectionText.textContent = data.name;
@@ -80,10 +92,24 @@
8092
let min = fixedRange ? fixedRange.min : Infinity;
8193
let max = fixedRange ? fixedRange.max : -Infinity;
8294
if (!fixedRange) {
83-
FACES.forEach(function (f) { data[f].forEach(function (v) { if (v < min) min = v; if (v > max) max = v; }); });
95+
FACES.forEach(function (f) {
96+
data[f].forEach(function (v) {
97+
if (v < min) min = v;
98+
if (v > max) max = v;
99+
});
100+
});
84101
}
85102
if (window.updateModel) {
86-
window.updateModel({ heatmap: data, heatmapMin: min, heatmapMax: max, scores: data, showScores: true, isReachability: true, scoreFormat: 'integer', figure6View: false });
103+
window.updateModel({
104+
heatmap: data,
105+
heatmapMin: min,
106+
heatmapMax: max,
107+
scores: data,
108+
showScores: true,
109+
isReachability: true,
110+
scoreFormat: 'integer',
111+
figure6View: false
112+
});
87113
}
88114
}
89115

@@ -95,7 +121,9 @@
95121
let sum = 0;
96122
fingers.forEach(function (f) {
97123
const fData = window.perFingerReachability[f];
98-
if (fData) fData.forEach(function (p) { sum += p[face][i]; });
124+
if (fData) fData.forEach(function (p) {
125+
sum += p[face][i];
126+
});
99127
});
100128
result[face].push(sum);
101129
}
@@ -127,35 +155,50 @@
127155
const fData = window.perFingerReachability[f];
128156
if (fData) {
129157
let s = 0;
130-
fData.forEach(function (p) { s += p[face][i]; }); if (s > best) best = s; }
158+
fData.forEach(function (p) {
159+
s += p[face][i];
160+
});
161+
if (s > best) best = s;
162+
}
131163
});
132164
result[face].push(best);
133165
}
134166
});
135-
applyHeatmap(result, { min: 0, max: 66 });
167+
applyHeatmap(result, {min: 0, max: 66});
136168
updateUI('best', ALL_FINGERS);
137169
}
138170

139171
function handleSelect() {
140-
const selectValue = fingerSelect.value;
172+
let selectValue = allFingers.value;
141173
if (selectValue === "total") {
174+
if (fingerSelect.classList.contains('active')) {
175+
fingerSelect.classList.remove('active');
176+
fingerSelect.value = "H"
177+
}
142178
updateSelection("total");
143179
} else if (selectValue === "preferred") {
180+
if (fingerSelect.classList.contains('active')) {
181+
fingerSelect.classList.remove('active');
182+
fingerSelect.value = "H"
183+
}
144184
handleBestFinger();
145185
} else {
146-
if (selectValue.charAt(1) === 'H') {
147-
if (selectValue.charAt(0) === 'L') {
186+
fingerSelect.classList.add('active')
187+
let selectFinger = fingerSelect.value;
188+
if (selectFinger === 'H') {
189+
if (selectValue === 'L') {
148190
handleHandAll('left')
149191
} else {
150192
handleHandAll('right')
151193
}
152194
} else {
153-
updateSelection(selectValue)
195+
updateSelection(selectValue + selectFinger)
154196
}
155197
}
156198
}
157199

158-
fingerSelect.addEventListener('change', handleSelect);
200+
allFingers.addEventListener('change', handleSelect)
201+
fingerSelect.addEventListener('change', handleSelect)
159202

160203
handleSelect();
161204
document.getElementById('model-container').classList.add('active');

‎_includes/heatmap2.html‎

Lines changed: 0 additions & 218 deletions
This file was deleted.

0 commit comments

Comments
 (0)