Files
fod/assets/js/common.js
2024-04-02 09:26:01 +09:00

731 lines
27 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

//비디오 썸내일 콘트롤
$(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: 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;
}
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",
},
});
}
flagScroll = false;
}
function pdpInCarGameSwiper(){
if ($('.pdpInCarGameSwiper').length > 0) {
var swiperTheme = new Swiper(".pdpInCarGameSwiper", {
slidesPerView: "auto",
loop:true,
freeMode: true,
autoplay: {
delay:1,
disableOnInteraction: true,
},
speed: 2400,
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;
}
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,
},
});
}
flagScroll = false;
}
$(document).on("click", ".inCarGame .dtthumb", function() {
const dtlImgPath = $(this).attr("value");
const dtlImgs = $(".inCarGame .dtlImgs");
$(".inCarGame .dtthumb").removeClass("active");
$(this).addClass("active");
$('.inCarGame .dtlImgs .item').addClass('change')
setTimeout(function() {
$('.inCarGame .dtlImgs .item').removeClass('change')
}, 200);
$(".inCarGame .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`);
});
$(".inCarGame .themeImgThumb").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;
});
$(document).on("click", ".displayTheme .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;
}
});
};