https://www.apecceosummitkorea2025.com/js/pg_sub.js

1function getCSSVar(name) {
2	return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim()
3}
4
5function initInitialMove() {
6	const obj_img = '.area-img .container'
7	const obj_img2 = '.area-img.detail .container'
8	const obj_title = '.area-title h2 span'
9	const obj_subtitle = '.area-title .subtitle span'
10	const obj_contents = '.area-contents'
11	const vw100 = window.innerWidth
12	const tl_initalMove = gsap.timeline()
13	if (document.querySelector(obj_img2)) {
14		tl_initalMove
15			.fromTo(
16				obj_img,
17				{ width: 24, height: 0, y: 80, opacity: 0 },
18				{ width: 24, height: 80, y: 0, opacity: 1, duration: 0.6, ease: 'power1.inOut' }
19			)
20			.from(obj_title, { y: 100, opacity: 0, duration: 0.8, ease: 'power1.inOut' }, '-=1')
21			.from(obj_subtitle, { y: 100, opacity: 0, duration: 0.8, ease: 'power1.inOut' }, '-=1')
22			.from(obj_contents, { y: 100, opacity: 0, duration: 0.8, ease: 'power1.inOut' }, '-=.8')
23			.to(obj_img, { width: vw100, duration: 0.8, ease: 'power1.inOut', delay: 0.1 })
24			.to(obj_img, { width: '100vw', duration: 0.01, ease: 'power1.inOut' })
25	} else if (document.querySelector('.subpg.type02')) {
26		tl_initalMove.from(obj_title, { y: 100, opacity: 0, duration: 1, ease: 'power1.inOut' })
27	} else {
28		tl_initalMove
29			.fromTo(
30				obj_img,
31				{ width: 24, height: 0, y: 380, opacity: 0 },
32				{ width: 24, height: 380, y: 0, opacity: 1, duration: 0.6, ease: 'power1.inOut' }
33			)
34			.from(obj_title, { y: 100, opacity: 0, duration: 0.8, ease: 'power1.inOut' }, '-=1')

35			.from(obj_subtitle, { y: 100, opacity: 0, duration: 0.8, ease: 'power1.inOut' }, '-=1')
36			.from(obj_contents, { y: 100, opacity: 0, duration: 0.8, ease: 'power1.inOut' }, '-=.8')
37			.to(obj_img, { width: vw100, duration: 0.8, ease: 'power1.inOut', delay: 0.1 })
38			.to(obj_img, { width: '100vw', duration: 0.01, ease: 'power1.inOut' })
39	}
40}
41
42function animateFadeUps() {
43	gsap.utils.toArray('.area-contents .fade-up').forEach((el) => {
44		gsap.from(el, {
45			y: 50,
46			opacity: 0,
47			duration: 1,
48			ease: 'power2.out',
49			scrollTrigger: {
50				trigger: el,
51				start: 'top 90%',
52				toggleActions: 'play none none none',
53			},
54		})
55	})
56}
57
58// sub page side navigation
59function scrollActiveMenuItemIntoView() {
60	const activeItem = document.querySelector('side nav a.active')
61	if (activeItem) {
62		activeItem.scrollIntoView({
63			behavior: 'smooth',
64			inline: 'center',
65			block: 'nearest',
66		})
67	}
68}
69
70function animateGalleryByLine(selector = '.gallery-child') {
71	const items = gsap.utils.toArray(selector)
72	const lines = new Map()
73
74	items.forEach((item) => {
75		// const top = item.offsetTop
76		const top = item.getBoundingClientRect().top + window.scrollY
77		if (!lines.has(top)) lines.set(top, [])
78		lines.get(top).push(item)
79	})
80
81	lines.forEach((lineItems) => {
82		lineItems.forEach((el, i) => {
83			gsap.from(el, {
84				y: 50,
85				opacity: 0,
86				duration: 0.8,
87				ease: 'power2.out',
88				delay: i * 0.2,
89				scrollTrigger: {
90					trigger: el,
91					start: 'top 90%',
92					toggleActions: 'play none none none',
93				},
94			})
95		})
96	})
97}
98
99document.addEventListener('DOMContentLoaded', () => {
100	gsap.registerPlugin(ScrollTrigger, ScrollToPlugin)
101	const brpoint = getCSSVar('screen-md')
102
103	ScrollTrigger.matchMedia({
104		[`(min-width: ${brpoint})`]: function () {
105			initInitialMove()
106			animateFadeUps()
107			animateGalleryByLine('.area-contents .gallery-child')
108		},
109	})
110
111	// community side navigation
112	let links = gsap.utils.toArray('side nav a');
113	let triggers = [];
114	links.forEach((a) => {
115		let element = document.querySelector(a.getAttribute('href'))
116		if (!element) return
117
118		let linkST = ScrollTrigger.create({
119			trigger: element,
120			start: 'top top',
121		})
122
123		let highlightST = ScrollTrigger.create({
124			trigger: element,
125			start: 'top center',
126			end: 'bottom center',
127			onToggle: (self) => self.isActive && setActive(a),
128		})
129
130		triggers.push({ a, trigger: highlightST })
131
132		a.addEventListener('click', function (e) {
133			e.preventDefault()
134			gsap.to(window, {
135				duration: 1,
136				scrollTo: { y: element, offsetY: 0 },
137				overwrite: 'auto',
138				ease: 'circ',
139				onComplete: () => setActive(a)
140			})
141		})
142	})
143
144	ScrollTrigger.refresh()
145	setTimeout(() => {
146		triggers.forEach(({ a, trigger }) => {
147			if (trigger.isActive) {
148				setActive(a)
149			}
150		})
151	}, 50)
152
153	function debounce(func, wait = 300) {
154		let timeout
155		return (...args) => {
156			clearTimeout(timeout)
157			timeout = setTimeout(() => func(...args), wait)
158		}
159	}
160
161	const updateScrollTriggers = debounce(() => ScrollTrigger.refresh())
162	const resizeObserver = new ResizeObserver(updateScrollTriggers)
163	ScrollTrigger.refresh()
164
165	function setActive(link) {
166		links.forEach((el) => {
167			if (!el.classList.contains('btn-totop')) {
168				el.classList.remove('active')
169			}
170		})
171
172		link.classList.add('active')
173		scrollActiveMenuItemIntoView()
174	}
175
176	// dialog
177	document.querySelectorAll('.dialog-link').forEach((link) => {
178		link.addEventListener('click', (e) => {
179			e.preventDefault()
180			const dialog = document.getElementById(link.dataset.target)
181
182			if (dialog && typeof dialog.show === 'function') {
183				dialog.show()
184			}
185		})
186	})
187})
188
189// networking speakers carousel
190function moveNavigationButtons(caro) {
191	if (!caro) return;
192	const shadowRoot = caro.shadowRoot;
193	if (!shadowRoot) return;
194	
195	const prevBtn = shadowRoot.querySelector('[part="navigation-button navigation-button--previous"]');
196	const nextBtn = shadowRoot.querySelector('[part="navigation-button navigation-button--next"]');
197	const pagination = shadowRoot.querySelector('[part="pagination"]');
198
199	if (prevBtn && nextBtn && pagination) {
200		pagination.prepend(prevBtn);
201		pagination.append(nextBtn);
202	}
203}
204function resizeCarouselToCurrentSlide(caro) {
205	if (!caro) return;
206	requestAnimationFrame(() => {
207		const slides = caro.querySelectorAll('sl-carousel-item');
208		const currentSlide = Array.from(slides).find((slide) => {
209			const rect = slide.getBoundingClientRect();
210			return rect.left >= 0 && rect.right <= window.innerWidth;
211		});
212
213		if (currentSlide) {
214			const blockList = currentSlide.querySelector('.block-list-speakers');
215			if (blockList) {
216				const height = blockList.scrollHeight;
217				caro.style.transition = 'height 0.3s ease';
218				caro.style.height = `${height}px`;
219			} else {
220				console.warn('[resizeCarouselToCurrentSlide] block-list-speakers not found in currentSlide');
221			}
222		} else {

223			console.warn('[resizeCarouselToCurrentSlide] No current visible slide found');
224		}
225	});
226}
227
228// networking delegates carousel item 한개일때
229function updateCarouselControls(caro) {
230	if (!caro) return;
231	const slides = caro.querySelectorAll('sl-carousel-item');
232	const shadow = caro.shadowRoot;
233	if (!shadow) return;
234
235	const prevBtn = shadow.querySelector('[part="navigation-button navigation-button--previous"]');
236	const nextBtn = shadow.querySelector('[part="navigation-button navigation-button--next"]');
237	const pagination = shadow.querySelector('[part="pagination"]');
238
239	if (slides.length <= 1) {
240		if (prevBtn) prevBtn.style.display = 'none';
241		if (nextBtn) nextBtn.style.display = 'none';
242		if (pagination) pagination.style.display = 'none';
243	} else {
244		if (prevBtn) prevBtn.style.display = '';
245		if (nextBtn) nextBtn.style.display = '';
246		if (pagination) pagination.style.display = '';
247	}
248}
249
250document.addEventListener('DOMContentLoaded', () => {
251	//carousel 초기화
252	const carousels = document.querySelectorAll('.carousel');
253	const carousel_dial01 = document.querySelector('#carousel-dial01');
254	carousels.forEach((caro) => {
255		moveNavigationButtons(caro);
256		resizeCarouselToCurrentSlide(caro);
257		updateCarouselControls(caro);
258	});
259	if (carousel_dial01) {
260		moveNavigationButtons(carousel_dial01);
261	}
262
263	// Dialogs
264	const dialogs = document.querySelectorAll('sl-dialog')
265

266	dialogs.forEach((dialog) => {
267		const pages = dialog.querySelectorAll('.dialog-page')
268		const prevBtn = dialog.querySelector('.prev-btn')
269		const nextBtn = dialog.querySelector('.next-btn')
270		const closeBtn = dialog.querySelector('.dialog-close')
271		const hasPages = pages.length > 0
272		let currentPage = 0
273
274		const showPage = (index) => {
275			if (!hasPages) return
276			pages.forEach((page, i) => {
277				page.classList.toggle('fade-show', i === index)
278			})
279			prevBtn?.classList.toggle('disabled', index === 0)
280			nextBtn?.classList.toggle('disabled', index === pages.length - 1)
281			const currentPageEl = pages[index]
282			const wrapper = dialog.querySelector('.dialog-pages')
283		}
284		prevBtn?.addEventListener('click', (e) => {
285			e.preventDefault()
286			if (currentPage > 0) {
287				currentPage--
288				showPage(currentPage)
289			}
290		})
291		nextBtn?.addEventListener('click', (e) => {
292			e.preventDefault()
293			if (currentPage < pages.length - 1) {
294				currentPage++
295				showPage(currentPage)
296			}
297		})
298		closeBtn?.addEventListener('click', (e) => {
299			e.preventDefault()
300			dialog.hide()
301		})
302		dialog.addEventListener('sl-after-hide', () => {
303			if (hasPages) {
304				currentPage = 0
305				showPage(currentPage)
306			}
307		})
308		dialog.showPage = (pageIndex) => {
309			if (hasPages) {
310				currentPage = pageIndex
311				showPage(currentPage)
312			}
313			dialog.show()
314		}
315		showPage(currentPage)
316	})
317})