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.classList.add('active');
    block.style.height = newHeigh;
}

let closeMainMenu = document.querySelector('.phone-menu-content__close.main');

closeMainMenu.onclick = function () {
    let phoneMenu = document.querySelector('.phone-menu'),
        block = document.querySelector('.phone-menu__block-content.main'),
        content = document.querySelector('.phone-menu__content.main');

    phoneMenu.classList.remove('active');
    block.style.height = 0;
}


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

let subPhone = document.querySelectorAll('.phone-menu__sub');

subPhone.forEach(menu => {
    let close = menu.querySelector('.phone-menu-content__close');

    close.onclick = function () {
        menu.classList.remove('active');
    }
})
// phone menu end

// search
let openBtnSearch = document.querySelector('.header-menu-search__open'),
    blockSearchPc = document.querySelector('.header-menu__search');

openBtnSearch.onclick = function () {
    blockSearchPc.classList.toggle('active');
}

let btnOpenSearchPhone = document.querySelector('.phone__open-search'),
    searchPhone = document.querySelector('.phone-search');

btnOpenSearchPhone.onclick = function () {
    if (!searchPhone.classList.contains('hidden')) {
        setTimeout(() => {
            searchPhone.classList.add('hidden');
        }, 300);
    }else{
        searchPhone.classList.remove('hidden');
    }

    btnOpenSearchPhone.classList.toggle('active');
    searchPhone.classList.toggle('active');
}

// search end

// open-modal

let openModals = document.querySelectorAll('.open-modal'),
    modal = document.querySelector('.modal');

openModals.forEach(openModal => {
    let modalName = openModal.dataset.modal;

    openModal.onclick = function () {
        let modalItem = document.querySelector(`.modal__item.${modalName}`);

        modalItem.classList.add('active');
        modal.classList.add('active');
    }
})

modal.onclick = function (event) {
    if (event.srcElement.classList.contains('modal')) {
        document.querySelector(`.modal__item.active`).classList.remove('active');
        modal.classList.remove('active');
    }
}

let itemModels = document.querySelectorAll('.modal__item');

itemModels.forEach(item => {
    let btnClose = item.querySelector('.modal-item__close');

    btnClose.onclick = function () {
        item.classList.remove('active');
        modal.classList.remove('active');
    }
})
// open-modal end

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