Task:6625 | Переделал окно логина на новую логику

wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css

@@ -172,7 +172,7 @@
 }
 
 .modal__login {
-    width: 500px;
+    width: 100%;
 }
 
 .modal__item.active {

wp-content/themes/cosmopet/modules/footer/assets/js/footer.js

@@ -776,64 +776,64 @@ initCounters()
 
 
 // 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 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);
+// 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';
+//     elements.forEach(e => {
+//         e.onclick = function () {            
+//             aside.style.width = '0px';
             
-            asideItems.forEach(e => {
-                if (e.classList.contains('active')) {
-                    e.style.filter  = 'blur(10px)';
-                }
-            });
+//             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');
-                    }
-                });
+//             setTimeout(() => {
+//                 asideItems.forEach(e => {
+//                     if (e.classList.contains('active')) {
+//                         e.classList.remove('active');
+//                     }
+//                 });
 
-                modal.classList.remove('active');
-            }, 300);
-        }
-    })
-}
+//                 modal.classList.remove('active');
+//             }, 300);
+//         }
+//     })
+// }
 
 function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
     let elements = document.querySelectorAll(mainElement);

wp-content/themes/cosmopet/modules/header/assets/css/gp-style-desktop.css

@@ -760,3 +760,7 @@ width: 0px;
 .mini-profile__button{
   position: relative;
 }
+
+#telegram-widget-container {
+  text-align: center;
+}

wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css

@@ -2170,11 +2170,6 @@ textarea{
     position: relative;
 }
 
-.modal__aside {
-    right: 0%!important;
-}
-
-
 .modal__button--center{
   margin-right: auto;
   margin-left: auto;

wp-content/themes/cosmopet/static/front-page/css/style.css

@@ -4548,3 +4548,13 @@ color: #f4f1f0;
 .discount_block{
     padding-bottom: 80px;
 }
+
+.modal__aside {
+    position: fixed;
+    right: -20vw;
+    transition: right 0.3s ease-in-out;
+}
+
+.modal__aside.active {
+    right: 0;
+}

wp-content/themes/cosmopet/static/front-page/js/main.js

@@ -475,36 +475,30 @@ document.addEventListener('DOMContentLoaded', function () {
 document.addEventListener('DOMContentLoaded', function() {
     const loginButtons = document.querySelectorAll('.login-open');
     
-    // Добавляем обработчик события для каждой кнопки
     loginButtons.forEach(button => {
       button.addEventListener('click', function(event) {
-        event.preventDefault(); // Предотвращаем стандартное действие (если это ссылка)
+        event.preventDefault();
         
-        // Находим элементы модального окна
         const modal = document.querySelector('.modal');
         const modalAside = document.querySelector('.modal__aside');
         const modalLogin = document.querySelector('.modal__login');
         
-        // Добавляем классы active
         modal.classList.add('active');
         modalLogin.classList.add('active');
         
-        // Устанавливаем ширину для modal__aside
-        modalAside.style.width = '412px';
+        // 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();
@@ -516,12 +510,12 @@ document.addEventListener('DOMContentLoaded', function() {
       const modalAside = document.querySelector('.modal__aside');
       const modalLogin = document.querySelector('.modal__login');
       
-      // Удаляем классы active
       modal.classList.remove('active');
       modalLogin.classList.remove('active');
       
-      // Сбрасываем ширину
+      // Reset styles
       modalAside.style.width = '';
+      modalAside.style.right = '-30vw';
     }
 });
 

wp-content/themes/cosmopet/templates/footer.twig

@@ -173,85 +173,114 @@ function onTelegramAuth(user) {
     });
 
 document.addEventListener('DOMContentLoaded', function () {
+  // Функция для обновления ширины .modal__aside
+  function updateAsideWidth() {
+    const modalItem = document.querySelector('.modal__item.active');
+    if (modalItem) {
+      const aside = modalItem.querySelector('.modal__aside');
+      if (aside) {
+        aside.classList.add('active'); // Используем CSS для анимации ширины
+      }
+    }
+  }
+
   // Общая функция для открытия модальных окон
   function modalOpen(triggerSelector, modalSelector) {
     const triggers = document.querySelectorAll(triggerSelector);
-        const modalLogin = document.querySelector('.modal');
+    const modal = document.querySelector('.modal');
     const modalItem = document.querySelector(modalSelector);
     const modalAside = modalItem ? modalItem.querySelector('.modal__aside') : null;
 
     triggers.forEach(trigger => {
-            trigger.addEventListener('click', (e) => {
-                e.preventDefault(); // Предотвращаем стандартное поведение
+      // Удаляем старые обработчики, чтобы избежать дублирования
+      trigger.removeEventListener('click', handleModalOpen);
+      trigger.addEventListener('click', handleModalOpen);
+
+      function handleModalOpen(e) {
+        e.preventDefault();
 
         // Сбрасываем стили и классы для всех модальных окон
         document.querySelectorAll('.modal__item').forEach(item => {
           item.classList.remove('active');
-                    item.style.cssText = ''; // Сбрасываем opacity, filter и другие стили
+          item.style.cssText = ''; // Сбрасываем стили
           const aside = item.querySelector('.modal__aside');
           if (aside) {
-                        aside.style.width = '';
+            aside.classList.remove('active');
+            aside.style.width = ''; // Сбрасываем style.width
           }
         });
 
         // Открываем нужное модальное окно
-                if (modalLogin && modalItem) {
+        if (modal && modalItem) {
           modal.classList.add('active');
           modalItem.classList.add('active');
-                    modalItem.style.opacity = '1'; // Устанавливаем видимость
-                    modalItem.style.filter = 'blur(0px)'; // Убираем размытие
           if (modalAside) {
-                        modalAside.style.width = '500px'; // Устанавливаем ширину
+            modalAside.classList.add('active'); // Используем CSS для анимации
+          }
         }
       }
-            });
     });
   }
 
   // Общая функция для закрытия модальных окон
   function modalClose(closeSelector) {
     const closes = document.querySelectorAll(closeSelector);
-        const modalLogin = document.querySelector('.modal');
+    const modal = document.querySelector('.modal');
 
     closes.forEach(close => {
-            close.addEventListener('click', () => {
+      // Удаляем старые обработчики
+      close.removeEventListener('click', handleModalClose);
+      close.addEventListener('click', handleModalClose);
+
+      function handleModalClose() {
         document.querySelectorAll('.modal__item').forEach(item => {
-                    item.classList.remove('active');
-                    item.style.cssText = ''; // Сбрасываем opacity, filter и другие стили
           const aside = item.querySelector('.modal__aside');
           if (aside) {
-                        aside.style.width = '';
+            aside.classList.remove('active'); // Запускаем анимацию закрытия
           }
+          item.classList.remove('active');
+          item.style.cssText = ''; // Сбрасываем стили
         });
-                if (modalLogin) {
+        if (modal) {
           modal.classList.remove('active');
         }
-            });
+      }
     });
   }
 
   // Обработчик клика по фону модального окна
-    const modalLogin = document.querySelector('.modal');
-    if (modalLogin) {
+  const modal = document.querySelector('.modal');
+  if (modal) {
     modal.addEventListener('click', (event) => {
       if (event.target.classList.contains('modal')) {
         const modalItem = modal.querySelector('.modal__item.active');
         if (modalItem) {
           const aside = modalItem.querySelector('.modal__aside');
           if (aside) {
-                        aside.style.width = '0px';
+            aside.classList.remove('active'); // Запускаем анимацию закрытия
           }
-                    modalItem.style.opacity = '0'; // Анимация закрытия
-                    modalItem.style.filter = 'blur(10px)';
-                    setTimeout(() => {
           modalItem.classList.remove('active');
-                        modalItem.style.cssText = ''; // Сбрасываем все стили после анимации
           modal.classList.remove('active');
-                    }, 300);
         }
       }
     });
   }
+
+  // Вызываем функции для привязки обработчиков
+  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');
+
+  // Обновляем ширину при изменении размера окна
+  window.addEventListener('resize', () => {
+    updateAsideWidth();
+  });
+
+  // Обновляем ширину при загрузке страницы
+  updateAsideWidth();
 });
 </script>