1 files changed, 35 insertions, 0 deletions
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();