823 lines
30 KiB
JavaScript
823 lines
30 KiB
JavaScript
//비디오 썸내일 콘트롤
|
||
$(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();
|
||
pdpIntro();
|
||
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 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");
|
||
});
|
||
},
|
||
},
|
||
});
|
||
|
||
|
||
|
||
$('.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(`<div class="tooltip"><div class="msg">썸네일을 클릭하면 적용예시를 확인<br>할 수 있습니다.</div><button class="btn-close">x</button></div>`);
|
||
}
|
||
}, function(){
|
||
if($('.displayTheme .tooltip').length > 0){
|
||
$('.displayTheme .tooltip').remove();
|
||
}
|
||
});
|
||
}
|
||
|
||
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);
|
||
});
|
||
},
|
||
},
|
||
});
|
||
}
|
||
|
||
flagScroll = false;
|
||
}
|
||
function 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;
|
||
}
|
||
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(e) {
|
||
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}`);
|
||
|
||
$('.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");
|
||
const dtthumbClickState = $(this).attr("data-click");
|
||
|
||
|
||
if($('.displayTheme .tooltip').length > 0){
|
||
$('.displayTheme .tooltip').remove();
|
||
}
|
||
|
||
$('.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 = `
|
||
<div class="btn-dtthumb active">
|
||
<button class="dtthumb" value="${dtlImgPath}">
|
||
${dtthumbItem}
|
||
</button>
|
||
<div class="btn-remove">x</div>
|
||
</div>
|
||
`
|
||
|
||
$(".dtthumb").removeClass("active");
|
||
dtthumbSelectedItem.addClass("active");
|
||
dtthumbHisSelectedItem.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`);
|
||
});
|
||
|
||
|
||
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");
|
||
})
|
||
|
||
dtthumbClickFlag = true;
|
||
});
|
||
|
||
function pdpIntro(){
|
||
const videoElement = document.getElementById('dpThemeVideo');
|
||
const videoWrap = $('.displayTheme .video_wrap');
|
||
const btnIntro = $('.displayTheme .btn-intro');
|
||
const btnClose = $('.video_wrap .btn-close');
|
||
|
||
videoElement.addEventListener('ended', function() {
|
||
$(videoWrap).fadeOut('fast',function(){
|
||
videoElement.currentTime = 0;
|
||
videoElement.pause();
|
||
});
|
||
});
|
||
$(btnIntro).on('click', function() {
|
||
$(videoWrap).fadeIn('fast',function(){
|
||
videoElement.currentTime = 0;
|
||
videoElement.play();
|
||
});
|
||
});
|
||
|
||
$(btnClose).on('click', function() {
|
||
$(videoWrap).fadeOut('fast',function(){
|
||
videoElement.currentTime = 0;
|
||
videoElement.pause();
|
||
});
|
||
|
||
});
|
||
}
|
||
|
||
|
||
|
||
//마이페이지 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, "<");
|
||
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;
|
||
}
|
||
|
||
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;
|
||
}
|
||
});
|
||
}; |