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

let reviewsSwiperImg = new Swiper(".swiper-reviews-img", {
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '">' + "</span>";
        },
    },
});

const projectsSwiper = new Swiper('.projects-swiper', {
    direction: 'horizontal',
    breakpoints: {
        320:{
            slidesPerView: 1,
            spaceBetween: 24,
        },
        996: {
            slidesPerView: 10
        },
    },
    // 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

// masks

let phoneInputs = document.querySelectorAll('.input__field[type=phone]');

phoneInputs.forEach(phoneInput => {
    phoneInput.onfocus = function (event) {
        let value = phoneInput.value;

        if (value.length == 0) {
            phoneInput.value = '+7 '
        }
    }

    phoneInput.addEventListener('input', function(event) {
        let value = phoneInput.value,
            data = event.data,
            length = value.length;

        if (value.charAt(0) == '+' && length == 1) return;

        if (isNaN(data)) {
            phoneInput.value = value.slice(0, -1);
        }
    
        if (typeof data != 'object') {
            if (length == 2 || length == 6 || length == 10) {
                phoneInput.value = value + ' ';
            }
            if (length == 3 || length == 7 || length == 11) {
                if (data != ' ') {
                    phoneInput.value = value.slice(0, -1) + ' ' + data;
                }
            }
        }
        
        if (length <= 3) {
            phoneInput.value = '+7 '
        }
                
    });
})

// masks end

// pc menu

let blocksMenu = document.querySelectorAll('.header-menu-list-next__block');

blocksMenu.forEach(block =>{
    let button = block.querySelector('.header-menu-list__next'),
        content = block.querySelector('.header-menu-list-next__content');

    button.onclick = function () {
        content.classList.add('active');
    }

    let nextButtons = block.querySelectorAll('.header-menu-list-next-content__item');

    nextButtons.forEach(button => {
        let className = button.dataset.menu;
        
        if (typeof className == 'undefined') return;

        button.onclick = function () {
            if (block.querySelector('.header-menu-list-next-content__item.active')) {
                block.querySelector('.header-menu-list-next-content__item.active').classList.toggle('active');
                block.querySelector('.header-menu-list-next__content-next.active').classList.toggle('active');
            }
            
            
            button.classList.toggle('active');
            document.querySelector(`.header-menu-list-next__content-next.${className}`).classList.toggle('active');

        }
    })

    content.addEventListener('mouseout', function (event) {
        if (event.relatedTarget.offsetParent.classList.contains('header-menu-list-next__content-next')) return;

        if (event.relatedTarget.offsetParent != content) {
            content.classList.remove('active');
            content.querySelectorAll('.header-menu-list-next__content-next.active').forEach(next => {
                next.classList.remove('active');
            })
            block.querySelector('.header-menu-list-next-content__item.active').classList.remove('active');

            content.removeEventListener("mouseout", handleMouseDown, false);
        }
    })
    
})

// pc menu end

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