Refactor record_sheet.js
This commit is contained in:
parent
686b21e893
commit
0f4b3a5a53
@ -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' });
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user