imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-02-05 11:49:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve "heart" ui

Browse Source
This commit is contained in:
Andreas Krühlmann
2026-01-15 17:31:08 +01:00
parent 71f9e4ddaf
commit a682926104
3 changed files with 84 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/main/resources/static/js/customAssets.js
View File

@@ -782,33 +782,39 @@ export function createCustomAssetModal({
description.textContent = entry.description || "No description provided.";
const meta = document.createElement("small");
meta.textContent = entry.broadcaster ? `By ${entry.broadcaster}` : "";
const hearts = document.createElement("small");
hearts.className = "marketplace-hearts";
const heartIcon = document.createElement("i");
heartIcon.className = "fa-solid fa-heart";
const heartCount = document.createElement("span");
heartCount.textContent = String(entry.heartsCount ?? 0);
hearts.appendChild(heartIcon);
hearts.appendChild(heartCount);
content.appendChild(title);
content.appendChild(description);
content.appendChild(meta);
content.appendChild(hearts);
const actions = document.createElement("div");
actions.className = "marketplace-actions";
const heartCountWrapper = document.createElement("div");
heartCountWrapper.className = "marketplace-heart-count";
const heartCountIcon = document.createElement("i");
heartCountIcon.className = "fa-solid fa-heart";
const heartCount = document.createElement("span");
heartCount.textContent = String(entry.heartsCount ?? 0);
heartCountWrapper.appendChild(heartCountIcon);
heartCountWrapper.appendChild(heartCount);
const heartButton = document.createElement("button");
heartButton.type = "button";
heartButton.className = "icon-button marketplace-heart-button";
heartButton.setAttribute("aria-label", "Heart script");
updateMarketplaceHeartButton(heartButton, entry);
heartButton.addEventListener("click", () => toggleMarketplaceHeart(entry, heartCount));
heartButton.addEventListener("click", () =>
toggleMarketplaceHeart(entry, {
button: heartButton,
count: heartCount,
countWrapper: heartCountWrapper,
})
);
const importButton = document.createElement("button");
importButton.type = "button";
importButton.className = "icon-button";
importButton.setAttribute("aria-label", "Import script");
importButton.innerHTML = '<i class="icon fa-solid fa-cloud-download"></i>';
importButton.addEventListener("click", () => importMarketplaceScript(entry));
actions.appendChild(heartCountWrapper);
actions.appendChild(heartButton);
actions.appendChild(importButton);
@@ -855,10 +861,11 @@ export function createCustomAssetModal({
button.innerHTML = `<i class="icon ${iconClass}"></i>`;
}
function toggleMarketplaceHeart(entry, countElement) {
function toggleMarketplaceHeart(entry, elements = {}) {
if (!entry?.id) {
return;
}
animateMarketplaceHeart(elements);
fetch(`/api/marketplace/scripts/${entry.id}/heart`, {
method: "POST",
headers: { "Content-Type": "application/json" },
@@ -872,10 +879,14 @@ export function createCustomAssetModal({
.then((updated) => {
entry.heartsCount = updated.heartsCount ?? entry.heartsCount ?? 0;
entry.hearted = updated.hearted ?? entry.hearted;
if (countElement) {
countElement.textContent = String(entry.heartsCount ?? 0);
if (elements.count) {
elements.count.textContent = String(entry.heartsCount ?? 0);
}
renderMarketplace();
if (elements.button) {
updateMarketplaceHeartButton(elements.button, entry);
}
animateMarketplaceHeart(elements);
setTimeout(() => renderMarketplace(), 300);
})
.catch((error) => {
console.error(error);
@@ -883,6 +894,19 @@ export function createCustomAssetModal({
});
}
function animateMarketplaceHeart({ button, countWrapper } = {}) {
if (button) {
button.classList.remove("is-animating");
void button.offsetWidth;
button.classList.add("is-animating");
}
if (countWrapper) {
countWrapper.classList.remove("is-animating");
void countWrapper.offsetWidth;
countWrapper.classList.add("is-animating");
}
}
function debounce(fn, wait = 150) {
let timeout;
return (...args) => {