diff --git a/assets/js/common.js b/assets/js/common.js index d111ed5..15854cd 100644 --- a/assets/js/common.js +++ b/assets/js/common.js @@ -1,641 +1,690 @@ //비디오 썸내일 콘트롤 $(document).ready(function () { - if ("scrollRestoration" in history) { - history.scrollRestoration = "manual"; - } + 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"; + //윈도우 사이즈 반응형에 따른 스크립트 + 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({ + 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: $(this).data("dleventlabel"), - }); - printDL(); + 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"); + } }); - } - 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"); + $(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"; } - initSwiper(); - - $(window).on("resize", function () { - ww = $(window).width(); - initSwiper(); + $(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(); - //자동차 번호/메뉴/로그인 선택 슬라이드 - $(".carlist, .carItem, .menu > a, .user > a") + 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"); - $(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"); - }); + $(this).addClass("on"); }) .on("mouseleave", function () { - $(this).removeClass("on"); - $(this).next(".carlistItem, .gnbMenu, .userMenu").removeClass("on"); - $(this).parents(".carlist").removeClass("on"); + $(this).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"); - } + }) + .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가 이메일 등의 개인정보일 경우 참고 - }); - } - }); + $(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(); - }); + $(document).on("click", ".openView", function () { + $(this).next().slideToggle(); + $(this).toggleClass("active"); + $(this).next().siblings(".payAll").slideUp(); + }); - //top 버튼 + //top 버튼 - if ($(this).scrollTop() > 200) { - $(".floating_menu").fadeIn(); + 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(); + $(".floating_menu").fadeOut(); + } + //디스플레이테마 스크롤 시 스와이퍼 실행 + if ($(this).scrollTop() > 10) { + if (flagScroll) { + // console.log("스크롤 실행") + pdpIntro(); + pdpDisplayThemeSwiper(); + pdpDisplayThemeSwiperDtl(); + pdpInCarGameSwiper(); + pdpInCarGameSwiperDtl(); + pdpSwiperDtl(".streamingPremium-swiper1"); + pdpSwiperDtl(".streamingPremium-swiper2"); + pdpSwiperDtl(".streamingPremium-swiper3"); + + 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); } - var flagScroll = true; - $(window).scroll(function () { - if ($(this).scrollTop() > 400) { - $(".floating_menu").fadeIn(); - } else { - $(".floating_menu").fadeOut(); - } - //디스플레이테마 스크롤 시 스와이퍼 실행 - if ($(this).scrollTop() > 10) { - if (flagScroll) { - // console.log("스크롤 실행") - pdpIntro(); - pdpDisplayThemeSwiper(); - pdpDisplayThemeSwiperDtl(); - pdpInCarGameSwiper(); - pdpInCarGameSwiperDtl(); - pdpSwiperDtl(".streamingPremium-swiper1"); - pdpSwiperDtl(".streamingPremium-swiper2"); - pdpSwiperDtl(".streamingPremium-swiper3"); + if (content.length > maxInquiryContentsCount) { + $(this).val($(this).val().substring(0, maxInquiryContentsCount)); + $(".textCount").text( + maxInquiryContentsCount + "/" + maxInquiryContentsCount + ); + alert("글자수는 " + maxInquiryContentsCount + "자까지 입력 가능합니다."); + } + }); - flagScroll = false; - } - } - }); - $(".floating_top").click(function () { - $("html, body").animate({ scrollTop: 0 }, 400); - return false; - }); + // 문의하기 이미지 미리보기 + $('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"); + } + }); - //푸터 페밀리사이트 - 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 + //PDP Display Theme }); var dtthumbClickFlag = false; var flagAutoPlay = true; // var swiperThemeDtl; 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: 8, - }, - // when window width is >= 480px - 480: {}, - // when window width is >= 640px - 640: { - spaceBetween: 15, - }, - }, - on: { - init: function () { - $(".displayTheme .dtthumb").each(function () { - $(this).attr("data-click", "false"); - }); - }, - }, - }); + 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: 8, + }, + // when window width is >= 480px + 480: {}, + // when window width is >= 640px + 640: { + spaceBetween: 15, + }, + }, + on: { + init: function () { + $(".displayTheme .dtthumb").each(function () { + $(this).attr("data-click", "false"); + }); + }, + }, + }); - $(".pdpDisplayThemeSwiper").hover( - function () { - if (flagAutoPlay == true) { - swiperTheme.autoplay.stop(); - } - }, - function () { - if (flagAutoPlay == true) { - swiperTheme.autoplay.start(); - } - } - ); + $(".pdpDisplayThemeSwiper").hover( + function () { + if (flagAutoPlay == true) { + swiperTheme.autoplay.stop(); + } + }, + function () { + if (flagAutoPlay == true) { + swiperTheme.autoplay.start(); + } + } + ); - swiperTheme.el.onclick = function () { - // 클릭 시 할 특별한 동작이 없더라도 이 핸들러를 설정해두면, - // 사용자의 클릭으로 인한 상호작용으로 자동 재생이 중단되는 것을 방지할 수 있습니다. - }; - $(".displayTheme .dtthumb").hover( - function () { - let leftPos = $(this).offset().left; - if (dtthumbClickFlag === false) { - $(this).append(`
썸네일을 클릭하면 적용예시를 확인
할 수 있습니다.
`); - } - }, - function () { - if ($(".displayTheme .tooltip").length > 0) { - $(".displayTheme .tooltip").remove(); - } - } - ); - } + swiperTheme.el.onclick = function () { + // 클릭 시 할 특별한 동작이 없더라도 이 핸들러를 설정해두면, + // 사용자의 클릭으로 인한 상호작용으로 자동 재생이 중단되는 것을 방지할 수 있습니다. + }; + $(".displayTheme .dtthumb").hover( + function () { + let leftPos = $(this).offset().left; + if (dtthumbClickFlag === false) { + $(this).append( + `
썸네일을 클릭하면 적용예시를 확인
할 수 있습니다.
` + ); + } + }, + function () { + if ($(".displayTheme .tooltip").length > 0) { + $(".displayTheme .tooltip").remove(); + } + } + ); + } - flagScroll = false; + flagScroll = false; } function pdpSwiperDtl(obj) { - if ($(`${obj}`).length > 0) { - var swiperThemeDtl = new Swiper(`${obj} .swiper`, { - slidesPerView: 1, - navigation: { - nextEl: `${obj} .swiper-button-next`, - prevEl: `${obj} .swiper-button-prev`, - }, - pagination: { - el: `${obj} .swiper-pagination`, - }, - on: { - init: function () {}, - }, - }); - } + if ($(`${obj}`).length > 0) { + var swiperThemeDtl = new Swiper(`${obj} .swiper`, { + slidesPerView: 1, + navigation: { + nextEl: `${obj} .swiper-button-next`, + prevEl: `${obj} .swiper-button-prev`, + }, + pagination: { + el: `${obj} .swiper-pagination`, + }, + on: { + init: function () {}, + }, + }); + } - flagScroll = false; + flagScroll = false; } function pdpDisplayThemeSwiperDtl() { - if ($(".displayThemeDtl .swiper").length > 0) { - var swiperThemeDtl = new Swiper(".displayThemeDtl .swiper", { - slidesPerView: 1, - navigation: { - nextEl: ".displayThemeDtl .swiper-button-next", - prevEl: ".displayThemeDtl .swiper-button-prev", - }, - pagination: { - el: ".displayThemeDtl .swiper-pagination", - }, - on: { - init: function () { - $(document).on("click", ".displayTheme .dtthumb", function () { - swiperThemeDtl.slideTo(0); - }); - }, - }, - }); - } + if ($(".displayThemeDtl .swiper").length > 0) { + var swiperThemeDtl = new Swiper(".displayThemeDtl .swiper", { + slidesPerView: 1, + navigation: { + nextEl: ".displayThemeDtl .swiper-button-next", + prevEl: ".displayThemeDtl .swiper-button-prev", + }, + pagination: { + el: ".displayThemeDtl .swiper-pagination", + }, + on: { + init: function () { + $(document).on("click", ".displayTheme .dtthumb", function () { + swiperThemeDtl.slideTo(0); + }); + }, + }, + }); + } - flagScroll = false; + flagScroll = false; } function pdpInCarGameSwiper() { - if ($(".inCarGame .visualBg").length > 0) { - } - var swiperTheme = new Swiper(".visualBg", { - slidesPerView: 1, - loop: true, - freeMode: false, - navigation: { - nextEl: ".inCarGame .visualBg .swiper-button-next", - prevEl: ".inCarGame .visualBg .swiper-button-prev", + if ($(".inCarGame .visualBg").length > 0) { + } + var swiperTheme = new Swiper(".visualBg", { + slidesPerView: 1, + loop: true, + freeMode: false, + navigation: { + nextEl: ".inCarGame .visualBg .swiper-button-next", + prevEl: ".inCarGame .visualBg .swiper-button-prev", + }, + pagination: { + el: ".inCarGame .visualBg .swiper-pagination", + }, + on: { + init: function () { + // console.log('pdpInCarGameSwiper 실행한다') + }, + }, + }); + if ($(".pdpInCarGameSwiper").length > 0) { + var swiperTheme = new Swiper(".pdpInCarGameSwiper", { + slidesPerView: "auto", + loop: true, + freeMode: false, + autoplay: { + delay: 0, + disableOnInteraction: false, + }, + speed: 3000, + breakpoints: { + // when window width is >= 320px + 320: { + spaceBetween: 5, }, - pagination: { - el: ".inCarGame .visualBg .swiper-pagination", + // when window width is >= 480px + 480: {}, + // when window width is >= 640px + 640: { + spaceBetween: 10, }, - on: { - init: function () { - // console.log('pdpInCarGameSwiper 실행한다') - }, + }, + // navigation: { + // nextEl: ".inCarGame .swiper-button-next", + // prevEl: ".inCarGame .swiper-button-prev", + // }, + on: { + init: function () { + // console.log('pdpInCarGameSwiper 실행한다') }, + }, }); - if ($(".pdpInCarGameSwiper").length > 0) { - var swiperTheme = new Swiper(".pdpInCarGameSwiper", { - slidesPerView: "auto", - loop: true, - freeMode: false, - autoplay: { - delay: 0, - disableOnInteraction: false, - }, - speed: 3000, - breakpoints: { - // when window width is >= 320px - 320: { - spaceBetween: 5, - }, - // when window width is >= 480px - 480: {}, - // when window width is >= 640px - 640: { - spaceBetween: 10, - }, - }, - // navigation: { - // nextEl: ".inCarGame .swiper-button-next", - // prevEl: ".inCarGame .swiper-button-prev", - // }, - on: { - init: function () { - // console.log('pdpInCarGameSwiper 실행한다') - }, - }, - }); - $(".pdpInCarGameSwiper").hover( - function () { - if (flagAutoPlay == true) { - swiperTheme.autoplay.stop(); - } - }, - function () { - if (flagAutoPlay == true) { - swiperTheme.autoplay.start(); - } - } - ); - } - flagScroll = false; + $(".pdpInCarGameSwiper").hover( + function () { + if (flagAutoPlay == true) { + swiperTheme.autoplay.stop(); + } + }, + function () { + if (flagAutoPlay == true) { + swiperTheme.autoplay.start(); + } + } + ); + } + flagScroll = false; } let inCarGameSwiper; function pdpInCarGameSwiperDtl() { - if ($(".inCarGameDtl").length > 0) { - var inCarGameSwiper = new Swiper(".inCarGameDtlThumb", { - spaceBetween: 6, - slidesPerView: 3, - freeMode: true, - watchSlidesProgress: true, - }); - var inCarGameSwiper2 = new Swiper(".inCarGameDtl", { - spaceBetween: 10, - // navigation: { - // nextEl: ".inCarGameDtl .swiper-button-next", - // prevEl: ".inCarGameDtl .swiper-button-prev", - // }, - thumbs: { - swiper: inCarGameSwiper, - }, - on: { - init: function () { - $(document).on("click", ".inCarGame .dtthumb", function () { - inCarGameSwiper.slideTo(0); - inCarGameSwiper2.slideTo(0); - }); - // const videoEle = ` - // - // `; - // $(".inCarGameDtlThumb .swiper-slide").eq(0).html(videoEle); - }, - }, - }); - } - flagScroll = false; + if ($(".inCarGameDtl").length > 0) { + var inCarGameSwiper = new Swiper(".inCarGameDtlThumb", { + spaceBetween: 6, + slidesPerView: 3, + freeMode: true, + watchSlidesProgress: true, + }); + var inCarGameSwiper2 = new Swiper(".inCarGameDtl", { + spaceBetween: 10, + // navigation: { + // nextEl: ".inCarGameDtl .swiper-button-next", + // prevEl: ".inCarGameDtl .swiper-button-prev", + // }, + thumbs: { + swiper: inCarGameSwiper, + }, + on: { + init: function () { + $(document).on("click", ".inCarGame .dtthumb", function () { + inCarGameSwiper.slideTo(0); + inCarGameSwiper2.slideTo(0); + }); + // const videoEle = ` + // + // `; + // $(".inCarGameDtlThumb .swiper-slide").eq(0).html(videoEle); + }, + }, + }); + } + flagScroll = false; } var beforeDtlImgPath = ""; $(document).on("click", ".inCarGame .dtthumb", function (e) { - const thumbIdx = e + 1; - const dtlImgPath = $(this).attr("value"); - const dtlImgs = $(".inCarGame .dtlImgs"); - $(".inCarGame .dtthumb").removeClass("active"); - $(this).addClass("active"); + const thumbIdx = e + 1; + const dtlImgPath = $(this).attr("value"); + const dtlImgs = $(".inCarGame .dtlImgs"); + $(".inCarGame .dtthumb").removeClass("active"); + $(this).addClass("active"); - dtlImgs.removeClass(); - dtlImgs.addClass(`comp_body dtlImgs ${dtlImgPath}`); + dtlImgs.removeClass(); + dtlImgs.addClass(`comp_body dtlImgs ${dtlImgPath}`); - $(".inCarGame .dtlImgs .item").addClass("change"); - setTimeout(function () { - $(".inCarGame .dtlImgs .item").removeClass("change"); - }, 200); + $(".inCarGame .dtlImgs .item").addClass("change"); + setTimeout(function () { + $(".inCarGame .dtlImgs .item").removeClass("change"); + }, 200); - $(".inCarGame .themeImg").each(function (e) { - const idx = e + 2; - const src = $(this).attr("src"); - const lastIndex = src.lastIndexOf("/"); - const pathWithoutFileName = src.substring(0, lastIndex); - $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`); - }); + $(".inCarGame .themeImg").each(function (e) { + const idx = e + 2; + const src = $(this).attr("src"); + const lastIndex = src.lastIndexOf("/"); + const pathWithoutFileName = src.substring(0, lastIndex); + $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`); + }); - $(".inCarGame .video-slide").each(function (e) { - const idx = e + 1; - const src = $(this).find(".themeVideo").attr("src"); - const lastIndex = src.lastIndexOf("/"); - const pathWithoutFileName = src.substring(0, lastIndex); - const videoEle = ` + $(".inCarGame .video-slide").each(function (e) { + const idx = e + 1; + const src = $(this).find(".themeVideo").attr("src"); + const lastIndex = src.lastIndexOf("/"); + const pathWithoutFileName = src.substring(0, lastIndex); + const videoEle = ` `; - $(this).html(videoEle); + $(this).html(videoEle); - // $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.mp4`); - }); + // $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.mp4`); + }); - $(".inCarGame .video-slideThumb").each(function (e) { - $(this).removeClass(`${beforeDtlImgPath}`); - const idx = e + 1; - const src = $(this).find(".themeVideo").attr("src"); - const lastIndex = src.lastIndexOf("/"); - const pathWithoutFileName = src.substring(0, lastIndex); - const videoEle = ` + $(".inCarGame .video-slideThumb").each(function (e) { + $(this).removeClass(`${beforeDtlImgPath}`); + const idx = e + 1; + const src = $(this).find(".themeVideo").attr("src"); + const lastIndex = src.lastIndexOf("/"); + const pathWithoutFileName = src.substring(0, lastIndex); + const videoEle = ` `; - $(this).addClass(`${dtlImgPath}`); - // console.log("videoEle===", videoEle); - beforeDtlImgPath = dtlImgPath; - $(this).html(videoEle); + $(this).addClass(`${dtlImgPath}`); + // console.log("videoEle===", videoEle); + beforeDtlImgPath = dtlImgPath; + $(this).html(videoEle); - // $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.mp4`); - }); - $(".inCarGame .themeImgThumb").each(function (e) { - const idx = e + 2; - const src = $(this).attr("src"); - const lastIndex = src.lastIndexOf("/"); - const pathWithoutFileName = src.substring(0, lastIndex); + // $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.mp4`); + }); + $(".inCarGame .themeImgThumb").each(function (e) { + const idx = e + 2; + 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); + $(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`); + // $(".visualBg img").attr("src", `${visualBgPathWithoutFileName}/${dtlImgPath}_screen.jpg`); - flagAutoPlay = false; + flagAutoPlay = false; }); $(document).on("click", ".displayTheme .dtthumb", function () { - const dtlImgPath = $(this).attr("value"); - const dtlImgs = $(".dtlImgs"); - const dtthumbClickState = $(this).attr("data-click"); + const dtlImgPath = $(this).attr("value"); + const dtlImgs = $(".dtlImgs"); + const dtthumbClickState = $(this).attr("data-click"); - if ($(".displayTheme .tooltip").length > 0) { - $(".displayTheme .tooltip").remove(); - } + if ($(".displayTheme .tooltip").length > 0) { + $(".displayTheme .tooltip").remove(); + } - $(".theme-story .btn-dtthumb").removeClass("active"); + $(".theme-story .btn-dtthumb").removeClass("active"); - const dtthumbItem = $(this).html(); - const dtthumbSelectedItem = $(`.pdpDisplayThemeSwiper .dtthumb[value=${dtlImgPath}]`); - const dtthumbHisSelectedItem = $(`.theme-story .dtthumb[value=${dtlImgPath}]`).parent(); - const dtthumbItemHtml = ` + const dtthumbItem = $(this).html(); + const dtthumbSelectedItem = $( + `.pdpDisplayThemeSwiper .dtthumb[value=${dtlImgPath}]` + ); + const dtthumbHisSelectedItem = $( + `.theme-story .dtthumb[value=${dtlImgPath}]` + ).parent(); + const dtthumbItemHtml = `
`; - $(".dtthumb").removeClass("active"); - dtthumbSelectedItem.addClass("active"); - dtthumbHisSelectedItem.addClass("active"); + $(".dtthumb").removeClass("active"); + dtthumbSelectedItem.addClass("active"); + dtthumbHisSelectedItem.addClass("active"); - $(".dtlImgs .item").addClass("change"); - setTimeout(function () { - $(".dtlImgs .item").removeClass("change"); - }, 200); + $(".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); + $(".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`); - }); + $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`); + }); - if (dtthumbClickState === "false") { - $(".theme-story").append(dtthumbItemHtml); - $(this).attr("data-click", "true"); - dtthumbSelectedItem.addClass("selected"); - } + if (dtthumbClickState === "false") { + $(".theme-story").append(dtthumbItemHtml); + $(this).attr("data-click", "true"); + dtthumbSelectedItem.addClass("selected"); + } - $(".btn-dtthumb .btn-remove").click(function () { - const dtthumbValue = $(this).closest(".btn-dtthumb").find(".dtthumb").attr("value"); - const selectedItem = $(`.pdpDisplayThemeSwiper .dtthumb[value=${dtthumbValue}]`); - $(this).closest(".btn-dtthumb").remove(); - selectedItem.attr("data-click", "false"); - selectedItem.removeClass("selected"); - }); + $(".btn-dtthumb .btn-remove").click(function () { + const dtthumbValue = $(this) + .closest(".btn-dtthumb") + .find(".dtthumb") + .attr("value"); + const selectedItem = $( + `.pdpDisplayThemeSwiper .dtthumb[value=${dtthumbValue}]` + ); + $(this).closest(".btn-dtthumb").remove(); + selectedItem.attr("data-click", "false"); + selectedItem.removeClass("selected"); + }); - dtthumbClickFlag = true; + dtthumbClickFlag = true; }); function pdpIntro() { - // dpThemeVideo 요소가 존재하는지 확인 - if ($(".video_wrap").length > 0) { - // .video_wrap 내 모든 비디오 요소 선택 - const videoElements = document.querySelectorAll(".video_wrap video"); - let cookieVal; - $(".editorWarp").addClass("playing"); + // dpThemeVideo 요소가 존재하는지 확인 + if ($(".video_wrap").length > 0) { + // .video_wrap 내 모든 비디오 요소 선택 + const videoElements = document.querySelectorAll(".video_wrap video"); + let cookieVal; + $(".editorWarp").addClass("playing"); - const videoWrap = $(".editorWarp .video_wrap"); + const videoWrap = $(".editorWarp .video_wrap"); - const youtubeId = $(".youtube-box").attr("value"); - const youtubeFrame = - ''; - $(".editorWarp .youtube-box").html(youtubeFrame); + const youtubeId = $(".youtube-box").attr("value"); + const youtubeFrame = + ''; + $(".editorWarp .youtube-box").html(youtubeFrame); - switch (true) { - case $(".displayTheme").length > 0: - cookieVal = "displayThemeIntro"; - break; - case $(".inCarGame").length > 0: - cookieVal = "inCarGameIntro"; - break; - case $(".srsPlus").length > 0: - cookieVal = "srsPlusIntro"; - break; - case $(".streamingPremium").length > 0: - cookieVal = "streamingPremiumIntro"; - break; - } + switch (true) { + case $(".displayTheme").length > 0: + cookieVal = "displayThemeIntro"; + break; + case $(".inCarGame").length > 0: + cookieVal = "inCarGameIntro"; + break; + case $(".srsPlus").length > 0: + cookieVal = "srsPlusIntro"; + break; + case $(".streamingPremium").length > 0: + cookieVal = "streamingPremiumIntro"; + break; + } - $(".close-today").html(` 오늘 하루 재생하지 않기`); + $(".close-today").html( + ` 오늘 하루 재생하지 않기` + ); - $(".btn-intro").css({ display: "flex", opacity: "0", marginTop: "2rem" }).animate({ opacity: "1", marginTop: "0" }, 400); - if (getCookie(cookieVal)) { - $(".editorWarp").removeClass("playing"); - $(".video_wrap").css("display", "none"); + $(".btn-intro") + .css({ display: "flex", opacity: "0", marginTop: "2rem" }) + .animate({ opacity: "1", marginTop: "0" }, 400); + if (getCookie(cookieVal)) { + $(".editorWarp").removeClass("playing"); + $(".video_wrap").css("display", "none"); - $(".close-today input").attr("checked", "checked"); - // videoElements[0].pause(); - // videoElements[0].currentTime = 0; + $(".close-today input").attr("checked", "checked"); + // videoElements[0].pause(); + // videoElements[0].currentTime = 0; - $(".close-today").html(` 오늘 하루 재생하지 않기`); - $(".editorWarp .youtube-box").html(""); - } else { - $(".video_wrap").css({ display: "flex", opacity: "0" }).animate({ opacity: "1" }, 200); - $(".close-today").html(` 오늘 하루 재생하지 않기`); - $(".editorWarp .youtube-box").html(youtubeFrame); - } + $(".close-today").html( + ` 오늘 하루 재생하지 않기` + ); + $(".editorWarp .youtube-box").html(""); + } else { + $(".video_wrap") + .css({ display: "flex", opacity: "0" }) + .animate({ opacity: "1" }, 200); + $(".close-today").html( + ` 오늘 하루 재생하지 않기` + ); + $(".editorWarp .youtube-box").html(youtubeFrame); + } - // .btn-intro 버튼 클릭 시 비디오 재생 - $(document).on("click", ".editorWarp .btn-intro", function () { - // console.log('intro 다시 실행'); - $(".editorWarp").addClass("playing"); - if (getCookie(cookieVal)) { - $(".close-today input").attr("checked", "checked"); - } - $(".editorWarp .youtube-box").html(youtubeFrame); - $(videoWrap).show(); - // if (video) { - // video.currentTime = 0; - // video.play(); - // } - }); + // .btn-intro 버튼 클릭 시 비디오 재생 + $(document).on("click", ".editorWarp .btn-intro", function () { + // console.log('intro 다시 실행'); + $(".editorWarp").addClass("playing"); + if (getCookie(cookieVal)) { + $(".close-today input").attr("checked", "checked"); + } + $(".editorWarp .youtube-box").html(youtubeFrame); + $(videoWrap).show(); + // if (video) { + // video.currentTime = 0; + // video.play(); + // } + }); - // .btn-close 버튼 클릭 시 비디오 숨기기 - $(document).on("click", ".video_wrap .btn-close", function () { - // console.log("btn close 실행"); - $(".editorWarp").removeClass("playing"); - $(videoWrap).hide(); - $(".editorWarp .youtube-box").empty(); - // if (video) { - // video.currentTime = 0; - // video.pause(); - // } - }); + // .btn-close 버튼 클릭 시 비디오 숨기기 + $(document).on("click", ".video_wrap .btn-close", function () { + // console.log("btn close 실행"); + $(".editorWarp").removeClass("playing"); + $(videoWrap).hide(); + $(".editorWarp .youtube-box").empty(); + // if (video) { + // video.currentTime = 0; + // video.pause(); + // } + }); - /* + /* videoElements.forEach((video) => { const btnIntro = $(".editorWarp .btn-intro"); const btnClose = $(".video_wrap .btn-close"); @@ -801,46 +865,46 @@ function pdpIntro() { }); */ - // 주석 처리된 부분: 버튼 클릭 시 비디오 숨기기 - // $(btnClose).on('click', function() { - // $(videoWrap).show() - // // .fadeOut('fast',function(){ - // // video.currentTime = 0; - // // video.pause(); - // // }); - // }); - } + // 주석 처리된 부분: 버튼 클릭 시 비디오 숨기기 + // $(btnClose).on('click', function() { + // $(videoWrap).show() + // // .fadeOut('fast',function(){ + // // video.currentTime = 0; + // // video.pause(); + // // }); + // }); + } } $(document).on("click", ".video_wrap .btn-play.play", function () { - // console.log("intro 플레이"); - const btnPlay = $(".video_wrap .btn-play"); - const videoElements = document.querySelectorAll(".video_wrap video"); + // console.log("intro 플레이"); + const btnPlay = $(".video_wrap .btn-play"); + const videoElements = document.querySelectorAll(".video_wrap video"); - if (videoElements) { - btnPlay.removeClass("play"); - btnPlay.addClass("pause"); - videoElements[0].play(); - } + if (videoElements) { + btnPlay.removeClass("play"); + btnPlay.addClass("pause"); + videoElements[0].play(); + } }); $(document).on("click", ".video_wrap .btn-play.pause", function () { - // console.log("intro 정지"); - const btnPlay = $(".video_wrap .btn-play"); - const videoElements = document.querySelectorAll(".video_wrap video"); + // console.log("intro 정지"); + const btnPlay = $(".video_wrap .btn-play"); + const videoElements = document.querySelectorAll(".video_wrap video"); - if (videoElements) { - btnPlay.addClass("play"); - btnPlay.removeClass("pause"); - videoElements[0].pause(); - } + if (videoElements) { + btnPlay.addClass("play"); + btnPlay.removeClass("pause"); + videoElements[0].pause(); + } }); $(document).on("click", ".video_wrap .btn-sound", function () { - const videoElements = document.querySelectorAll(".video_wrap video"); + const videoElements = document.querySelectorAll(".video_wrap video"); - if (videoElements) { - videoElements[0].muted = !videoElements[0].muted; - $(this).toggleClass("on"); - } + if (videoElements) { + videoElements[0].muted = !videoElements[0].muted; + $(this).toggleClass("on"); + } }); //마이페이지 lnb 스와이프 @@ -848,276 +912,315 @@ 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); - } + 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; - } + 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, - }); + 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]); - } + 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" }); + 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"); + 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"); - } - }); + $(".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("간단히"); - } + 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"); + $(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(); + $(".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); - } + 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, ">"); - strTemp = strTemp.replaceAll(/\&/g, "&"); - strTemp = strTemp.replaceAll(/\'/g, "'"); - strTemp = strTemp.replaceAll(/\"/g, """); - strTemp = strTemp.replaceAll(/\(/g, "("); - strTemp = strTemp.replaceAll(/\)/g, ")"); - strTemp = strTemp.replaceAll(/\//g, "/"); - } 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 (level == undefined || level == 0) { + strTemp = strTemp.replaceAll(/\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-|\//g, ""); + } else if (level != undefined && level == 1) { + strTemp = strTemp.replaceAll(/\/g, ">"); + strTemp = strTemp.replaceAll(/\&/g, "&"); + strTemp = strTemp.replaceAll(/\'/g, "'"); + strTemp = strTemp.replaceAll(/\"/g, """); + strTemp = strTemp.replaceAll(/\(/g, "("); + strTemp = strTemp.replaceAll(/\)/g, ")"); + strTemp = strTemp.replaceAll(/\//g, "/"); + } 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; + if (getType === "object") { + strTemp = JSON.parse(strTemp); + } + return strTemp; } function htmlDecode(input) { - var doc = new DOMParser().parseFromString(input, "text/html"); - return doc.documentElement.textContent; + 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; + let sPageURL = decodeURIComponent(window.location.search.substring(1)), + sURLVariables = sPageURL.split("&"), + sParameterName, + i; - for (i = 0; i < sURLVariables.length; i++) { - sParameterName = sURLVariables[i].split("="); + for (i = 0; i < sURLVariables.length; i++) { + sParameterName = sURLVariables[i].split("="); - if (sParameterName[0] === sParam) { - return sParameterName[1] === undefined ? false : sParameterName[1]; - } + 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); - }); - } - }, - } - ); - }); - } + 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(); + 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; - } - }); + 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; + } + }); }; // 쿠키 설정 함수 function setCookie(name, value, days) { - var expires = ""; - if (days) { - var date = new Date(); - date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); - expires = "; expires=" + date.toUTCString(); - } - document.cookie = name + "=" + (value || "") + expires + "; path=/"; + var expires = ""; + if (days) { + var date = new Date(); + date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); + expires = "; expires=" + date.toUTCString(); + } + document.cookie = name + "=" + (value || "") + expires + "; path=/"; } // 쿠키 가져오는 함수 function getCookie(name) { - var nameEQ = name + "="; - var ca = document.cookie.split(";"); - for (var i = 0; i < ca.length; i++) { - var c = ca[i]; - while (c.charAt(0) == " ") c = c.substring(1, c.length); - if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); - } - return null; + var nameEQ = name + "="; + var ca = document.cookie.split(";"); + for (var i = 0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0) == " ") c = c.substring(1, c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); + } + return null; } // 쿠키 삭제 함수 function deleteCookie(name) { - document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - $(".close-today input").prop("checked", false); + document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + $(".close-today input").prop("checked", false); - $(".close-today").html(` 오늘 하루 재생하지 않기`); + $(".close-today").html( + ` 오늘 하루 재생하지 않기` + ); } // 팝업을 숨기는 함수 function hideTodayIntroPopup(name) { - const videoElements = document.querySelectorAll(".video_wrap video"); - // videoElements[0].pause(); - // videoElements[0].currentTime = 0; - // $(".video_wrap").hide(); - // $(".editorWarp").removeClass("playing"); - if (name) { - setCookie(name, "true", 1); - } else { - setCookie("hideIntroPopup", "true", 1); - } - $(".close-today").html(` 오늘 하루 재생하지 않기`); + const videoElements = document.querySelectorAll(".video_wrap video"); + // videoElements[0].pause(); + // videoElements[0].currentTime = 0; + // $(".video_wrap").hide(); + // $(".editorWarp").removeClass("playing"); + if (name) { + setCookie(name, "true", 1); + } else { + setCookie("hideIntroPopup", "true", 1); + } + $(".close-today").html( + ` 오늘 하루 재생하지 않기` + ); } $(document).on("click", ".refund-area .btn-fold", function () { - $(this).toggleClass("fold"); - $(".refund-area .dtl").slideToggle("fast"); + $(this).toggleClass("fold"); + $(".refund-area .dtl").slideToggle("fast"); }); + +// 십원 단위로 절사하는 함수 +function truncateToTenwon(amount) { + return Math.floor(amount / 10) * 10; +} diff --git a/mypage/my-product-view.html b/mypage/my-product-view.html index 7e69091..61fa47a 100644 --- a/mypage/my-product-view.html +++ b/mypage/my-product-view.html @@ -891,10 +891,10 @@
- 당일 해지(결제 7일 이내) + 즉시 해지(결제 7일 이내) 스트리밍 프리미엄 약정 사양 구독을 해지 하시겠습니까? - +
  • ∙ 구독을 해지하시면 차량에서 해당 사양의 이용이 중지됩니다.
    • @@ -938,8 +938,8 @@
- - + + - +