al final
* del body, despues de que el HTML de la landing este en el DOM.
*/
(function () {
"use strict";
/* ---------------------------------------------------------------
* 0. MARCAR EL CONTENEDOR "RAIZ" DE CADA RAMA -- EN EL PADRE
* ---------------------------------------------------------------
* Los navegadores (Chromium confirmado por prueba directa) NO
* permiten que un elemento con container-type consulte su PROPIO
* ancho con @container: la regla @container que le aplica a ESE
* MISMO elemento simplemente no se activa nunca, sin importar
* que su ancho cumpla la condicion. Por eso container-type hay
* que declararlo en el PADRE del elemento .stk2-container /
* .stk2-grid-system (que es el que trae las reglas @container
* que dependen de su propio ancho), nunca en el mismo elemento.
*/
function markContainerQueryRoots() {
var selector = '.stk2-grid-system, .stk2-container, .stk2-container-desktop, [class*="stk2-grid-system"], [class*="stk2-container"]';
var all = document.querySelectorAll(selector);
all.forEach(function (el) {
if (!el.parentElement) return;
var ancestorMatch = el.parentElement.closest(selector);
if (!ancestorMatch) {
el.parentElement.classList.add("cq-root");
}
});
}
/* ---------------------------------------------------------------
* 1. GRID DINAMICO
* ---------------------------------------------------------------
* Ahora "cq-root" esta en el PADRE del .stk2-container (ver
* arriba), asi que medir su propio ancho aqui es seguro: el
* padre no tiene max-width dependiente de esta misma variable,
* no hay bucle de retroalimentacion. Los .stk2-container hijos
* heredan --grid-parent-width por herencia normal de CSS.
*/
function initGridWidthFix() {
var roots = document.querySelectorAll(".cq-root");
if (!roots.length || !("ResizeObserver" in window)) return;
var ro = new ResizeObserver(function (entries) {
entries.forEach(function (entry) {
var width = entry.contentRect.width;
if (width > 0) {
entry.target.style.setProperty("--grid-parent-width", width + "px");
}
});
});
roots.forEach(function (el) {
ro.observe(el);
});
}
/* ---------------------------------------------------------------
* 2. ANIMACIONES DE APARICION AL SCROLL (FadeInItem)
* ------------------------------------------------------------- */
function initFadeInOnScroll() {
var fadeItems = document.querySelectorAll(
'[class*="FadeInItem_withFadeAnimation"], [class*="fadeItem"]'
);
if (!fadeItems.length) return;
// Arranca oculto: le quitamos la clase "visible" que vino
// horneada en el HTML estatico, y la re-agregamos con el observer.
fadeItems.forEach(function (el) {
el.classList.forEach(function (c) {
if (/visible/i.test(c)) el.classList.remove(c);
});
el.style.opacity = "0";
el.style.transform = "translateY(24px)";
el.style.transition =
"opacity .6s ease, transform .6s ease";
});
if (!("IntersectionObserver" in window)) {
// Fallback sin soporte: mostrar todo de una
fadeItems.forEach(function (el) {
el.style.opacity = "1";
el.style.transform = "none";
});
return;
}
var io = new IntersectionObserver(
function (entries, obs) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.style.opacity = "1";
entry.target.style.transform = "none";
obs.unobserve(entry.target);
}
});
},
{ threshold: 0.15, rootMargin: "0px 0px -10% 0px" }
);
fadeItems.forEach(function (el) {
io.observe(el);
});
}
/* ---------------------------------------------------------------
* 3. VIDEO: reproducir al entrar en pantalla, pausar al salir
* ------------------------------------------------------------- */
function initVideoAutoplay() {
var videos = document.querySelectorAll("video");
if (!videos.length || !("IntersectionObserver" in window)) return;
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
var video = entry.target;
if (entry.isIntersecting) {
// preload="none" en el HTML original: forzamos carga
// solo cuando el video entra en pantalla (ahorra ancho de banda)
if (video.preload === "none") {
video.preload = "auto";
video.load();
}
var playPromise = video.play();
if (playPromise && playPromise.catch) {
playPromise.catch(function () {
/* autoplay bloqueado por el navegador: no pasa nada,
el poster se queda visible */
});
}
} else {
video.pause();
}
});
},
{ threshold: 0.25 }
);
videos.forEach(function (video) {
video.muted = true;
video.playsInline = true;
io.observe(video);
});
}
/* ---------------------------------------------------------------
* Init
* ------------------------------------------------------------- */
function init() {
markContainerQueryRoots();
initGridWidthFix();
initFadeInOnScroll();
initVideoAutoplay();
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();
