최초 버전 _before 추가

assets/js/common_before.js

@@ -0,0 +1,608 @@
+//비디오 썸내일 콘트롤 
+$(document).ready(function() {
+    if ('scrollRestoration' in history) {
+        history.scrollRestoration = 'manual';
+    }
+    
+    //윈도우 사이즈 반응형에 따른 스크립트 
+    const body = document.querySelector("body");
+    var targetSize = "";
+    function handleWindowSize() {
+        const windowWidth = window.innerWidth;
+        if (windowWidth <= 500) {
+            //모바일 class
+            body.className = "moblie";
+            
+            if(targetSize != "moblie"){
+                menu_init();
+                $(document).on("click",".mobileCarlist > .mobilecarItem",function(){
+                    if (!$(this).hasClass('noitem')) {
+                        $(this).next().slideToggle("fast");
+                        $(this).find(".arrow").toggleClass("on");
+                        $(this).toggleClass("on");    
+                        if($(this).hasClass("on")) {
+                            window.dataLayer.push({
+                                'event': 'navigation',
+                                'event_category': 'Navigation',
+                                'event_action': 'Top menu',
+                                'event_label': 'VIN'
+                            });
+                            printDL();
+                        }    
+                    }
+                });
+                $(document).on("click",".menuDepth1Wrap > .menuDepth1",function(){
+                    if($(this).hasClass("on") == true){
+                        $(this).next().slideToggle("fast");
+                        $(this).toggleClass("on");
+                    }else{
+                        $(".menuDepth1Wrap > .menuDepth1").removeClass("on");
+                        $(".menuDepth1Wrap > .menuDepth1").next().slideUp("fast");
+                        $(this).next().slideToggle("fast");
+                        $(this).toggleClass("on");
+                    } 
+                });
+                
+                $(document).on("click",".moblie .menuDepth1Wrap > a",function(e){
+                    e.preventDefault();
+                });
+                
+                $(document).on("click",".btnClose, .menuWarp .menuDepth2Wrap a", function(e) {
+                    $('.menuWarp .menuDepth1').removeClass('on');
+                    $('.menuWarp .menuDepth2Wrap').hide();
+                    $(".menuWarp").css("right", "-100%");
+                    $("html").removeClass("scrollDisable");
+                });
+                $(document).on("click",".closeBtn",function(){
+                    $(".menuWarp").stop().animate({"right":"-100%"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
+                    $("html").removeClass("scrollDisable");
+                });
+                $(document).on("click",".burgurBtn",function(){
+                    $(".menuWarp").stop().animate({"right":"0"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
+                    $("html").addClass("scrollDisable");
+                });
+            }
+            targetSize = "moblie";
+        } else if (windowWidth > 500 && windowWidth <= 1024) {
+            //타블릿 class
+            body.className = "tablet";
+            
+            if(targetSize != "tablet"){
+                menu_init();
+                $(document).on("click",".mobileCarlist > .mobilecarItem",function(){
+                    if (!$(this).hasClass('noitem')) {
+                        $(this).next().slideToggle("fast");
+                        $(this).find(".arrow").toggleClass("on");
+                        $(this).toggleClass("on");
+                        if($(this).hasClass("on")) {
+                            window.dataLayer.push({
+                                'event': 'navigation',
+                                'event_category': 'Navigation',
+                                'event_action': 'Top menu',
+                                'event_label': 'VIN'
+                            });
+                            printDL();
+                        }    
+                    }
+                });
+                $(document).on("click",".menuDepth1Wrap > .menuDepth1",function(){
+                    if($(this).hasClass("on") == true){
+                        $(this).next().slideToggle("fast");
+                        $(this).toggleClass("on");
+                    }else{
+                        $(".menuDepth1Wrap > .menuDepth1").removeClass("on");
+                        $(".menuDepth1Wrap > .menuDepth1").next().slideUp("fast");
+                        $(this).next().slideToggle("fast");
+                        $(this).toggleClass("on");
+                    } 
+                });
+                $(document).on("click",".tablet .menuDepth1Wrap > a",function(e){
+                    e.preventDefault();
+                });
+                
+                $(document).on("click",".btnClose, .menuWarp .menuDepth2Wrap a", function(e) {
+                    $('.menuWarp .menuDepth1').removeClass('on');
+                    $('.menuWarp .menuDepth2Wrap').hide();
+                    $(".menuWarp").css("right", "-36rem");
+                    $("html").removeClass("scrollDisable");
+                });
+                $(document).on("click",".closeBtn",function(){
+                    $(".menuWarp").stop().animate({"right":"-36rem"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
+                    $("html").removeClass("scrollDisable");
+                });
+                $(document).on("click",".burgurBtn",function(){
+                    $(".menuWarp").stop().animate({"right":"0"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
+                    $("html").addClass("scrollDisable");
+                });
+            }
+            targetSize = "tablet";
+            
+        } else {
+            //데스크탑 class
+            body.className = "desktop";
+            
+            if(targetSize != "desktop"){
+                menu_init();
+                $(document).on("mouseenter",".menuDepth1Wrap",function(){
+                    $(this).find(".menuDepth2Wrap").css("display","block");
+                });
+                $(document).on("mouseleave",".menuDepth1Wrap",function(){
+                    $(this).find(".menuDepth2Wrap").css("display","none");
+                });
+                $(document).on("click",".menuDepth1Wrap > a",function(){
+                    location.href=$(this).data("url");
+                });
+            }
+            targetSize = "desktop";
+        }
+
+        $(document).on("click",".menuDepth1Wrap > .menuDepth1",function(){
+            window.dataLayer.push({
+                'event': 'navigation',
+                'event_category': 'Navigation',
+                'event_action': 'Top menu',
+                'event_label': $(this).data('dleventlabel')
+            });
+            printDL();
+        });
+    }
+    window.addEventListener("resize", handleWindowSize);
+    handleWindowSize();
+    
+    function menu_init(){
+        $(document).off("mouseenter",".menuDepth1Wrap");
+        $(document).off("mouseleave",".menuDepth1Wrap");
+        $(document).off("click",".mobileCarlist > .mobilecarItem");
+        $(document).off("click",".menuDepth1Wrap > .menuDepth1");
+        $(document).off("click",".menuDepth1Wrap > a");
+        $(document).off("click",".closeBtn");
+        $(document).off("click",".burgurBtn");
+        $(".mobileCarlist > .mobilecarItem").removeClass("on");
+        $(".mobileCarlist > .mobilecarItem").find(".arrow").removeClass("on");
+        $(".mobileCarlist > .mobilecarItem").next().css("display","none");
+        $(".menuDepth1Wrap > .menuDepth1").removeClass("on");
+        $(".menuDepth1Wrap > .menuDepth1").next().css("display","none");
+        $(".menuWarp").stop().animate({"right":"-100%"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
+        $("html").removeClass("scrollDisable");
+    }
+    
+    initSwiper();
+
+    $(window).on('resize', function () {
+    ww = $(window).width();
+        initSwiper();
+    });
+
+
+    //자동차 번호/메뉴/로그인 선택 슬라이드
+    $(".carlist, .carItem, .menu > a, .user > a").on('mouseover focusin', function(){
+        $(this).addClass("on");
+        $(this).next('.carlistItem, .gnbMenu, .userMenu').addClass("on");
+        $(this).next('.carlistItem, .gnbMenu, .userMenu').on('mouseover focusin', function(){
+            $(this).addClass("on");
+        }).on('mouseleave',function(){
+            $(this).removeClass("on");
+            
+        });
+    }).on('mouseleave',function(){
+        $(this).removeClass("on");
+        $(this).next('.carlistItem, .gnbMenu, .userMenu').removeClass("on");
+        $(this).parents('.carlist').removeClass("on");
+    });
+
+    $("#slide-open").click(function(){
+        if($("#burgur").hasClass("on")){
+            $("#burgur").removeClass("on");
+            $(".mMenuWarp").removeClass("on");
+            $(".logo").removeClass("on");
+            $("html").removeClass("scrollDisable");
+            
+        } else{
+            $("#burgur").addClass("on");
+            $(".mMenuWarp").addClass("on");
+            $("html").addClass("scrollDisable");
+            $(".logo").addClass("on");
+        }
+    });
+
+      /*************************************
+       accordion
+     *************************************/
+        $(document).on("click", ".accordion dl", function(e) {
+            $(this).toggleClass("active");
+            $(this).find(">dd.a").slideToggle();
+            $(this).find(">dt.q").toggleClass("active");
+            if($('body>div.contentWarp').find('div.productView').length > 0 && $(this).hasClass('active')) {
+                window.dataLayer.push({
+                    'event': 'configurator',
+                    'event_category': 'Product',
+                    'event_action': 'Q&A',
+                    'event_label': 'Details',
+                    'customer_ID': ComUtils.getCookie('dlu') === null ? '' : ComUtils.getCookie('dlu'), //ID가 이메일 등의 개인정보일 경우 참고
+                    'fod_product': $('h1.productName').text(), // eg ‘Vehicle To Grid’
+                    'fod_qa_detail': $(this).find('dd.a>p').text().substr(0, 20),
+                    'fod_review_detail': undefined
+                });
+            }
+            else if($('body>div.contentWarp').find('div.faqWarp').length > 0 && $(this).hasClass('active')) {
+                window.dataLayer.push({
+                    'event': 'FAQ',
+                    'event_category': 'FAQ',
+                    'event_action': $('ul.tabList>li.on>a').text(), //eg '전체', '회원', '상품' …
+                    'event_label': $(this).find('dt>p>span').text().substr(0, 20), //eg'회원정보 수정은…'
+                    'customer_ID': ComUtils.getCookie('dlu') === null ? '' : ComUtils.getCookie('dlu') //ID가 이메일 등의 개인정보일 경우 참고
+                });
+            }
+        });
+
+    /*************************************
+       payment-history
+     *************************************/
+    $(document).on("click", ".openView", function() {
+        $(this).next().slideToggle();
+        $(this).toggleClass("active");
+        $(this).next().siblings(".payAll").slideUp();
+    });
+
+    //top 버튼 
+    
+    if ( $( this ).scrollTop() > 200 ) {
+        $( '.floating_menu' ).fadeIn();
+    } else {
+        $( '.floating_menu' ).fadeOut();
+    }
+    
+    var flagScroll = true;
+    $( window ).scroll( function() {
+        if ( $( this ).scrollTop() > 400 ) {
+            $( '.floating_menu' ).fadeIn();
+        } else {
+            $( '.floating_menu' ).fadeOut();
+        }
+        //디스플레이테마 스크롤 시 스와이퍼 실행
+        if ( $( this ).scrollTop() > 400 ) {
+            if(flagScroll){
+                pdpDisplayThemeSwiper()
+                flagScroll = false;
+            }
+        }
+        
+    });
+    $( '.floating_top' ).click( function() {
+        $( 'html, body' ).animate( { scrollTop : 0 }, 400 );
+        return false;
+    });
+
+    //푸터 페밀리사이트
+    const foot_famliy_btn = $(".familyBoxWarp").find(".btn-select");
+    foot_famliy_btn.on("click", function() {
+        $(".familyBoxWarp").find(".list-member").slideToggle("fast", function(){
+            foot_famliy_btn.toggleClass("on" , $(this).is(":visible"));
+        });
+    });
+    
+    $('.familyBoxWarp .cont-select').on('click', 'li>a', function() {
+        $('.familyBoxWarp .list-member').hide();
+        $('.familyBoxWarp .btn-select').removeClass('on');
+    });
+    
+    //문의하기 글자 수 제한
+    var maxInquiryContentsCount = 1000;
+    $('.inquiryContents').on('change keyup paste', function (e) {
+        let content = $(this).val();
+        
+        if (content.length == 0 || content == '') {
+            $('.textCount').text('0/'+maxInquiryContentsCount);
+        } else {
+            $('.textCount').text(content.length+'/'+maxInquiryContentsCount);
+        }
+        
+        if (content.length > maxInquiryContentsCount) {
+            $(this).val($(this).val().substring(0, maxInquiryContentsCount));
+            $('.textCount').text(maxInquiryContentsCount+'/'+maxInquiryContentsCount);
+            alert('글자수는 '+maxInquiryContentsCount+'자까지 입력 가능합니다.');
+        };
+    });
+
+    // 문의하기 이미지 미리보기
+    $('input[name="inquiryImgFile"]').change(function(){
+        let fileSize = $(this)[0].files[0].size;
+        let maxSize = 5 * 1024 * 1024;
+        let check = $(this)[0].files[0].type.match('.jpg|.jpeg|.gif|.png');
+        if (fileSize <= maxSize && check){
+            setImageFromFile(this, $(this).next().find('.inquiryImg'));
+            $(this).parent().next().css("display","block");
+        }
+    });
+
+    
+
+    //PDP Display Theme
+    
+    
+                
+    
+});
+
+
+var flagAutoPlay = true;
+function pdpDisplayThemeSwiper(){
+    if ($('.pdpDisplayThemeSwiper').length > 0) {
+        var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", {
+            slidesPerView: "auto",
+            loop:true,  
+            freeMode: true,
+            autoplay: {
+                delay:1,
+                disableOnInteraction: true,
+            },
+            speed: 3000,
+            breakpoints: {
+                // when window width is >= 320px
+                320: {
+                    spaceBetween: 10,
+                },
+                // when window width is >= 480px
+                480: {
+                },
+                // when window width is >= 640px
+                640: {
+                    spaceBetween: 20,
+                }
+            },
+            navigation: {
+              nextEl: ".displayTheme .swiper-button-next",
+              prevEl: ".displayTheme .swiper-button-prev",
+            },
+            on: {
+                init: function () {
+                },
+            },
+        });
+        
+    
+        $('.pdpDisplayThemeSwiper').hover(function(){
+            if(flagAutoPlay==true){
+                swiperTheme.autoplay.stop();
+            }
+        }, function(){
+            if(flagAutoPlay==true){
+                swiperTheme.autoplay.start();
+            }
+        });
+    }
+    
+    flagScroll = false;
+}
+$(document).on("click", ".dtthumb", function() {
+                    
+    const dtlImgPath = $(this).attr("value");
+    const dtlImgs = $(".dtlImgs");
+    $(".dtthumb").removeClass("active");
+    $(this).addClass("active");
+
+    $('.dtlImgs .item').addClass('change')
+    setTimeout(function() {
+        $('.dtlImgs .item').removeClass('change')
+    }, 200);
+
+    $(".themeImg").each(function(e){
+        const idx = e+1;
+        const src = $(this).attr("src");
+        const lastIndex = src.lastIndexOf("/");
+        const pathWithoutFileName = src.substring(0, lastIndex);
+
+        $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
+    });
+    const visualBgSrc = $(".visualBg img").attr("src");
+    const visualBgLastIndex = visualBgSrc.lastIndexOf("/");
+    const visualBgPathWithoutFileName = visualBgSrc.substring(0, visualBgLastIndex);
+
+    $(".visualBg img").attr("src", `${visualBgPathWithoutFileName}/${dtlImgPath}_screen.jpg`);
+
+    flagAutoPlay = false;
+});
+
+//마이페이지 lnb 스와이프
+var ww = $(window).width();
+var mySwiper = undefined;
+var swiper = null;
+function initSwiper() {
+    if (ww < 800 && mySwiper == undefined) {
+        swiper = new Swiper(".lnbList", {
+            slidesPerView: "auto",
+            on: {
+                click: function(swiper) {
+                    let getEventLabel = $('.lnbList>ul>li:nth-of-type('+(swiper.clickedIndex+1)+')>a').data('dleventlabel');
+                    if (getEventLabel) {
+                        myLnbTagManager(getEventLabel);
+                    }
+                    
+                    location.href = $('.lnbList > ul > li').eq(swiper.clickedIndex).find("a").attr('href');
+                }
+            }
+        });
+    } else if (ww >= 800 && mySwiper != undefined) {
+        mySwiper.destroy();
+        mySwiper = undefined;
+    }
+}
+
+// 마이페이지 태그매니저
+function myLnbTagManager(label) {
+    window.dataLayer.push({
+        'event': 'navigation',
+        'event_category': 'My page',
+        'event_action': 'Left menu',
+        'event_label': label, // eg 메뉴 순서대로 'Purchase history', 'Payment history', 'Wish list', 'Product review', 'Coupon details', 'Notices details', 'Inquiry details', 'My information'
+        'customer_ID': undefined,
+        'fod_product': undefined,
+        'fod_review_detail': undefined
+    });
+}
+
+// 문의하기 이미지 미리보기
+function setImageFromFile(input, expression) {
+    if (input.files && input.files[0]) {
+        var reader = new FileReader();
+        reader.onload = function (e) {
+            $(expression).attr('src', e.target.result).attr('id', input.files[0].lastModified);
+            $(expression).closest('.imgItem').find('.delImg').data('index', input.files[0].lastModified);
+        }
+        reader.readAsDataURL(input.files[0]);
+    }
+}
+
+//레이어 팝업 오픈 스크립트
+function open_layer_popup(popid){
+    var popid = popid;
+    $("#"+popid).css("display","flex");
+    $("body").css("overflow","hidden");
+    $("body").css("touch-action","none");
+    $("#"+popid).stop().animate({"opacity":"1"}, { queue : true , duration : 450 , easing : 'easeInOutExpo'});
+    $("#"+popid+">.popInner").stop().animate({"top":"50%"}, { queue : true , duration : 450 , easing : 'easeInOutExpo'});
+};
+
+//레이어 팝업 클로즈 스크립트
+function close_layer_popup(popid){
+    var popid = popid;
+    $("#"+popid).stop().animate({"opacity":"0"}, { queue : true , duration : 200 , easing : 'easeInOutExpo', complete : function(){
+        $("#"+popid+">.popInner").css("top","53%");
+        $("#"+popid).css("display","none");
+    }});
+    $("body").css("overflow","auto");
+    $("body").css("touch-action","auto");
+};
+
+//[S]PDP 리뷰 더보기 관련
+more_contents_chk();
+function more_contents_chk(){ 
+    $('.reviewItem').each(function (index, item) {
+        if($(item).find(".contents").height() >= 74){
+            $(item).find(".contents").addClass('abstracted');
+            $(item).find(".contentMoreBtn").css("display","flex");
+        }
+    }); 
+}
+
+$(document).on("click", ".contentMoreBtn", function() {
+    if($(this).hasClass("active")){
+        $(this).parent().find(".contents").addClass("abstracted");
+        $(this).removeClass("active");
+        $(this).html("더보기");
+    }else{
+        $(this).parent().find(".contents").removeClass("abstracted");
+        $(this).addClass("active");
+        $(this).html("간단히");
+    }
+});
+// [E]PDP 리뷰 더보기 관련
+
+//PDP Lighting Pattern
+$(document).on("click", ".lpthumb", function() {
+    $(this).parent().find("li").removeClass("active");
+    $(this).addClass("active");
+    
+    $(".lighting_pattern_movie").attr("src", $(this).attr("value"));
+    $(".lighting_pattern_movie").get(0).load();
+    let playPromise = $(".lighting_pattern_movie").get(0).play();
+});
+
+function XSS_Check(strTemp, level) {
+    let getType = typeof strTemp;
+    if (getType === 'object') {
+        strTemp = JSON.stringify(strTemp);    
+    }
+    
+    if (level == undefined || level == 0) {
+        strTemp = strTemp.replaceAll(/\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-|\//g,"");
+    } else if (level != undefined && level == 1) {
+        strTemp = strTemp.replaceAll(/\</g, "&lt;");
+        strTemp = strTemp.replaceAll(/\>/g, "&gt;");
+        strTemp = strTemp.replaceAll(/\&/g, "&amp;");
+        strTemp = strTemp.replaceAll(/\'/g, "&#x27;");
+        strTemp = strTemp.replaceAll(/\"/g, "&quot;");
+        strTemp = strTemp.replaceAll(/\(/g, "&#40;");
+        strTemp = strTemp.replaceAll(/\)/g, "&#41;");
+        strTemp = strTemp.replaceAll(/\//g, "&#x2F;");
+    } else if (level != undefined && level == 2) {
+        strTemp = strTemp.replaceAll(/alert|window|document|eval|cookie|this|self|parent|top|opener|function|constructor|script|on|\-+\\<>=/gi,"");
+    }
+    
+    if (getType === 'object') {
+        strTemp = JSON.parse(strTemp);    
+    }
+    return strTemp;
+}
+
+function htmlDecode(input) {
+    var doc = new DOMParser().parseFromString(input, "text/html");
+    return doc.documentElement.textContent;
+}
+
+function getUrlParameter(sParam) {
+    let sPageURL = decodeURIComponent(window.location.search.substring(1)),
+    sURLVariables = sPageURL.split('&'),
+    sParameterName,
+    i;
+
+    for (i = 0; i < sURLVariables.length; i++) {
+        sParameterName = sURLVariables[i].split('=');
+
+        if (sParameterName[0] === sParam) {
+            return sParameterName[1] === undefined ? false : sParameterName[1];
+        }
+    }
+}
+
+function enterVideo() {
+    var playPromise = null;
+    if($(".withVideo").length > 0){
+        $(".withVideo").find("video").get(0).load();
+        $(".withVideo").find("video").get(0).currentTime = 0;
+        $(document).on("mouseenter",".withVideo",function(){
+            $(this).find(".productSmallVideo > img").stop().animate({"opacity":"0"}, { queue : true , duration : 300 , easing : 'easeInOutExpo'});
+            playPromise = $(this).find("video").get(0).play();
+        });
+        $(document).on("mouseleave",".withVideo",function(){
+            $(this).find(".productSmallVideo > img").stop().animate({"opacity":'1'}, { queue : true , duration : 300 , easing : 'easeInOutExpo', complete : function(){
+                if (playPromise !== undefined) {
+                    playPromise.then(_ => {
+                        $(this).parent().find("video").get(0).pause();
+                        $(this).parent().find("video").get(0).currentTime = 0;
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+                }
+            }});
+        });
+    }
+}
+
+function dlLoginAttempt() {
+    window.dataLayer.push({
+        'event': 'navigation',
+        'event_category': 'Navigation',
+        'event_action': 'Top menu',
+        'event_label': 'Login/Register'
+    });
+    printDL();
+}
+
+$.fn.clearForm = function () {
+    return this.each(function () {
+        var type = this.type,
+        tag = this.tagName.toLowerCase();
+        if (tag === 'form') {
+            return $(':input', this).clearForm();
+        }
+        if (type === 'text' || type === 'password' || type === 'hidden' || tag === 'textarea') {
+            this.value = '';
+        } else if (type === 'checkbox' || type === 'radio') {
+            this.checked = false;
+        } else if (tag === 'select') {
+            this.selectedIndex = -1;
+        }
+    });
+};

product/pdp_display_theme.html

@@ -31,10 +31,10 @@
         <script type="text/javascript"  charset="UTF-8"  src="../assets/js/library/jquery-ui.min.js?v1"></script>
         <script type="text/javascript"  charset="UTF-8"  src="../assets/js/library/swiper.min.js?v1"></script>
         <script type="text/javascript"  charset="UTF-8"  src="../assets/js/library/aos.js?v1"></script>
-        <script type="text/javascript"  charset="UTF-8"  src="../assets/js/common.js?v1.1"></script>
+        <script type="text/javascript"  charset="UTF-8"  src="../assets/js/common_before.js?v1.1"></script>
         <!--상품상세 페이지 css 분리-->
         <link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
-        <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v1.1" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail_before.css?v1.1" type="text/css" />
         <link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
         <link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
         <link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png">
@@ -919,5 +919,8 @@
             </div>
          </div>
         <!--//footer-->
+        <script>
+            AOS.init();
+        </script>
     </body>
 </html>