template-for-verstka/assets/js/main.js

'use strict';

const gymSwiper = new Swiper('.gym-swiper', {
    direction: 'horizontal',
    breakpoints: {
        320:{
            slidesPerView: 1.20,
            spaceBetween: 24,
        },
        996: {
            slidesPerView: 3
        },
    }
});

const reviewsSwiper = new Swiper('.reviews-swiper', {
    spaceBetween: 24,
    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
        el: '.swiper-scrollbar',
    },
    runCallbacksOnInit: true,
    // === new change
    on: {
        slideChange: function(){
            let offer = document.querySelector('#numberReviews');
            offer.innerHTML = (this.activeIndex +  1);
        }
    }
})

const projectsSwiper = new Swiper('.projects-swiper', {
    direction: 'horizontal',
    breakpoints: {
        320:{
            slidesPerView: 1,
            spaceBetween: 24,
        },
        996: {
            slidesPerView: 1
        },
    },
    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },    
    runCallbacksOnInit: true,
    // === new change
    on: {
        slideChange: function(){
            let offer = document.querySelector('#numberProjects');
            offer.innerHTML = (this.activeIndex +  1);
        }
    }
});




// how
let itemButtons = document.querySelectorAll('.how-control__item');
itemButtons.forEach((button) => {
    let num = button.dataset.num;

    button.onclick = function name(params, index) {

        let activeContent = document.querySelector('.how-content__item-block.active'),
            activeButton = document.querySelector('.how-control__item.active');

        if (activeContent.dataset.num == button.dataset.num) return;
        
        activeContent.style.height = `${activeContent.offsetHeight}px`;
        
        setTimeout(() => {
            activeContent.style.height = '0px';
            activeContent.classList.remove('active');
            activeButton.classList.remove('active');

            let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
                newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
            

            setTimeout(() => {
                let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
                newActive.style.height = newHeight;
                newActive.classList.add('active');
                newButton.classList.add('active');

                setTimeout(() => {
                    newActive.style.height = 'auto';
                }, 300);
            }, 300);
        }, 0);
    }        
})

let screenWidth = window.screen.width;
if (screenWidth <= 992) {
    howPhone();
}else{
    howPc();
}

function howPc() {
    if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
        return;
    }

    let blocks =  document.querySelectorAll('.how-content__item-block'),
        content = document.querySelector('.how__content');

    blocks.forEach(block => {
        content.appendChild(block)
    });
}
function howPhone() {
    
    if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {    
        return;
    }
    
    let buttons =  document.querySelectorAll('.how-control__item');

    buttons.forEach(button => {
        let num = button.dataset.num,
            block = document.querySelector(`.how-content__item-block[data-num='${num}']`);
            
            button.after(block);
    });
}
// how end

// phone menu
let btnOpenMenu = document.querySelector('.button-menu__open');

btnOpenMenu.onclick = function () {
    let phoneMenu = document.querySelector('.phone-menu'),
        block = document.querySelector('.phone-menu__block-content.main'),
        content = document.querySelector('.phone-menu__content.main'),
        newHeigh = content.offsetHeight + 'px';

    phoneMenu.classList.add('active');
    block.style.height = newHeigh;
}

let nextPhoneMenu = document.querySelectorAll('.phone-menu--next');

nextPhoneMenu.forEach(next => {
    next.onclick = function () {
        let subName = next.dataset.menu,
            blockSub = document.querySelector(`.phone-menu__sub.${subName}`);
        
        blockSub.classList.add('active');
    }
})
// phone menu


// resize
window.addEventListener('resize', () => {
    let screenWidth = window.screen.width;
    
    if (screenWidth <= 992) {
        howPhone();
    }else{
        howPc();
    }
});