From 6121332038995a993f4b878e30e68eee52d7ea82 Mon Sep 17 00:00:00 2001 From: maksim Date: Wed, 11 Jun 2025 09:48:12 +0300 Subject: [PATCH] =?UTF-8?q?Fix=20|=206743=20=D0=B1=D0=B0=D0=B3=20=D0=BF?= =?UTF-8?q?=D1=80=D0=B8=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D0=B8?= =?UTF-8?q?=20=D0=BA=D0=BE=D1=80=D0=B7=D0=B8=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/layout/assets/js/gp-main.js | 49 ++ .../cosmopet/static/front-page/css/style.css | 1 - .../cosmopet/static/front-page/js/main.js | 47 -- .../cosmopet/woocommerce/assets/js/gp-main.js | 582 +++++++++--------- 4 files changed, 337 insertions(+), 342 deletions(-) diff --git a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js index a7eb44b..2617242 100644 --- a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js +++ b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js @@ -492,4 +492,53 @@ jQuery(document).ready(function($) { $('.close-btn').on('click', function(e) { $('.modalProfile').removeClass('active'); }); +}); + + +// Находим все элементы с классом login-open +document.addEventListener('DOMContentLoaded', function() { + const loginButtons = document.querySelectorAll('.login-open'); + + loginButtons.forEach(button => { + button.addEventListener('click', function(event) { + event.preventDefault(); + + const modal = document.querySelector('.modal'); + const modalAside = document.querySelector('.modal__aside'); + const modalLogin = document.querySelector('.modal__login'); + + modal.classList.add('active'); + modalLogin.classList.add('active'); + + // Set width and slide in from right + modalAside.style.width = '20vw'; + modalAside.style.right = '0'; + }); + }); + + const closeButtons = document.querySelectorAll('.modal-close'); + const modal = document.querySelector('.modal'); + + closeButtons.forEach(button => { + button.addEventListener('click', closeModal); + }); + + modal.addEventListener('click', function(event) { + if (event.target === modal) { + closeModal(); + } + }); + + function closeModal() { + const modal = document.querySelector('.modal'); + const modalAside = document.querySelector('.modal__aside'); + const modalLogin = document.querySelector('.modal__login'); + + modal.classList.remove('active'); + modalLogin.classList.remove('active'); + + // Reset styles + modalAside.style.width = ''; + modalAside.style.right = '0'; + } }); \ No newline at end of file diff --git a/wp-content/themes/cosmopet/static/front-page/css/style.css b/wp-content/themes/cosmopet/static/front-page/css/style.css index 0d141f6..da5d648 100644 --- a/wp-content/themes/cosmopet/static/front-page/css/style.css +++ b/wp-content/themes/cosmopet/static/front-page/css/style.css @@ -4551,7 +4551,6 @@ color: #f4f1f0; .modal__aside { position: fixed; - right: -400px; transition: right 0.3s ease-in-out; } diff --git a/wp-content/themes/cosmopet/static/front-page/js/main.js b/wp-content/themes/cosmopet/static/front-page/js/main.js index b05c023..a855796 100644 --- a/wp-content/themes/cosmopet/static/front-page/js/main.js +++ b/wp-content/themes/cosmopet/static/front-page/js/main.js @@ -471,53 +471,6 @@ document.addEventListener('DOMContentLoaded', function () { }); }); -// Находим все элементы с классом login-open -document.addEventListener('DOMContentLoaded', function() { - const loginButtons = document.querySelectorAll('.login-open'); - - loginButtons.forEach(button => { - button.addEventListener('click', function(event) { - event.preventDefault(); - - const modal = document.querySelector('.modal'); - const modalAside = document.querySelector('.modal__aside'); - const modalLogin = document.querySelector('.modal__login'); - - modal.classList.add('active'); - modalLogin.classList.add('active'); - - // Set width and slide in from right - modalAside.style.width = '20vw'; - modalAside.style.right = '0'; - }); - }); - - const closeButtons = document.querySelectorAll('.modal-close'); - const modal = document.querySelector('.modal'); - - closeButtons.forEach(button => { - button.addEventListener('click', closeModal); - }); - - modal.addEventListener('click', function(event) { - if (event.target === modal) { - closeModal(); - } - }); - - function closeModal() { - const modal = document.querySelector('.modal'); - const modalAside = document.querySelector('.modal__aside'); - const modalLogin = document.querySelector('.modal__login'); - - modal.classList.remove('active'); - modalLogin.classList.remove('active'); - - // Reset styles - modalAside.style.width = ''; - modalAside.style.right = '-30vw'; - } -}); document.addEventListener('DOMContentLoaded', function() { // Initialize Swiper diff --git a/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js index 70f3a16..fa08a23 100644 --- a/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js +++ b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js @@ -129,353 +129,347 @@ $('.product__main').on('click', '.counter__button', function(evt) { }) +// // header +// toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false); +// toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white'); +// toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white'); +// // header + +// // modal +// modalOpen('.button--filter', '.modal__filter'); +// modalOpen('.basket-open', '.modal__basket'); +// modalOpen('.login-open', '.modal__login'); +// modalOpen('.open-to-know', '.modal__to-know'); +// modalClose('.modal__close'); +// modalClose('.modal-form-sub__close'); +// let modalWindow = document.querySelector('.modal'); // Изменено с modal на modalWindow + +// modalWindow.onclick = function (event) { +// let target = event.target; + +// if (target.classList.contains('modal')) { +// let aside = target.querySelector('.modal__aside'), +// modalItem = target.querySelector('.modal__item.active'); + +// aside.style.width = '0px'; +// setTimeout(() => { +// modalItem.style.cssText = ''; +// modalItem.classList.remove('active'); +// target.classList.remove('active'); +// }, 300); +// } +// } +// // modal +// // toggle +// toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); +// // toggle +// // radio-button +// let radioButtons = document.querySelectorAll('.radio-button'); - - -// header -toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false); -toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white'); -toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white'); -// header - -// modal -modalOpen('.button--filter', '.modal__filter'); -modalOpen('.basket-open', '.modal__basket'); -modalOpen('.login-open', '.modal__login'); -modalOpen('.open-to-know', '.modal__to-know'); -modalClose('.modal__close'); -modalClose('.modal-form-sub__close'); -let modalWindow = document.querySelector('.modal'); // Изменено с modal на modalWindow - -modalWindow.onclick = function (event) { - let target = event.target; - - if (target.classList.contains('modal')) { - let aside = target.querySelector('.modal__aside'), - modalItem = target.querySelector('.modal__item.active'); - - aside.style.width = '0px'; - setTimeout(() => { - modalItem.style.cssText = ''; - modalItem.classList.remove('active'); - target.classList.remove('active'); - }, 300); - } -} - -// modal - -// 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'); +// radioButtons.forEach(radioBlock => { +// let buttons = radioBlock.querySelectorAll('.button'); - buttons.forEach(button => { - let input = radioBlock.querySelector('.radio-button__input'); +// buttons.forEach(button => { +// let input = radioBlock.querySelector('.radio-button__input'); - button.onclick = function (e) { - e.preventDefault(); +// button.onclick = function (e) { +// e.preventDefault(); - buttons.forEach(thisButton => { - if (thisButton.classList.contains('active')) { - thisButton.classList.remove('active') - } - }) +// buttons.forEach(thisButton => { +// if (thisButton.classList.contains('active')) { +// thisButton.classList.remove('active') +// } +// }) - let text = button.textContent.trim(); +// let text = button.textContent.trim(); - button.classList.toggle('active'); +// button.classList.toggle('active'); - input.value = text; - } - }) -}) -// radio-button +// input.value = text; +// } +// }) +// }) +// // radio-button -let products = document.querySelectorAll('.product__item'); +// let products = document.querySelectorAll('.product__item'); -products.forEach(productItem => { - let button = productItem.querySelector('.open-overlay'), - overlay = productItem.querySelector('.product-item__overlay'); +// 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'); - } - } +// 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'); +// } +// } -}) +// }) -// select -// toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true); +// // select +// // toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true); -// let selects = document.querySelectorAll('.select'); +// // let selects = document.querySelectorAll('.select'); -// selects.forEach(select => { -// let state = select.querySelector('.select__state'), -// content = select.querySelector('.state__block'), -// buttons = select.querySelectorAll('.state__button'); +// // selects.forEach(select => { +// // let state = select.querySelector('.select__state'), +// // content = select.querySelector('.state__block'), +// // buttons = select.querySelectorAll('.state__button'); -// buttons.forEach(e => { -// let button = e; +// // buttons.forEach(e => { +// // let button = e; -// e.onclick = function (event) { -// event.preventDefault(); +// // e.onclick = function (event) { +// // event.preventDefault(); -// buttons.forEach(element => { -// if (element.classList.contains('active')) { -// element.classList.remove('active'); -// } -// }) +// // buttons.forEach(element => { +// // if (element.classList.contains('active')) { +// // element.classList.remove('active'); +// // } +// // }) -// let text = e.textContent.trim(); -// state.value = text; - -// button.classList.add('active'); -// content.style.height = 0; -// select.classList.remove('active'); -// } -// }) -// }) +// // let text = e.textContent.trim(); +// // state.value = text; +// // button.classList.add('active'); +// // content.style.height = 0; +// // select.classList.remove('active'); +// // } +// // }) +// // }) -// select -// counter -// let counters = document.querySelectorAll('.counter'); +// // select -// counters.forEach(e => { -// let minus = e.querySelector('.minus'), -// plus = e.querySelector('.plus'), -// input = e.querySelector('.counter__input'); +// // counter +// // let counters = document.querySelectorAll('.counter'); -// minus.onclick = function (e) { -// e.preventDefault(); +// // 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; +// // let number = input.value; -// if (number >= 2){ -// input.value = Number(number) - 1; -// } -// } +// // if (number >= 2){ +// // input.value = Number(number) - 1; +// // } +// // } -// plus.onclick = function (e) { -// e.preventDefault(); +// // plus.onclick = function (e) { +// // e.preventDefault(); -// let number = input.value; +// // let number = input.value; -// if (number <= 99) { -// input.value = Number(number) + 1; +// // 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'); // } // }) -// counter - -// checkbox -let checkbox = document.querySelectorAll('.checkbox'); +// // 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), +// // body = document.querySelector('body'); -function modalOpen(buttonElement, contentElement) { - let modal = document.querySelector('.modal'), - aside = document.querySelector('.modal__aside'), - elements = document.querySelectorAll(buttonElement), - body = document.querySelector('body'); +// // elements.forEach(e => { +// // let thisContentElement = document.querySelector(contentElement); - elements.forEach(e => { - let thisContentElement = document.querySelector(contentElement); - - e.onclick = function () { - body.classList.add('overflow-hidden'); - modal.classList.add('active'); - thisContentElement.classList.add('active'); +// // e.onclick = function () { +// // body.classList.add('overflow-hidden'); +// // modal.classList.add('active'); +// // thisContentElement.classList.add('active'); - // Set width and position based on screen size - const isMobile = window.matchMedia("(max-width: 768px)").matches; - aside.style.width = isMobile ? '80vw' : '20vw'; - aside.style.right = '0'; - }; - }); -} - -function modalClose(buttonElement) { - let modal = document.querySelector('.modal'), - aside = document.querySelector('.modal__aside'), - asideItems = document.querySelectorAll('.modal__item'), - elements = document.querySelectorAll(buttonElement), - body = document.querySelector('body'); - - elements.forEach(e => { - e.onclick = function () { - body.classList.remove('overflow-hidden'); - aside.style.width = '0px'; +// // // Set width and position based on screen size +// // const isMobile = window.matchMedia("(max-width: 768px)").matches; +// // aside.style.width = isMobile ? '80vw' : '20vw'; +// // aside.style.right = '0'; +// // }; +// // }); +// // } + +// // function modalClose(buttonElement) { +// // let modal = document.querySelector('.modal'), +// // aside = document.querySelector('.modal__aside'), +// // asideItems = document.querySelectorAll('.modal__item'), +// // elements = document.querySelectorAll(buttonElement), +// // body = document.querySelector('body'); + +// // elements.forEach(e => { +// // e.onclick = function () { +// // body.classList.remove('overflow-hidden'); +// // 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'); - } - } +// // 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 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 - -// 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'); - modalClose('.modal__close'); +// }); +// } + +// 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 + +// // 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'); +// modalClose('.modal__close'); - let modalItem = document.querySelectorAll('.modal__item'); +// 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) { +// 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 (width <= 720) { +// aside.style.width = `${width}px` +// }else{ +// let openAside = document.querySelector('.modal__item.active'), +// newWidth = openAside.clientWidth; - aside.style.width = `${newWidth}px` - } - } - }) - // } -}); -// resize +// aside.style.width = `${newWidth}px` +// } +// } +// }) +// // } +// }); +// // resize -// scroll +// // scroll -if (document.querySelector('.header').classList.contains('white')) { - window.addEventListener("scroll", function (e) { - let header = document.querySelector('.header'); - let scroll = window.scrollY; +// if (document.querySelector('.header').classList.contains('white')) { +// window.addEventListener("scroll", function (e) { +// let header = document.querySelector('.header'); +// let scroll = window.scrollY; - if (scroll >= 25) { - header.classList.remove('white') - }else{ - header.classList.add('white') - } +// if (scroll >= 25) { +// header.classList.remove('white') +// }else{ +// header.classList.add('white') +// } - }); -} -// scroll +// }); +// } +// // scroll