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

[bugfix] make sure previous card is not shown in modal by defaulting to "loading..."

Browse Source
This commit is contained in:
Thad Miller
2026-03-05 12:10:55 -05:00
parent f2b0309b6e
commit 4ec64dca18
2 changed files with 3 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/js/main.js
View File

@@ -4,6 +4,7 @@ window.bootstrap = bootstrap;
// trap browser back and close the modal if open // trap browser back and close the modal if open
const cardModal = document.getElementById('cardModal'); const cardModal = document.getElementById('cardModal');
const loadingMsg = cardModal.innerHTML;
// Push a new history state when the modal is shown // Push a new history state when the modal is shown
cardModal.addEventListener('shown.bs.modal', () => { cardModal.addEventListener('shown.bs.modal', () => {
history.pushState({ modalOpen: true }, null, '#cardModal'); history.pushState({ modalOpen: true }, null, '#cardModal');
@@ -19,6 +20,7 @@ window.addEventListener('popstate', (e) => {
}); });
// Trigger a back navigation when the modal is closed via its native controls (X, backdrop click) // Trigger a back navigation when the modal is closed via its native controls (X, backdrop click)
cardModal.addEventListener('hide.bs.modal', () => { cardModal.addEventListener('hide.bs.modal', () => {
cardModal.innerHTML = loadingMsg;
if (history.state && history.state.modalOpen) { if (history.state && history.state.modalOpen) {
history.back(); history.back();
} }

1
src/components/CardGrid.astro
View File

@@ -23,6 +23,7 @@ import BackToTop from "./BackToTop.astro"
<div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true" transition:name=""> <div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true" transition:name="">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl"> <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
<div class="modal-content"> <div class="modal-content">
Loading...
</div> </div>
</div> </div>
</div> </div>