© /**
* MUNDOCAP — Sistema de componentes JavaScript
* Módulos reutilizables para funcionalidad interactiva
*/
// ================================================================
// NAVBAR — Navegación activa al scroll
// ================================================================
class Navbar {
constructor() {
this.navLinks = document.querySelectorAll('.nav-links a');
this.sections = document.querySelectorAll('section');
this.init();
}
init() {
window.addEventListener('scroll', () => this.updateActiveLink());
}
updateActiveLink() {
let current = '';
this.sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= sectionTop - 200) {
current = section.getAttribute('id');
}
});
this.navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
}
}
// Inicializar navbar
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new Navbar();
});
} else {
new Navbar();
}
// ================================================================
// FORMULARIO — Validación y envío
// ================================================================
class ContactForm {
constructor(formSelector = '.contacto-form') {
this.form = document.querySelector(formSelector);
if (!this.form) return;
this.nameInput = this.form.querySelector('#nombre');
this.emailInput = this.form.querySelector('#correo');
this.messageInput = this.form.querySelector('#mensaje');
this.submitBtn = this.form.querySelector('button[type="submit"], .btn');
this.init();
}
init() {
this.form.addEventListener('submit', (e) => this.handleSubmit(e));
this.form.addEventListener('input', () => this.validateForm());
}
validateForm() {
const isValid =
this.nameInput.value.trim() &&
this.emailInput.value.trim() &&
this.messageInput.value.trim();
if (isValid) {
this.submitBtn.style.opacity = '1';
this.submitBtn.style.pointerEvents = 'auto';
} else {
this.submitBtn.style.opacity = '0.6';
this.submitBtn.style.pointerEvents = 'none';
}
}
handleSubmit(e) {
e.preventDefault();
const nombre = this.nameInput.value.trim();
const correo = this.emailInput.value.trim();
const mensaje = this.messageInput.value.trim();
if (!nombre || !correo || !mensaje) {
alert('Por favor completa todos los campos.');
return;
}
if (!this.isValidEmail(correo)) {
alert('Por favor ingresa un correo válido.');
return;
}
const whatsappMsg = `Hola Carlos, me llamo ${nombre}. Mi correo es ${correo}. ${mensaje}`;
const whatsappUrl = `https://wa.me/582125550123?text=${encodeURIComponent(whatsappMsg)}`;
const originalText = this.submitBtn.textContent;
this.submitBtn.textContent = '¡Redirigiendo a WhatsApp...';
window.open(whatsappUrl, '_blank');
setTimeout(() => {
this.form.reset();
this.submitBtn.textContent = originalText;
this.validateForm();
}, 2000);
}
isValidEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
}
// Inicializar formulario
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new ContactForm();
});
} else {
new ContactForm();
}
// ================================================================
// OBSERVADOR DE SCROLL — Animaciones al entrar en viewport
// ================================================================
class ScrollAnimations {
constructor() {
this.elements = document.querySelectorAll(
'.card, .escrito-card, .proyecto-card, .portafolio-item, section'
);
this.init();
}
init() {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1 }
);
this.elements.forEach(el => observer.observe(el));
}
}
// Inicializar animaciones
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new ScrollAnimations();
});
} else {
new ScrollAnimations();
}
// ================================================================
// LIGHTBOX — Galerías de imágenes
// ================================================================
class Lightbox {
constructor(gallerySelector = '.portafolio-gallery, .gallery') {
this.galleries = document.querySelectorAll(gallerySelector);
this.currentIndex = 0;
this.images = [];
this.init();
}
init() {
this.galleries.forEach(gallery => {
const items = gallery.querySelectorAll('[data-image]');
items.forEach((item, index) => {
item.addEventListener('click', (e) => this.open(e, items, index));
});
});
this.createModal();
}
createModal() {
const modal = document.createElement('div');
modal.className = 'lightbox-modal';
modal.style.cssText = `
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.95);
z-index: 2000;
align-items: center;
justify-content: center;
flex-direction: column;
`;
const img = document.createElement('img');
img.style.cssText = 'max-width: 90%; max-height: 80%; object-fit: contain;';
const close = document.createElement('button');
close.textContent = '✕';
close.style.cssText = `
position: absolute;
top: 20px;
right: 30px;
background: none;
border: none;
color: white;
font-size: 36px;
cursor: pointer;
`;
const prev = document.createElement('button');
prev.textContent = '❮';
prev.style.cssText = `
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.2);
border: none;
color: white;
font-size: 30px;
padding: 10px 15px;
cursor: pointer;
`;
const next = document.createElement('button');
next.textContent = '❯';
next.style.cssText = `
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.2);
border: none;
color: white;
font-size: 30px;
padding: 10px 15px;
cursor: pointer;
`;
modal.appendChild(img);
modal.appendChild(close);
modal.appendChild(prev);
modal.appendChild(next);
document.body.appendChild(modal);
this.modal = modal;
this.imgElement = img;
close.addEventListener('click', () => this.close());
prev.addEventListener('click', () => this.prev());
next.addEventListener('click', () => this.next());
document.addEventListener('keydown', (e) => {
if (this.modal.style.display !== 'none') {
if (e.key === 'Escape') this.close();
if (e.key === 'ArrowLeft') this.prev();
if (e.key === 'ArrowRight') this.next();
}
});
}
open(e, items, index) {
this.images = Array.from(items).map(item => item.getAttribute('data-image'));
this.currentIndex = index;
this.modal.style.display = 'flex';
this.imgElement.src = this.images[this.currentIndex];
document.body.style.overflow = 'hidden';
}
close() {
this.modal.style.display = 'none';
document.body.style.overflow = 'auto';
}
next() {
this.currentIndex = (this.currentIndex + 1) % this.images.length;
this.imgElement.src = this.images[this.currentIndex];
}
prev() {
this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
this.imgElement.src = this.images[this.currentIndex];
}
}
// Inicializar lightbox si hay galerías
if (document.querySelectorAll('.portafolio-gallery, .gallery').length > 0) {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new Lightbox();
});
} else {
new Lightbox();
}
}
// ================================================================
// UTILIDADES
// ================================================================
// Smooth scroll para links internos
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
const href = this.getAttribute('href');
if (href === '#') return;
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
console.log('MundoCAP JavaScript components loaded successfully.');