File "main.js"

Full Path: /home/concvitk/public_html/wp-content/themes/conceptualizate/main.js
File size: 7.86 KB
MIME-type: text/plain
Charset: utf-8

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();
  });