https://naparbideak.com/js/PanoModalLoaderLayout.js

1// ======================================================
2//  BLOQUEO GLOBAL DE SCROLL (A PRUEBA DE LEAFLET)
3// ======================================================
4
5function bloquearScrollGlobal() {
6    document.body.style.overflow = "hidden";
7
8    window.addEventListener("wheel", bloquearTodo, { passive: false });
9    window.addEventListener("touchmove", bloquearTodo, { passive: false });
10    window.addEventListener("keydown", bloquearTeclas, { passive: false });
11}
12
13function permitirScrollGlobal() {
14    document.body.style.overflow = "";
15
16    window.removeEventListener("wheel", bloquearTodo, { passive: false });
17    window.removeEventListener("touchmove", bloquearTodo, { passive: false });
18    window.removeEventListener("keydown", bloquearTeclas, { passive: false });
19}
20
21function bloquearTodo(e) {
22    e.preventDefault();
23    e.stopPropagation();
24}
25
26function bloquearTeclas(e) {
27    const teclasScroll = ["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "];
28    if (teclasScroll.includes(e.key)) {
29        e.preventDefault();
30        e.stopPropagation();
31    }
32}
33
34
35
36// ======================================================
37//  ESTADO DE CARGA DE IFRAMES
38// ======================================================
39
40let panofotoLoaded = false;
41let peakfinderLoaded = false;
42
43document.addEventListener("DOMContentLoaded", () => {
44    const panofotoFrame = document.getElementById("panofotoFrame");
45    const peakfinderFrame = document.getElementById("peakfinderFrame");
46
47    if (panofotoFrame) {
48        panofotoFrame.onload = () => {
49            panofotoLoaded = true;
50            if (window.__PANO_DATA__) enviarDatosPanofoto(window.__PANO_DATA__);
51        };
52    }
53
54    if (peakfinderFrame) {
55        peakfinderFrame.onload = () => {
56            peakfinderLoaded = true;
57            if (window.__PANO_DATA__) enviarDatosPeakfinder(window.__PANO_DATA__);
58        };
59    }
60});
61
62
63
64// ======================================================
65//  ABRIR MODAL DESDE UNA LISTA
66// ======================================================
67

68window.openPanoModalFromList = function (idx) {
69
70    const l = window.panoList[idx];
71
72    const data = {
73        url: l.urlReal || l.UrlReal,
74        tituloFoto: l.titulopanofoto || l.TituloPanoFoto || "",
75        tipo: l.TipoPano || l.tipopano || "180",
76        descripcion: l.descripcion || l.Descripcion || "",
77        velocidad: l.rotateSpeed || l.RotateSpeed || 2,
78
79        lat: l.lat || l.Lat,
80        lon: l.lon || l.Lon,
81        alt: l.elevation || l.Elevation || 0,
82        ele: l.ele || l.Ele || 0,
83        tituloDibujo: l.titulopanodibujo || l.TituloPanoDibujo || "",
84        rotateSpeed: l.rotateSpeed || l.RotateSpeed || 2
85    };
86
87    openPanoModal(data);
88};
89
90
91
92// ======================================================
93//  ABRIR / CERRAR MODAL PANORÁMICO
94// ======================================================
95
96function abrirModalPanoramica() {
97    document.getElementById("panoBackdrop").style.display = "block";
98    document.getElementById("panoModal").style.display = "block";
99    bloquearScrollGlobal();   // 🔥 BLOQUEO REAL
100}
101
102function cerrarModalPanoramica() {
103    document.getElementById("panoBackdrop").style.display = "none";
104    document.getElementById("panoModal").style.display = "none";
105    // ocultar el contenedor del pano real para que no quede visible fuera del modal
106    const panoReal = document.getElementById('panoRealContainer');
107    if (panoReal) panoReal.classList.add('d-none');
108    permitirScrollGlobal();   // 🔥 RESTAURA TODO
109}
110
111
112
113// ======================================================
114//  FUNCIÓN PRINCIPAL: MOSTRAR MODAL + ENVIAR JSON
115// ======================================================
116

117window.openPanoModal = function (data) {
118
119    const panofotoFrame = document.getElementById("panofotoFrame");
120    const peakfinderFrame = document.getElementById("peakfinderFrame");
121
122    window.__PANO_DATA__ = data;
123    window.__PANO_MODO__ = "foto";
124
125    panofotoFrame.style.display = "block";
126    peakfinderFrame.style.display = "none";
127
128    panofotoLoaded = false;
129    panofotoFrame.src = "/Utilidades/panofoto-iframev3.html?ts=" + Date.now();
130
131    document.getElementById("btnTogglePanoIcon").src = "/imagenes/botones/pano-dibujo.svg";
132
133    actualizarIconoTipoPano(data.tipo);
134
135    // Mostrar el contenedor oculto del pano real (si existe)
136    const panoReal = document.getElementById('panoRealContainer');
137    if (panoReal) panoReal.classList.remove('d-none');
138    abrirModalPanoramica();
139};
140
141
142
143// ======================================================
144//  ENVÍO DE DATOS A IFRAMES
145// ======================================================
146
147function enviarDatosPanofoto(data) {
148    const panofotoFrame = document.getElementById("panofotoFrame");
149
150    panofotoFrame.contentWindow.postMessage({
151        action: "init",
152        options: {
153            url: data.url,
154            titulo: data.tituloFoto,
155            tipo: data.tipo,
156            descripcion: data.descripcion,
157            velocidad: data.velocidad
158        }
159    }, "*");
160}
161
162function enviarDatosPeakfinder(data) {
163    const peakfinderFrame = document.getElementById("peakfinderFrame");
164
165    peakfinderFrame.contentWindow.postMessage({
166        action: "init",
167        options: {
168            lat: data.lat,
169            lon: data.lon,
170            alt: data.alt,
171            ele: data.ele,
172            titulo: data.tituloDibujo,
173            rotateSpeed: data.rotateSpeed,
174            BackgroundColor: "#87CEEB"
175        }
176    }, "*");
177}
178
179
180
181// ======================================================
182//  ICONO 360° / 180°
183// ======================================================
184
185function actualizarIconoTipoPano(tipo) {
186    const icon = document.getElementById("panoTipoIcon");
187    if (!icon) return;
188
189    tipo = String(tipo).toLowerCase();
190
191    if (tipo.includes("360")) {
192        icon.innerHTML = `<img src="/imagenes/botones/pano-360.svg" style="height:32px;">`;
193    } else {
194        icon.innerHTML = `<img src="/imagenes/botones/pano-180.svg" style="height:32px;">`;
195    }
196}
197
198
199
200// ======================================================
201//  TOGGLE ENTRE FOTO Y DIBUJO
202// ======================================================
203
204function initTogglePano() {
205
206    const btn = document.getElementById("btnTogglePano");
207    const icon = document.getElementById("btnTogglePanoIcon");
208
209    const panofotoFrame = document.getElementById("panofotoFrame");
210    const peakfinderFrame = document.getElementById("peakfinderFrame");
211
212    btn.addEventListener("click", () => {
213
214        const data = window.__PANO_DATA__;
215        if (!data) return;
216
217        if (window.__PANO_MODO__ === "foto") {
218
219            panofotoFrame.style.display = "none";
220            peakfinderFrame.style.display = "block";
221            icon.src = "/imagenes/botones/pano-foto.svg";
222
223            if (peakfinderLoaded) {
224                enviarDatosPeakfinder(data);
225            } else {
226                peakfinderLoaded = false;
227                peakfinderFrame.src = "/Utilidades/peakfinder-iframev3.html?ts=" + Date.now();
228            }
229
230            window.__PANO_MODO__ = "dibujo";
231
232        } else {
233
234            peakfinderFrame.style.display = "none";
235            panofotoFrame.style.display = "block";
236            icon.src = "/imagenes/botones/pano-dibujo.svg";
237
238            if (panofotoLoaded) enviarDatosPanofoto(data);
239
240            window.__PANO_MODO__ = "foto";
241        }
242    });
243}
244
245document.addEventListener("DOMContentLoaded", initTogglePano);