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