document.addEventListener('DOMContentLoaded', () => {
// Variables
const body = document.querySelector('body');
const nav = document.querySelector('#nav');
const socialIcons = document.querySelector('.container-social');
const toggleIcons = document.querySelector('#toggle');
const fullMenu = document.querySelector('#full-menu');
const listFullMenu = document.querySelector('#menu-main-menu');
const logoHeader = document.querySelector('#logo-header svg path');
const filterButtons = document.querySelectorAll('.filter-buttons button');
const cardItem = document.querySelectorAll('.card-item');
const defaultCategory = 'web-a-medida'; // Categoría por defecto
// Funciones
//* Filtro de categorías
function mostrarCategoriaPorDefecto() {
cardItem.forEach(item => {
if (item.getAttribute('data-category').includes(defaultCategory)) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
});
}
function agregarClaseActive() {
filterButtons.forEach(button => {
if (button.getAttribute('data-category') === defaultCategory) {
button.classList.add('active');
}
button.addEventListener('click', () => {
const category = button.getAttribute('data-category');
filterButtons.forEach(btn => {
btn.classList.remove('active');
});
button.classList.add('active');
cardItem.forEach(item => {
if (category === 'all') {
item.style.display = 'flex';
} else {
if (item.getAttribute('data-category').includes(category)) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
}
});
});
});
}
//* Menu Toggle
function menuToggleFunctionality() {
toggleIcons.addEventListener('click', () => {
body.classList.toggle('fixed');
nav.classList.toggle('fixed');
toggleIcons.classList.toggle('show-icon');
fullMenu.classList.toggle('show-icon');
socialIcons.classList.toggle('show-icon');
if (toggleIcons.classList.contains('show-icon'))
logoHeader.style.fill = '#020301';
else
logoHeader.style.fill = '#F5DF4D';
});
listFullMenu.addEventListener('click', () => {
fullMenu.classList.remove('show-icon');
toggleIcons.classList.remove('show-icon');
nav.classList.remove('fixed');
socialIcons.classList.remove('show-icon');
body.classList.remove('fixed');
logoHeader.style.fill = '#F5DF4D';
});
}
//* Sliders: swiperjs
function sliderBrands() {
if (document.querySelector('.swiper')) {
const options = {
slidesPerView: "auto",
loop: true,
centeredSlides: true,
speed: 7000,
allowTouchMove: false,
disableOnInteraction: false,
autoplay: {
delay: 1,
}
};
new Swiper('.swiper', options);
}
}
function sliderProjects() {
if (document.querySelector('body.home .widget-projects .swiper')) {
const options = {
direction: 'horizontal',
spaceBetween: 0,
grabCursor: true,
loop: true,
observer: true,
navigation: false,
pagination: false,
autoplay: {
delay: 0.5,
disableOnInteraction: false,
},
breakpoints: {
320: {
slidesPerView: 1,
},
480: {
slidesPerView: 3,
},
580: {
slidesPerView: 4,
},
768: {
slidesPerView: 5,
},
},
speed: 11000,
freeMode: true,
navigation: {
nextEl: null,
prevEl: null,
},
};
new Swiper('.swiper-brands', options);
}
}
//* Video Playback
function VideoPlayback() {
const videos = document.querySelectorAll('.reels video');
const activeIndex = this.realIndex;
const activeVideo = videos[activeIndex];
// Pausa y reinicio de los videos
videos.forEach((video, index) => {
if (index === activeIndex) {
activeVideo.play();
activeVideo.muted = true;
} else {
video.pause();
video.currentTime = 0;
}
});
}
function sliderReels() {
if (document.querySelector('.swiper-reels')) {
const options = {
direction: 'horizontal',
spaceBetween: 0,
loop: false,
centeredSlides: true,
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
clickable: true,
},
on: {
init: VideoPlayback,
slideChange: VideoPlayback,
},
};
new Swiper('.swiper-reels', options);
// Toggle Audio
const toggleAudio = document.querySelectorAll('.toggle-audio');
toggleAudio.forEach(button => {
button.addEventListener('click', function() {
const video = this.parentElement.querySelector('video');
const audioIcon = this.querySelector('#audio-icon');
if (video.muted) {
video.muted = false;
audioIcon.classList.remove('bx-volume-mute');
audioIcon.classList.add('bx-volume-full');
} else {
video.muted = true;
audioIcon.classList.remove('bx-volume-full');
audioIcon.classList.add('bx-volume-mute');
}
});
});
}
}
//* Animation text: animejs
function animeText15() {
const animateText = document.querySelector('.ml15');
if (animateText) {
anime.timeline({ loop: false })
.add({
targets: '.ml15 .word',
scale: [14, 1],
opacity: [0, 1],
easing: "easeOutCirc",
duration: 800,
delay: (el, i) => 800 * i
}).add({
targets: '.ml15',
opacity: 1,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
}
}
//* Galería: lightboxjs
function galleryBox() {
lightbox.option({
'resizeDuration': 500,
'wrapAround': true,
'alwaysShowNavOnTouchDevices': true,
'disableScrolling': true,
'fadeDuration': 500,
'resizeDuration': 500,
'showImageNumberLabel': true,
});
}
// Ejecución de funciones
mostrarCategoriaPorDefecto();
agregarClaseActive();
menuToggleFunctionality();
sliderBrands();
sliderProjects();
sliderReels();
animeText15();
galleryBox();
});