${contentMonitorMutation.innerHTML}

` }) } else if (mutation.type == "characterData") { headlineResponse.forEach(headlineRS => { headlineRS.textContent = mutation.target.data; }) } }); }; var observer = new MutationObserver(callback); targetNodes.forEach(targetNode => { if (targetNode.classList.contains('element-monitor-image')) { var imgResponse = element.querySelectorAll(`.element-response-image[data-monitor="${targetNode.dataset.monitor}"]`); imgResponse.forEach(imageRS => { imageRS.src = targetNode.getAttribute('src'); }) } if (targetNode.classList.contains('element-monitor-headline')) { var headlineResponse = element.querySelectorAll(`.element-response-headline[data-monitor="${targetNode.dataset.monitor}"]`); headlineResponse.forEach(headlineRS => { headlineRS.innerHTML = `

${targetNode.innerHTML}

`; }) } observer.observe(targetNode, config); }); } // ------- end common function ------ var handleLoadModalInterview = () => { document.querySelectorAll(".m-interview-module002__card").forEach((els) => { var marginBottom = 50; var modalPopup = els.querySelector(".m-interview-module002__modal-info"); var btnClose = modalPopup.querySelector(".m-interview-module002__btn-close"); var parentCard = els.closest(".m-interview-module002__list-item"); var opacityCardBehind = () => { var childCards = parentCard.querySelectorAll(".m-interview-module002__card"); childCards.forEach((card) => { var cardInfo = card.querySelector(".m-interview-module002__info"); card.style.backgroundColor = "transparent"; cardInfo.style.opacity = "0"; }) } var resetOpacityCardBehind = () => { var childCards = parentCard.querySelectorAll(".m-interview-module002__card"); childCards.forEach((card) => { var cardInfo = card.querySelector(".m-interview-module002__info"); card.style.removeProperty("background-color"); cardInfo.style.removeProperty("opacity"); }) } var setStyleForParent = (newHeight) => { parentCard.style.height = `${newHeight}px`; parentCard.style.marginBottom = `${marginBottom}px`; parentCard.style.overflow = "hidden"; } var resetStyleForParent = () => { parentCard.style.removeProperty("height"); parentCard.style.removeProperty("margin-bottom"); parentCard.style.removeProperty("overflow"); } var modalOpen = () => { els.classList.add("active"); modalPopup.classList.add("modal-on"); var modalHeight = modalPopup.clientHeight; var marginBottomParent = modalHeight - parentCard.clientHeight + marginBottom; /* This condition checks if the content of the popup is smaller than the parent card. If so, set the height of the parent card to match the height of the content popup. Otherwise, set the `margin-bottom` of the parent card. */ if(modalHeight < parentCard.clientHeight) { setStyleForParent(modalHeight); opacityCardBehind(); return } parentCard.style.marginBottom = `${marginBottomParent}px`; opacityCardBehind(); } var modalClose = () => { els.classList.remove("active"); modalPopup.classList.remove("modal-on"); resetOpacityCardBehind(); resetStyleForParent(); } var toggleModal = () => { if(!els.classList.contains("modal-on")) { modalOpen(); return } modalClose(); } els.addEventListener("click", function() { toggleModal(); }) btnClose.addEventListener('click', function (e) { e.stopPropagation(); modalClose(); }) }) } // sliderGallery async function sliderGallery(className) { var specSlider = document.getElementsByClassName(className); for (var el of [...(specSlider ?? [])]) { var instanceEl = null; var nextButtons = el.querySelectorAll(".m-gallery-module002__button-next"); var prevButtons = el.querySelectorAll(".m-gallery-module002__button-prev"); var swiperEl = el.querySelector(`.${className}__swiper`); var specOpt = { centeredSlides: true, loop: false, slidesPerView: 1, spaceBetween: 40, pagination: { el: el.querySelector(".m-gallery-module002__pagination"), clickable: true, renderBullet: function (index, className) { return '' + (index + 1) + ""; }, }, navigation: { nextEl: [...nextButtons], prevEl: [...prevButtons], }, }; instanceEl = await itszai2_InitSwiperByElement(swiperEl, specOpt); } } // end sliderGallery // Header sticky when scroll var handleScrollHeader = () => { var header = document.getElementById('main-scroll'); if (header) { var headerEl = document.querySelector(".header-main"); var divAfterHeader = header.parentElement.querySelector('header + main'); var hWindow = window.innerHeight; var hActive = 0; var updateHeaderState = () => { var hContent = divAfterHeader.offsetHeight; if (hContent <= hWindow && hActive == 0) { headerEl.classList.add('active'); // divAfterHeader.style.marginTop = '80px'; } else if(hActive != 1) { headerEl.classList.remove('active'); // divAfterHeader.style.marginTop = '0'; hActive = 1; } }; var resizeObserver = new ResizeObserver((entries) => { for (var entry of entries) { if (entry.contentRect) { updateHeaderState(); } } }); resizeObserver.observe(divAfterHeader); window.addEventListener('resize', () => { hWindow = window.innerHeight; updateHeaderState(); }); header.addEventListener('scroll', function (e) { if (e.target.scrollTop > 1) { headerEl.classList.add('active'); } else { headerEl.classList.remove('active'); } }); updateHeaderState(); } }; var handleGalleryPopup = () => { var galleryModules = document.querySelectorAll('.m-gallery-module001'); galleryModules.forEach((module) => { var galleryItems = module.querySelectorAll('.m-gallery-module001__item'); var galleryFigures = module.querySelectorAll('.m-gallery-module001__figure'); var popup = module.querySelector('.m-gallery-module001__popup'); if (!popup) return; var popupCloseBtn = popup.querySelector('.m-gallery-module001__popup-close'); var swiperWrapper = popup.querySelector('.swiper-wrapper'); var swiperContainer = popup.querySelector('.m-gallery-module001__popup-gallery'); var gallerySwiper = null; function getCurrentImages() { return Array.from(galleryItems).map(item => { var img = item.querySelector('.m-gallery-module001__image'); return { src: img.src, alt: img.alt }; }); } var allImages = getCurrentImages(); var observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && mutation.attributeName === 'src') { allImages = getCurrentImages(); if (popup.classList.contains('is-active') && gallerySwiper) { updateSlides(); } } }); }); galleryItems.forEach(item => { var img = item.querySelector('.m-gallery-module001__image'); if (img) { observer.observe(img, { attributes: true, attributeFilter: ['src'] }); } }); function updateSlides() { var currentIndex = gallerySwiper ? gallerySwiper.activeIndex : 0; swiperWrapper.innerHTML = ''; allImages.forEach(imgData => { var slide = document.createElement('div'); slide.classList.add('swiper-slide'); slide.innerHTML = ` ${imgData.alt}

`; swiperWrapper.appendChild(slide); }); if (gallerySwiper) { gallerySwiper.update(); gallerySwiper.slideTo(currentIndex, 0, false); } } function openPopup(clickedIndex) { swiperWrapper.innerHTML = ''; allImages.forEach(imgData => { var slide = document.createElement('div'); slide.classList.add('swiper-slide'); slide.innerHTML = ` ${imgData.alt}

`; swiperWrapper.appendChild(slide); }); popup.style.display = 'flex'; popup.parentElement.style.zIndex = '100000'; setTimeout(() => { popup.classList.add('is-active'); }, 10); if (gallerySwiper) { gallerySwiper.destroy(true, true); } gallerySwiper = new Swiper(swiperContainer, { loop: true, initialSlide: clickedIndex, slidesPerView: 1, spaceBetween: 20, 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(); }, resize: function() { this.update(); } } }); toggleScroll(true); } function closePopup() { popup.classList.remove('is-active'); popup.addEventListener('transitionend', () => { if (!popup.classList.contains('is-active')) { popup.style.display = 'none'; popup.parentElement.style.zIndex = '0'; if (gallerySwiper) { gallerySwiper.destroy(true, true); gallerySwiper = null; } swiperWrapper.innerHTML = ''; } }, { once: true }); toggleScroll(false); } function toggleScroll(disable) { var body = document.querySelector('#main-scroll'); var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; var bodyMain = document.querySelector('.body-main'); if (disable) { if(body){ body.style.overflow = "hidden"; } if (scrollbarWidth > 0) { if(body){ body.style.paddingRight = `${scrollbarWidth}px`; } } if (bodyMain) { bodyMain.style.zIndex = 10000; } } else { setTimeout(() => { if(body){ body.style.overflow = ""; body.style.paddingRight = ""; } if (bodyMain) { bodyMain.style.overflow = ""; bodyMain.style.zIndex = 1; } }, 300); } } galleryFigures.forEach((figure) => { figure.addEventListener('click', (e) => { e.preventDefault(); var parentItem = figure.closest('.m-gallery-module001__item'); var index = Array.from(galleryItems).indexOf(parentItem); openPopup(index); }); }); popupCloseBtn.addEventListener('click', closePopup); popup.addEventListener('click', (e) => { if (e.target === popup) { closePopup(); } }); document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && popup.classList.contains('is-active')) { closePopup(); } }); return () => { observer.disconnect(); }; }); }; // Modal Interview function initModal(moduleSelector) { var modalOpenBtn = document.querySelectorAll(`${moduleSelector}__button`); if (!modalOpenBtn.length) return; var body = document.body; function toggleScroll(disable) { var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; if (disable) { body.style.overflow = "hidden"; if (scrollbarWidth > 0) { body.style.paddingRight = `${scrollbarWidth}px`; } } else { setTimeout(() => { body.style.overflow = ""; body.style.paddingRight = ""; }, 300); } } function openModal() { modalOpenBtn.forEach((button, idx) => { var module = button.closest(moduleSelector); var modal = module.querySelectorAll(`${moduleSelector}__modal`); if (!modal || !module) return; button.addEventListener("click", function (e) { var htmlMask = `` var modalCloseBtn = this.closest(`${moduleSelector}__item`).querySelector(`${moduleSelector}__close`); var modalContent = this.closest(`${moduleSelector}__item`).querySelector(`${moduleSelector}__modal`); var img = this.closest(`${moduleSelector}__item`).querySelector(`.sync-img img`); this.closest(`${moduleSelector}__item`).querySelector(`.target-img img`).src = img.src; var txt = this.closest(`${moduleSelector}__item`).querySelector(`.sync-title`).innerText; this.closest(`${moduleSelector}__item`).querySelector(`.target-title`).innerText = txt; this.closest(moduleSelector).insertAdjacentHTML("beforeend", htmlMask) modalContent.style.display = "block"; module.classList.add('m-interviews-module002__overlay'); body.style.overflow = "hidden"; toggleScroll(true); var elMask = document.querySelector(".modal-mask"); // Close modalCloseBtn?.addEventListener("click", function (e) { e.stopPropagation(); closeModal(); }); elMask.addEventListener("click", function (e) { e.stopPropagation(); closeModal(); }); function closeModal() { elMask.remove(); modalContent.style.display = ""; module.classList.remove('m-interviews-module002__overlay'); body.style.overflow = ""; toggleScroll(false); } }); }); } openModal(); } } catch (scriptErr) { console.warn('[Theme Script Execution Error]:', scriptErr); } })();