https://tjc.org.my/wp-content/uploads/sites/146/custom-css-js/7284.js?v=438

1/******* Do not edit this file *******
2Simple Custom CSS and JS - by Silkypress.com
3Saved: May 25 2025 | 06:39:05 */
4/* Default comment here */ 
5
6document.addEventListener("DOMContentLoaded", () => {
7	const cards = document.querySelectorAll(".hymn-composed-card");
8	const overlays = document.querySelectorAll(
9		".hymnComposedModal-overlay"
10	);
11
12	// Open modal
13	cards.forEach((card) => {
14		card.addEventListener("click", () => {
15			const targetId = card.getAttribute("data-target");
16			const hymnComposedModal = document.querySelector(targetId);
17			if (hymnComposedModal) {
18				const modalBox = hymnComposedModal.querySelector(
19					".hymn_info_lightbox"
20				);
21
22				// Ensure it's not hidden
23				hymnComposedModal.classList.remove("hidden");
24
25				// Reset animations
26				if (modalBox) {
27					modalBox.classList.remove("animate-out");
28					modalBox.classList.add("animate-in");
29
30					setTimeout(() => {
31						modalBox.classList.remove("animate-in");
32					}, 400);
33				}
34			}
35		});
36	});
37
38	// Close modal with animation
39	overlays.forEach((overlay) => {
40		const closeBtn = overlay.querySelector(".close-hymn-composed-btn");
41
42		const closeModal = () => {
43			const modalBox = overlay.querySelector(".hymn_info_lightbox");
44
45			if (modalBox) {
46				modalBox.classList.remove("animate-in");
47				modalBox.classList.add("animate-out");
48
49				setTimeout(() => {
50					overlay.classList.add("hidden");
51					modalBox.classList.remove("animate-out");
52					stopAndResetAudio(overlay);
53				}, 400);
54			} else {
55				overlay.classList.add("hidden");
56				stopAndResetAudio(overlay);
57			}
58		};
59
60		if (closeBtn) {
61			closeBtn.addEventListener("click", closeModal);
62		}
63
64		overlay.addEventListener("click", (e) => {
65			if (e.target === overlay) {
66				closeModal();
67			}
68		});
69	});
70
71	// Close with ESC key
72	document.addEventListener("keydown", (e) => {
73		if (e.key === "Escape") {
74			overlays.forEach((overlay) => {
75				const modalBox = overlay.querySelector(".hymn_info_lightbox");
76
77				if (modalBox) {
78					modalBox.classList.remove("animate-in");
79					modalBox.classList.add("animate-out");
80
81					setTimeout(() => {
82						overlay.classList.add("hidden");
83						modalBox.classList.remove("animate-out");
84						stopAndResetAudio(overlay);
85					}, 400);
86				} else {
87					overlay.classList.add("hidden");
88					stopAndResetAudio(overlay);
89				}
90			});
91		}
92	});
93
94	function stopAndResetAudio(overlay) {
95		const audio = overlay.querySelector("audio");
96		if (audio) {
97			audio.pause();
98			audio.currentTime = 0;
99		}
100	}
101});