Fix invisible member/wiki/date cards — observe dynamically rendered cards in IntersectionObserver
Cards rendered after page load (from webhooks) were never observed by the scroll-reveal IntersectionObserver, so they kept opacity:0 from CSS: space taken, clickable, but content invisible. Now renderWikiCards, loadUsers and renderDates register their cards with the observer; reduced-motion fallback shows them immediately.
This commit is contained in:
+22
@@ -11,6 +11,7 @@ const COMMUNITY_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/community'
|
||||
const SCHEDULE_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/schedule';
|
||||
|
||||
let currentLang = 'de';
|
||||
let revealObserver = null;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
currentLang = document.body.dataset.lang || 'de';
|
||||
@@ -158,6 +159,9 @@ function initScrollReveal() {
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Keep a handle so dynamically rendered cards (members, wiki, dates) can be observed too
|
||||
revealObserver = observer;
|
||||
|
||||
// Observe all sections for reveal animation
|
||||
document.querySelectorAll('.section, .telegram-banner, #newsletter-section').forEach(section => {
|
||||
section.style.opacity = '0';
|
||||
@@ -208,6 +212,21 @@ function initScrollReveal() {
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// REVEAL OBSERVER FOR DYNAMICALLY RENDERED CARDS
|
||||
// Cards loaded via webhooks (members, wiki, dates) are created AFTER
|
||||
// initScrollReveal() ran, so they were never observed -> stuck at opacity 0.
|
||||
// ========================================
|
||||
function observeRevealCards(container) {
|
||||
const els = (container || document).querySelectorAll('.wiki-card-new, .member-card, .date-card, .newsletter-card');
|
||||
if (!revealObserver) {
|
||||
// Reduced-motion (observer never created) or init missed: show immediately
|
||||
els.forEach(el => el.classList.add('visible'));
|
||||
return;
|
||||
}
|
||||
els.forEach(el => revealObserver.observe(el));
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// RIPPLE EFFECT ON BUTTONS
|
||||
// ========================================
|
||||
@@ -588,6 +607,7 @@ async function loadUsers() {
|
||||
const card = createMemberCard(user);
|
||||
container.appendChild(card);
|
||||
});
|
||||
observeRevealCards(container);
|
||||
|
||||
// Update stats will be handled by loadCommunityStats
|
||||
} else {
|
||||
@@ -766,6 +786,7 @@ function renderWikiCards(data) {
|
||||
|
||||
grid.appendChild(card);
|
||||
});
|
||||
observeRevealCards(grid);
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
@@ -949,6 +970,7 @@ function renderDates(events) {
|
||||
|
||||
container.appendChild(card);
|
||||
});
|
||||
observeRevealCards(container);
|
||||
}
|
||||
|
||||
function setCookie(name, value, days) {
|
||||
|
||||
Reference in New Issue
Block a user