Refactor record_sheet.js

This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:34 -07:00
parent 686b21e893
commit 0f4b3a5a53

View File

@ -305,38 +305,27 @@ function clear() {
} }
function reveal(record) { function reveal(record) {
const currentSquadView = document.querySelector(`#record-sheet #${record.dataset.allegiance}-record .records-header .squad-number text`); const currentSquadIndicator = document.querySelector(`#record-sheet #${record.dataset.allegiance}-record .records-header .squad-number text`);
const records = document.querySelector(`#record-sheet #${record.dataset.allegiance}-record .records`); const records = document.querySelector(`#record-sheet #${record.dataset.allegiance}-record .records`);
const target = records.querySelector(`.squad-${record.dataset.squad}`); const currentSquad = records.querySelector(`.squad-${currentSquadIndicator.textContent}`);
const currentSquad = records.querySelector(`.squad-${currentSquadView.textContent}`);
let direction; function revealSquad(current, squad, direction) {
let next = prev = currentSquad;
while (!direction && (next || prev)) {
next = next?.nextElementSibling;
prev = prev?.previousElementSibling;
if (next === target) direction = 'next';
else if (prev === target) direction = 'previous';
}
function showSquad(current, target, direction) {
current.addEventListener('transitionend', e => { current.addEventListener('transitionend', e => {
const toSquad = current[`${direction}ElementSibling`]; const next = current[`${direction}ElementSibling`];
currentSquadView.textContent = +toSquad.className.match(/\d+/); currentSquadIndicator.textContent = +next.className.match(/\d+/);
current.style.display = 'none'; current.style.display = 'none';
// There needs to be a delay between making it visible and the // There needs to be a delay between making it visible and the
// transformation. ScrollTo seems to create enough delay. // transformation. ScrollTo seems to create enough delay.
toSquad.style.display = 'block'; next.style.display = 'block';
records.scrollTo(0, 0); records.scrollTo(0, 0);
if (toSquad[`${direction}ElementSibling`] && toSquad !== target) { if (next !== squad && next[`${direction}ElementSibling`])
showSquad(toSquad, target, direction); revealSquad(next, squad, direction);
} else { else {
toSquad.style.transform = 'translateX(0)'; next.style.transform = 'translateX(0)';
toSquad.addEventListener('transitionend', e => { next.addEventListener('transitionend', e => {
record.scrollIntoView({ behavior: 'smooth' }); record.scrollIntoView({ behavior: 'smooth' });
}, { once: true }); }, { once: true });
} }
@ -345,9 +334,10 @@ function reveal(record) {
current.style.transform = `translateX(${direction === 'next' ? '-' : ''}100%)`; current.style.transform = `translateX(${direction === 'next' ? '-' : ''}100%)`;
} }
if (currentSquad !== target) if (!currentSquad.contains(record)) {
showSquad(currentSquad, target, direction); const [squad] = closestSibling(currentSquad, `.squad-${record.dataset.squad}`);
else revealSquad(currentSquad, squad.el, squad.direction);
} else
record.scrollIntoView({ behavior: 'smooth' }); record.scrollIntoView({ behavior: 'smooth' });
} }