cosmopet-architecture/wp-content/themes/cosmopet/woocommerce/assets/js/gp-cabinet.js

'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');
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);

    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;

            thisMain.style.height = `${newHeight}px`

            if (!thisContent.classList.contains('active')) {
                thisMain.querySelector('.active').classList.remove('active');
                thisContent.classList.add('active');

                setTimeout(() => {
                    thisMain.style.height = 'auto';

                    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');
        }
    })

}

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');
        }
    }
}