Andrei | поместил скрипты относящиеся к модалкам в файл модуль popup, удалил дублирущийся js вызова модалок
parent
7825f00ae6
commit
cca90266dc
@ -1,166 +0,0 @@ |
||||
// 'use strict';
|
||||
|
||||
// // Глобальные переменные для управления состоянием
|
||||
// let currentModalContent = null;
|
||||
|
||||
// function modalOpen(buttonElement, contentElement) {
|
||||
// const modal = document.querySelector('.modal');
|
||||
// const aside = document.querySelector('.modal__aside');
|
||||
// const elements = document.querySelectorAll(buttonElement);
|
||||
// const device = window.screen.width;
|
||||
|
||||
// // Обработчик закрытия по клику на оверлей
|
||||
// modal.addEventListener('click', function(e) {
|
||||
// if (e.target === modal && currentModalContent) {
|
||||
// closeModal(currentModalContent);
|
||||
// }
|
||||
// });
|
||||
|
||||
// // Обработчик закрытия по Escape
|
||||
// document.addEventListener('keydown', function(e) {
|
||||
// if (e.key === 'Escape' && currentModalContent) {
|
||||
// closeModal(currentModalContent);
|
||||
// }
|
||||
// });
|
||||
|
||||
// elements.forEach(e => {
|
||||
// e.addEventListener('click', function() {
|
||||
// const content = document.querySelector(contentElement);
|
||||
// currentModalContent = content;
|
||||
|
||||
// // Сброс стилей перед открытием
|
||||
// resetModalStyles();
|
||||
|
||||
// modal.classList.add('active');
|
||||
// content.classList.add('active');
|
||||
|
||||
// const width = content.clientWidth;
|
||||
|
||||
// setTimeout(() => {
|
||||
// if (device <= 720) {
|
||||
// aside.style.width = `${device}px`;
|
||||
// } else {
|
||||
// aside.style.width = `${width}px`;
|
||||
// }
|
||||
// content.style.opacity = '1';
|
||||
// content.style.filter = 'blur(0)';
|
||||
// }, 10);
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
|
||||
// function modalClose(buttonElement) {
|
||||
// const elements = document.querySelectorAll(buttonElement);
|
||||
|
||||
// elements.forEach(e => {
|
||||
// e.addEventListener('click', function() {
|
||||
// if (currentModalContent) {
|
||||
// closeModal(currentModalContent);
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
|
||||
// function closeModal(contentElement) {
|
||||
// const modal = document.querySelector('.modal');
|
||||
// const aside = document.querySelector('.modal__aside');
|
||||
|
||||
// aside.style.width = '0';
|
||||
// contentElement.style.opacity = '0';
|
||||
// contentElement.style.filter = 'blur(10px)';
|
||||
|
||||
// setTimeout(() => {
|
||||
// contentElement.classList.remove('active');
|
||||
// modal.classList.remove('active');
|
||||
// currentModalContent = null;
|
||||
// }, 300);
|
||||
// }
|
||||
|
||||
// function resetModalStyles() {
|
||||
// const allModals = document.querySelectorAll('.modal__item');
|
||||
|
||||
// allModals.forEach(modal => {
|
||||
// modal.style.opacity = '';
|
||||
// modal.style.filter = '';
|
||||
// modal.classList.remove('active');
|
||||
// });
|
||||
|
||||
// document.querySelector('.modal__aside').style.width = '';
|
||||
// }
|
||||
// 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 toggleHeader(button, content, blockheight, removeBlock, removeClass) {
|
||||
// let thisButton = document.querySelector(button),
|
||||
// thisContent = document.querySelector(content),
|
||||
// thisRemoveBlock = document.querySelector(removeBlock) || '',
|
||||
// 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');
|
||||
|
||||
// if (removeBlock) {
|
||||
// thisRemoveBlock.classList.remove(removeClass);
|
||||
// }
|
||||
// }else{
|
||||
// thisContent.style.height = null;
|
||||
// thisContent.classList .remove('open');
|
||||
|
||||
// if (removeBlock) {
|
||||
// if (window.scrollY <= 25) {
|
||||
// thisRemoveBlock.classList.add(removeClass);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// function modalFormOpen(formOrNotification) {
|
||||
// let buttons = document.querySelectorAll(formOrNotification),
|
||||
// modal = document.querySelector('.modal');
|
||||
|
||||
// buttons.forEach(button => {
|
||||
// button.onclick = function (eventButton) {
|
||||
// let classOpenForm = button.dataset.form,
|
||||
// form = modal.querySelector(`.${classOpenForm}`);
|
||||
|
||||
// form.classList.add('active');
|
||||
// modal.classList.add('active');
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// // function
|
||||
@ -1,154 +0,0 @@ |
||||
/* Footer */ |
||||
.footer { |
||||
background: var(--main_black); |
||||
padding: 40px 0 38px; |
||||
color: var(--main_white); |
||||
} |
||||
|
||||
.footer-top { |
||||
display: flex; |
||||
align-items: stretch; |
||||
justify-content: space-between; |
||||
gap: 48px; |
||||
} |
||||
|
||||
.footer-top .logo { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10px; |
||||
font-size: 20px; |
||||
font-weight: 500; |
||||
text-transform: uppercase; |
||||
background: var(--accent-1); |
||||
color: transparent; |
||||
-webkit-background-clip: text; |
||||
background-clip: text; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.footer-content__address { |
||||
font-size: 24px; |
||||
font-weight: 500; |
||||
line-height: 32px; |
||||
margin-bottom: 32px; |
||||
} |
||||
|
||||
.footer-content { |
||||
width: 100%; |
||||
} |
||||
|
||||
.footer-content ul { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 24px; |
||||
} |
||||
|
||||
.footer-content ul li { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 4px; |
||||
} |
||||
|
||||
.footer-content ul p { |
||||
font-size: 16px; |
||||
font-weight: bold; |
||||
line-height: 20px; |
||||
} |
||||
|
||||
.footer-content ul a { |
||||
font-size: 24px; |
||||
font-weight: 500; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
.footer-content__wrap { |
||||
display: flex; |
||||
align-items: flex-end; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
} |
||||
|
||||
.footer-top__link { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 24px; |
||||
} |
||||
|
||||
.footer-top__link .link-black { |
||||
padding: 7px 15px; |
||||
color: var(--main_white); |
||||
font-size: 24px; |
||||
line-height: 32px; |
||||
font-weight: 500; |
||||
white-space: nowrap; |
||||
border: 1px solid var(--main_white); |
||||
border-radius: 24px; |
||||
} |
||||
|
||||
.footer-top__link .link-white { |
||||
width: 100%; |
||||
text-align: center; |
||||
background: var(--main_white); |
||||
color: var(--main_black); |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
line-height: 24px; |
||||
padding: 12px; |
||||
border-radius: 20px; |
||||
} |
||||
|
||||
.footer-contact { |
||||
width: 364px; |
||||
flex-shrink: 0; |
||||
background: var(--accent-1); |
||||
border-radius: 24px; |
||||
padding: 24px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 16px; |
||||
} |
||||
|
||||
.footer-contact__title { |
||||
color: var(--main_black); |
||||
font-size: 24px; |
||||
font-weight: 500; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
.footer-contact__submit { |
||||
width: 100%; |
||||
text-align: center; |
||||
height: 48px; |
||||
border-radius: 16px; |
||||
background: var(--main_black); |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
line-height: 24px; |
||||
color: var(--main_white); |
||||
} |
||||
|
||||
.footer-bottom { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding-top: 17px; |
||||
margin-top: 19px; |
||||
border-top: 1px solid var(--main_white); |
||||
} |
||||
|
||||
.footer-network { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 32px; |
||||
} |
||||
|
||||
.footer-bottom a { |
||||
font-size: 16px; |
||||
line-height: 20px; |
||||
font-weight: 500; |
||||
color: var(--main_white); |
||||
opacity: 0.6; |
||||
text-decoration: underline; |
||||
} |
||||
/* Footer end */ |
||||
|
||||
@ -1,68 +0,0 @@ |
||||
/* Стили для мобильных устройств */ |
||||
@media only screen and (max-width: 576px) { |
||||
.footer { |
||||
padding: 24px 0 58px; |
||||
} |
||||
|
||||
.footer-top { |
||||
align-items: flex-start; |
||||
text-align: left; |
||||
gap: 24px; |
||||
} |
||||
|
||||
.footer-content__wrap { |
||||
align-items: flex-start; |
||||
gap: 24px; |
||||
} |
||||
|
||||
.footer-content { |
||||
align-items: flex-start; |
||||
} |
||||
|
||||
.footer-content .logo { |
||||
font-size: 20px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.footer-content__address { |
||||
font-size: 18px; |
||||
line-height: 24px; |
||||
margin-bottom: 32px; |
||||
} |
||||
|
||||
.footer-content ul { |
||||
gap: 24px; |
||||
} |
||||
|
||||
.footer-content ul p { |
||||
font-size: 16px; |
||||
line-height: 20px; |
||||
} |
||||
|
||||
.footer-content ul a { |
||||
font-size: 24px; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
.footer-top__link .link-white { |
||||
display: none; |
||||
} |
||||
|
||||
.footer-contact { |
||||
width: 100%; |
||||
padding: 16px; |
||||
border-radius: 24px; |
||||
} |
||||
|
||||
.footer-contact__title { |
||||
color: var(--main_white); |
||||
} |
||||
|
||||
.footer-bottom { |
||||
margin-top: 0; |
||||
padding-top: 24px; |
||||
border: 0; |
||||
align-items: flex-start; |
||||
gap: 17px; |
||||
} |
||||
} |
||||
@ -1,4 +0,0 @@ |
||||
/* Стили для планшетов */ |
||||
@media only screen and (max-width: 992px) { |
||||
|
||||
} |
||||
@ -0,0 +1,116 @@ |
||||
// 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
|
||||
@ -1,156 +0,0 @@ |
||||
// 'use strict';
|
||||
|
||||
// // 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 closeModalForm(close){
|
||||
// let buttons = document.querySelectorAll(close),
|
||||
// modal = document.querySelector('.modal');
|
||||
|
||||
// buttons.forEach(button => {
|
||||
// button.onclick = function (buttonEvent) {
|
||||
// modal.classList.remove('active');
|
||||
|
||||
// if (!modal.querySelector('.modal-map.active')) {
|
||||
// modal.querySelector('.modal-form.active').classList.remove('active');
|
||||
// }else{
|
||||
// modal.querySelector('.modal-map.active').classList.remove('active');
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// 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 toggleHeader(button, content, blockheight, removeBlock, removeClass) {
|
||||
// let thisButton = document.querySelector(button),
|
||||
// thisContent = document.querySelector(content),
|
||||
// thisRemoveBlock = document.querySelector(removeBlock) || '',
|
||||
// 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');
|
||||
|
||||
// if (removeBlock) {
|
||||
// thisRemoveBlock.classList.remove(removeClass);
|
||||
// }
|
||||
// }else{
|
||||
// thisContent.style.height = null;
|
||||
// thisContent.classList .remove('open');
|
||||
|
||||
// if (removeBlock) {
|
||||
// if (window.scrollY <= 25) {
|
||||
// thisRemoveBlock.classList.add(removeClass);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// function modalFormOpen(formOrNotification) {
|
||||
// let buttons = document.querySelectorAll(formOrNotification),
|
||||
// modal = document.querySelector('.modal');
|
||||
|
||||
// buttons.forEach(button => {
|
||||
// button.onclick = function (eventButton) {
|
||||
// let classOpenForm = button.dataset.form,
|
||||
// form = modal.querySelector(`.${classOpenForm}`);
|
||||
|
||||
// form.classList.add('active');
|
||||
// modal.classList.add('active');
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// // function
|
||||
Loading…
Reference in new issue