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

'use strict';

// header
toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false);
singleToggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
singleToggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
// header 

// media
modalOpen('.button--filter', '.modal__filter');
modalOpen('.basket-open', '.modal__basket');
modalClose('.modal__close');
// media

// toggle
toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
// toggle

// radio-button
let radioButtons = document.querySelectorAll('.radio-button');

radioButtons.forEach(radioBlock => {
    let buttons = radioBlock.querySelectorAll('.button');
    
    buttons.forEach(button => {
        let input = radioBlock.querySelector('.radio-button__input');

        button.onclick = function (e) {
            e.preventDefault();

            buttons.forEach(thisButton => {
                if (thisButton.classList.contains('active')) {
                    thisButton.classList.remove('active')
                }
            })

            let text = button.textContent.trim();

            button.classList.toggle('active');

            input.value = text;            
        } 
    })   
})
// radio-button

// overlay
let products = document.querySelectorAll('.product__item');

products.forEach(productItem => {
    let button = productItem.querySelector('.open-overlay'),
        overlay = productItem.querySelector('.product-item__overlay');

    
    if (button) {
        button.onclick = function (e) {
            document.querySelectorAll('.product__item').forEach(e => {
                if (e.classList.contains('active')) {
                    e.classList.remove('active');
                }
            });
            document.querySelectorAll('.product-item__overlay').forEach(e => {
                if (e.classList.contains('active')) {
                    e.classList.remove('active');
                }
            });

            productItem.classList.toggle('active'); 
            overlay.classList.toggle('active');            
        }
    }
    
})
// overlay


// select
toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);

let selects = document.querySelectorAll('.select');

selects.forEach(e => {
    let state = e.querySelector('.select__state'),
        buttons = e.querySelectorAll('.state__button');
        
    buttons.forEach(e => {
        let button = e;

        e.onclick = function (event) {
            event.preventDefault();

            buttons.forEach(element => {
                if (element.classList.contains('active')) {
                    element.classList.remove('active');
                }
            })          
            
            let text = e.textContent.trim();
            state.value = text;

            button.classList.add('active');
        }        
    })
})
// select

// counter
let counters = document.querySelectorAll('.counter');

counters.forEach(e => {
    let minus = e.querySelector('.minus'),
        plus  = e.querySelector('.plus'),
        input = e.querySelector('.counter__input');

        minus.onclick = function (e) {
            e.preventDefault();
            
            let number = input.value;
            
            if (number >= 2){
                input.value = Number(number) - 1;
            }
        }

        plus.onclick = function (e) {
            e.preventDefault();
            
            let number = input.value;
            
            if (number <= 99) {
                input.value = Number(number) + 1;
            }
        }
})
// counter

// checkbox 
let checkbox = document.querySelectorAll('.checkbox');

checkbox.forEach(e => {
    e.onclick = function (event) {
        let input = e.querySelector('.checkbox__input');

        if (!e.classList.contains('active')) {
            input.checked = 1;
        }else{
            input.checked = 0;
        }
        e.classList.toggle('active');
    }
})
// checkbox 




// slider gallery modal
const gallery = new Swiper('.gallery__slider', {
    spaceBetween: 100,
  
    pagination: {
      el: '.swiper-pagination',
    },
  
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
    scrollbar: {
      el: '.swiper-scrollbar',
    },
});

let paginationButtons = document.querySelectorAll('.gallery-pagination__item');

paginationButtons.forEach(button => {
    let index = button.dataset.countImg;

    button.onclick = function () {
        gallery.slideTo(index);
    }
})

// open gallery
let detailImage= document.querySelectorAll('.detail__image');
detailImage.forEach(button => {
    let index = button.dataset.countImg;

    button.onclick = function () {
        gallery.slideTo(index);
        
        document.querySelector('.gallery').classList.add('active');
    }
})

// close gallery

document.querySelector('.gallery__close').onclick = function () {
    document.querySelector('.gallery').classList.remove('active');
}
// slider gallery modal

// slider gallery main phone

// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);

const detailPhone = new Swiper('.detail__images-phone', {
    spaceBetween: 100,
  
    pagination: {
      el: '.swiper-pagination',
    },
  
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
    scrollbar: {
      el: '.swiper-scrollbar',
    },
});

let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');

detailImagesPhones.forEach(button => {
    button.onclick = function (e) {
        let index = button.dataset.countImg;

        gallery.slideTo(index);
        
        document.querySelector('.gallery').classList.add('active');
    }
})

// slider gallery main phone

// detail catalog
const detailCatalot = new Swiper('.detail__catalot', {
    // Navigation arrows
    navigation: {
      nextEl: '.detail-catalot-control__button.next',
      prevEl: '.detail-catalot-control__button.prev',
    },
    breakpoints: {
        1600: {
            slidesPerView: 4,
        },
        1200: {
            slidesPerView: 3,
        },
        780: {
            slidesPerView: 2.2,
        },
        100: {
            slidesPerView: 1.3,
            spaceBetween: 20
        },
    }


});
// detail catalog


// function
function modalOpen(buttonElement, contentElement){
    let modal = document.querySelector('.modal'),
        aside = document.querySelector('.modal__aside'),
        elements = document.querySelectorAll(buttonElement),
        device = window.screen.width;

    elements.forEach(e => {
        let thisContentElement = document.querySelector(contentElement);

        e.onclick = function () {
            modal.classList.add('active');
            thisContentElement.classList.add('active');
            
            let width = thisContentElement.clientWidth;

            setTimeout(() => {
                if (device <= 720) {
                    aside.style.width = `${device}px`;
                    thisContentElement.style.opacity = 1;
                    thisContentElement.style.filter = 'blur(0px)';
                }else{
                    aside.style.width = `${width}px`;
                    thisContentElement.style.opacity = 1;
                    thisContentElement.style.filter = 'blur(0px)';
                }
            }, 10);
        }
    })
}

function modalClose(buttonElement) {
    let modal = document.querySelector('.modal'),
        aside = document.querySelector('.modal__aside'),
        asideItems = document.querySelectorAll('.modal__item'),
        elements = document.querySelectorAll(buttonElement);

    elements.forEach(e => {
        e.onclick = function () {            
            aside.style.width = '0px';
            
            asideItems.forEach(e => {
                if (e.classList.contains('active')) {
                    e.style.filter  = 'blur(10px)';
                }
            });

            setTimeout(() => {
                asideItems.forEach(e => {
                    if (e.classList.contains('active')) {
                        e.classList.remove('active');
                    }
                });

                modal.classList.remove('active');
            }, 300);
        }
    })
}

function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
    let elements = document.querySelectorAll(mainElement);

    elements.forEach(e => {
        let thisMainElement = e,
            thisButtonElement = e.querySelector(buttonElement),
            thisHeightElement = e.querySelector(heightElement),
            thisContentElement = e.querySelector(contentElement);        

        thisButtonElement.onclick = function (e) {
            let height = thisHeightElement.clientHeight;

            if (close == true && !thisMainElement.classList.contains('active')) {
                elements.forEach(e => {
                    if (e.classList.contains('active')) {
                        e.classList.remove('active');
                        e.querySelector(contentElement).style.height = null
                    }                    
                })
            }

            if (!thisMainElement.classList.contains('active')) {
                thisContentElement.style.height = `${height}px`;
                thisMainElement.classList.add('active');
            }else{
                thisContentElement.style.height = null;
                thisMainElement.classList.remove('active');
            }
        }
        
    });
}

function singleToggleOpenX(button, content, blockheight) {
    let thisButton = document.querySelector(button), 
        thisContent = document.querySelector(content),
        thisBlockheight = document.querySelector(blockheight);

    thisButton.onclick = function () {
        let height = thisBlockheight.clientHeight;

        if (!thisContent.classList .contains('open')) {
            thisContent.style.height = `${height}px`;
            thisContent.classList .add('open');
        }else{
            thisContent.style.height = null;
            thisContent.classList .remove('open');
        }
    }
}

function createGalleryPhone(swiper, wrapper, slide, width) {
    if (window.screen.width <= width) {
        let thisSwiper = document.querySelector(swiper),
            thisWrapper = document.querySelector(wrapper),
            thisSlides = document.querySelectorAll(slide);

        
        
        thisSwiper.classList.add('swiper');
        thisWrapper.classList.add('swiper-wrapper'); 
        thisSlides.forEach(e => {
            e.classList.add('swiper-slide'); 
        })

        const t = new Swiper('.detail__images', {
            spaceBetween: 100,
          
            pagination: {
              el: '.swiper-pagination',
            },
          
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
          
            scrollbar: {
              el: '.swiper-scrollbar',
            },
        });
         
    }
}


// resize
window.addEventListener('resize', (e) => {
    // media
    modalOpen('.button--filter', '.modal__filter');
    modalOpen('.basket-open', '.modal__basket');
    modalClose('.modal__close');
    // media
    // gallery
    // if (!document.querySelector('.detail__images').classList.contains('swiper')) {
    //     createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
    // }
    // gallery
});
// resize