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.
116 lines
3.6 KiB
116 lines
3.6 KiB
// modal
|
|
modalOpen('.button--filter', '.modal__filter');
|
|
modalOpen('.basket-open', '.modal__basket');
|
|
modalOpen('.open-to-know', '.modal__to-know');
|
|
modalOpen('.login-open', '.modal__login');
|
|
modalClose('.modal__close');
|
|
|
|
let modal = document.querySelector('.modal');
|
|
|
|
modal.onclick = function (event) {
|
|
let target = event.target;
|
|
if (target.classList.contains('modal')) {
|
|
closeAllModals();
|
|
}
|
|
}
|
|
|
|
// function
|
|
function modalOpen(buttonElement, contentElement){
|
|
let modal = document.querySelector('.modal'),
|
|
aside = document.querySelector('.modal__aside'),
|
|
elements = document.querySelectorAll(buttonElement),
|
|
device = window.screen.width,
|
|
body = document.querySelector('body');
|
|
|
|
elements.forEach(e => {
|
|
let thisContentElement = document.querySelector(contentElement);
|
|
|
|
e.onclick = function () {
|
|
body.classList.add('overflow-hidden');
|
|
modal.classList.add('active');
|
|
thisContentElement.classList.add('active');
|
|
|
|
let width = thisContentElement.clientWidth;
|
|
if (width < 400){
|
|
width = 400
|
|
}
|
|
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 closeAllModals() {
|
|
let modal = document.querySelector('.modal'),
|
|
aside = document.querySelector('.modal__aside'),
|
|
asideItems = document.querySelectorAll('.modal__item'),
|
|
body = document.querySelector('body');
|
|
|
|
aside.style.width = '0px';
|
|
body.classList.remove('overflow-hidden');
|
|
|
|
asideItems.forEach(item => {
|
|
if (item.classList.contains('active')) {
|
|
item.style.opacity = 0;
|
|
item.style.filter = 'blur(10px)';
|
|
}
|
|
});
|
|
|
|
setTimeout(() => {
|
|
asideItems.forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
modal.classList.remove('active');
|
|
}, 300);
|
|
}
|
|
|
|
function modalClose(buttonElement) {
|
|
let elements = document.querySelectorAll(buttonElement);
|
|
elements.forEach(e => {
|
|
e.onclick = closeAllModals;
|
|
});
|
|
}
|
|
|
|
// resize
|
|
window.addEventListener('resize', (e) => {
|
|
let width = window.screen.width;
|
|
|
|
// media
|
|
modalOpen('.button--filter', '.modal__filter');
|
|
modalOpen('.basket-open', '.modal__basket');
|
|
modalOpen('.open-to-know', '.modal__to-know');
|
|
modalOpen('.login-open', '.modal__login');
|
|
modalClose('.modal__close');
|
|
|
|
let modalItem = document.querySelectorAll('.modal__item');
|
|
|
|
// if (width <= 720) {
|
|
modalItem.forEach(modal => {
|
|
if (modal.classList.contains('active')) {
|
|
let aside = document.querySelector('.modal__aside');
|
|
|
|
if (width <= 720) {
|
|
aside.style.width = `${width}px`
|
|
}else{
|
|
let openAside = document.querySelector('.modal__item.active'),
|
|
newWidth = openAside.clientWidth;
|
|
if (newWidth < 400){
|
|
newWidth = 400
|
|
}
|
|
aside.style.width = `${newWidth}px`
|
|
}
|
|
}
|
|
})
|
|
// }
|
|
});
|
|
// resize
|