170 lines
6.7 KiB
JavaScript
170 lines
6.7 KiB
JavaScript
$(document).ready(function () {
|
|
/**
|
|
* 지정된 범위($scope) 내에서 아직 로드되지 않은 '.flex_box'를 찾아 내용을 채웁니다.
|
|
* 중첩된 구조를 지원하기 위해 콜백 함수를 사용하여 재귀적으로 호출될 수 있습니다.
|
|
* @param {jQuery} $scope - 검색을 수행할 jQuery 객체 범위 (예: $('body') 또는 특정 부모 요소)
|
|
* @param {function} [callback] - 모든 작업이 완료된 후 호출될 콜백 함수
|
|
*/
|
|
function processFlexBoxes($scope, callback) {
|
|
// 💡 [핵심 수정] 중복 로드를 방지하기 위해 'layout-loading' 클래스를 사용합니다.
|
|
var flexBoxes = $scope.find('.flex_box').addBack('.flex_box').filter(':not(.layout-loading, .layout-loaded)');
|
|
|
|
if (!flexBoxes.length) {
|
|
if (callback) callback();
|
|
return;
|
|
}
|
|
|
|
var layoutNumbers = [];
|
|
flexBoxes.addClass('layout-loading'); // 처리 시작을 표시
|
|
|
|
flexBoxes.each(function () {
|
|
var $box = $(this);
|
|
var layout = $box.attr('data-layout');
|
|
|
|
if (layout) {
|
|
layoutNumbers.push(layout);
|
|
}
|
|
});
|
|
|
|
if (!layoutNumbers.length) {
|
|
flexBoxes.removeClass('layout-loading').addClass('layout-loaded');
|
|
if (callback) callback();
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: g5_url + '/rb/rb.config/ajax.layout_set.php',
|
|
method: 'POST',
|
|
dataType: 'json',
|
|
data: { layouts: layoutNumbers },
|
|
success: function (response) {
|
|
flexBoxes.each(function () {
|
|
var $box = $(this);
|
|
var layout = $box.attr('data-layout');
|
|
var html = response[layout];
|
|
|
|
if (html !== undefined) {
|
|
$box.html(html);
|
|
|
|
// 💡 [최종 수정] 새로 추가된 HTML 내부에서 모듈 포장 해제 함수를 호출합니다.
|
|
if (typeof unwrapModuleContainers === 'function') {
|
|
unwrapModuleContainers($box[0]); // $box[0]은 jQuery 객체를 순수 DOM 요소로 변환합니다.
|
|
}
|
|
// 새로 추가된 HTML 내부에 또 다른 flex_box가 있는지 재귀적으로 확인합니다.
|
|
processFlexBoxes($box, callback);
|
|
}
|
|
});
|
|
// 클래스를 업데이트하여 완료되었음을 표시합니다.
|
|
flexBoxes.removeClass('layout-loading').addClass('layout-loaded');
|
|
},
|
|
error: function (data) {
|
|
console.error('레이아웃 로드에 실패했습니다.',data);
|
|
flexBoxes.removeClass('layout-loading'); // 오류 발생 시 클래스 제거
|
|
if (callback) callback();
|
|
}
|
|
});
|
|
}
|
|
|
|
// 최종적으로 모든 모듈 로딩이 끝난 후 실행될 함수
|
|
function finalSetup() {
|
|
// 모든 비동기 작업이 끝난 후 슬라이더와 캘린더를 초기화합니다.
|
|
if (typeof initializeAllSliders === "function") initializeAllSliders();
|
|
if (typeof initializeCalendar === "function") initializeCalendar();
|
|
console.log("모든 모듈 및 중첩 모듈 로딩 완료. 최종 스크립트 실행.");
|
|
}
|
|
|
|
// 페이지 로드 시 전체 body를 대상으로 최초 실행
|
|
processFlexBoxes($('body'), finalSetup);
|
|
});
|
|
|
|
|
|
// 아래 슬라이더 초기화 함수들은 기존과 동일합니다.
|
|
function initializeAllSliders() {
|
|
$('.rb_swiper').each(function () {
|
|
const $slider = $(this);
|
|
if (!$slider.hasClass('swiper-initialized')) { // 초기화 중복 방지
|
|
setupResponsiveSlider($slider);
|
|
}
|
|
});
|
|
}
|
|
|
|
function setupResponsiveSlider($rb_slider) {
|
|
let swiperInstance = null;
|
|
let currentMode = '';
|
|
|
|
function initSlider(mode) {
|
|
const isMobile = mode === 'mo';
|
|
const rows = parseInt($rb_slider.data(isMobile ? 'mo-h' : 'pc-h'), 10) || 1;
|
|
const cols = parseInt($rb_slider.data(isMobile ? 'mo-w' : 'pc-w'), 10) || 1;
|
|
const gap = parseInt($rb_slider.data(isMobile ? 'mo-gap' : 'pc-gap'), 10) || 0;
|
|
const swap = $rb_slider.data(isMobile ? 'mo-swap' : 'pc-swap') == 1;
|
|
const slidesPerView = rows * cols;
|
|
|
|
configureSlides($rb_slider, slidesPerView, cols, gap);
|
|
|
|
if (swiperInstance) {
|
|
swiperInstance.destroy(true, true);
|
|
}
|
|
|
|
swiperInstance = new Swiper($rb_slider.find('.rb_swiper_inner')[0], {
|
|
slidesPerView: 1,
|
|
initialSlide: 0,
|
|
spaceBetween: gap,
|
|
resistanceRatio: 0,
|
|
touchRatio: swap ? 1 : 0,
|
|
autoplay: $rb_slider.data('autoplay') == 1
|
|
? {
|
|
delay: parseInt($rb_slider.data('autoplay-time'), 10) || 3000,
|
|
disableOnInteraction: false,
|
|
}
|
|
: false,
|
|
navigation: {
|
|
nextEl: $rb_slider.find('.rb-swiper-next')[0],
|
|
prevEl: $rb_slider.find('.rb-swiper-prev')[0],
|
|
},
|
|
});
|
|
$rb_slider.addClass('swiper-initialized');
|
|
}
|
|
|
|
function configureSlides($rb_slider, view, cols, gap) {
|
|
const widthPercentage = `calc(${100 / cols}% - ${(gap * (cols - 1)) / cols}px)`;
|
|
$rb_slider.find('.rb_swiper_list').css('width', widthPercentage);
|
|
|
|
if ($rb_slider.find('.rb_swiper_list').parent().hasClass('rb-swiper-slide')) {
|
|
$rb_slider.find('.swiper-slide-duplicate').remove();
|
|
$rb_slider.find('.rb_swiper_list').unwrap('.rb-swiper-slide');
|
|
}
|
|
|
|
let groupIndex = 0;
|
|
$rb_slider.find('.rb_swiper_list').each(function (index) {
|
|
$(this).addClass('rb_swiper_group' + Math.floor(index / view));
|
|
groupIndex = Math.floor(index / view);
|
|
}).promise().done(function () {
|
|
for (let i = 0; i <= groupIndex; i++) {
|
|
$rb_slider.find('.rb_swiper_group' + i).wrapAll('<div class="rb-swiper-slide swiper-slide"></div>');
|
|
$rb_slider.find('.rb_swiper_group' + i).removeClass('rb_swiper_group' + i);
|
|
}
|
|
});
|
|
|
|
$rb_slider.find('.rb-swiper-slide').css({ 'gap': `${gap}px` });
|
|
|
|
$rb_slider.find('.rb_swiper_list').each(function (index) {
|
|
if ((index + 1) % cols === 0) {
|
|
$(this).css('margin-right', '0');
|
|
}
|
|
});
|
|
}
|
|
|
|
function checkModeAndInit() {
|
|
const winWidth = window.innerWidth;
|
|
const mode = winWidth <= 1024 ? 'mo' : 'pc';
|
|
|
|
if (currentMode !== mode) {
|
|
currentMode = mode;
|
|
initSlider(mode);
|
|
}
|
|
}
|
|
|
|
$(window).on('load resize', checkModeAndInit);
|
|
checkModeAndInit();
|
|
} |