You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 lines
7.0 KiB
234 lines
7.0 KiB
'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
|
|
|
|
// 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
|
|
|
|
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 <= 576) {
|
|
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');
|
|
}
|
|
}
|
|
} |