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