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

♿ mobile images

Browse Source
This commit is contained in:
mi
2025-11-12 14:15:47 +10:00
parent 83ea55adc3
commit ddf20d0f7f
5 changed files with 71 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/images/comics/comic-001-mobile.jpg LFS Normal file
View File

Binary file not shown.

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

@@ -67,10 +67,7 @@
// Update image and its link
const comicImageDiv = document.querySelector('.comic-image');
const img = comicImageDiv.querySelector('img');
img.src = `/static/images/comics/${comic.filename}`;
img.alt = title;
img.title = comic.alt_text;
updateComicImage(comicImageDiv, comic, title);
// Update or create/remove the link wrapper
updateComicImageLink(comic.number);
@@ -101,15 +98,47 @@
history.pushState({ comicId: comic.number }, '', `/comic/${comic.number}`);
}
// Update or create comic image with optional mobile version
function updateComicImage(comicImageDiv, comic, title) {
// Clear all existing content
comicImageDiv.innerHTML = '';
// Create new image element(s)
if (comic.mobile_filename) {
// Create picture element with mobile source
const picture = document.createElement('picture');
const source = document.createElement('source');
source.media = '(max-width: 768px)';
source.srcset = `/static/images/comics/${comic.mobile_filename}`;
const img = document.createElement('img');
img.src = `/static/images/comics/${comic.filename}`;
img.alt = title;
img.title = comic.alt_text;
picture.appendChild(source);
picture.appendChild(img);
comicImageDiv.appendChild(picture);
} else {
// Create regular img element
const img = document.createElement('img');
img.src = `/static/images/comics/${comic.filename}`;
img.alt = title;
img.title = comic.alt_text;
comicImageDiv.appendChild(img);
}
}
// Update comic image link for click navigation
function updateComicImageLink(currentNumber) {
const comicImageDiv = document.querySelector('.comic-image');
const img = comicImageDiv.querySelector('img');
const imgOrPicture = comicImageDiv.querySelector('picture') || comicImageDiv.querySelector('img');
// Remove existing link if present
const existingLink = comicImageDiv.querySelector('a');
if (existingLink) {
existingLink.replaceWith(img);
existingLink.replaceWith(imgOrPicture);
}
// Add link if there's a next comic
@@ -120,8 +149,8 @@
e.preventDefault();
loadComic(currentNumber + 1);
};
img.parentNode.insertBefore(link, img);
link.appendChild(img);
imgOrPicture.parentNode.insertBefore(link, imgOrPicture);
link.appendChild(imgOrPicture);
}
}