mi/sunday
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ comic embed

Browse Source
This commit is contained in:
mi
2025-11-15 16:55:51 +10:00
parent 418ba6e4ba
commit 4ec1feb2a9
7 changed files with 291 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
static/js/comic-nav.js
View File

@@ -125,6 +125,11 @@
// Update URL without reload
history.pushState({ comicId: comic.number }, '', `/comic/${comic.number}`);
// Dispatch custom event for other features (like embed button)
window.dispatchEvent(new CustomEvent('comicUpdated', {
detail: { comicNumber: comic.number }
}));
// Move focus to comic image for keyboard navigation accessibility
const comicImageFocus = document.getElementById('comic-image-focus');
if (comicImageFocus) {
@@ -202,10 +207,22 @@
firstBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
firstBtn.onclick = (e) => { e.preventDefault(); loadComic(1); };
firstBtn.removeAttribute('aria-disabled');
if (firstBtn.tagName === 'SPAN') {
firstBtn.setAttribute('tabindex', '0');
firstBtn.setAttribute('role', 'button');
firstBtn.onkeydown = (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
loadComic(1);
}
};
}
} else {
firstBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
firstBtn.onclick = null;
firstBtn.onkeydown = null;
firstBtn.setAttribute('aria-disabled', 'true');
firstBtn.removeAttribute('tabindex');
}
// Previous button
@@ -214,10 +231,22 @@
prevBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
prevBtn.onclick = (e) => { e.preventDefault(); loadComic(currentNumber - 1); };
prevBtn.removeAttribute('aria-disabled');
if (prevBtn.tagName === 'SPAN') {
prevBtn.setAttribute('tabindex', '0');
prevBtn.setAttribute('role', 'button');
prevBtn.onkeydown = (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
loadComic(currentNumber - 1);
}
};
}
} else {
prevBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
prevBtn.onclick = null;
prevBtn.onkeydown = null;
prevBtn.setAttribute('aria-disabled', 'true');
prevBtn.removeAttribute('tabindex');
}
// Comic date display
@@ -231,10 +260,22 @@
nextBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
nextBtn.onclick = (e) => { e.preventDefault(); loadComic(currentNumber + 1); };
nextBtn.removeAttribute('aria-disabled');
if (nextBtn.tagName === 'SPAN') {
nextBtn.setAttribute('tabindex', '0');
nextBtn.setAttribute('role', 'button');
nextBtn.onkeydown = (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
loadComic(currentNumber + 1);
}
};
}
} else {
nextBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
nextBtn.onclick = null;
nextBtn.onkeydown = null;
nextBtn.setAttribute('aria-disabled', 'true');
nextBtn.removeAttribute('tabindex');
}
// Latest button
@@ -243,10 +284,22 @@
latestBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
latestBtn.onclick = (e) => { e.preventDefault(); loadComic(totalComics); };
latestBtn.removeAttribute('aria-disabled');
if (latestBtn.tagName === 'SPAN') {
latestBtn.setAttribute('tabindex', '0');
latestBtn.setAttribute('role', 'button');
latestBtn.onkeydown = (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
loadComic(totalComics);
}
};
}
} else {
latestBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
latestBtn.onclick = null;
latestBtn.onkeydown = null;
latestBtn.setAttribute('aria-disabled', 'true');
latestBtn.removeAttribute('tabindex');
}
}