From ce56d08efe92221fd35293543e0ca36643139c95 Mon Sep 17 00:00:00 2001 From: zach Date: Fri, 6 Mar 2026 13:53:15 -0500 Subject: [PATCH] scrolling within modals using keys/buttons/swipe (needs help with infinite scrolling) --- src/assets/css/main.scss | 69 ++++++ src/layouts/Main.astro | 2 + src/pages/partials/card-modal.astro | 334 +++++++++++++++++++++++++++- src/pages/partials/cards.astro | 1 - 4 files changed, 398 insertions(+), 8 deletions(-) diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 794b5a7..1f5142e 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -530,4 +530,73 @@ $tiers: ( fill: var(--bs-success-border-subtle); stroke: var(--bs-success-border-subtle); color: var(--bs-success-border-subtle); +} + +/* Card Modal Navigation Styles */ + +.card-nav-prev, +.card-nav-next { + transition: all 0.2s ease-in-out; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 36px; + padding: 0.375rem 0.5rem; +} + +.card-nav-prev:hover:not(:disabled), +.card-nav-next:hover:not(:disabled) { + background-color: var(--bs-secondary); + border-color: var(--bs-secondary); + color: white; + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.card-nav-prev:active:not(:disabled), +.card-nav-next:active:not(:disabled) { + transform: translateY(0); +} + +.card-nav-prev:disabled, +.card-nav-next:disabled { + cursor: not-allowed; +} + +/* Optional: Add keyboard indicator hint */ +.modal-header { + position: relative; +} + +/* Smooth fade in/out for disabled state */ +.card-nav-prev, +.card-nav-next { + will-change: opacity; +} + +/* Touch-friendly sizing on mobile */ +@media (max-width: 768px) { + .card-nav-prev, + .card-nav-next { + min-width: 40px; + padding: 0.5rem; + } +} + +/* Optional: Add a subtle animation when swiping */ +@keyframes swipe-feedback { + 0% { + transform: scale(1); + } + 50% { + transform: scale(0.95); + } + 100% { + transform: scale(1); + } +} + +.card-nav-prev.swiping, +.card-nav-next.swiping { + animation: swipe-feedback 0.3s ease-out; } \ No newline at end of file diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro index 6e5ae23..5355700 100644 --- a/src/layouts/Main.astro +++ b/src/layouts/Main.astro @@ -17,6 +17,7 @@ import '/src/assets/css/main.scss'; + Rigid's App Thing @@ -40,5 +41,6 @@ import '/src/assets/css/main.scss'; + \ No newline at end of file diff --git a/src/pages/partials/card-modal.astro b/src/pages/partials/card-modal.astro index e3cd1ff..2e66d60 100644 --- a/src/pages/partials/card-modal.astro +++ b/src/pages/partials/card-modal.astro @@ -12,7 +12,6 @@ export const prerender = false; const searchParams = Astro.url.searchParams; const cardId = Number(searchParams.get('cardId')) || 0; - // query the database for the card with the given productId and return the card data as json const card = await db.query.cards.findFirst({ where: { cardId: Number(cardId) }, @@ -22,6 +21,16 @@ const card = await db.query.cards.findFirst({ } }); +// Get the current card's position in the grid and find previous/next cards +// This assumes cards are displayed in a specific order in the DOM +const cardElements = typeof document !== 'undefined' ? document.querySelectorAll('[data-card-id]') : []; +let prevCardId = null; +let nextCardId = null; + +// Since this is server-side, we can't access the DOM directly +// Instead, we'll pass the current cardId and let JavaScript handle navigation +// The JS will look for the next/prev cards in the grid based on the visible cards + function timeAgo(date: Date | null) { if (!date) return "Not applicable"; @@ -100,16 +109,27 @@ const ebaySearchUrl = (card: any) => { }; --- -
-
+
{card?.productName}
{card?.number}
{card?.variant}
- +
+ + + +
@@ -197,8 +217,6 @@ const ebaySearchUrl = (card: any) => {
-
-
\ No newline at end of file + + // ===== Card Navigation System ===== + // Only declare class if it hasn't been declared yet (prevents HTMX reload errors) + if (typeof window.CardNavigator === 'undefined') { + window.CardNavigator = class CardNavigator { + constructor() { + this.touchStartX = 0; + this.touchEndX = 0; + this.swipeThreshold = 50; // minimum distance in pixels for a swipe + this.loadingMoreCards = false; + this.init(); + } + + init() { + this.setupEventListeners(); + this.updateNavigationButtons(); + this.setupScrollObserver(); + } + + setupScrollObserver() { + // Listen for when new cards are added to the grid + const observer = new MutationObserver(() => { + this.loadingMoreCards = false; + }); + + const cardGrid = document.getElementById('cardGrid'); + if (cardGrid) { + observer.observe(cardGrid, { + childList: true, + subtree: false + }); + } + } + + setupEventListeners() { + const modal = document.getElementById('cardModal'); + if (!modal) return; + + // Keyboard navigation + document.addEventListener('keydown', (e) => this.handleKeydown(e)); + + // Touch/Swipe navigation + modal.addEventListener('touchstart', (e) => this.handleTouchStart(e), false); + modal.addEventListener('touchend', (e) => this.handleTouchEnd(e), false); + + // Button navigation + const prevBtn = document.querySelector('.card-nav-prev'); + const nextBtn = document.querySelector('.card-nav-next'); + + if (prevBtn) prevBtn.addEventListener('click', () => this.navigatePrev()); + if (nextBtn) nextBtn.addEventListener('click', () => this.navigateNext()); + } + + handleKeydown(e) { + // Only navigate if the modal is visible + const modal = document.getElementById('cardModal'); + if (!modal || !modal.classList.contains('show')) return; + + if (e.key === 'ArrowLeft') { + e.preventDefault(); + this.navigatePrev(); + } else if (e.key === 'ArrowRight') { + e.preventDefault(); + this.navigateNext(); + } + } + + handleTouchStart(e) { + this.touchStartX = e.changedTouches[0].screenX; + } + + handleTouchEnd(e) { + this.touchEndX = e.changedTouches[0].screenX; + this.handleSwipe(); + } + + handleSwipe() { + const diff = this.touchStartX - this.touchEndX; + + // Swipe left = show next card + if (diff > this.swipeThreshold) { + this.navigateNext(); + } + // Swipe right = show previous card + else if (diff < -this.swipeThreshold) { + this.navigatePrev(); + } + } + + getVisibleCards() { + // Get all card triggers from the current grid + return Array.from(document.querySelectorAll('[data-card-id]')); + } + + getCurrentCardElement() { + const modal = document.getElementById('cardModal'); + if (!modal) return null; + + const currentCardId = modal.querySelector('.modal-content')?.getAttribute('data-card-id'); + return currentCardId ? document.querySelector(`[data-card-id="${currentCardId}"]`) : null; + } + + navigatePrev() { + const cards = this.getVisibleCards(); + const currentCard = this.getCurrentCardElement(); + + if (!cards.length || !currentCard) return; + + const currentIndex = cards.indexOf(currentCard); + if (currentIndex <= 0) return; // Already at the first card + + const prevCard = cards[currentIndex - 1]; + this.loadCard(prevCard); + } + + navigateNext() { + const cards = this.getVisibleCards(); + const currentCard = this.getCurrentCardElement(); + + if (!cards.length || !currentCard) return; + + const currentIndex = cards.indexOf(currentCard); + if (currentIndex >= cards.length - 1) { + // At the last card, try to load more cards via infinite scroll + this.triggerInfiniteScroll(); + return; + } + + const nextCard = cards[currentIndex + 1]; + this.loadCard(nextCard); + } + + triggerInfiniteScroll() { + if (this.loadingMoreCards) return; // Already loading + + this.loadingMoreCards = true; + + // Find the infinite scroll trigger element (the "Loading..." div with hx-trigger="revealed") + const scrollTrigger = document.querySelector('[hx-trigger="revealed"]'); + + if (scrollTrigger) { + // Trigger HTMX to load more cards + if (typeof htmx !== 'undefined') { + htmx.trigger(scrollTrigger, 'revealed'); + } else { + // Fallback: manually call the endpoint + const endpoint = scrollTrigger.getAttribute('hx-post') || scrollTrigger.getAttribute('hx-get'); + if (endpoint) { + const formData = new FormData(document.getElementById('searchform')); + const currentCards = this.getVisibleCards(); + const start = (currentCards.length - 1) * 20; // Approximate + formData.append('start', start.toString()); + + fetch(endpoint, { + method: 'POST', + body: formData + }) + .then(r => r.text()) + .then(html => { + const grid = document.getElementById('cardGrid'); + if (grid) { + grid.insertAdjacentHTML('beforeend', html); + this.waitForNewCards(); + } + }); + } + } + + // Wait for new cards to be added and then navigate + this.waitForNewCards(); + } else { + this.loadingMoreCards = false; + } + } + + waitForNewCards() { + // Wait up to 3 seconds for new cards to load + let attempts = 0; + const checkInterval = setInterval(() => { + attempts++; + const cards = this.getVisibleCards(); + const currentCardId = document.querySelector('#cardModal .modal-content')?.getAttribute('data-card-id'); + const currentIndex = cards.findIndex(c => c.getAttribute('data-card-id') === currentCardId); + + // If we have more cards than before, navigate to the next one + if (currentIndex >= 0 && currentIndex < cards.length - 1) { + clearInterval(checkInterval); + const nextCard = cards[currentIndex + 1]; + this.loadingMoreCards = false; + this.loadCard(nextCard); + } else if (attempts > 30) { // 30 * 100ms = 3 seconds + clearInterval(checkInterval); + this.loadingMoreCards = false; + this.updateNavigationButtons(); + } + }, 100); + } + + loadCard(cardElement) { + const hxGet = cardElement.getAttribute('hx-get'); + if (!hxGet) return; + + // Check if HTMX is available, if not use fetch + if (typeof htmx !== 'undefined') { + // Use HTMX to load the card + htmx.ajax('GET', hxGet, { + target: '#cardModal', + swap: 'innerHTML', + onLoad: () => { + this.updateNavigationButtons(); + // Trigger any analytics event if needed + const cardTitle = cardElement.querySelector('#cardImage')?.getAttribute('alt') || 'Unknown Card'; + if (typeof dataLayer !== 'undefined') { + dataLayer.push({ + 'event': 'virtualPageview', + 'pageUrl': hxGet, + 'pageTitle': cardTitle, + 'previousUrl': '/pokemon' + }); + } + } + }); + } else { + // Fallback to native fetch if HTMX not available + fetch(hxGet) + .then(response => response.text()) + .then(html => { + const modalContent = document.querySelector('#cardModal .modal-dialog'); + if (modalContent) { + modalContent.innerHTML = html; + this.updateNavigationButtons(); + // Trigger any analytics event if needed + const cardTitle = cardElement.querySelector('#cardImage')?.getAttribute('alt') || 'Unknown Card'; + if (typeof dataLayer !== 'undefined') { + dataLayer.push({ + 'event': 'virtualPageview', + 'pageUrl': hxGet, + 'pageTitle': cardTitle, + 'previousUrl': '/pokemon' + }); + } + } + }) + .catch(error => console.error('Error loading card:', error)); + } + } + + updateNavigationButtons() { + const cards = this.getVisibleCards(); + const currentCard = this.getCurrentCardElement(); + const currentIndex = cards.indexOf(currentCard); + + const prevBtn = document.querySelector('.card-nav-prev'); + const nextBtn = document.querySelector('.card-nav-next'); + + if (prevBtn) { + prevBtn.disabled = currentIndex <= 0; + prevBtn.style.opacity = currentIndex <= 0 ? '0.5' : '1'; + } + + if (nextBtn) { + nextBtn.disabled = currentIndex >= cards.length - 1; + nextBtn.style.opacity = currentIndex >= cards.length - 1 ? '0.5' : '1'; + } + } + } + } // End of: if (typeof window.CardNavigator === 'undefined') + + // Initialize the card navigator when the modal is shown (only setup once) + if (!window.cardNavigatorInitialized) { + window.cardNavigatorInitialized = true; + + const modalElement = document.getElementById('cardModal'); + if (modalElement) { + modalElement.addEventListener('shown.bs.modal', () => { + if (!window.cardNavigator) { + window.cardNavigator = new window.CardNavigator(); + } else { + window.cardNavigator.updateNavigationButtons(); + } + }); + } + + // Also initialize on first load in case the modal is already visible + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + // Wait a bit for HTMX to load + setTimeout(() => { + if (!window.cardNavigator) { + window.cardNavigator = new window.CardNavigator(); + } + }, 100); + }); + } else { + // Wait a bit for HTMX to load if already loaded + setTimeout(() => { + if (!window.cardNavigator) { + window.cardNavigator = new window.CardNavigator(); + } + }, 100); + } + } + \ No newline at end of file diff --git a/src/pages/partials/cards.astro b/src/pages/partials/cards.astro index 9f30505..ed37eaa 100644 --- a/src/pages/partials/cards.astro +++ b/src/pages/partials/cards.astro @@ -1,7 +1,6 @@ --- import { client } from '../../db/typesense'; import RarityIcon from '../../components/RarityIcon.astro'; - export const prerender = false; import * as util from 'util';