wah.su/mstickers
1
0
Fork 0
mirror of https://github.com/wah-su/mstickers.git synced 2025-04-05 15:54:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add placeholder images

Browse source
This commit is contained in:
Kentai Radiquum 2024-12-29 18:24:00 +05:00
parent a4c0a0ce14
commit 5cb32a8681
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 36 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -16,7 +16,7 @@
<div class="flex-col hidden gap-4 w-full md:w-[600px]" id="preview_sticker_pack"> <div class="flex-col hidden gap-4 w-full md:w-[600px]" id="preview_sticker_pack">
<div class="flex flex-wrap items-center justify-around gap-4 p-4 rounded-lg shadow-lg md:flex-row bg-stone-800 text-slate-200" <div class="flex flex-wrap items-center justify-around gap-4 p-4 rounded-lg shadow-lg md:flex-row bg-stone-800 text-slate-200"
id="preview_sticker_pack"> id="preview_sticker_pack">
<img src="static/images/cinny.png" class="object-contain w-32 md:w-64" alt="" id="preview_sticker_pack_image" /> <img src="static/images/sticker.png" class="object-contain w-32 md:w-64" alt="" id="preview_sticker_pack_image" />
<div class="flex flex-col justify-center gap-2"> <div class="flex flex-col justify-center gap-2">
<p class="text-4xl text-bold" id="preview_sticker_pack_name"> <p class="text-4xl text-bold" id="preview_sticker_pack_name">
{sticker_pack_name} {sticker_pack_name}
@ -93,9 +93,9 @@
</div> </div>
<div class="gap-1 [grid-template-columns:repeat(auto-fill,minmax(128px,372px))] justify-center items-center hidden w-full" id="stickerpacks_index"> <div class="gap-1 [grid-template-columns:repeat(auto-fill,minmax(128px,372px))] justify-center items-center hidden w-full" id="stickerpacks_index">
<div class="grid hidden gap-4 items-center flex-grow bg-stone-800 text-slate-200 border-black border-solid border-2 p-4 rounded-lg"> <div class="hidden gap-4 items-center flex-grow bg-stone-800 text-slate-200 border-black border-solid border-2 p-4 rounded-lg">
<img src="static/images/cinny.png" alt="" class="object-contain w-24"/> <img src="static/images/cinny.png" alt="" class="object-contain w-24"/>
<div> <div class="grid">
<p class="text-2xl">{pack_name}</p> <p class="text-2xl">{pack_name}</p>
<p class="text-xl">{artist_name}</p> <p class="text-xl">{artist_name}</p>
</div> </div>

BIN
static/images/sticker.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

36
static/pack_preview.js
View file

@ -53,6 +53,15 @@ async function loadIndex() {
} }
} }
function imageIsLoaded(img_id, img_placeholder) {
const __img = document.getElementById(img_id);
const __img_placeholder = document.getElementById(img_placeholder);
if (__img.complete) {
__img_placeholder.classList.add("hidden");
__img.classList.remove("hidden");
}
}
async function loadStickerpacks() { async function loadStickerpacks() {
stickerpacksIndexContainer.classList.remove("hidden"); stickerpacksIndexContainer.classList.remove("hidden");
stickerpacksIndexContainer.classList.add("grid"); stickerpacksIndexContainer.classList.add("grid");
@ -76,12 +85,16 @@ async function loadStickerpacks() {
if (!data) { if (!data) {
continue; continue;
} }
const _tmp_id = data.stickers[0].id;
stickerpacksIndexContainer.innerHTML += ` stickerpacksIndexContainer.innerHTML += `
<a href="index.html?id=${index.packs[i].split('.json')[0]}"> <a href="index.html?id=${index.packs[i].split(".json")[0]}">
<div class="flex gap-4 items-center bg-stone-800 text-slate-200 p-4 rounded-lg"> <div class="flex gap-4 items-center bg-stone-800 text-slate-200 p-4 rounded-lg">
<img src="${getStickerImage(data.stickers[0].id)}" alt="${ <img src="${getStickerImage(data.stickers[0].id)}" alt="${
data.stickers[0].body
}" class="hidden object-contain w-24" id="${_tmp_id}"/>
<img src="static/images/sticker.png" alt="${
data.stickers[0].body data.stickers[0].body
}" class="object-contain w-24"/> }" class="object-contain w-24" id="${_tmp_id}-placeholder"/>
<div> <div>
<p class="text-2xl">${data.title}</p> <p class="text-2xl">${data.title}</p>
${ ${
@ -93,6 +106,11 @@ async function loadStickerpacks() {
</div> </div>
</a> </a>
`; `;
const __img = document.getElementById(_tmp_id);
__img.addEventListener("load", () => {
imageIsLoaded(_tmp_id, `${_tmp_id}-placeholder`);
__img.removeEventListener("load", this);
});
} }
} }
@ -186,10 +204,22 @@ function updatePackInfo(data) {
for (let i = 0; i < data.stickers.length; i++) { for (let i = 0; i < data.stickers.length; i++) {
const sticker = data.stickers[i]; const sticker = data.stickers[i];
const stickerImage = document.createElement("img"); const stickerImage = document.createElement("img");
const stickerImagePlaceholder = document.createElement("img");
stickerImagePlaceholder.src = `static/images/sticker.png`;
stickerImagePlaceholder.id = `${sticker.id}-placeholder`;
stickerImagePlaceholder.alt = sticker.body;
stickerImagePlaceholder.classList.add("object-contain", "md:w-20", "w-24");
packStickers.appendChild(stickerImagePlaceholder);
stickerImage.src = getStickerImage(sticker.id); stickerImage.src = getStickerImage(sticker.id);
stickerImage.id = sticker.id;
stickerImage.alt = sticker.body; stickerImage.alt = sticker.body;
stickerImage.classList.add("object-contain", "md:w-20", "w-24"); stickerImage.classList.add("object-contain", "md:w-20", "w-24", "hidden");
packStickers.appendChild(stickerImage); packStickers.appendChild(stickerImage);
stickerImage.addEventListener("load", () => {
imageIsLoaded(sticker.id, `${sticker.id}-placeholder`);
stickerImage.removeEventListener("load", this);
});
} }
} }