From 402e76ee6e27296b69a603d0d755bba27ce69943 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Fri, 9 Aug 2024 20:23:09 -0700
Subject: Refactor record_sheet.js
---
src/modules/record_sheet.js | 40 +++++++++++++++-------------------------
1 file changed, 15 insertions(+), 25 deletions(-)
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 81add27..5abb108 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -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' });
}
--
cgit v1.2.3