`).join(''); }; var initSwiper = (initialIndex) => { if (gallerySwiper) { gallerySwiper.destroy(true, true); } gallerySwiper = new Swiper(swiperContainer, { initialSlide: initialIndex, loop: true, navigation: { nextEl: popup.querySelector('.swiper-button-next'), prevEl: popup.querySelector('.swiper-button-prev'), }, pagination: { el: popup.querySelector('.swiper-pagination'), clickable: true, }, keyboard: { enabled: true, onlyInViewport: false, }, on: { init: function () { this.update(); }, realIndexChange: function (swiper) { var bulletIndex = swiper.realIndex; var paginationEl= popup.querySelectorAll('.swiper-pagination .swiper-pagination-bullet'); paginationEl.forEach(b => b.classList.remove('swiper-pagination-bullet-active')); if(paginationEl.length==0) return; paginationEl[bulletIndex].classList.add('swiper-pagination-bullet-active'); }, resize: function() { this.update(); } } }); }; var openPopup = (clickedIndex) => { renderSlides(); popup.style.display = 'flex'; popup.parentElement.style.zIndex = '100000'; setTimeout(() => popup.classList.add('is-active'), 10); initSwiper(clickedIndex); toggleScroll(true, popup); }; var closePopup = () => { popup.classList.remove('is-active'); toggleScroll(false); popup.addEventListener('transitionend', () => { popup.style.display = 'none'; popup.parentElement.style.zIndex = '0'; }, { once: true }); }; var toggleScroll = (disable, activePopup = null) => { var htmlEL = document.documentElement; var allPopups = document.getElementsByClassName('m-photo-gallery-module001__popup'); var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; // Handle for Public Page var mainScroll = document.querySelector('#main-scroll'); var mainScrollbarWidth = 0; if (mainScroll) { if (mainScroll.scrollHeight > mainScroll.clientHeight) { mainScrollbarWidth = mainScroll.offsetWidth - mainScroll.clientWidth; } } // End Handle for Public Page if (disable) { htmlEL.style.overflow = "hidden"; htmlEL.style.paddingRight = `${scrollbarWidth}px`; if (mainScroll) { mainScroll.style.overflow = "hidden"; mainScroll.style.paddingRight = `${mainScrollbarWidth}px`; } if (activePopup) { activePopup.style.paddingRight = `${scrollbarWidth}px`; } } else { htmlEL.style.overflow = ""; htmlEL.style.paddingRight = ""; if (allPopups.length > 0) { for (var popup of allPopups) { popup.style.paddingRight = ""; } } if (mainScroll) { mainScroll.style.overflow = ""; mainScroll.style.paddingRight = ""; } } }; galleryFigures.forEach((figure, index) => { figure.addEventListener('click', (e) => { e.preventDefault(); openPopup(index); }); }); popupCloseBtn.addEventListener('click', closePopup); popup.addEventListener('click', (e) => (e.target === popup || e.target === popupContent) && closePopup()); document.addEventListener('keydown', (e) => (e.key === 'Escape' && popup.classList.contains('is-active')) && closePopup()); var observer = new MutationObserver(() => { allImages = getCurrentImages(); if (popup.classList.contains('is-active') && gallerySwiper) { var currentIndex = gallerySwiper.activeIndex; renderSlides(); gallerySwiper.update(); gallerySwiper.slideTo(currentIndex, 0, false); } }); galleryItems.forEach(item => { var img = item.querySelector('.m-photo-gallery-module001__image'); if (img) observer.observe(img, { attributes: true, attributeFilter: ['src'] }); }); }); }; // m-special-module003 =================================== var CLONE_COUNT = 6; var SPEED_MULTIPLIER = 6900; async function sliderAnimation(elementClass) { try { var galleries = [...document.getElementsByClassName(elementClass)]; if (!galleries.length) return; await setupMonitorIndices(galleries, elementClass); var groups = [[2, 3], [5, 6]]; for (var gallery of galleries) { groupItems(gallery, groups); var sliders = gallery.querySelectorAll(`.${elementClass}__slider-inner`); await Promise.all([...sliders].map((slider, index) => initializeSlider(slider, elementClass, index) )); } } catch (error) { console.error('Slider animation error:', error); } } async function setupMonitorIndices(elements, elementClass) { var monitorIndex = 1; elements.forEach(el => { el.querySelectorAll('.element-monitor-image').forEach(img => { img.dataset.monitor = `${elementClass}-monitor-${monitorIndex++}`; }); }); } function groupItems(sliderInstance, groupsToCreate) { var itemsContainer = sliderInstance.querySelector('.m-special-module003__img'); if (!itemsContainer || !groupsToCreate) return; var allItems = itemsContainer.querySelectorAll('.m-special-module003__item:not(.m-special-module003__item--grouped)'); groupsToCreate.sort((a, b) => b[0] - a[0]); groupsToCreate.forEach(groupIndexes => { var itemsToGroup = groupIndexes.map(index => allItems[index - 1]).filter(Boolean); if (itemsToGroup.length === 0) return; var groupWrapper = document.createElement('div'); groupWrapper.className = 'm-special-module003__item m-special-module003__item--grouped'; var firstItem = itemsToGroup[0]; itemsContainer.insertBefore(groupWrapper, firstItem); itemsToGroup.forEach(item => { item.classList.add('is-grouped-child'); groupWrapper.appendChild(item); }); }); } async function initializeSlider(item, elementClass, index) { var images = item.querySelectorAll('img'); await Promise.all(Array.from(images).map(img => { return new Promise(resolve => { if (img.complete) resolve(); img.onload = () => resolve(); img.onerror = () => resolve(); }); })); var swiperWrapper = item.querySelector('.swiper-wrapper'); if (!swiperWrapper) return; var imgWidth = item.querySelector(`.${elementClass}__img`)?.offsetWidth || 1; var containerWidth = item.offsetWidth; var speedTime = (imgWidth * SPEED_MULTIPLIER) / 1000; var slidesPerView = containerWidth / imgWidth; item.querySelectorAll('.swiper-slide:not(:first-child)').forEach(slide => slide.remove()); var originalSlides = item.querySelectorAll('.swiper-slide'); if (!originalSlides.length) return; await cloneSlides(item, elementClass, swiperWrapper, originalSlides); var swiperOptions = { slidesPerView: slidesPerView < 1 ? slidesPerView : "auto", loop: true, speed: speedTime, spaceBetween: 0, allowTouchMove: false, autoplay: { delay: 0, disableOnInteraction: true, reverseDirection: index === 1, }, on: { init: () => handleGeneralContent(item.closest(`.${elementClass}`)) } }; return itszai2_InitSwiperByElement(item, swiperOptions); } async function cloneSlides(item, elementClass, swiperWrapper, originalSlides) { for (var j = 0; j < CLONE_COUNT; j++) { originalSlides.forEach(slide => { var clone = slide.cloneNode(true); clone.querySelectorAll(`.${elementClass}__img`).forEach(img => { ['data-type', 'max', 'min', 'data-sample', 'data-item-wrap', 'data-item-sync'] .forEach(attr => img.removeAttribute(attr)); }); clone.querySelectorAll('img').forEach(img => { if (img.classList.contains('element-monitor-image')) { img.classList.replace('element-monitor-image', 'element-response-image'); } img.dataset.skip = 'true'; }); swiperWrapper.appendChild(clone); }); } } function handleGeneralContent(element) { var targetNodes = element.querySelectorAll('.element-monitor-image, .element-monitor-headline'); var config = { attributes: true, childList: true, subtree: true, characterData: true }; var callback = (mutationList, observer) => { mutationList.forEach((mutation) => { var idMonitorMutation = mutation.target.parentElement.dataset.monitor ?? mutation.target.dataset.monitor; var headlineResponse = element.querySelectorAll(`.element-response-headline[data-monitor="${idMonitorMutation}"]`); var contentMonitorMutation = mutation.target; if (mutation.type === "attributes") { if (mutation.attributeName === 'src' && mutation.target.tagName === 'IMG') { var imgResponse = element.querySelectorAll(`.element-response-image[data-monitor="${idMonitorMutation}"]`); imgResponse.forEach(imageRS => { imageRS.src = mutation.target.src; }); } } else if (mutation.type === 'childList') { headlineResponse.forEach(headlineRS => { var newContent = contentMonitorMutation.innerHTML .replace(/(id|class)="[^"]*"/g, ''); headlineRS.innerHTML = newContent; }); } else if (mutation.type === "characterData") { headlineResponse.forEach(headlineRS => { headlineRS.textContent = mutation.target.data; }); } }); }; var observer = new MutationObserver(callback); targetNodes.forEach(targetNode => { var idMonitor = targetNode.dataset.monitor; var headlineResponse = element.querySelectorAll(`.element-response-headline[data-monitor="${idMonitor}"]`); if (targetNode.classList.contains('element-monitor-image')) { var imgResponse = element.querySelectorAll(`.element-response-image[data-monitor="${idMonitor}"]`); imgResponse.forEach(imageRS => { imageRS.src = targetNode.getAttribute('src'); }); } if (targetNode.classList.contains('element-monitor-headline')) { headlineResponse.forEach(headlineRS => { var newContent = targetNode.innerHTML.replace(/(id|class)="[^"]*"/g, ''); headlineRS.innerHTML = newContent; }); } observer.observe(targetNode, config); }); } // end m-special-module003 =================================== } catch (scriptErr) { console.warn('[Theme Script Execution Error]:', scriptErr); } })();