95 lines
3.4 KiB
JavaScript
95 lines
3.4 KiB
JavaScript
/* ==========================================================================
|
|
MAPEO DE NODOS CENTRALES CON CADA MODAL
|
|
========================================================================== */
|
|
const NODE_MODAL_MAP = {
|
|
p_top: "modal-ide-excellence",
|
|
p_bottom: "modal-ide-digital",
|
|
p_left: "modal-ide-academy",
|
|
p_right: "modal-ide-projects"
|
|
};
|
|
|
|
/* ==========================================================================
|
|
FUNCIONES GLOBALES DE CONTROL
|
|
========================================================================== */
|
|
function openModal(modalId) {
|
|
const modal = document.getElementById(modalId);
|
|
if (!modal) return;
|
|
modal.classList.add("is-active");
|
|
document.body.style.overflow = "hidden";
|
|
|
|
const scrollArea = modal.querySelector(".ide-modal-scroll");
|
|
if (scrollArea) scrollArea.scrollTop = 0;
|
|
}
|
|
|
|
function closeModal(modalOrId) {
|
|
const modal = typeof modalOrId === "string"
|
|
? document.getElementById(modalOrId)
|
|
: modalOrId;
|
|
if (!modal) return;
|
|
modal.classList.remove("is-active");
|
|
document.body.style.overflow = "";
|
|
}
|
|
|
|
/* ==========================================================================
|
|
EVENTO CLICK EN EL CANVAS (Abre el modal correspondiente a cada nodo)
|
|
========================================================================== */
|
|
canvas.addEventListener("click", (e) => {
|
|
const { x, y } = getCanvasCoordinates(e);
|
|
|
|
for (const [nodeId, modalId] of Object.entries(NODE_MODAL_MAP)) {
|
|
const node = nodes.find(n => n.id === nodeId);
|
|
if (node && Math.hypot(node.x - x, node.y - y) <= node.radius) {
|
|
openModal(modalId);
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
|
|
/* ==========================================================================
|
|
INICIALIZACIÓN DE EVENTOS UNIVERSALES PARA TODOS LOS MODALES
|
|
========================================================================== */
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// 1. Cualquier botón con [data-modal-target] abre su modal asignado
|
|
document.querySelectorAll("[data-modal-target]").forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
const targetId = btn.getAttribute("data-modal-target");
|
|
openModal(targetId);
|
|
});
|
|
});
|
|
|
|
// 2. Todos los modales gestionan cierre por botón (X) o clic fuera
|
|
document.querySelectorAll(".ide-modal-backdrop").forEach(modal => {
|
|
// Botón X
|
|
const closeBtn = modal.querySelector(".ide-modal-close");
|
|
if (closeBtn) {
|
|
closeBtn.addEventListener("click", () => closeModal(modal));
|
|
}
|
|
|
|
// Clic en el fondo oscuro
|
|
modal.addEventListener("click", (e) => {
|
|
if (e.target === modal) closeModal(modal);
|
|
});
|
|
|
|
// Control del hint de scroll individual para cada modal
|
|
const scrollArea = modal.querySelector(".ide-modal-scroll");
|
|
const scrollHint = modal.querySelector(".ide-scroll-hint");
|
|
if (scrollArea && scrollHint) {
|
|
scrollArea.addEventListener("scroll", () => {
|
|
const isAtBottom = scrollArea.scrollHeight - scrollArea.scrollTop - scrollArea.clientHeight < 40;
|
|
if (isAtBottom) {
|
|
scrollHint.classList.add("is-hidden");
|
|
} else {
|
|
scrollHint.classList.remove("is-hidden");
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// 3. Tecla Escape cierra cualquier modal que esté abierto
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") {
|
|
const activeModal = document.querySelector(".ide-modal-backdrop.is-active");
|
|
if (activeModal) closeModal(activeModal);
|
|
}
|
|
});
|
|
}); |