сделал переключение в кабинете

2024-10-24 17:42:32 +03:00
parent e0cc1b1e0c
commit d5ea9b0a34
6 changed files with 342 additions and 100 deletions
--- a/assets/js/gp-cabinet.js
+++ b/assets/js/gp-cabinet.js
@@ -2,4 +2,88 @@

 import * as fun from './_gp-function.js';

-fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');
+let widthPhoneCabinet = 1200;
+
+fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');
+
+
+
+startHeight('.cabinet__orders', '.cabinet', widthPhoneCabinet, '.cabinet__profile', '.cabinet-control__button');
+controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet);
+
+window.addEventListener('resize', (e) => {
+    startHeight('.cabinet__orders', '.cabinet', widthPhoneCabinet, '.cabinet__profile', '.cabinet-control__button');
+});
+
+
+// function
+function startHeight(heightElement, contentElement, minWidth, removeActive, buttons) {
+    let thisWidth = window.innerWidth;
+    let thisHeightElement = document.querySelector(heightElement);
+    let thisContentElement = document.querySelector(contentElement);
+    let thisRemoveActive = document.querySelector(removeActive);
+    let thisButtons = document.querySelectorAll(buttons);
+
+    if (thisWidth <= minWidth) {
+        let newHeight =  thisHeightElement.clientHeight + 48;
+        
+        thisContentElement.style.height = `${newHeight}px`;
+        thisHeightElement.classList.add('active');
+        thisRemoveActive.classList.remove('active');
+
+        thisButtons.forEach(e => {
+            let thisClassList = e.classList;
+
+            if (!thisClassList.contains('start')) {
+                thisClassList.remove('active');                
+            }else{
+                thisClassList.add('active')
+            }
+        })
+    }else{
+        thisContentElement.style.height = 'auto';
+        thisHeightElement.classList.remove('active');
+
+        thisButtons.forEach(e => {
+            let thisClassList = e.classList;
+
+            if (!thisClassList.contains('start')) {
+                thisClassList.remove('active');                
+            }else{
+                thisClassList.add('active')
+            }
+        })
+    }
+}
+
+function controlCabinet(buttons, main, minWidth){
+    let thisWidth = window.innerWidth;
+    let thisMain = document.querySelector(main);
+    
+
+    if (thisWidth <= minWidth) {
+        let thisButtons = document.querySelectorAll(buttons);
+        // let thisContents = document.querySelectorAll(contents);
+
+        thisButtons.forEach(e => {
+            e.onclick = function (element){
+                let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`);
+                let newHeight = thisContent.clientHeight + 48;
+                let thisButton = element.target;
+
+                thisMain.style.height = `${newHeight}px`
+
+                if (!thisContent.classList.contains('active')) {
+                    thisMain.querySelector('.active').classList.remove('active');
+                    thisContent.classList.add('active');
+                }
+
+                thisButtons.forEach(e => {
+                    e.classList.remove('active');
+                })
+                thisButton.classList.add('active');
+            }
+        })
+
+    }
+}