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.
89 lines
3.0 KiB
89 lines
3.0 KiB
'use strict';
|
|
|
|
import * as fun from './_gp-function.js';
|
|
|
|
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');
|
|
}
|
|
})
|
|
|
|
}
|
|
} |