From f35d716bd38d03285fa511f6794af5d93e88f4dc Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Mon, 5 Aug 2024 15:29:45 -0700
Subject: WIP: smoothe squad view
---
src/index.js | 35 +++++++++++++++++++++++++++++++++++
1 file changed, 35 insertions(+)
(limited to 'src/index.js')
diff --git a/src/index.js b/src/index.js
index e6a8802..62c1128 100644
--- a/src/index.js
+++ b/src/index.js
@@ -279,6 +279,41 @@ document.querySelectorAll('#record-sheet [data-allegiance]').forEach(el => {
);
});
+document.querySelectorAll('.view-squad').forEach(b => b.addEventListener('click', e => {
+ const currentSquad = b.closest('.records-header').querySelector('.squad-number text');
+ const currentSquadContainer = b.closest('[id$="-record"]').querySelector(`.records > .squad-${currentSquad.textContent}`);
+
+ if (b.value === 'next') {
+ //const toSquad = currentSquadContainer.nextElementSibling || b.closest('[id$="-record"]').querySelector('.records > :first-child');
+ const toSquad = currentSquadContainer.nextElementSibling;
+ if (!toSquad) return;
+ currentSquad.textContent = +toSquad.className.match(/\d+/);
+
+ currentSquadContainer.addEventListener('transitionend', e => {
+ console.log('transitionend', 'current', currentSquadContainer, 'next', toSquad);
+ currentSquadContainer.style.display = 'none';
+ toSquad.style.display = 'block';
+ b.closest('[id$="-record"]').querySelector('.records').scrollTo(0, 0);
+ toSquad.style.transform = 'translateX(0)';
+ }, { once: true });
+
+ currentSquadContainer.style.transform = 'translateX(-100%)';
+ } else {
+ const toSquad = currentSquadContainer.previousElementSibling;
+ if (!toSquad) return;
+ currentSquad.textContent = +toSquad.className.match(/\d+/);
+
+ currentSquadContainer.addEventListener('transitionend', e => {
+ currentSquadContainer.style.display = 'none';
+ toSquad.style.display = 'block';
+ b.closest('[id$="-record"]').querySelector('.records').scrollTo(0, 0);
+ toSquad.style.transform = 'translateX(0)';
+ }, { once: true });
+
+ currentSquadContainer.style.transform = 'translateX(100%)';
+ }
+}));
+
contentVisToggleEl.addEventListener('input', toggleContentVis);
contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
toggleContentVis();
--
cgit v1.2.3