//비디오 썸내일 콘트롤 $(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() pdpDisplayThemeSwiperDtl(); pdpInCarGameSwiper() pdpInCarGameSwiperDtl(); 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: false, autoplay: { delay:0, 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, } }, // navigation: { // nextEl: ".displayTheme .swiper-button-next", // prevEl: ".displayTheme .swiper-button-prev", // }, on: { init: function () { }, }, }); $('.pdpDisplayThemeSwiper').hover(function(){ console.log('flagAutoPlay1 ==== ', flagAutoPlay); if(flagAutoPlay==true){ console.log('flagAutoPlay2 ==== ', flagAutoPlay); swiperTheme.autoplay.stop(); } }, function(){ console.log('flagAutoPlay3 ==== ', flagAutoPlay); if(flagAutoPlay==true){ swiperTheme.autoplay.start(); } }); swiperTheme.el.onclick = function() { // 클릭 시 할 특별한 동작이 없더라도 이 핸들러를 설정해두면, // 사용자의 클릭으로 인한 상호작용으로 자동 재생이 중단되는 것을 방지할 수 있습니다. }; $('.displayTheme .dtthumb').hover(function(){ let leftPos = $(this).offset().left; console.log(); $(this).append(`