merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정
This commit is contained in:
jilee4unity
@@ -0,0 +1,201 @@
|
||||
// Discshar.js
|
||||
|
||||
const Discshar = (function() {
|
||||
let $slider, $slides, slideWidth, currentSlide, totalSlides, slideInterval, autoSlideTimeout;
|
||||
|
||||
function init() {
|
||||
initSlider();
|
||||
bindEvents();
|
||||
loadImages();
|
||||
}
|
||||
|
||||
function initSlider() {
|
||||
$slider = $('.discountSlider ul');
|
||||
$slides = $('.discountSlider li');
|
||||
slideWidth = $slides.outerWidth() + parseInt($slides.css('margin-right'));
|
||||
currentSlide = 0;
|
||||
totalSlides = $slides.length;
|
||||
slideInterval = 3000; // 슬라이드 간격 (밀리초)
|
||||
|
||||
// 첫 번째 및 마지막 슬라이드 복제
|
||||
$slides.first().before($slides.last().clone());
|
||||
$slides.last().after($slides.first().clone());
|
||||
|
||||
// 복제된 슬라이드를 포함하여 총 슬라이드 수 업데이트
|
||||
totalSlides += 2;
|
||||
|
||||
// 모든 <li> 항목의 총 너비로 .discountSlider ul의 너비 설정
|
||||
$slider.width(totalSlides * slideWidth);
|
||||
|
||||
// 첫 번째 원본 슬라이드로 초기 위치 설정
|
||||
$slider.css('margin-left', -slideWidth);
|
||||
|
||||
startAutoSlide();
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
$slider.on('mouseenter', stopAutoSlide)
|
||||
.on('mouseleave', startAutoSlide)
|
||||
.on('mousedown touchstart', startDrag)
|
||||
.on('mousemove touchmove', drag)
|
||||
.on('mouseup touchend', endDrag);
|
||||
|
||||
$(document).on('mouseup touchend', endDrag);
|
||||
|
||||
// 데스크톱 브라우저에서 이미지 드래그 방지
|
||||
$('.discountSlider img').on('dragstart', function(event) { event.preventDefault(); });
|
||||
}
|
||||
|
||||
function startAutoSlide() {
|
||||
autoSlideTimeout = setInterval(nextSlide, slideInterval);
|
||||
}
|
||||
|
||||
function stopAutoSlide() {
|
||||
clearInterval(autoSlideTimeout);
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
currentSlide++;
|
||||
moveSlide();
|
||||
}
|
||||
|
||||
function moveSlide() {
|
||||
$slider.animate({'margin-left': -currentSlide * slideWidth}, 500, function() {
|
||||
if (currentSlide >= totalSlides - 1) {
|
||||
currentSlide = 1;
|
||||
$slider.css('margin-left', -slideWidth);
|
||||
} else if (currentSlide <= 0) {
|
||||
currentSlide = totalSlides - 2;
|
||||
$slider.css('margin-left', -currentSlide * slideWidth);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let isDragging = false;
|
||||
let startPos = 0;
|
||||
let currentPos = 0;
|
||||
|
||||
function startDrag(e) {
|
||||
isDragging = true;
|
||||
startPos = e.pageX || e.originalEvent.touches[0].pageX;
|
||||
currentPos = $slider.css('margin-left');
|
||||
stopAutoSlide();
|
||||
}
|
||||
|
||||
function drag(e) {
|
||||
if (!isDragging) return;
|
||||
let currentMousePos = e.pageX || e.originalEvent.touches[0].pageX;
|
||||
let diff = currentMousePos - startPos;
|
||||
$slider.css('margin-left', parseInt(currentPos) + diff);
|
||||
}
|
||||
|
||||
function endDrag(e) {
|
||||
if (!isDragging) return;
|
||||
isDragging = false;
|
||||
let endPos = e.pageX || e.originalEvent.changedTouches[0].pageX;
|
||||
let diff = endPos - startPos;
|
||||
if (Math.abs(diff) > 50) {
|
||||
currentSlide += (diff > 0) ? -1 : 1;
|
||||
moveSlide();
|
||||
} else {
|
||||
$slider.animate({'margin-left': currentPos}, 200);
|
||||
}
|
||||
startAutoSlide();
|
||||
}
|
||||
|
||||
function loadImages() {
|
||||
console.log('Starting to load images');
|
||||
loadImage('representative', screenInfo.representativeImagePath, $('.discountThumnail img'));
|
||||
|
||||
screenInfo.productImages.forEach((imagePath, index) => {
|
||||
loadImage(`product-${index}`, imagePath, $(`.discountList li:eq(${index}) .thumnail img`));
|
||||
});
|
||||
}
|
||||
|
||||
function loadImage(imageType, imagePath, $img) {
|
||||
if (!imagePath) {
|
||||
console.warn(`Image path for ${imageType} is not available`);
|
||||
return;
|
||||
}
|
||||
|
||||
if ($img.length) {
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/image',
|
||||
method: 'GET',
|
||||
data: { path: imagePath },
|
||||
xhrFields: { responseType: 'blob' },
|
||||
success: function(data) {
|
||||
const imageUrl = URL.createObjectURL(data);
|
||||
$img.attr('src', imageUrl);
|
||||
console.log(`${imageType} image loaded successfully`);
|
||||
},
|
||||
error: function() {
|
||||
console.error(`Failed to load ${imageType} image`);
|
||||
$img.attr('src', '/path/to/fallback-image.jpg');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn(`Image element not found for ${imageType}`);
|
||||
}
|
||||
}
|
||||
|
||||
function copyLink(bnfInnb) {
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/copyDiscsharLink',
|
||||
method: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({ bnfInnb: bnfInnb }),
|
||||
success: function(response) {
|
||||
if (response.success && response.links && response.links.length > 0) {
|
||||
const link = response.links[0];
|
||||
navigator.clipboard.writeText(link.uniqueUrl)
|
||||
.then(() => {
|
||||
const validDate = new Date(link.validDt);
|
||||
const formattedDate = validDate.toISOString().split('T')[0];
|
||||
$('#linkExpiryDate').text(formattedDate);
|
||||
MicroModal.show('modal-1');
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('링크 복사 실패:', err.message);
|
||||
alert('링크 복사에 실패했습니다.');
|
||||
});
|
||||
} else {
|
||||
alert('유효한 링크 정보가 없습니다.');
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('서버 통신 오류:', error);
|
||||
alert('서버 통신 중 오류가 발생했습니다.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showShareResult() {
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/checkDiscsharResult',
|
||||
method: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({}),
|
||||
success: function(response) {
|
||||
if (response.hasPurchase) {
|
||||
MicroModal.show('modal-3');
|
||||
} else {
|
||||
MicroModal.show('modal-2');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
alert('공유 결과를 확인하는데 실패했습니다.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
init: init,
|
||||
copyLink: copyLink,
|
||||
showShareResult: showShareResult
|
||||
};
|
||||
})();
|
||||
|
||||
$(document).ready(function() {
|
||||
Discshar.init();
|
||||
});
|
||||
Reference in New Issue
Block a user