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';
|
const SCHEDULE_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/schedule';
|
||||||
|
|
||||||
let currentLang = 'de';
|
let currentLang = 'de';
|
||||||
|
let revealObserver = null;
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
currentLang = document.body.dataset.lang || 'de';
|
currentLang = document.body.dataset.lang || 'de';
|
||||||
@@ -158,6 +159,9 @@ function initScrollReveal() {
|
|||||||
});
|
});
|
||||||
}, observerOptions);
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Keep a handle so dynamically rendered cards (members, wiki, dates) can be observed too
|
||||||
|
revealObserver = observer;
|
||||||
|
|
||||||
// Observe all sections for reveal animation
|
// Observe all sections for reveal animation
|
||||||
document.querySelectorAll('.section, .telegram-banner, #newsletter-section').forEach(section => {
|
document.querySelectorAll('.section, .telegram-banner, #newsletter-section').forEach(section => {
|
||||||
section.style.opacity = '0';
|
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
|
// RIPPLE EFFECT ON BUTTONS
|
||||||
// ========================================
|
// ========================================
|
||||||
@@ -588,6 +607,7 @@ async function loadUsers() {
|
|||||||
const card = createMemberCard(user);
|
const card = createMemberCard(user);
|
||||||
container.appendChild(card);
|
container.appendChild(card);
|
||||||
});
|
});
|
||||||
|
observeRevealCards(container);
|
||||||
|
|
||||||
// Update stats will be handled by loadCommunityStats
|
// Update stats will be handled by loadCommunityStats
|
||||||
} else {
|
} else {
|
||||||
@@ -766,6 +786,7 @@ function renderWikiCards(data) {
|
|||||||
|
|
||||||
grid.appendChild(card);
|
grid.appendChild(card);
|
||||||
});
|
});
|
||||||
|
observeRevealCards(grid);
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatDate(date) {
|
function formatDate(date) {
|
||||||
@@ -949,6 +970,7 @@ function renderDates(events) {
|
|||||||
|
|
||||||
container.appendChild(card);
|
container.appendChild(card);
|
||||||
});
|
});
|
||||||
|
observeRevealCards(container);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setCookie(name, value, days) {
|
function setCookie(name, value, days) {
|
||||||
|
|||||||
Reference in New Issue
Block a user