ddd

assets/js/common.js

@@ -188,14 +188,14 @@ $(document).ready(function() {
         breakpoints: {
             // when window width is >= 320px
             320: {
-                spaceBetween: 10,
+                spaceBetween: 20,
             },
             // when window width is >= 480px
             480: {
             },
             // when window width is >= 640px
             640: {
-                spaceBetween: 20,
+                spaceBetween: 40,
             }
         },
         on: {

assets/js/common_publish.js

@@ -0,0 +1,476 @@
+//비디오 썸내일 콘트롤 
+$(document).ready(function() {
+    AOS.init();
+
+    //윈도우 사이즈 반응형에 따른 스크립트 
+    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(){
+                    $(this).next().slideToggle("fast");
+                    $(this).find(".arrow").toggleClass("on");
+                    $(this).toggleClass("on");
+                });
+                $(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",".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(){
+                    $(this).next().slideToggle("fast");
+                    $(this).find(".arrow").toggleClass("on");
+                    $(this).toggleClass("on");
+                });
+                $(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",".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");
+                });
+            }
+            targetSize = "desktop";
+            
+        }
+    }
+    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",".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");
+    }
+
+
+
+    if($(".withVideo").length > 0){
+      $(".withVideo").find("video").get(0).load();
+      // $(".withVideo").find("video").get(0).play();
+      // $(".withVideo").find("video").get(0).pause();
+      $(".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'});
+          $(this).find("video").get(0).play();
+          console.log("12312312");
+      });
+      $(document).on("mouseleave",".withVideo",function(){
+          $(this).find(".productSmallVideo > img").stop().animate({"opacity":"1"}, { queue : true , duration : 300 , easing : 'easeInOutExpo', complete : function(){
+              $(this).parent().find("video").get(0).pause();
+              $(this).parent().find("video").get(0).currentTime = 0;                
+          }});
+      });
+      
+    }else{
+      
+    }
+    //상품슬라이드
+    var swiper = new Swiper(".productSwiper", {
+        pagination: {
+            el: ".swiper-pagination",
+            clickable: true,
+        },
+    });
+
+    //메인슬라이드
+    var swiper = new Swiper(".mainSwiper", {
+        pagination: {
+            el: ".swiper-pagination",
+            clickable: true,
+        },
+        loop:true,
+        loopAdditionalSlides: 1,
+        navigation: {
+            nextEl: ".kvNextBtn",
+            prevEl: ".kvPrevBtn",
+        },
+    }); 
+    
+    //메인뉴스
+    var swiper = new Swiper(".mainNiticeList", {
+        direction: "vertical",
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+        mousewheel: true,
+        keyboard: true,
+    }); 
+
+
+    //PDP Lighting pattern
+    var swiper = new Swiper(".pdpLightingSwiper", {
+        slidesPerView: "auto",
+        spaceBetween: 20,
+        freeMode: true,
+    }); 
+
+    //PDP Display Theme
+    let flagAutoPlay = true;
+    var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", {
+        slidesPerView: "auto",
+        loop:true,  
+        freeMode: true,
+        autoplay: {
+            delay:1,
+            disableOnInteraction: false,
+        },
+        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,
+            }
+        },
+        on: {
+            init: function () {
+            },
+          },
+    });
+    $('.pdpDisplayThemeSwiper').hover(function(){
+        if(flagAutoPlay==true){
+            swiperTheme.autoplay.stop();
+        }
+    }, function(){
+        if(flagAutoPlay==true){
+            swiperTheme.autoplay.start();
+        }
+    });
+    
+                
+    $(document).on("click", ".dtthumb", function() {
+                    
+        const dtlImgPath = $(this).attr("value");
+        const dtlImgs = $(".dtlImgs");
+        $(this).parent().find("li").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;
+
+    function initSwiper() {
+
+        if (ww < 800 && mySwiper == undefined) {
+            var swiper = new Swiper(".lnbList", {
+                slidesPerView: "auto",
+            });
+        } else if (ww >= 800 && mySwiper != undefined) {
+            mySwiper.destroy();
+            mySwiper = undefined;
+        }
+    }
+    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 dt.q", function() {
+        //     $(this).parent().toggleClass("active");
+        //     $(this).next().slideToggle();
+        //     $(this).toggleClass("active");
+        // });
+
+
+        $(document).on("click", ".accordion dl:not(.private)", function() {
+            $(this).toggleClass("active");
+            $(this).find("dd.a").slideToggle();
+            $(this).find("dt.q").toggleClass("active");
+        });
+
+       
+
+
+    /*************************************
+       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();
+    }
+    
+    
+    $( window ).scroll( function() {
+        if ( $( this ).scrollTop() > 200 ) {
+            $( '.floating_menu' ).fadeIn();
+        } else {
+            $( '.floating_menu' ).fadeOut();
+        }
+    });
+    $( '.floating_top' ).click( function() {
+        $( 'html, body' ).animate( { scrollTop : 0 }, 400 );
+        return false;
+    });
+    
+
+
+
+
+    //푸터 페밀리사이트
+    // $(".btn-select").on("click", function() {
+    //     $(".list-member").slideToggle("fast", function(){
+    //         $(".btn-select").toggleClass("on" , 
+    //             $(this).is(":visible")
+    //         ); 
+    //     }); 
+    // });
+
+    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")
+            ); 
+        }); 
+        
+    });
+
+
+    //문의하기 글자 수 제한
+    var maxInquiryContentsCount = 1000;
+    $('.inquiryContents').keyup(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(){
+        setImageFromFile(this, $(this).next().find('.inquiryImg'));
+        $(this).parent().next().css("display","block");
+    });
+    
+    function setImageFromFile(input, expression) {
+        if (input.files && input.files[0]) {
+        var reader = new FileReader();
+        reader.onload = function (e) {
+        $(expression).attr('src', e.target.result);
+      }
+      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").load();
+	$(".lighting_pattern_movie").play();
+});