448 lines
15 KiB
JavaScript
448 lines
15 KiB
JavaScript
//비디오 썸내일 콘트롤
|
|
$(document).ready(function() {
|
|
AOS.init();
|
|
|
|
//윈도우 사이즈 반응형에 따른 스크립트
|
|
const body = document.querySelector("body");
|
|
var targetSize = "";
|
|
|
|
function handleWindowSize() {
|
|
const windowWidth = window.innerWidth;
|
|
if (windowWidth <= 500) {
|
|
//모바일 class
|
|
body.className = "moblie";
|
|
|
|
if(targetSize != "moblie"){
|
|
menu_init();
|
|
$(document).on("click",".mobileCarlist > .mobilecarItem",function(){
|
|
$(this).next().slideToggle("fast");
|
|
$(this).find(".arrow").toggleClass("on");
|
|
$(this).toggleClass("on");
|
|
});
|
|
$(document).on("click",".menuDepth1Wrap > .menuDepth1",function(){
|
|
if($(this).hasClass("on") == true){
|
|
$(this).next().slideToggle("fast");
|
|
$(this).toggleClass("on");
|
|
}else{
|
|
$(".menuDepth1Wrap > .menuDepth1").removeClass("on");
|
|
$(".menuDepth1Wrap > .menuDepth1").next().slideUp("fast");
|
|
$(this).next().slideToggle("fast");
|
|
$(this).toggleClass("on");
|
|
}
|
|
});
|
|
|
|
$(document).on("click",".closeBtn",function(){
|
|
$(".menuWarp").stop().animate({"right":"-100%"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
|
|
$("html").removeClass("scrollDisable");
|
|
});
|
|
$(document).on("click",".burgurBtn",function(){
|
|
$(".menuWarp").stop().animate({"right":"0"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
|
|
$("html").addClass("scrollDisable");
|
|
});
|
|
}
|
|
targetSize = "moblie";
|
|
} else if (windowWidth > 500 && windowWidth <= 1024) {
|
|
//타블릿 class
|
|
body.className = "tablet";
|
|
|
|
if(targetSize != "tablet"){
|
|
menu_init();
|
|
$(document).on("click",".mobileCarlist > .mobilecarItem",function(){
|
|
$(this).next().slideToggle("fast");
|
|
$(this).find(".arrow").toggleClass("on");
|
|
$(this).toggleClass("on");
|
|
});
|
|
$(document).on("click",".menuDepth1Wrap > .menuDepth1",function(){
|
|
if($(this).hasClass("on") == true){
|
|
$(this).next().slideToggle("fast");
|
|
$(this).toggleClass("on");
|
|
}else{
|
|
$(".menuDepth1Wrap > .menuDepth1").removeClass("on");
|
|
$(".menuDepth1Wrap > .menuDepth1").next().slideUp("fast");
|
|
$(this).next().slideToggle("fast");
|
|
$(this).toggleClass("on");
|
|
}
|
|
});
|
|
|
|
$(document).on("click",".closeBtn",function(){
|
|
$(".menuWarp").stop().animate({"right":"-36rem"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
|
|
$("html").removeClass("scrollDisable");
|
|
});
|
|
$(document).on("click",".burgurBtn",function(){
|
|
$(".menuWarp").stop().animate({"right":"0"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
|
|
$("html").addClass("scrollDisable");
|
|
});
|
|
}
|
|
targetSize = "tablet";
|
|
|
|
} else {
|
|
//데스크탑 class
|
|
body.className = "desktop";
|
|
|
|
if(targetSize != "desktop"){
|
|
menu_init();
|
|
$(document).on("mouseenter",".menuDepth1Wrap",function(){
|
|
$(this).find(".menuDepth2Wrap").css("display","block");
|
|
});
|
|
$(document).on("mouseleave",".menuDepth1Wrap",function(){
|
|
$(this).find(".menuDepth2Wrap").css("display","none");
|
|
});
|
|
}
|
|
targetSize = "desktop";
|
|
|
|
}
|
|
}
|
|
window.addEventListener("resize", handleWindowSize);
|
|
handleWindowSize();
|
|
|
|
function menu_init(){
|
|
$(document).off("mouseenter",".menuDepth1Wrap");
|
|
$(document).off("mouseleave",".menuDepth1Wrap");
|
|
$(document).off("click",".mobileCarlist > .mobilecarItem");
|
|
$(document).off("click",".menuDepth1Wrap > .menuDepth1");
|
|
$(document).off("click",".closeBtn");
|
|
$(document).off("click",".burgurBtn");
|
|
$(".mobileCarlist > .mobilecarItem").removeClass("on");
|
|
$(".mobileCarlist > .mobilecarItem").find(".arrow").removeClass("on");
|
|
$(".mobileCarlist > .mobilecarItem").next().css("display","none");
|
|
$(".menuDepth1Wrap > .menuDepth1").removeClass("on");
|
|
$(".menuDepth1Wrap > .menuDepth1").next().css("display","none");
|
|
$(".menuWarp").stop().animate({"right":"-100%"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
|
|
$("html").removeClass("scrollDisable");
|
|
}
|
|
|
|
|
|
|
|
if($(".withVideo").length > 0){
|
|
$(".withVideo").find("video").get(0).load();
|
|
// $(".withVideo").find("video").get(0).play();
|
|
// $(".withVideo").find("video").get(0).pause();
|
|
$(".withVideo").find("video").get(0).currentTime = 0;
|
|
$(document).on("mouseenter",".withVideo",function(){
|
|
$(this).find(".productSmallVideo > img").stop().animate({"opacity":"0"}, { queue : true , duration : 300 , easing : 'easeInOutExpo'});
|
|
$(this).find("video").get(0).play();
|
|
console.log("12312312");
|
|
});
|
|
$(document).on("mouseleave",".withVideo",function(){
|
|
$(this).find(".productSmallVideo > img").stop().animate({"opacity":"1"}, { queue : true , duration : 300 , easing : 'easeInOutExpo', complete : function(){
|
|
$(this).parent().find("video").get(0).pause();
|
|
$(this).parent().find("video").get(0).currentTime = 0;
|
|
}});
|
|
});
|
|
|
|
}else{
|
|
|
|
}
|
|
//상품슬라이드
|
|
var swiper = new Swiper(".productSwiper", {
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
});
|
|
|
|
//메인슬라이드
|
|
var swiper = new Swiper(".mainSwiper", {
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
loop:true,
|
|
loopAdditionalSlides: 1,
|
|
navigation: {
|
|
nextEl: ".kvNextBtn",
|
|
prevEl: ".kvPrevBtn",
|
|
},
|
|
});
|
|
|
|
//메인뉴스
|
|
var swiper = new Swiper(".mainNiticeList", {
|
|
direction: "vertical",
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
mousewheel: true,
|
|
keyboard: true,
|
|
});
|
|
|
|
|
|
//PDP Lighting pattern
|
|
var swiper = new Swiper(".pdpLightingSwiper", {
|
|
slidesPerView: "auto",
|
|
spaceBetween: 20,
|
|
freeMode: true,
|
|
});
|
|
//PDP Display Theme
|
|
var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", {
|
|
slidesPerView: "auto",
|
|
loop:true,
|
|
spaceBetween: 20,
|
|
freeMode: true,
|
|
autoplay: {
|
|
delay:1,
|
|
disableOnInteraction:false,
|
|
},
|
|
speed: 4000,
|
|
|
|
});
|
|
$('.pdpDisplayThemeSwiper').on('mouseleave', function() {
|
|
console.log("시작")
|
|
swiperTheme.autoplay.start();
|
|
});
|
|
|
|
$('.pdpDisplayThemeSwiper').on('mouseenter', function() {
|
|
console.log("멈춰")
|
|
swiperTheme.autoplay.stop();
|
|
});
|
|
|
|
//마이페이지 lnb 스와이프
|
|
|
|
var ww = $(window).width();
|
|
var mySwiper = undefined;
|
|
|
|
function initSwiper() {
|
|
|
|
if (ww < 800 && mySwiper == undefined) {
|
|
var swiper = new Swiper(".lnbList", {
|
|
slidesPerView: "auto",
|
|
});
|
|
} else if (ww >= 800 && mySwiper != undefined) {
|
|
mySwiper.destroy();
|
|
mySwiper = undefined;
|
|
}
|
|
}
|
|
initSwiper();
|
|
|
|
$(window).on('resize', function () {
|
|
ww = $(window).width();
|
|
initSwiper();
|
|
});
|
|
|
|
|
|
//자동차 번호/메뉴/로그인 선택 슬라이드
|
|
$(".carlist, .carItem, .menu > a, .user > a").on('mouseover focusin', function(){
|
|
$(this).addClass("on");
|
|
$(this).next('.carlistItem, .gnbMenu, .userMenu').addClass("on");
|
|
$(this).next('.carlistItem, .gnbMenu, .userMenu').on('mouseover focusin', function(){
|
|
$(this).addClass("on");
|
|
}).on('mouseleave',function(){
|
|
$(this).removeClass("on");
|
|
|
|
});
|
|
}).on('mouseleave',function(){
|
|
$(this).removeClass("on");
|
|
$(this).next('.carlistItem, .gnbMenu, .userMenu').removeClass("on");
|
|
$(this).parents('.carlist').removeClass("on");
|
|
});
|
|
|
|
$("#slide-open").click(function(){
|
|
if($("#burgur").hasClass("on")){
|
|
$("#burgur").removeClass("on");
|
|
$(".mMenuWarp").removeClass("on");
|
|
$(".logo").removeClass("on");
|
|
$("html").removeClass("scrollDisable");
|
|
|
|
} else{
|
|
$("#burgur").addClass("on");
|
|
$(".mMenuWarp").addClass("on");
|
|
$("html").addClass("scrollDisable");
|
|
$(".logo").addClass("on");
|
|
}
|
|
});
|
|
|
|
|
|
/*************************************
|
|
accordion
|
|
*************************************/
|
|
|
|
// $(document).on("click", ".accordion dt.q", function() {
|
|
// $(this).parent().toggleClass("active");
|
|
// $(this).next().slideToggle();
|
|
// $(this).toggleClass("active");
|
|
// });
|
|
|
|
|
|
$(document).on("click", ".accordion dl:not(.private)", function() {
|
|
$(this).toggleClass("active");
|
|
$(this).find("dd.a").slideToggle();
|
|
$(this).find("dt.q").toggleClass("active");
|
|
});
|
|
|
|
|
|
|
|
|
|
/*************************************
|
|
payment-history
|
|
*************************************/
|
|
|
|
$(document).on("click", ".openView", function() {
|
|
$(this).next().slideToggle();
|
|
$(this).toggleClass("active");
|
|
$(this).next().siblings(".payAll").slideUp();
|
|
});
|
|
|
|
|
|
//top 버튼
|
|
if ( $( this ).scrollTop() > 200 ) {
|
|
$( '.floating_menu' ).fadeIn();
|
|
} else {
|
|
$( '.floating_menu' ).fadeOut();
|
|
}
|
|
|
|
|
|
$( window ).scroll( function() {
|
|
if ( $( this ).scrollTop() > 200 ) {
|
|
$( '.floating_menu' ).fadeIn();
|
|
} else {
|
|
$( '.floating_menu' ).fadeOut();
|
|
}
|
|
});
|
|
$( '.floating_top' ).click( function() {
|
|
$( 'html, body' ).animate( { scrollTop : 0 }, 400 );
|
|
return false;
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//푸터 페밀리사이트
|
|
// $(".btn-select").on("click", function() {
|
|
// $(".list-member").slideToggle("fast", function(){
|
|
// $(".btn-select").toggleClass("on" ,
|
|
// $(this).is(":visible")
|
|
// );
|
|
// });
|
|
// });
|
|
|
|
const foot_famliy_btn = $(".familyBoxWarp").find(".btn-select");
|
|
foot_famliy_btn.on("click", function() {
|
|
$(".familyBoxWarp").find(".list-member").slideToggle("fast", function(){
|
|
foot_famliy_btn.toggleClass("on" ,
|
|
$(this).is(":visible")
|
|
);
|
|
});
|
|
|
|
});
|
|
|
|
|
|
//문의하기 글자 수 제한
|
|
var maxInquiryContentsCount = 1000;
|
|
$('.inquiryContents').keyup(function (e) {
|
|
let content = $(this).val();
|
|
|
|
if (content.length == 0 || content == '') {
|
|
$('.textCount').text('0/'+maxInquiryContentsCount);
|
|
} else {
|
|
$('.textCount').text(content.length+'/'+maxInquiryContentsCount);
|
|
}
|
|
|
|
if (content.length > maxInquiryContentsCount) {
|
|
$(this).val($(this).val().substring(0, maxInquiryContentsCount));
|
|
$('.textCount').text(maxInquiryContentsCount+'/'+maxInquiryContentsCount);
|
|
alert('글자수는 '+maxInquiryContentsCount+'자까지 입력 가능합니다.');
|
|
};
|
|
});
|
|
|
|
// 문의하기 이미지 미리보기
|
|
|
|
$('input[name="inquiryImgFile"]').change(function(){
|
|
setImageFromFile(this, $(this).next().find('.inquiryImg'));
|
|
$(this).parent().next().css("display","block");
|
|
});
|
|
|
|
function setImageFromFile(input, expression) {
|
|
if (input.files && input.files[0]) {
|
|
var reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
$(expression).attr('src', e.target.result);
|
|
}
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
}
|
|
|
|
})
|
|
|
|
|
|
// 레이어 팝업 오픈 스크립트
|
|
function open_layer_popup(popid){
|
|
var popid = popid;
|
|
$("#"+popid).css("display","flex");
|
|
$("body").css("overflow","hidden");
|
|
$("body").css("touch-action","none");
|
|
$("#"+popid).stop().animate({"opacity":"1"}, { queue : true , duration : 450 , easing : 'easeInOutExpo'});
|
|
$("#"+popid+">.popInner").stop().animate({"top":"50%"}, { queue : true , duration : 450 , easing : 'easeInOutExpo'});
|
|
};
|
|
|
|
// 레이어 팝업 클로즈 스크립트
|
|
function close_layer_popup(popid){
|
|
var popid = popid;
|
|
$("#"+popid).stop().animate({"opacity":"0"}, { queue : true , duration : 200 , easing : 'easeInOutExpo', complete : function(){
|
|
$("#"+popid+">.popInner").css("top","53%");
|
|
$("#"+popid).css("display","none");
|
|
|
|
}});
|
|
$("body").css("overflow","auto");
|
|
$("body").css("touch-action","auto");
|
|
|
|
};
|
|
|
|
// [S]PDP 리뷰 더보기 관련
|
|
more_contents_chk();
|
|
|
|
function more_contents_chk(){
|
|
$('.reviewItem').each(function (index, item) {
|
|
if($(item).find(".contents").height() >= 74){
|
|
$(item).find(".contents").addClass('abstracted');
|
|
$(item).find(".contentMoreBtn").css("display","flex");
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
$(document).on("click", ".contentMoreBtn", function() {
|
|
if($(this).hasClass("active")){
|
|
$(this).parent().find(".contents").addClass("abstracted");
|
|
$(this).removeClass("active");
|
|
$(this).html("더보기");
|
|
}else{
|
|
$(this).parent().find(".contents").removeClass("abstracted");
|
|
$(this).addClass("active");
|
|
$(this).html("간단히");
|
|
}
|
|
});
|
|
// [E]PDP 리뷰 더보기 관련
|
|
|
|
|
|
|
|
// PDP Lighting Pattern
|
|
$(document).on("click", ".lpthumb", function() {
|
|
$(this).parent().find("li").removeClass("active");
|
|
$(this).addClass("active");
|
|
|
|
$(".lighting_pattern_movie").attr("src", $(this).attr("value"));
|
|
$(".lighting_pattern_movie").load();
|
|
$(".lighting_pattern_movie").play();
|
|
});
|
|
// PDP Lighting Pattern
|
|
$(document).on("click", ".dtthumb", function() {
|
|
const dtlImgPath = $(this).attr("value");
|
|
const dtlImgs = $(".dtlImgs");
|
|
$(this).parent().find("li").removeClass("active");
|
|
$(this).addClass("active");
|
|
|
|
let imgHtml = `
|
|
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
|
|
<img src="${dtlImgPath}-1.png" alt="디스플레이 테마1">
|
|
</div>
|
|
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="600">
|
|
<img src="${dtlImgPath}-2.png" alt="디스플레이 테마2">
|
|
</div>
|
|
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="1000">
|
|
<img src="${dtlImgPath}-3.png" alt="디스플레이 테마3">
|
|
</div>
|
|
`;
|
|
dtlImgs.html(imgHtml);
|
|
});
|