tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

sliding modals, view transitions, accessibility, etc, etc

Browse Source
This commit is contained in:
zach
2026-03-11 15:21:43 -04:00
parent 7482cb9e9c
commit 3d46a48a7d
20 changed files with 708 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

454
src/pages/partials/card-modal.astro
View File

@@ -73,31 +73,27 @@ const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Hea
const conditionAttributes = (price: any) => {
const volatility = (() => {
const current = price?.marketPrice;
const market = price?.marketPrice;
const low = price?.lowestPrice;
const high = price?.highestPrice;
const median = price?.medianPrice;
if (current === null || low === null || high === null) return "Indeterminate";
if (market == null || low == null || high == null || Number(market) === 0) {
return "Indeterminate";
}
const range = Number(high) - Number(low);
if (range <= 0) return "Low";
const spreadPct = (Number(high) - Number(low)) / Number(market) * 100;
const position = (Number(current) - Number(low)) / range;
if (position > 0.76) return "High";
if (position > 0.49) return "Medium";
if (spreadPct >= 81) return "High";
if (spreadPct >= 59) return "Medium";
return "Low";
})();
// Updated logic:
// ❗ If High / Medium / Low → never "alert-secondary"
// ❗ If Indeterminate → "alert-secondary"
const volatilityClass = (() => {
switch (volatility) {
case "High": return "alert-danger";
case "Medium": return "alert-warning";
case "Low": return "alert-success";
default: return "alert-secondary"; // Only for Indeterminate
case "High": return "alert-danger";
case "Medium": return "alert-warning";
case "Low": return "alert-success";
default: return "alert-dark"; // Indeterminate
}
})();
@@ -115,6 +111,10 @@ const conditionAttributes = (price: any) => {
const ebaySearchUrl = (card: any) => {
return `https://www.ebay.com/sch/i.html?_nkw=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&LH_Sold=1&Graded=No&_dcat=183454`;
};
const altSearchUrl = (card: any) => {
return `https://alt.xyz/browse?query=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&sortBy=newest_first`;
};
---
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
@@ -126,16 +126,6 @@ const ebaySearchUrl = (card: any) => {
<div class="text-light col-auto">{card?.variant}</div>
</div>
<div class="d-flex gap-2 align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary card-nav-prev d-none" title="Previous card (← or swipe right)" aria-label="Previous card">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
<button type="button" class="btn btn-sm btn-outline-secondary card-nav-next d-none" title="Next card (→ or swipe left)" aria-label="Next card">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
</div>
</div>
@@ -178,30 +168,57 @@ const ebaySearchUrl = (card: any) => {
<div class={`tab-pane fade ${attributes?.label} ${attributes?.class}`} id={`${attributes?.label}`} role="tabpanel" tabindex="0">
<div class="d-block gap-1 d-lg-flex">
<div class="d-flex flex-row flex-lg-column gap-1 col-12 col-lg-2 mb-1">
<div class="alert alert-secondary rounded p-2 flex-fill mb-1">
<h6>Market Price</h6>
<p class="pb-0">${price.marketPrice}</p>
<div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-1">
<h6 class="mb-auto">Market Price</h6>
<p class="mb-0 mt-1">${price.marketPrice}</p>
</div>
<div class="alert alert-secondary rounded p-2 flex-fill mb-1">
<h6>Lowest Price</h6>
<p class="pb-0">${price.lowestPrice}</p>
<div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-1">
<h6 class="mb-auto">Lowest Price</h6>
<p class="mb-0 mt-1">${price.lowestPrice}</p>
</div>
<div class="alert alert-secondary rounded p-2 flex-fill mb-1">
<h6>Highest Price</h6>
<p class="pb-0">${price.highestPrice}</p>
<div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-1">
<h6 class="mb-auto">Highest Price</h6>
<p class="mb-0 mt-1">${price.highestPrice}</p>
</div>
<div class={`alert alert-secondary rounded p-2 flex-fill mb-1 ${attributes?.volatilityClass}`}>
<h6>Volatility</h6>
<p class="pb-0 small">{attributes?.volatility}</p>
<div class={`alert alert-secondary rounded p-2 flex-fill d-flex flex-column mb-1 ${attributes?.volatilityClass}`}>
<h6 class="mb-auto">Volatility</h6>
<p class="mb-0 mt-1">{attributes?.volatility}</p>
</div>
</div>
<div class="d-flex flex-column gap-1 col-12 col-lg-10 mb-0 me-2 clearfix">
<div class="alert alert-secondary rounded p-2 mb-1">
<h6>Latest Sales</h6>
<div class="alert alert-dark rounded p-2 mb-1 table-responsive">
<h6>Latest Verified Sales</h6>
<table class="table table-sm mb-0">
<caption class="small">Filtered to remove mismatched language variants</caption>
<thead class="table-dark">
<tr>
<th scope="col">Date</th>
<th scope="col">Title</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="alert alert-secondary rounded p-2 mb-1">
<h6>Placeholder for graph</h6>
</div>
<div class="alert alert-dark rounded p-2 mb-1">
<h6>Market Price History</h6>
<div class="position-relative" style="height: 200px;">
<canvas id={`priceChart-${price.priceId}`} class="price-history-chart" data-card-id={card?.cardId} data-condition={price.condition}></canvas>
</div>
<div class="btn-group btn-group-sm d-flex flex-row gap-1 justify-content-end" role="group" aria-label="Time range">
<button type="button" class="btn btn-dark price-range-btn active" data-range="1m">1M</button>
<button type="button" class="btn btn-dark price-range-btn" data-range="3m">3M</button>
<button type="button" class="btn btn-dark price-range-btn" data-range="6m">6M</button>
<button type="button" class="btn btn-dark price-range-btn" data-range="1y">1Y</button>
<button type="button" class="btn btn-dark price-range-btn" data-range="all">All</button>
</div>
</div>
</div>
</div>
</div>
@@ -214,9 +231,10 @@ const ebaySearchUrl = (card: any) => {
</div>
</div>
</div>
<div class="col-sm-12 col-md-2 mt-0 mt-md-5">
<a class="btn btn-outline-light mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank" onclick="dataLayer.push({'event': 'tcgplayerClick', 'tcgplayerUrl': this.getAttribute('href')});"><img src="/vendors/tcgplayer.webp"> <span class="d-none d-lg-inline">TCGPlayer</span></a>
<a class="btn btn-outline-light mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a>
<div class="col-sm-12 col-md-2 mt-0 mt-md-5 d-flex flex-row flex-md-column">
<a class="btn btn-dark mb-2 w-100 p-2" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank" onclick="dataLayer.push({'event': 'tcgplayerClick', 'tcgplayerUrl': this.getAttribute('href')});"><img src="/vendors/tcgplayer.webp"> <span class="d-none d-lg-inline">TCGPlayer</span></a>
<a class="btn btn-dark mb-2 w-100 p-2" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a>
<a class="btn btn-dark mb-2 w-100 p-2" href={`${altSearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'altClick', 'altUrl': this.getAttribute('href')});"><svg width="48" height="20.16" viewBox="0 0 48 20" fill="none"><path d="M14.2761 19.9996H18.5308L11.6934 0.0712891H7.76953L14.2761 19.9996Z" fill="#ffffff"></path><path d="M6.17778 19.9986H6.14536L3.19643 11.2305L0 19.9988L6.17768 19.9989L6.17778 19.9986Z" fill="#ffffff"></path><path d="M24.7842 0H20.6759V19.9661H34.3427V16.5426H24.7842V0Z" fill="#ffffff"></path><path d="M41.6644 3.42355H47.4981V0H31.5033V3.42355H37.5561V19.9661H41.6644V3.42355Z" fill="#ffffff"></path></svg></a>
</div>
</div>
<div class="text-end my-0"><small class="text-body-tertiary">Prices last changed: {timeAgo(calculatedAt)}</small></div>
@@ -227,324 +245,42 @@ const ebaySearchUrl = (card: any) => {
</div>
<script is:inline>
async function copyImage(img) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
try {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
// draw the real image pixels
ctx.drawImage(img, 0, 0);
// convert to blob
canvas.toBlob(async (blob) => {
await navigator.clipboard.write([
new ClipboardItem({ "image/png": blob })
]);
console.log("Copied image via canvas.");
});
const blob = await new Promise((resolve, reject) => {
canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob failed')), 'image/png');
});
await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
showCopyToast('📋 Image copied!', '#198754');
} catch (err) {
console.error('Failed:', err);
showCopyToast('❌ Copy failed', '#dc3545');
}
}
// ===== 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';
}
}
function showCopyToast(message, color) {
const toast = document.createElement('div');
toast.textContent = message;
toast.style.cssText = `
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
background: ${color}; color: white; padding: 10px 20px;
border-radius: 8px; font-size: 14px; z-index: 9999;
opacity: 0; transition: opacity 0.2s ease;
pointer-events: none;
`;
document.body.appendChild(toast);
requestAnimationFrame(() => toast.style.opacity = '1');
setTimeout(() => {
toast.style.opacity = '0';
toast.addEventListener('transitionend', () => toast.remove());
}, 2000);
}
} // 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);
}
}
</script>