416 lines
14 KiB
JavaScript
416 lines
14 KiB
JavaScript
// Main Controller - Language Switcher, Donation Calculator, Modal & Interactions
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
let currentLang = localStorage.getItem('vpaez_lang') || 'en';
|
|
|
|
// DOM Elements
|
|
const langEnBtn = document.getElementById('lang-en');
|
|
const langEsBtn = document.getElementById('lang-es');
|
|
const mobileToggle = document.getElementById('mobile-toggle');
|
|
const navLinks = document.getElementById('nav-links');
|
|
const donateModal = document.getElementById('donate-modal');
|
|
const modalClose = document.getElementById('modal-close');
|
|
const modalSelectedTier = document.getElementById('modal-selected-tier');
|
|
const contactForm = document.getElementById('contact-form');
|
|
const formSuccess = document.getElementById('form-success');
|
|
|
|
// Donation Tier Data
|
|
const tierImpacts = {
|
|
"25": {
|
|
en: "Provides 1 full week of clean drinking water and food staples for an earthquake-affected family in Caracas.",
|
|
es: "Provee 1 semana completa de agua potable y alimentos básicos para una familia afectada por el terremoto en Caracas."
|
|
},
|
|
"50": {
|
|
en: "Funds emergency medical supplies, vitamins, and hot meals served directly at our community soup kitchen.",
|
|
es: "Financia insumos médicos de emergencia, vitaminas y comidas calientes servidas en nuestro comedor comunitario."
|
|
},
|
|
"100": {
|
|
en: "Helps rebuild and furnish one student study desk and station in the damaged Seminario Bautista de Venezuela.",
|
|
es: "Ayuda a reconstruir y amoblar un pupitre de estudio en el Seminario Bautista de Venezuela dañado."
|
|
},
|
|
"250": {
|
|
en: "Sponsors masonry reconstruction, mortar, and structural beam reinforcement in the church sanctuary.",
|
|
es: "Patrocina la reconstrucción de albañilería, cemento y refuerzo de vigas estructurales del santuario."
|
|
},
|
|
"500": {
|
|
en: "Major structural restoration grant for roof sealing, electrical grid repair, and broad community distribution.",
|
|
es: "Subvención mayor para impermeabilización de techos, red eléctrica y ayuda comunitaria a gran escala."
|
|
}
|
|
};
|
|
|
|
let selectedAmount = "100";
|
|
|
|
// Function: Set Language
|
|
function setLanguage(lang) {
|
|
if (!translations[lang]) return;
|
|
currentLang = lang;
|
|
localStorage.setItem('vpaez_lang', lang);
|
|
|
|
// Update buttons active class
|
|
if (langEnBtn && langEsBtn) {
|
|
langEnBtn.classList.toggle('active', lang === 'en');
|
|
langEsBtn.classList.toggle('active', lang === 'es');
|
|
}
|
|
|
|
// Update text elements with data-i18n
|
|
document.querySelectorAll('[data-i18n]').forEach(el => {
|
|
const key = el.getAttribute('data-i18n');
|
|
if (translations[lang][key]) {
|
|
el.textContent = translations[lang][key];
|
|
}
|
|
});
|
|
|
|
// Update placeholder attributes
|
|
document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
|
|
const key = el.getAttribute('data-i18n-placeholder');
|
|
if (translations[lang][key]) {
|
|
el.setAttribute('placeholder', translations[lang][key]);
|
|
}
|
|
});
|
|
|
|
// Update HTML elements
|
|
document.querySelectorAll('[data-i18n-html]').forEach(el => {
|
|
const key = el.getAttribute('data-i18n-html');
|
|
if (translations[lang][key]) {
|
|
el.innerHTML = translations[lang][key];
|
|
}
|
|
});
|
|
|
|
// Update Donation Tier Impact text
|
|
updateTierDisplay(selectedAmount);
|
|
|
|
// Update document language attribute
|
|
document.documentElement.lang = lang;
|
|
}
|
|
|
|
// Update Tier Display
|
|
function updateTierDisplay(amount) {
|
|
selectedAmount = amount;
|
|
const impactEl = document.getElementById('tier-impact-text');
|
|
if (impactEl && tierImpacts[amount]) {
|
|
impactEl.textContent = tierImpacts[amount][currentLang];
|
|
}
|
|
if (modalSelectedTier) {
|
|
modalSelectedTier.textContent = `$${amount} USD`;
|
|
}
|
|
}
|
|
|
|
// Event Listeners for Language Switcher
|
|
if (langEnBtn) {
|
|
langEnBtn.addEventListener('click', () => setLanguage('en'));
|
|
}
|
|
if (langEsBtn) {
|
|
langEsBtn.addEventListener('click', () => setLanguage('es'));
|
|
}
|
|
|
|
// Tier Chips Interaction
|
|
const tierChips = document.querySelectorAll('.tier-chip');
|
|
tierChips.forEach(chip => {
|
|
chip.addEventListener('click', () => {
|
|
tierChips.forEach(c => c.classList.remove('active'));
|
|
chip.classList.add('active');
|
|
const amount = chip.getAttribute('data-amount');
|
|
updateTierDisplay(amount);
|
|
});
|
|
});
|
|
|
|
// Modal Open / Close Logic
|
|
function openModal() {
|
|
if (donateModal) {
|
|
donateModal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
}
|
|
|
|
function closeModal() {
|
|
if (donateModal) {
|
|
donateModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
}
|
|
|
|
// Trigger modal on buttons with class .open-donate-modal
|
|
document.querySelectorAll('.open-donate-modal').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
openModal();
|
|
});
|
|
});
|
|
|
|
if (modalClose) {
|
|
modalClose.addEventListener('click', closeModal);
|
|
}
|
|
|
|
if (donateModal) {
|
|
donateModal.addEventListener('click', (e) => {
|
|
if (e.target === donateModal) {
|
|
closeModal();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Mobile Menu Toggle & Body Lock
|
|
if (mobileToggle && navLinks) {
|
|
const toggleNav = (forceClose = false) => {
|
|
const shouldOpen = forceClose ? false : !navLinks.classList.contains('open');
|
|
navLinks.classList.toggle('open', shouldOpen);
|
|
document.body.classList.toggle('nav-open', shouldOpen);
|
|
mobileToggle.textContent = shouldOpen ? '✕' : '☰';
|
|
mobileToggle.setAttribute('aria-expanded', String(shouldOpen));
|
|
};
|
|
|
|
mobileToggle.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
toggleNav();
|
|
});
|
|
|
|
// Close mobile nav when any link inside is clicked
|
|
navLinks.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
toggleNav(true);
|
|
});
|
|
});
|
|
|
|
// Close mobile nav when clicking outside on backdrop
|
|
document.addEventListener('click', (e) => {
|
|
if (navLinks.classList.contains('open') && !navLinks.contains(e.target) && e.target !== mobileToggle) {
|
|
toggleNav(true);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Contact Form Submission (Simulated Client-Side)
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const submitBtn = contactForm.querySelector('button[type="submit"]');
|
|
const originalText = submitBtn.textContent;
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = currentLang === 'es' ? 'Enviando...' : 'Sending...';
|
|
|
|
setTimeout(() => {
|
|
contactForm.reset();
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = originalText;
|
|
if (formSuccess) {
|
|
formSuccess.style.display = 'block';
|
|
setTimeout(() => {
|
|
formSuccess.style.display = 'none';
|
|
}, 6000);
|
|
}
|
|
}, 1000);
|
|
});
|
|
}
|
|
|
|
// FAQ Accordion Interaction
|
|
const faqItems = document.querySelectorAll('.faq-item');
|
|
faqItems.forEach(item => {
|
|
const questionBtn = item.querySelector('.faq-question');
|
|
if (questionBtn) {
|
|
questionBtn.addEventListener('click', () => {
|
|
const isOpen = item.classList.contains('open');
|
|
faqItems.forEach(other => {
|
|
if (other !== item) {
|
|
other.classList.remove('open');
|
|
const btn = other.querySelector('.faq-question');
|
|
if (btn) btn.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
item.classList.toggle('open', !isOpen);
|
|
questionBtn.setAttribute('aria-expanded', String(!isOpen));
|
|
});
|
|
}
|
|
});
|
|
|
|
// Prayer Guide Modal Logic
|
|
const prayerModal = document.getElementById('prayer-modal');
|
|
const btnOpenPrayer = document.getElementById('btn-open-prayer-guide');
|
|
const prayerModalClose = document.getElementById('prayer-modal-close');
|
|
const prayerModalCloseBtn = document.getElementById('prayer-modal-close-btn');
|
|
|
|
function openPrayerModal() {
|
|
if (prayerModal) {
|
|
prayerModal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
}
|
|
|
|
function closePrayerModal() {
|
|
if (prayerModal) {
|
|
prayerModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
}
|
|
|
|
if (btnOpenPrayer) {
|
|
btnOpenPrayer.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
openPrayerModal();
|
|
});
|
|
}
|
|
|
|
if (prayerModalClose) {
|
|
prayerModalClose.addEventListener('click', closePrayerModal);
|
|
}
|
|
|
|
if (prayerModalCloseBtn) {
|
|
prayerModalCloseBtn.addEventListener('click', closePrayerModal);
|
|
}
|
|
|
|
if (prayerModal) {
|
|
prayerModal.addEventListener('click', (e) => {
|
|
if (e.target === prayerModal) {
|
|
closePrayerModal();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Global Floating Toast
|
|
function showToast(message) {
|
|
const toast = document.getElementById('global-toast');
|
|
if (!toast) return;
|
|
toast.textContent = message;
|
|
toast.classList.add('active');
|
|
setTimeout(() => {
|
|
toast.classList.remove('active');
|
|
}, 3500);
|
|
}
|
|
|
|
// 1-Click Copy Mailing Info
|
|
const btnCopyCheck = document.getElementById('btn-copy-check');
|
|
const btnCopyText = document.getElementById('btn-copy-check-text');
|
|
if (btnCopyCheck) {
|
|
btnCopyCheck.addEventListener('click', () => {
|
|
const checkInfo = "Payee: Macedonia World Baptist Missions, Inc.\nMemo: Pastor Victor Paez — Venezuela Rebuilding Fund\nMail to: P.O. Box 519, Braselton, GA 30517";
|
|
navigator.clipboard.writeText(checkInfo).then(() => {
|
|
btnCopyCheck.classList.add('copied');
|
|
if (btnCopyText && translations[currentLang]) {
|
|
btnCopyText.textContent = translations[currentLang]['giving.copied'] || 'Copied to Clipboard! ✓';
|
|
}
|
|
showToast(translations[currentLang]['giving.copied'] || 'Copied to Clipboard! ✓');
|
|
setTimeout(() => {
|
|
btnCopyCheck.classList.remove('copied');
|
|
if (btnCopyText && translations[currentLang]) {
|
|
btnCopyText.textContent = translations[currentLang]['giving.btn_copy'] || 'Copy Mailing Info to Clipboard';
|
|
}
|
|
}, 3000);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Interactive Impact Metric Cards
|
|
const impactMetricCards = document.querySelectorAll('.impact-metric-card');
|
|
impactMetricCards.forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
const amount = card.getAttribute('data-amount');
|
|
if (amount) {
|
|
updateTierDisplay(amount);
|
|
const targetChip = document.querySelector(`.tier-chip[data-amount="${amount}"]`);
|
|
if (targetChip) {
|
|
document.querySelectorAll('.tier-chip').forEach(c => c.classList.remove('active'));
|
|
targetChip.classList.add('active');
|
|
}
|
|
openModal();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Native Mobile 1-Tap Share Button
|
|
const btnShareHero = document.getElementById('btn-share-hero');
|
|
if (btnShareHero) {
|
|
btnShareHero.addEventListener('click', async (e) => {
|
|
e.preventDefault();
|
|
const shareData = {
|
|
title: currentLang === 'es' ? 'Pastor Víctor Páez — Iglesia Bíblica Bautista Caracas' : 'Pastor Víctor Páez — Caracas, Venezuela Rebuilding Mission',
|
|
text: currentLang === 'es' ? 'Apoye la reconstrucción y el ministerio del evangelio en Caracas, Venezuela.' : 'Preaching Christ, training pastors, and rebuilding hope in Caracas, Venezuela.',
|
|
url: 'https://ibbcaracas.org/'
|
|
};
|
|
if (navigator.share) {
|
|
try {
|
|
await navigator.share(shareData);
|
|
} catch (err) {
|
|
// User closed share sheet
|
|
}
|
|
} else {
|
|
navigator.clipboard.writeText('https://ibbcaracas.org/').then(() => {
|
|
showToast(translations[currentLang]['share.copied'] || 'Website link copied to clipboard! ✓');
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Sticky Rebuilding Progress Floating Pill
|
|
const stickyPill = document.getElementById('sticky-rebuilding-pill');
|
|
const stickyPillClose = document.getElementById('sticky-pill-close');
|
|
let pillDismissed = false;
|
|
|
|
if (stickyPill) {
|
|
window.addEventListener('scroll', () => {
|
|
if (pillDismissed) return;
|
|
if (window.scrollY > 500) {
|
|
stickyPill.classList.add('visible');
|
|
} else {
|
|
stickyPill.classList.remove('visible');
|
|
}
|
|
}, { passive: true });
|
|
|
|
if (stickyPillClose) {
|
|
stickyPillClose.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
pillDismissed = true;
|
|
stickyPill.classList.remove('visible');
|
|
});
|
|
}
|
|
}
|
|
|
|
// Privacy & Compliance Modal Logic
|
|
const privacyModal = document.getElementById('privacy-modal');
|
|
const privacyModalClose = document.getElementById('privacy-modal-close');
|
|
const privacyModalCloseBtn = document.getElementById('privacy-modal-close-btn');
|
|
|
|
function openPrivacyModal() {
|
|
if (privacyModal) {
|
|
privacyModal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
}
|
|
|
|
function closePrivacyModal() {
|
|
if (privacyModal) {
|
|
privacyModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('.open-privacy-modal-btn').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
openPrivacyModal();
|
|
});
|
|
});
|
|
|
|
if (privacyModalClose) privacyModalClose.addEventListener('click', closePrivacyModal);
|
|
if (privacyModalCloseBtn) privacyModalCloseBtn.addEventListener('click', closePrivacyModal);
|
|
if (privacyModal) {
|
|
privacyModal.addEventListener('click', (e) => {
|
|
if (e.target === privacyModal) closePrivacyModal();
|
|
});
|
|
}
|
|
|
|
// Global Escape Key Listener for Accessible Modal Dismissal (WCAG 2.1 AA)
|
|
window.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' || e.key === 'Esc') {
|
|
if (donateModal && donateModal.classList.contains('active')) closeModal();
|
|
if (typeof prayerModal !== 'undefined' && prayerModal && prayerModal.classList.contains('active')) {
|
|
prayerModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
if (privacyModal && privacyModal.classList.contains('active')) closePrivacyModal();
|
|
}
|
|
});
|
|
|
|
// Initial Language Load
|
|
setLanguage(currentLang);
|
|
});
|
|
|
|
|