No related reports yet.
`;
}
const rows = items.slice(0, 6).map((item) => {
const title = escapeHtml(item?.title || "Untitled");
const source = escapeHtml(item?.source || "");
const url = escapeHtml(item?.url || "");
const meta = source ? `
${escapeHtml(postData?.cluster_title || postData?.title || "Untitled")}
${tagPills}
Related reports ${clusterCount ? `(${clusterCount})` : ""}
${buildClusterItemsHtml(clusterItems)}
Generated news update
${escapeHtml(data?.summary || postData?.snippet || "")}
👁 ${formatCount(viewCount)}
❤️ ${formatCount(likeCount)}
🔁 ${formatCount(shareCount)}
💬 ${formatCount(commentCount)}
${heatmapPill}
`;
} else {
modalWrap.innerHTML = `
${
img
? `
})
`
: `
${escapeHtml(normCatLabel(postData))}
`
}
${escapeHtml(data?.headline || postData?.title || "Untitled")}
${tagPills}
${escapeHtml(data?.summary || postData?.snippet || "")}
👁 ${formatCount(viewCount)}
❤️ ${formatCount(likeCount)}
🔁 ${formatCount(shareCount)}
💬 ${formatCount(commentCount)}
${heatmapPill}
`;
}
bindHeroLightbox(modalWrap);
backdrop.appendChild(modalWrap);
document.body.appendChild(backdrop);
hydrateAvatars(modalWrap);
const relatedLinks = modalWrap.querySelectorAll("[data-related-url]");
relatedLinks.forEach((el) => {
el.addEventListener("click", () => {
const target = el.getAttribute("data-related-url");
if (!target) return;
try {
window.open(target, "_blank", "noopener");
} catch {
window.location.href = target;
}
});
});
requestAnimationFrame(() => {
try { backdrop.classList.add("sw-enter-active"); } catch {}
try { modalWrap.classList.add("sw-enter-active"); } catch {}
});
// animate in
backdrop.style.opacity = "0";
modalWrap.style.opacity = "0";
modalWrap.style.transform = "scale(0.96)";
requestAnimationFrame(() => {
backdrop.style.transition = "opacity 260ms ease";
modalWrap.style.transition = "opacity 260ms ease, transform 320ms cubic-bezier(.2,.9,.2,1)";
backdrop.style.opacity = "1";
modalWrap.style.opacity = "1";
modalWrap.style.transform = "scale(1)";
});
// ✅ animate in (fade + scale)
try {
requestAnimationFrame(() => {
backdrop.classList.add("sw-open");
modalWrap.classList.add("sw-open");
});
} catch {}
// outside click closes (ignore drag/scroll on map)
let backdropDown = null;
const trackDown = (e) => {
backdropDown = {
x: e.clientX || 0,
y: e.clientY || 0,
t: Date.now(),
};
};
const shouldCloseBackdrop = (e) => {
if (map?.__swCenteredOverlay?.openedAt) {
if (Date.now() - map.__swCenteredOverlay.openedAt < 350) return false;
}
if (!backdropDown) return true;
const dx = (e.clientX || 0) - backdropDown.x;
const dy = (e.clientY || 0) - backdropDown.y;
const dist = Math.hypot(dx, dy);
const dt = Date.now() - backdropDown.t;
return dist < 8 && dt < 700;
};
backdrop.addEventListener("pointerdown", trackDown);
backdrop.addEventListener("mousedown", trackDown);
backdrop.addEventListener("touchstart", (e) => {
const touch = e.touches && e.touches[0];
if (!touch) return;
trackDown({ clientX: touch.clientX, clientY: touch.clientY });
}, { passive: true });
backdrop.addEventListener("click", (e) => {
if (!shouldCloseBackdrop(e)) return;
closeCenteredOverlay(map, { force: true });
});
// inside click doesn't close
const stopPropagation = (e) => e.stopPropagation();
modalWrap.addEventListener("click", stopPropagation);
modalWrap.addEventListener("pointerdown", stopPropagation);
modalWrap.addEventListener("mousedown", stopPropagation);
modalWrap.addEventListener("touchstart", stopPropagation, { passive: true });
// close button
const xbtn = modalWrap.querySelector(".sw-modal-x");
if (xbtn) xbtn.addEventListener("click", () => closeCenteredOverlay(map, { force: true }));
// ESC closes
const onKey = (e) => {
if (e.key === "Escape") closeCenteredOverlay(map, { force: true });
};
window.addEventListener("keydown", onKey);
// Back button support WITHOUT changing URL
// We push a fake history state so back button closes the modal
let onPop = null;
let historyPushed = false;
try {
// Only push history state without changing URL
window.history.pushState({ swModal: true, postId: postID }, "");
historyPushed = true;
onPop = (e) => {
// Check if we're returning to the modal state (from image) or actually closing
const state = e.state || window.history.state;
// If state still has swModal=true, we're just returning from image to post
// Don't close the post modal
if (state && state.swModal === true && state.postId === postID) {
return; // Stay in post modal
}
// Otherwise, we're closing the modal
const ov = map.__swCenteredOverlay;
if (ov && ov.postId === postID) {
ov.historyClosed = true;
closeCenteredOverlay(map, { skipHistory: true, force: true });
}
};
window.addEventListener("popstate", onPop);
} catch {}
// CTA open url
const cta = modalWrap.querySelector(".sw-cta-primary");
if (cta) {
cta.addEventListener("click", () => {
const u = cta.getAttribute("data-url") || "";
if (!u) return;
try { window.open(u, "_blank", "noopener,noreferrer"); } catch {}
});
}
if (postID > 0 && !modalWrap.__swViewed) {
modalWrap.__swViewed = true;
recordPostView(postID).then((res) => {
const counts = res?.counts;
if (counts) {
updateStat(modalWrap, "views", counts.view_count);
updateStat(modalWrap, "likes", counts.like_count);
updateStat(modalWrap, "shares", counts.share_count);
updateStat(modalWrap, "comments", counts.comment_count);
}
});
}
if (postID > 0) {
fetchPostTruth(postID).then((stats) => {
if (stats) updateTruthVoteUI(modalWrap, stats);
});
}
let liked = false;
const likeBtn = modalWrap.querySelector('[data-action="like"]');
const commentInput = modalWrap.querySelector(".sw-livechat-input");
const commentBtn = modalWrap.querySelector(".sw-livechat-post");
const applyAuthUI = () => {
const authed = isAuthed();
if (likeBtn) {
likeBtn.disabled = false;
likeBtn.textContent = authed && liked ? "Liked" : "Like";
}
if (commentInput) {
commentInput.readOnly = !authed;
commentInput.placeholder = authed ? "Write a comment…" : "Sign in to comment";
}
};
if (likeBtn && postID > 0) {
likeBtn.addEventListener("click", async () => {
if (!isAuthed()) {
requestAuth("Please sign in or create a free account to like this post.");
return;
}
trackEvent("post_like_click", { post_id: postID, context: "map" });
likeBtn.disabled = true;
const res = await togglePostLike(postID, !liked);
if (res?.ok) {
liked = !!res.liked;
likeBtn.textContent = liked ? "Liked" : "Like";
const counts = res?.counts;
if (counts) {
updateStat(modalWrap, "likes", counts.like_count);
updateStat(modalWrap, "shares", counts.share_count);
updateStat(modalWrap, "comments", counts.comment_count);
updateStat(modalWrap, "views", counts.view_count);
}
}
likeBtn.disabled = false;
});
}
const shareBtn = modalWrap.querySelector('[data-action="share"]');
if (shareBtn && postID > 0) {
shareBtn.addEventListener("click", async () => {
const shareUrl = `${window.location.origin}/p/${postID}`;
const shareTitle = postData?.title || postData?.Title || "SocioWire";
trackEvent("post_share_click", { post_id: postID, context: "map" });
try {
if (navigator.share) {
await navigator.share({ title: shareTitle, url: shareUrl });
} else if (navigator.clipboard) {
await navigator.clipboard.writeText(shareUrl);
}
} catch {}
const res = await recordPostShare(postID);
const counts = res?.counts;
if (counts) {
updateStat(modalWrap, "views", counts.view_count);
updateStat(modalWrap, "shares", counts.share_count);
}
});
}
const heatBtn = modalWrap.querySelector('[data-action="cluster-heatmap"]');
if (HEATMAP_ENABLED && heatBtn && isCluster) {
heatBtn.addEventListener("click", () => {
closeCenteredOverlay(map, { force: true });
dispatchClusterHeatmap(postData, { mode: "click" });
});
}
if (postID > 0) {
fetchPostById(postID).then((fresh) => {
if (!fresh) return;
postData = { ...postData, ...fresh };
applyPostDetails(modalWrap, postData);
refreshMarkerFromPost(map, postID, postData);
});
}
const commentsBody = modalWrap.querySelector(".sw-livechat-body");
if (commentsBody && postID > 0) {
fetchPostComments(postID, 20).then((items) => renderComments(commentsBody, items));
}
if (commentBtn && commentInput && postID > 0) {
commentBtn.addEventListener("click", async () => {
if (!isAuthed()) {
requestAuth("Please sign in or create a free account to comment.");
return;
}
const body = (commentInput.value || "").trim();
if (!body) return;
trackEvent("post_comment_submit", { post_id: postID, context: "map" });
commentBtn.disabled = true;
const res = await createPostComment(postID, body);
if (res?.ok) {
commentInput.value = "";
const existing = await fetchPostComments(postID, 20);
renderComments(commentsBody, existing);
const counts = res?.counts;
if (counts) {
updateStat(modalWrap, "comments", counts.comment_count);
updateStat(modalWrap, "likes", counts.like_count);
updateStat(modalWrap, "shares", counts.share_count);
updateStat(modalWrap, "views", counts.view_count);
}
}
commentBtn.disabled = false;
});
commentInput.addEventListener("focus", () => {
if (!isAuthed()) {
requestAuth("Please sign in or create a free account to comment.");
}
});
}
if (postID > 0 && isAuthed()) {
fetchPostLikeState(postID).then((res) => {
if (res?.ok && res.liked) {
liked = true;
if (likeBtn) likeBtn.textContent = "Liked";
}
});
}
const rail = modalWrap.querySelector(".sw-truth-rail");
if (rail && postID > 0) {
const doVote = async (vote) => {
if (!isAuthed()) {
requestAuth("Please sign in or create a free account to vote on truth.");
return;
}
try {
rail.classList.add("sw-truth-vote-disabled");
const stats = await votePostTruth(postID, vote);
if (stats) updateTruthVoteUI(modalWrap, stats);
} catch {}
rail.classList.remove("sw-truth-vote-disabled");
};
const voteUp = rail.querySelector(".sw-truth-rail-btn-up");
const voteDown = rail.querySelector(".sw-truth-rail-btn-down");
if (voteUp) voteUp.addEventListener("click", () => doVote("true"));
if (voteDown) voteDown.addEventListener("click", () => doVote("false"));
}
applyAuthUI();
const onAuth = () => {
if (postID > 0 && isAuthed()) {
fetchPostLikeState(postID).then((res) => {
if (res?.ok && res.liked) {
liked = true;
} else {
liked = false;
}
applyAuthUI();
});
} else {
liked = false;
applyAuthUI();
}
};
window.addEventListener("sociowire:auth-changed", onAuth);
let unmountFull = null;
map.__swCenteredOverlay = {
postId: postData?.id,
modalWrapRef: modalWrap,
backdrop,
interactionState,
onKey,
onPop,
onAuth,
unmountFull,
unmountMini: null,
historyPushed,
historyClosed: false,
openedAt: Date.now(),
};
}
function hashPostId(id) {
// Simple hash function for stable offset calculation
const str = String(id);
let hash = 0;
for (let i = 0; i < str.length; i++) {
const char = str.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash = hash & hash; // Convert to 32bit integer
}
return Math.abs(hash);
}
function calculateSmartOffset(post, markersRef, map) {
if (!map || !markersRef.current) return { x: 0, y: 0 };
const lat = typeof post.lat === "number" ? post.lat : typeof post.latitude === "number" ? post.latitude : null;
const lon = typeof post.lon === "number" ? post.lon : typeof post.lng === "number" ? post.lng : null;
if (lat == null || lon == null) return { x: 0, y: 0 };
// Si le post est très récent (< 10 secondes), offset vers le HAUT pour compenser l'anchor bottom
const createdAt = post?.created_at || post?.CreatedAt || post?.createdAt;
if (createdAt) {
const ageSeconds = (Date.now() - new Date(createdAt).getTime()) / 1000;
if (ageSeconds < 10) {
return { x: 0, y: -110 }; // Offset vers le haut (négatif = monte)
}
}
const currentPoint = map.project([lon, lat]);
const PROXIMITY_THRESHOLD = 100; // pixels - larger to detect more overlaps
// Check distance in geographic coordinates (more stable across zoom levels)
const nearbyCount = markersRef.current.filter(marker => {
if (!marker.post || marker.post.id === post.id) return false;
const mLat = typeof marker.post.lat === "number" ? marker.post.lat : marker.post.latitude;
const mLon = typeof marker.post.lon === "number" ? marker.post.lon : marker.post.lng;
if (mLat == null || mLon == null) return false;
// Geographic distance (rough approximation)
const latDiff = Math.abs(lat - mLat);
const lonDiff = Math.abs(lon - mLon);
const geoDist = Math.sqrt(latDiff * latDiff + lonDiff * lonDiff);
// Small threshold for geographic clustering (~100m at equator)
return geoDist < 0.001;
}).length;
if (nearbyCount === 0) return { x: 0, y: 0 };
// Use deterministic hash-based offset so it's stable across zoom/pan
const hash = hashPostId(post.id);
const angle = (hash % 8) * 45 * (Math.PI / 180); // 8 positions, 45° apart
const offsetMagnitude = 25 + ((hash % 3) * 15); // 25, 40, or 55 pixels
return {
x: Math.cos(angle) * offsetMagnitude,
y: Math.sin(angle) * offsetMagnitude
};
}
export function createMarkerForPost(post, mapRef, markersRef, expandedElRef, theme = "blue") {
const map = mapRef.current;
if (!map) return;
const lat =
typeof post.lat === "number"
? post.lat
: typeof post.latitude === "number"
? post.latitude
: null;
const lon =
typeof post.lon === "number"
? post.lon
: typeof post.lng === "number"
? post.lng
: null;
if (lat == null || lon == null) return;
const lngLat = [lon, lat];
// Calculate smart offset for nearby markers
// DISABLED: Using geographic coordinate variation instead of pixel offset
// const offset = calculateSmartOffset(post, markersRef, map);
const offset = { x: 0, y: 0 };
const root = document.createElement("div");
root.classList.add("sw-appear");
requestAnimationFrame(() => root.classList.add("sw-appear-in"));
root.className = "post-pin post-pin--compact";
root.style.zIndex = "1";
root.__post = post;
function unmountIfAny() {
if (root.__swUnmount) {
try { root.__swUnmount(); } catch {}
root.__swUnmount = null;
}
}
function renderCompact() {
if (!root.__swCompactReady) {
root.className = "post-pin post-pin--compact sw-appear sw-appear-in";
root.style.zIndex = "1";
// Add connecting line if offset is significant
// DISABLED: No longer using pixel offsets
const hasOffset = false;
const lineHTML = '';
root.innerHTML = `
${escapeHtml(activePost?.title || "Untitled")}
${escapeHtml((activePost?.snippet || "").substring(0, 80))}${(activePost?.snippet || "").length > 80 ? "..." : ""}
${normCatLabel(activePost)} • ${formatRelativeTime(activePost?.created_at || activePost?.CreatedAt)}
`;
}
renderSimple();
root.__renderSimple = renderSimple;
const isCluster = HEATMAP_ENABLED && isClusterMainPost(post);
const markerEl = root.querySelector(".sw-simple-marker");
const hoverCard = root.querySelector(".sw-simple-hover-card");
// Hover effects
root.addEventListener("mouseenter", () => {
if (isCluster) {
dispatchClusterHeatmap(root.__post || post, { mode: "hover", skipPan: true });
}
if (markerEl) {
markerEl.style.transform = "scale(1.2)";
markerEl.style.boxShadow = "0 4px 16px rgba(0,0,0,0.5)";
}
if (hoverCard) {
hoverCard.style.opacity = "1";
hoverCard.style.transform = "translateX(-50%) translateY(-6px) scale(1)";
}
});
root.addEventListener("mouseleave", () => {
if (isCluster) {
dispatchClusterHeatmapClear();
}
if (markerEl) {
markerEl.style.transform = "scale(1)";
markerEl.style.boxShadow = "0 2px 8px rgba(0,0,0,0.3)";
}
if (hoverCard) {
hoverCard.style.opacity = "0";
hoverCard.style.transform = "translateX(-50%) translateY(-6px) scale(0.9)";
}
});
// Click ouvre le modal
root.addEventListener("click", (ev) => {
ev.stopPropagation();
const existing = map.__swCenteredOverlay;
if (existing && existing.postId === post?.id) {
if (existing.openedAt && Date.now() - existing.openedAt < 800) return;
closeCenteredOverlay(map, { force: true });
return;
}
openCenteredOverlay({ map, post, theme, fullScreen: false });
if (expandedElRef) expandedElRef.current = null;
});
const marker = new maplibregl.Marker({
element: root,
anchor: "bottom", // La pointe du pin est à la position exacte
})
.setLngLat(lngLat)
.addTo(map);
markersRef.current.push({ id: post.id, marker, el: root, post, type: "simple" });
}
/**
* ISLAND MARKER: Creates a circular avatar marker for user islands
* Islands are displayed with avatar, username, and 🏝️ badge
*/
export function createIslandMarker(island, mapRef, markersRef, onIslandClick, theme = "blue") {
const map = mapRef.current;
if (!map) return;
const lat = island.virtual_y; // Virtual coords
const lon = island.virtual_x;
if (lat == null || lon == null) {
console.warn("[createIslandMarker] Missing virtual coordinates", island);
return;
}
const root = document.createElement("div");
root.classList.add("island-marker", "sw-appear");
// Fade-in animation
requestAnimationFrame(() => root.classList.add("sw-appear-in"));
// Marker circulaire avec avatar
root.innerHTML = `