https://www.museofridakahlo.org.mx/wp/wp-content/themes/mfk/js/main.js?ver=1784830571

1"use strict";
2console.clear();
3console.log(window.location.hostname);
4if (window.location.hostname !== "www.museofridakahlo.org.mx"){
5     window.location.href = "https://museofridakahlo.org.mx"
6}
7const fridaStorage = JSON.parse(localStorage.getItem("frida"));
8if (!fridaStorage) {
9  localStorage.setItem("frida", JSON.stringify({ showModal: false }));
10}
11
12const preloadImage = async (url) =>
13  new Promise((resolve, reject) => {
14    if (!url) reject();
15    const image = new Image();
16    image.src = url;
17    image.style.position = "fixed";
18    image.style.inset = 0;
19    image.addEventListener("load", () => {
20      resolve();
21    });
22  });
23
24document.addEventListener("DOMContentLoaded", () => {
25  const introSection = document.querySelector(".section__intro");
26  const coverImage = document.querySelector(".entrance img")?.src || "";
27  const backgroundImage =
28    (introSection && window.getComputedStyle(introSection).backgroundImage.replace('url("', "").replace('")', "")) ||
29    "";
30  const coverPreload = preloadImage(coverImage);
31  const backgroundPreload = preloadImage(backgroundImage);
32
33  Promise.all([coverPreload, backgroundPreload])
34    .then(() => {
35      const isTouchDevice = window.matchMedia("(pointer: coarse)").matches;
36      /*
37       * Cover overlay
38       */
39      const $cover = document.querySelector(".entrance");
40      $cover && ($cover.style.zIndex = "var(--z-3)");
41
42      $cover &&
43        setTimeout(() => {
44          $cover.style.transition = "opacity 3s";
45          $cover.style.opacity = 0;
46          $cover.style.zIndex = "var(--z-0)";
47        }, 3000);
48
49      const $overlay = document.querySelectorAll("#active-zone");
50      const enterCursor = (e) => {
51        if (window.matchMedia("(pointer: coarse)").matches) e.preventDefault();
52        $cover.style.transition = "";
53        $cover.style.opacity = 1;
54        $cover.style.zIndex = "var(--z-2)";
55      };
56
57      if (!isTouchDevice) {
58        $overlay?.forEach((item) => {
59          item.addEventListener("pointerenter", enterCursor, { passive: true });
60          item.addEventListener("touchstart", enterCursor, { passive: true });
61        });
62      }
63      const leaveCursor = () => {
64        $cover.style.opacity = 0;
65        $cover.style.zIndex = "var(--z-0)";
66      };
67
68      if (!isTouchDevice) {
69        $overlay?.forEach((item) => {
70          item.addEventListener("pointerleave", leaveCursor);
71          item.addEventListener("touchend", leaveCursor);
72        });
73      }
74    })
75    .finally(() => {
76      /*
77       * Clear loader
78       */
79      const $loader = document.querySelector(".loader");
80      $loader?.remove();
81
82      /*Show modal newsleeter*/
83      const $newsletter = document.querySelector(".modal.newsletter");
84      if (fridaStorage) {
85        $newsletter?.remove();
86        //return;
87      }
88
89      setTimeout(() => {
90        $newsletter?.classList.add("active");
91      }, 3500);
92    });
93  /*
94   * Media mobile variables
95   */
96  const isTouchDevice = window.matchMedia("(pointer: coarse)").matches;
97  const isSmallWidthDevice = window.matchMedia("(max-width: 1080px)").matches;
98  const isSmallHeightDevice = window.matchMedia("(max-height: 655px)").matches;
99  const isMobile = window.matchMedia("(max-width: 420px)").matches;
100  const isPortrait = window.matchMedia("(orientation: portrait)").matches;
101  const isHome = !!document.querySelector(".home");
102  // Validate sections
103  const isMusseumSection = !!document.querySelector(".musseum");
104  const isFridaSection = !!document.querySelector(".frida");
105  const isActivitiesSection = !!document.querySelector(".activities");
106  const isVirtualSection = !!document.querySelector(".virtual");
107
108  /*
109   * Elements
110   */
111  const mainScroll = document.querySelector("main");
112
113  import("./navigation.js").catch((error) => console.log("Error al cargar el módulo: ", error));
114  import("./locationurl.js").catch((error) => console.log("Error al cargar el módulo: ", error));
115  /*
116   * Toggle menu on outside click
117   */
118  document.addEventListener("click", (e) => {
119    const $toggleButton = document.querySelector(".navbar__button");
120    const isMenu = e.target.closest(".menu");
121    if (e.target === $toggleButton || !$toggleButton.checked || isMenu) return;
122    $toggleButton.checked = false;

123  });
124
125  /*
126   * Menu click check
127   */
128  const $mainMenu = document.querySelector(".menu");
129  $mainMenu?.addEventListener("click", (e) => {
130    if (e.target.tagName !== "A") return;
131    if (e.target.href === location.href.split("#")[0]) {
132      e.preventDefault();
133      mainScroll.scrollLeft = 0;
134    }
135  });
136
137  /*
138   * Modal open
139   */
140  document.addEventListener("click", (e) => {
141    if (!e.target.matches("[data-open-modal]")) return;
142    e.preventDefault();
143    const targetModalName = e.target.dataset.openModal;
144    const modalToOpen = document.querySelector(`[data-modal-name="${targetModalName}"]`);
145    modalToOpen?.classList.add("active");
146  });
147
148  /*
149   * Modal close
150   */
151  document.addEventListener("click", (e) => {
152    //Click on close icon
153    if (e.target.classList.contains("modal__close")) {
154      e.target.closest(".modal").classList.remove("active");
155		history.pushState("", document.title, location.pathname +  location.search);
156      return;
157    }
158
159    //Click on modal veil
160    if (e.target.classList.contains("modal__container")) {
161      e.target.closest(".modal").classList.remove("active");
162		history.pushState("", document.title, location.pathname + location.search);
163      return;
164    }
165
166    if (e.target.classList.contains("modal")) {
167      e.target.classList.remove("active");
168		history.pushState("", document.title, location.pathname + location.search);
169      return;
170    }
171  });
172
173  document.addEventListener("keyup", (e) => {
174    const modalActive = document.querySelector(".modal.active");
175    if (modalActive && e.code === "Escape") {
176		modalActive.classList.remove("active");
177		history.pushState("", document.title, location.pathname + location.search);
178	  }
179  });
180
181  if (isSmallWidthDevice || (isSmallHeightDevice && !isTouchDevice)) {
182    const submenus = document.querySelectorAll(".submenu ");
183    [...submenus].forEach((submenu) => {
184      //submenu.previousElementSibling.addEventListener("click", (e) => e.preventDefault());
185      //submenu.previousElementSibling.addEventListener("dblclick", (e) => {
186      //location.href = e.target.href;
187      //});
188      const arrow = document.createElement("a");
189      arrow.href = "#";
190      arrow.classList.add("menu__item--arrow");
191      arrow.textContent = "▼";
192      if (submenu.closest(".submenu .submenu") && isMobile) return;
193      submenu.previousElementSibling.insertAdjacentElement("afterEnd", arrow);
194    });
195  }
196
197  /*
198   * Zoom images
199   */
200  const $modalZoom = document.querySelector(".modal.zoom");
201  document.addEventListener("click", (e) => {
202    if (!e.target.dataset.zoom) return;
203    const $image = e.target;
204    const $modalImage = $modalZoom.querySelector(".zoom__image");
205
206    $modalImage.src = $image.src;
207    $modalZoom.classList.add("active");
208  });
209
210  $modalZoom?.addEventListener("click", () => {
211    $modalZoom.classList.remove("active");
212  });
213
214  /*
215   * Modal newsletter
216   */
217  const $newsletter = document.querySelector(".modal.newsletter");
218  const removeNewsletter = () => {
219    $newsletter?.remove();
220    document.removeEventListener("wheel", removeEventListener);
221  };
222
223  if (isHome) {
224    $newsletter?.addEventListener("click", (e) => {
225      if (e.target.matches(".modal__close")) $newsletter.remove();
226    });
227    document.addEventListener("wheel", removeNewsletter);
228  }
229
230  /*
231   * Play YT videos on hover
232   */
233  /*const youtubeVideos = document.querySelectorAll('[title*="YouTube"]');
234
235  youtubeVideos?.forEach(video => {
236    let playVideo = false;
237    video.addEventListener('mouseover', () => {
238      if (!playVideo) {
239        video.setAttribute('src', `${video.src}?autoplay=1&mute=1`);
240        playVideo = true;
241      }
242    })
243  })*/
244  /*
245   * Musseum background
246  const isMusseumSection = !!document.querySelector(".musseum");
247  if (isMusseumSection) {
248    window.addEventListener("resize", () => {
249      const introWidht = document.querySelector(".section__intro").offsetWidth;
250      const footerWidth = document.querySelector(".footer").offsetWidth;
251      $hscroll?.style.backgroundSize = `calc(99% - ${introWidht}px  ${footerWidth}px)`
252    });
253  }
254  */
255
256  /*
257   * Validate emtpy links #!
258   */
259  const allLinks = document.querySelectorAll("a[href]");
260  allLinks.forEach((link) => {
261    link.addEventListener("click", (e) => {
262      if (e.currentTarget.href?.includes("#!")) e.preventDefault();
263    });
264  });
265
266  function magnify(imgID, zoom) {
267    let w, h, bw;
268    const img = document.getElementById(imgID);
269    const glass = img.parentElement.querySelector(".img-magnifier-glass");
270

271    function sizeGlassBackground() {
272      setTimeout(() => {
273        glass.style.backgroundSize = img?.width * zoom + "px " + img?.height * zoom + "px";
274      }, 10);
275    }
276
277    img.onload = sizeGlassBackground();
278
279    bw = 3;
280    w = glass.offsetWidth / 2;
281    h = glass.offsetHeight / 2;
282
283    glass?.addEventListener("pointermove", moveMagnifier);
284    img?.addEventListener("pointermove", moveMagnifier);
285    glass?.addEventListener("touchstart", (e) => e.preventDefault());
286    img?.addEventListener("touchstart", (e) => e.preventDefault());
287    window.addEventListener("resize", sizeGlassBackground);
288
289    function moveMagnifier(e) {
290      var pos, x, y;
291      e.preventDefault();
292      pos = getCursorPos(e);
293      x = pos.x;
294      y = pos.y;
295      if (x > img.width - w / zoom) {
296        x = img.width - w / zoom;
297      }
298      if (x < w / zoom) {
299        x = w / zoom;
300      }
301      if (y > img.height - h / zoom) {
302        y = img.height - h / zoom;
303      }
304      if (y < h / zoom) {
305        y = h / zoom;
306      }
307      glass.style.left = x - w + "px";
308      glass.style.top = y - h + "px";
309      glass.style.backgroundPosition = "-" + (x * zoom - w + bw) + "px -" + (y * zoom - h + bw) + "px";
310    }
311
312    function getCursorPos(e) {
313      var a,
314        x = 0,
315        y = 0;
316      e = e || window.event;
317      a = img.getBoundingClientRect();
318      x = e.pageX - a.left;
319      y = e.pageY - a.top;
320      x = x - window.pageXOffset;
321      y = y - window.pageYOffset;
322      return { x: x, y: y };
323    }
324  }
325
326  const hasModalPlane = !!document.querySelector(".modal__footer.plane");
327  const hasModalSitemap = !!document.querySelector(".modal__footer.sitemap");
328
329  if (hasModalPlane) magnify("map", 2);
330  if (hasModalSitemap) magnify("sitemap", 2);
331
332  /*
333   * Initialize all galleries
334   */
335  const galleries = document.querySelectorAll(".carousel");
336
337  if (galleries.length > 0) {
338    galleries.forEach((gallery) => Carousel.init(gallery));
339  }
340
341  /*
342   * Fix bug: scroll move on selection
343   
344  if (!isFridaSection) {
345    mainScroll.addEventListener("selectstart", () => {
346      main.style.overflowX = "hidden";
347      main.style.paddingBottom = "4.5px";
348    });
349
350    mainScroll.addEventListener("pointerup", () => {
351      main.style.overflowX = "auto";
352      main.style.paddingBottom = "0";
353    });
354  }*/
355  /*
356   * Footer clicks
357   */
358  const $footer = document.querySelector(".footer");
359  $footer?.addEventListener("click", (e) => {
360    if (e.target.matches(".footer.active")) $footer.classList.remove("active");
361    //if (e.target.tagName != "A") return;
362    //$footer.classList.remove("active");
363  });
364
365  /*
366   * Footer open button
367  const $footerOpenButton = document.querySelector(".footer__open-link");
368  $footerOpenButton?.addEventListener("click", () => {
369    $footer.classList.add("active");
370  });*/
371
372  /*
373   * Footer close button
374   */
375
376  const $footerCloseButton = document.querySelector(".footer__close-link");
377  $footerCloseButton?.addEventListener("click", () => {
378    $footer.classList.toggle("active");
379  });
380
381  const contentLastChild = document.querySelector(".hscroll > :nth-last-child(2)");
382
383  //const $footerOpenLink = document.querySelector(".footer__open-link");
384  // Bounce footer
385  const footerObserver = new IntersectionObserver(
386    (entries) => {
387      entries.forEach((entry) => {
388        if (entry.isIntersecting) {
389          $footer.classList.add(isPortrait ? "bounce-vertical" : "bounce");
390          setTimeout(() => {
391            $footer.classList.remove(isPortrait ? "bounce-vertical" : "bounce");
392          }, 1500);
393          return;
394        }
395      });
396    },
397    {
398      threshold: 1,
399    }
400  );
401
402  if (!isFridaSection) footerObserver.observe(contentLastChild);
403
404  contentLastChild?.addEventListener("wheel", (e) => {
405    if (isFridaSection) return;
406    if (e.deltaY > 0 || e.deltaX > 0) {
407      $footer.classList.add(isPortrait ? "bounce-vertical" : "bounce");
408      setTimeout(() => {
409        $footer.classList.remove(isPortrait ? "bounce-vertical" : "bounce");
410      }, 1500);
411    }
412  });
413
414  //  Close on escape
415  document.addEventListener("keyup", (e) => {
416    if (e.code !== "Escape") return;
417    const isFooterActive = document.querySelector(".footer.active");
418    const hasModalActive = document.querySelector(".modal.active");
419
420    if (isFooterActive && hasModalActive) return;
421    $footer.classList.remove("active");
422  });
423
424  /*
425   * Rules wheel
426   */
427  const $rulesContainer = document.querySelector(".section__rules-points");
428  $rulesContainer?.addEventListener("wheel", (e) => {
429    e.stopPropagation();
430  });
431
432  //Load section modules
433  if (isMusseumSection) {

434    import("./musseum.js").catch((error) => console.log("Error al cargar el módulo: ", error));
435  }
436
437  if (isFridaSection) {
438    import("./frida.js").catch((error) => console.log("Error al cargar el módulo: ", error));
439  }
440
441  if (isActivitiesSection) {
442    import("./activities.js").catch((error) => console.log("Error al cargar el módulo: ", error));
443  }
444
445  if (isVirtualSection) {
446    import("./virtual.js").catch((error) => console.log("Error al cargar el módulo: ", error));
447  }
448
449  /*
450   * Open hashed modal
451   */
452
453  const hashedModal = location.hash.replace("#", "");
454  const hasHashedModal = document.querySelector(`[data-open-modal="${hashedModal}"]`);
455  hasHashedModal?.click();
456  //Modal slugs
457const currentURL = new URL(location.href);
458const hasEnglishLanguage = !!currentURL.searchParams.get("lang");
459
460const SLUG = hasEnglishLanguage
461  ? {
462      about: "1093",
463      directory: "1758",
464      downloads: "2748",
465      videos: "3184",
466      plane: "1762",
467      request: "1099",
468      space: "1104",
469      bepart: "1101",
470      sponsors: "2202",
471      interesting: "3185",
472      sitemap: "1766",
473      privacy: "1096",
474    }
475  : {
476      about: "1091",
477      directory: "1757",
478      downloads: "2724",
479      videos: "3158",
480      plane: "1759",
481      request: "1097",
482      space: "1102",
483      bepart: "1100",
484      sponsors: "2153",
485      interesting: "3157",
486      sitemap: "1763",
487      privacy: "1095",
488    };
489
490
491
492const slugName = SLUG[location.hash.replace("#", "")] || false;
493
494if (slugName) {
495  const modalToOpen = document.querySelector(`[data-modal-name="${slugName}"]`);
496  modalToOpen.classList.add("active");
497}
498
499const modalLinks = document.querySelectorAll("[data-open-modal]");
500
501modalLinks?.forEach((modalLink) => {
502  modalLink.addEventListener("click", () => {
503    for (const key in SLUG) {
504      if (SLUG[key] === modalLink.dataset.openModal) {
505        location.hash = key;
506        break;
507      }
508    }
509  });
510});
511
512});