|
|
|
@ -8,49 +8,60 @@ fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.ca |
|
|
|
|
fun.modalFormOpen('.form-open'); |
|
|
|
|
|
|
|
|
|
fun.closeModalForm('.modal-form__close'); |
|
|
|
|
fun.closeModalForm('.modal-form__button-close'); |
|
|
|
|
|
|
|
|
|
controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet); |
|
|
|
|
|
|
|
|
|
function controlCabinet(buttons, main, minWidth){ |
|
|
|
|
let thisWidth = window.innerWidth; |
|
|
|
|
let thisMain = document.querySelector(main); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (thisWidth <= minWidth) { |
|
|
|
|
let thisButtons = document.querySelectorAll(buttons); |
|
|
|
|
let thisButtons = document.querySelectorAll(buttons); |
|
|
|
|
|
|
|
|
|
thisButtons.forEach(e => { |
|
|
|
|
e.onclick = function (element){ |
|
|
|
|
let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`); |
|
|
|
|
let newHeight = thisContent.clientHeight + 48; |
|
|
|
|
let thisButton = element.target; |
|
|
|
|
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` |
|
|
|
|
thisMain.style.height = `${newHeight}px` |
|
|
|
|
|
|
|
|
|
if (!thisContent.classList.contains('active')) { |
|
|
|
|
thisMain.querySelector('.active').classList.remove('active'); |
|
|
|
|
thisContent.classList.add('active'); |
|
|
|
|
if (!thisContent.classList.contains('active')) { |
|
|
|
|
thisMain.querySelector('.active').classList.remove('active'); |
|
|
|
|
thisContent.classList.add('active'); |
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
thisMain.style.height = 'auto'; |
|
|
|
|
setTimeout(() => { |
|
|
|
|
thisMain.style.height = 'auto'; |
|
|
|
|
|
|
|
|
|
if (thisMain.querySelector('.hide')) { |
|
|
|
|
thisMain.querySelector('.hide').classList.remove('hide'); |
|
|
|
|
} |
|
|
|
|
if (thisMain.querySelector('.hide')) { |
|
|
|
|
thisMain.querySelector('.hide').classList.remove('hide'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
thisMain.querySelector('.active').classList.add('hide'); |
|
|
|
|
}, 200); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
thisButtons.forEach(e => { |
|
|
|
|
e.classList.remove('active'); |
|
|
|
|
}) |
|
|
|
|
thisButton.classList.add('active'); |
|
|
|
|
thisMain.querySelector('.active').classList.add('hide'); |
|
|
|
|
}, 200); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
thisButtons.forEach(e => { |
|
|
|
|
e.classList.remove('active'); |
|
|
|
|
}) |
|
|
|
|
thisButton.classList.add('active'); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let modal = document.querySelector('.modal'); |
|
|
|
|
modal.onclick = function (eventModal) { |
|
|
|
|
let thisTarget = eventModal.target; |
|
|
|
|
|
|
|
|
|
if (thisTarget.classList.contains('modal')) { |
|
|
|
|
thisTarget.classList.remove('active'); |
|
|
|
|
|
|
|
|
|
if (!thisTarget.querySelector('.modal-map.active')) { |
|
|
|
|
thisTarget.querySelector('.modal-form.active').classList.remove('active'); |
|
|
|
|
}else{ |
|
|
|
|
thisTarget.querySelector('.modal-map.active').classList.remove('active'); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|