${index !== null ? `

${index + 1}

` : ""} ${image ? `

` : ""}

${spNewEscape(title)}

${meta ? `

${spNewEscape(meta)}

` : ""}

🤩 ${reactions}

💬 ${comments}

`; } async function spNewLoadRow(url, containerId, ranked = false) { const container = document.getElementById(containerId); try { const response = await spNewFetch(url); const items = spNewGetArray(response); if (!items.length) { container.innerHTML = '

No content available

'; return; } container.innerHTML = items.map((item, index) => spNewShowCard(item, ranked ? index : null) ).join(""); console.log(`✅ SP NEW ${containerId}: ${items.length} items`); } catch (error) { console.error(`❌ SP NEW ${containerId} ERROR:`, error); container.innerHTML = '

No content available

'; } } /* ========================================================= COVERFLOW - EMOJI PACKS WITH RANK BADGE FIX ========================================================= */ const spNewCoverflowState = { mostUsed: { items: [], active: 0 }, latest: { items: [], active: 0 } }; function spNewCoverflowItem(item, index) { const title = spNewGetTitle(item); const image = spNewGetImage(item); const count = spNewValue(item.stickerCount, item.count, 0); // Always show a stable visual position: #01, #02, #03... const rank = spNewFormatRank(index + 1); const id = spNewGetID(item); return `

#${rank} ${image ? ` ${spNewEscape(title)}

` : ""}

${spNewEscape(title)}

${count} stickers

`; } function spNewUpdateCoverflow(trackId, dotsId, stateKey) { const state = spNewCoverflowState[stateKey]; const track = document.getElementById(trackId); const dotsContainer = document.getElementById(dotsId); if (!track || !state.items.length) return; const items = track.querySelectorAll(".sp-new-coverflow-item"); const total = items.length; const active = state.active; items.forEach((item, index) => { item.classList.remove("sp-new-active", "sp-new-prev-1", "sp-new-next-1", "sp-new-prev-2", "sp-new-next-2", "sp-new-prev-3", "sp-new-next-3", "sp-new-hidden"); let position = index - active; if (position > total / 2) position -= total; if (position < -total / 2) position += total; if (position === 0) item.classList.add("sp-new-active"); else if (position === -1) item.classList.add("sp-new-prev-1"); else if (position === 1) item.classList.add("sp-new-next-1"); else if (position === -2) item.classList.add("sp-new-prev-2"); else if (position === 2) item.classList.add("sp-new-next-2"); else if (position === -3) item.classList.add("sp-new-prev-3"); else if (position === 3) item.classList.add("sp-new-next-3"); else item.classList.add("sp-new-hidden"); }); if (dotsContainer) { const dotCount = Math.min(5, total); dotsContainer.innerHTML = ""; for (let i = 0; i < dotCount; i++) { const dotIndex = Math.round(i * (total - 1) / (dotCount - 1)); const dot = document.createElement("button"); dot.type = "button"; dot.className = `sp-new-dot ${dotIndex === active ? "sp-new-active" : ""}`; dot.addEventListener("click", () => { state.active = dotIndex; spNewUpdateCoverflow(trackId, dotsId, stateKey); }); dotsContainer.appendChild(dot); } } } function spNewMoveCoverflow(trackId, dotsId, stateKey, direction) { const state = spNewCoverflowState[stateKey]; if (!state.items.length) return; state.active = (state.active + direction + state.items.length) % state.items.length; spNewUpdateCoverflow(trackId, dotsId, stateKey); } async function spNewLoadCoverflow(url, trackId, dotsId, stateKey) { const track = document.getElementById(trackId); try { const response = await spNewFetch(url); const items = spNewGetArray(response); if (!items.length) { track.innerHTML = '

No content available

'; return; } spNewCoverflowState[stateKey].items = items; track.innerHTML = items.map((item, index) => spNewCoverflowItem(item, index)).join(""); track.querySelectorAll(".sp-new-coverflow-item").forEach((itemEl) => { itemEl.addEventListener("click", () => { const idx = Number(itemEl.dataset.index); spNewOpenModal(items[idx], idx); }); }); spNewUpdateCoverflow(trackId, dotsId, stateKey); console.log(`✅ SP NEW ${stateKey}: ${items.length} packs`); } catch (error) { console.error(`❌ SP NEW ${stateKey} ERROR:`, error); track.innerHTML = '

No content available

'; } } /* ========================================================= MODAL ========================================================= */ function spNewOpenModal(pack, fallbackIndex = 0) { const modal = document.getElementById("spNewModal"); const title = document.getElementById("spNewModalTitle"); const count = document.getElementById("spNewModalCount"); const rank = document.getElementById("spNewModalRank"); const grid = document.getElementById("spNewModalGrid"); if (!modal) return; title.textContent = spNewGetTitle(pack); count.textContent = spNewValue(pack.stickerCount, pack.count, (pack.stickers || []).length); rank.textContent = spNewFormatRank(fallbackIndex + 1); const stickers = Array.isArray(pack.stickers) ? pack.stickers : []; if (stickers.length === 0) { grid.innerHTML = '

No stickers in this pack

'; } else { grid.innerHTML = stickers.map((sticker, index) => { const stickerImage = spNewValue(sticker.stickerPreviewUrl, sticker.stickerUrl, sticker.image, sticker.url); const stickerName = spNewValue(sticker.emotion, sticker.name, "Reaction"); return ` `; }).join(""); } modal.hidden = false; document.body.style.overflow = "hidden"; } function spNewCloseModal() { const modal = document.getElementById("spNewModal"); if (!modal) return; modal.hidden = true; document.body.style.overflow = ""; } document.addEventListener("click", (e) => { if (e.target.hasAttribute("data-close")) { spNewCloseModal(); } }); document.addEventListener("keydown", (e) => { if (e.key === "Escape") spNewCloseModal(); }); /* ========================================================= EDITORIAL CARDS (BLOGS & NEWS) ========================================================= */ function spNewEditorialCard(item) { const title = spNewGetTitle(item); const image = spNewGetImage(item); const description = spNewValue(item.description, item.excerpt, item.summary, item.content); const date = spNewValue(item.publishedAt, item.createdAt, item.date); return `

${image ? `

` : ""}

${date ? `

${spNewFormatDate(date)}

` : ""}

${spNewEscape(title)}

${description ? `

${spNewEscape(spNewClean(description).slice(0, 120))}...

` : ""}

`; } async function spNewLoadGrid(url, containerId) { const container = document.getElementById(containerId); try { const response = await spNewFetch(url); const items = spNewGetArray(response); if (!items.length) { container.innerHTML = '

No content available

'; return; } container.innerHTML = items.map(spNewEditorialCard).join(""); console.log(`✅ SP NEW ${containerId}: ${items.length} items`); } catch (error) { console.error(` SP NEW ${containerId} ERROR:`, error); container.innerHTML = '

No content available

'; } } /* ========================================================= NAVIGATION BUTTONS ========================================================= */ function spNewInitNavigation() { document.querySelectorAll(".sp-new-nav-btn").forEach((btn) => { btn.addEventListener("click", () => { const targetId = btn.dataset.target; const row = document.getElementById(targetId); if (!row) return; const firstCard = row.querySelector('.sp-new-card'); const gap = parseFloat(getComputedStyle(row).columnGap || getComputedStyle(row).gap || '20') || 20; const cardWidth = firstCard ? firstCard.getBoundingClientRect().width + gap : 295; const scrollAmount = cardWidth; if (btn.classList.contains("sp-new-prev")) { row.scrollBy({ left: -scrollAmount, behavior: "smooth" }); } else { row.scrollBy({ left: scrollAmount, behavior: "smooth" }); } }); }); document.querySelectorAll(".sp-new-coverflow-btn").forEach((btn) => { btn.addEventListener("click", () => { const targetId = btn.dataset.target; const direction = btn.classList.contains("sp-new-prev") ? -1 : 1; if (targetId === "spNewMostUsed") { spNewMoveCoverflow("spNewMostUsed", "spNewMostUsedDots", "mostUsed", direction); } else if (targetId === "spNewLatest") { spNewMoveCoverflow("spNewLatest", "spNewLatestDots", "latest", direction); } }); }); } /* ========================================================= SOCIAL SHARE ========================================================= */ function spNewShareUrl() { return window.location.href; } function spNewShareTitle() { return document.title || "Social Popcorn"; } function spNewSetShareStatus(message) { const status = document.getElementById("spNewShareStatus"); if (!status) return; status.textContent = message; window.clearTimeout(window.spNewShareStatusTimer); window.spNewShareStatusTimer = window.setTimeout(() => { status.textContent = ""; }, 2200); } async function spNewCopyShareLink() { const url = spNewShareUrl(); try { if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(url); } else { const textarea = document.createElement("textarea"); textarea.value = url; textarea.setAttribute("readonly", ""); textarea.style.position = "fixed"; textarea.style.opacity = "0"; document.body.appendChild(textarea); textarea.select(); document.execCommand("copy"); textarea.remove(); } spNewSetShareStatus("Link copied successfully."); } catch (error) { spNewSetShareStatus("Copy failed. Please copy the page URL manually."); } } function spNewInitSocialShare() { const url = encodeURIComponent(spNewShareUrl()); const title = encodeURIComponent(spNewShareTitle()); document.querySelectorAll('[data-share="whatsapp"]').forEach((link) => { link.href = `https://wa.me/?text=${title}%20${url}`; }); document.querySelectorAll('[data-share="facebook"]').forEach((link) => { link.href = `https://www.facebook.com/sharer/sharer.php?u=${url}`; }); document.querySelectorAll('[data-share="x"]').forEach((link) => { link.href = `https://twitter.com/intent/tweet?text=${title}&url=${url}`; }); document.querySelectorAll('[data-share="native"]').forEach((button) => { button.addEventListener("click", async () => { if (navigator.share) { try { await navigator.share({ title: spNewShareTitle(), url: spNewShareUrl() }); } catch (error) { if (error && error.name !== "AbortError") spNewSetShareStatus("Share was not completed."); } } else { await spNewCopyShareLink(); } }); }); document.querySelectorAll('[data-share="copy"]').forEach((button) => { button.addEventListener("click", spNewCopyShareLink); }); } /* ========================================================= INITIALIZE ALL ========================================================= */ document.addEventListener("DOMContentLoaded", function() { spNewInitSocialShare(); console.log("? SP NEW - Starting API Calls..."); spNewLoadRow(SP_NEW_API.base + SP_NEW_API.trending, "spNewTrending"); spNewLoadRow(SP_NEW_API.base + SP_NEW_API.topReacted, "spNewTopReacted", true); spNewLoadCoverflow(SP_NEW_API.base + SP_NEW_API.mostUsedEmoji, "spNewMostUsed", "spNewMostUsedDots", "mostUsed"); spNewLoadCoverflow(SP_NEW_API.base + SP_NEW_API.latestEmoji, "spNewLatest", "spNewLatestDots", "latest"); spNewLoadRow(SP_NEW_API.base + SP_NEW_API.upcoming, "spNewUpcoming"); spNewInitNavigation(); console.log("✅ SP NEW - All API calls initiated!"); }); /* Mobile hero safety: keep the hero wrapper single-frame. */ window.addEventListener("resize", () => { if (window.innerWidth <= 768) { const mobileWrapper = document.getElementById("spSlideWrapper"); if (mobileWrapper) { mobileWrapper.classList.remove( "animate-out-next", "animate-in-next", "animate-out-prev", "animate-in-prev" ); mobileWrapper.style.transform = "none"; } } });

Loading...

Trending

Top 10 Reacted

Most Used Emoji Packs

Latest Emoji Packs

First Watcher Shows

Upcoming

Share the experience.

Watch it.React to it.Share it.

Emoji Pack