movie/public/js/common/front.js

$(function() {
    $('[data-bs-toggle="popover"]').popover({
        trigger: 'click',
        placement: "bottom",
        html: true
    });

    // const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
    // const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    $.validator.setDefaults({
        ignore: [], // hidden
        invalidHandler: function (form, validator) { // 커스텀 포커스 핸들링
            if (validator.numberOfInvalids()) {
                if (typeof validator.containers[0] != "undefined") {
                    let id = validator.containers[0].getAttribute("id");
                    let target = document.getElementById(id);
                }
                setTimeout(function () {
                    if (typeof target !== "undefined") {
                        target.parentNode.scrollIntoView();
                    } else {
                        validator.currentForm.parentNode.parentNode.scrollIntoView();
                    }
                }, 1);
            }
        }
    });

    $(".date-picker").datepicker({
        dayViewHeaderFormat: 'YYYY MMMM',
        format: 'YYYY-MM-DD',
        useCurrent: false,
        dateFormat: 'yy-mm-dd',	// 날짜 포맷이다. 보통 yy-mm-dd 를 많이 사용하는것 같다.
        prevText: '이전 달',	// 마우스 오버시 이전달 텍스트
        nextText: '다음 달',	// 마우스 오버시 다음달 텍스트
        closeText: '닫기', // 닫기 버튼 텍스트 변경
        currentText: '오늘', // 오늘 텍스트 변경
        monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],	//한글 캘린더중 월 표시를 위한 부분
        monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],	//한글 캘린더 중 월 표시를 위한 부분
        dayNames: ['일', '월', '화', '수', '목', '금', '토'], // 한글 캘린더 요일 표시 부분
        dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'], // 한글 요일 표시 부분
        dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], // 한글 요일 표시 부분
        showMonthAfterYear: true, // true : 년 월  false : 월 년 순으로 보여줌
        yearSuffix: '년',
        showButtonPanel: true, // 오늘로 가는 버튼과 달력 닫기 버튼 보기 옵션
        onClose: function(value) {
            let date = getOnlyDigit(value);
            if(date) {
                this.value = moment(date, "YYYY-MM-DD").format("YYYY-MM-DD");
            }else{
                this.value = "";
            }
        }
    });

    layerPopup.init();
});

// 회원 로그아웃
$(document).on("click", "a#logout", function() {
    document.getElementById('logoutForm').submit();
    return false;
});

const layerPopup =
{
    // 초기화
    init: function () {
        let layerPops = document.getElementsByClassName("layer-pops");
        for (let i in layerPops) {
            let pop = layerPops.item(i);
            if (pop !== null) {
                let isDisplay = Cookies.get('layerPop_' + pop.dataset.key);
                if (isDisplay !== 'Y') {
                    pop.style.display = "block";
                    $(pop).draggable({
                        drag: function (e) {
                            e.target.style.transform = "none";
                        },
                    });
                }
            }
        }
    },

    // 닫기
    close: function(e) {
        e.parentNode.parentNode.style.display = "none";
    },

    // 오늘 하루 안보기
    expire: function(e) {
        let layer = e.parentNode.parentNode;
        let key = layer.dataset.key;
        let second = (Number(layer.dataset.disableHours) / 86400);
        Cookies.set('layerPop_' + key, 'Y', {expires: second});
        layer.style.display = "none";
    }
};
// 팝업 - 오늘 하루 안보기
$(document).on("click", "#layerPops .layer-pops .btn-closed", function () {
    layerPopup.expire(this);
});
// 팝업 - 닫기
$(document).on("click", "#layerPops .layer-pops .btn-cancel", function () {
    layerPopup.close(this);
});