10S

$(function() {

var lastScroll = 0;
var slideCount;
var swiperType = undefined;
var typeOptions = {};

// product slide
$(window).on(‘resize’, function() {
windowReize();
//vhSize();
slideType();
slideColor();
accordion();
});

// function vhSize() {
// var vh = window.innerHeight * 0.01;
// document.documentElement.style.setProperty(‘–vh’, `${vh}px`);
// }
// vhSize();

function windowReize() {
if ($(window).width() <= 768) {
slideCount = 1;
} else if ($(window).width() slideCount) {
typeOptions = {
loop: true,
navigation: {
nextEl: ‘.swiper_type .swiper-button-next’,
prevEl: ‘.swiper_type .swiper-button-prev’,
},
pagination: {
el: ‘.swiper_type .swiper-pagination’,
type: ‘bullets’,
},
breakpoints: {
0: {
slidesPerView: ‘auto’,
autoHeight: true,
},
768: {
slidesPerView: 3,
},
1181: {
slidesPerView: 4,
},
},
on: {
init: function() {
$(‘.swiper_type .swiper-button-next’).show();
$(‘.swiper_type .swiper-button-prev’).show();
}
}
}
} else {
typeOptions = {
loop: false,
slidesPerView: ‘auto’,
touchRatio: false,
navigation: false,
on: {
init: function() {
$(‘.swiper_type .swiper-button-next’).hide();
$(‘.swiper_type .swiper-button-prev’).hide();
}
}
}

}

// swiperType = new Swiper(‘.swiper_type .swiper-container’, typeOptions);
if ($(‘.swiper_type .swiper-container’).length > 0) {
swiperType = new Swiper(‘.swiper_type .swiper-container’, typeOptions);
}
}
slideType()

// color
function slideColor() {
// 모든 .swiper_color 블록을 찾아서 개별 초기화
const swiperBlocks = document.querySelectorAll(‘.swiper_color’);

swiperBlocks.forEach((block, index) => {
// 이미 초기화된 블록인지 확인
if (block.hasAttribute(‘data-swiper-initialized’)) {
return;
}

// data-block-id가 없는 경우 고유값 부여
if (!block.getAttribute(‘data-block-id’)) {
block.setAttribute(‘data-block-id’, `product-color-${Date.now()}-${index}`);
}

// 해당 블록 내부의 Swiper 요소들 선택
const container = block.querySelector(‘.swiper-container’);
const prevButton = block.querySelector(‘.swiper-button-next’);
const nextButton = block.querySelector(‘.swiper-button-prev’);
const pagination = block.querySelector(‘.swiper-pagination’);

if (container) {
// 기존 로직과 동일: slideCount와 비교하여 옵션 결정
const slideLength = container.querySelectorAll(‘.swiper-slide’).length;

if (slideLength > slideCount) {
// 기존 설정과 동일한 colorOptions 적용
const colorOptions = {
loop: true,
navigation: {
nextEl: prevButton,
prevEl: nextButton,
},
pagination: {
el: pagination,
type: ‘bullets’,
},
breakpoints: {
0: {
slidesPerView: ‘auto’,
autoHeight: true,
},
768: {
slidesPerView: 3,
},
1181: {
slidesPerView: 4,
},
},
on: {
init: function() {
if (prevButton) prevButton.style.display = ‘block’;
if (nextButton) nextButton.style.display = ‘block’;
}
}
};

const swiper = new Swiper(container, colorOptions);
} else {
// 슬라이드가 slideCount 이하일 때: 네비게이션 비활성화
const colorOptions = {
loop: false,
slidesPerView: ‘auto’,
touchRatio: false,
navigation: false,
on: {
init: function() {
if (prevButton) prevButton.style.display = ‘none’;
if (nextButton) nextButton.style.display = ‘none’;
}
}
};

const swiper = new Swiper(container, colorOptions);
}

// 초기화 완료 표시
block.setAttribute(‘data-swiper-initialized’, ‘true’);
}
});
}

slideColor()

// brain 241203
// scroll menu
$(‘.scroll_menu li a’).on(‘click’, function(e) {
e.preventDefault();
var $target = $(this.hash);

// 대상 섹션이 없는 페이지에서는 동작하지 않음
if (!$target.length) return;

// 현재 스크롤 애니메이션이 진행 중이면 중단
$(‘html, body’).stop();

// requestAnimationFrame을 사용하여 다음 프레임에서 위치 계산
requestAnimationFrame(function() {
var contentOt = $target.offset().top – $(‘.scroll_menu’).innerHeight();
$(‘html, body’).animate({
scrollTop: contentOt
}, {
duration: 400,
easing: ‘swing’,
complete: function() {
// 애니메이션 완료 후 한번 더 위치 조정
var finalOffset = $target.offset().top – $(‘.scroll_menu’).innerHeight();
if (Math.abs($(window).scrollTop() – finalOffset) > 2) {
$(window).scrollTop(finalOffset);
}
}
});
});
});

// $(‘.scroll_menu li a’).on(‘click’, function(e) {
// var contentOt = $(this.hash).offset().top – $(‘.scroll_menu’).innerHeight();
// // console.log(contentOt);
// // $(‘html, body’).scrollTop(contentOt); // 스크롤 위치 바로 이동
// // $(‘html, body’).stop().animate({scrollTop: contentOt}, 400); // 스크롤 위치 애니메이션 이동

// e.preventDefault();
// });

if (!isMobileTablet()) {
$(‘.scroll_menu li’).on(‘mouseenter’, function() {
$(‘.scroll_menu li’).removeClass(‘on’).addClass(‘off’);
$(this).removeClass(‘off’).addClass(‘on’);

})
$(‘.scroll_menu li’).on(‘mouseleave’, function() {
$(‘.scroll_menu li’).removeClass(‘on off’);

})
}

$(window).on(‘scroll’, function() {
var scrollTop = $(this).scrollTop();
// overview 섹션이 없는 제품 페이지(액세서리 등)에서는 offset()이 undefined
var $overview = $(‘.product.detail .overview’);
if ($overview.length && scrollTop >= $overview.offset().top) {
$(‘.scroll_menu’).addClass(‘fixed’);
} else {
$(‘.scroll_menu’).removeClass(‘fixed’);
}

if (scrollTop lastScroll) {
$(‘.product.detail .btn_buy.mo’).addClass(‘down’);
} else {
$(‘.product.detail .btn_buy.mo’).removeClass(‘down’);
}

var $footer = $(‘.footer’);
if ($footer.length && scrollTop >= $footer.offset().top – $(window).innerHeight()) {
$(‘.product.detail .btn_buy.mo’).addClass(‘hidden’);
} else {
$(‘.product.detail .btn_buy.mo’).removeClass(‘hidden’);
}

lastScroll = scrollTop;
});

// mo accordion
function accordion() {
if ($(window).width() <= 768) {
$('.product.detail .specs .info_list li .title').off('click');
$('.product.detail .specs .info_list li').find('.block').css('display', 'none');

$('.product.detail .specs .info_list li.on').find('.block').css('display', 'block');
$('.product.detail .specs .info_list li .title').on('click', function(e) {
if ($(this).parent().hasClass('on') == false) {
$('.product.detail .specs .info_list li').removeClass('on');
$(this).parent().addClass('on');
$('.product.detail .specs .info_list li .block').stop().slideUp();
$(this).parent().find('.block').stop().slideDown();
} else {
$(this).parent().removeClass('on');
$(this).parent().find('.block').stop().slideUp();
}
e.preventDefault();
});
} else {
$('.product.detail .specs .info_list li').find('.block').css('display', 'block');
$('.product.detail .specs .info_list li .title').off('click');
}
}
accordion();

// tab
// tab – 각 탭 그룹을 독립적으로 동작하도록 수정
$('.tab_list li a').on('click', function(e) {
var $tabGroup = $(this).closest('.tab_wrap'); // 탭 그룹의 부모 요소
var $tabContents = $tabGroup.siblings('.tab_content'); // 같은 레벨의 tab_content들
var idx = $(this).parent().index();

$tabGroup.find('.tab_list li').removeClass('on');
$(this).parent().addClass('on');
$tabContents.removeClass('on').eq(idx).addClass('on');

e.preventDefault();
}); // $('.tab_list li a').on('click', function(e) {
// var idx = $(this).parent().index();
// $('.tab_list li').removeClass('on');
// $(this).parent().addClass('on');
// $('.tab_content').removeClass('on').eq(idx).addClass('on');
// e.preventDefault();
// });

// 차트 이미지 클릭하면 레이어팝업
$('.product.detail .size .chart .bg').on('click', function() {
$('body').find('.dim').stop().fadeIn('fast');
$('.layer_chart').addClass('on');
var src = $(this).find('img').attr('src');
$('.layer_chart').find('img').attr('src', src);
});
$('.layer_chart').on('click', function() {
$('body').find('.dim').stop().fadeOut('fast');
$('.layer_chart').removeClass('on');
$('.layer_chart').find('img').attr('src', '');
});
$('body .dim').on('click', function() {
$(this).stop().fadeOut('fast');
$('.layer_chart').removeClass('on');
$('.layer_chart').find('img').attr('src', '');
});

$(window).trigger('scroll');
$(window).trigger('resize');
});