(function(){ var SEL = 'img.object-cover[src*="/galeria/"],img.object-cover[src*="/atrakcje/kino-360/Seanse/"],img.object-cover[src*="/wydarzenia/"]'; /* --- Bufor zapisów do DOM-u --------------------------------------------- Ten skrypt oznacza atrybutami węzły, które renderuje React. Robione od razu, psuło uwadnianie: React zastawał w HTML-u atrybuty, których sam nie wystawił, i porzucał całe poddrzewo („A tree hydrated but some attributes ... didn't match"). Dlatego przed uwodnieniem zapisy trafiają do kolejki, a wypisujemy je dopiero po zdarzeniu ap:hydrated (patrz components/SygnalHydracji.tsx). Nasłuchy i obserwatory działają od razu — zmiana dotyczy wyłącznie momentu DOTKNIĘCIA drzewa. */ var poHydracji = false; var kolejka = []; /* Sekcje już podpięte pod obserwatora wejścia. */ var widziane = typeof WeakSet === 'function' ? new WeakSet() : { has: function(){ return false; }, add: function(){} }; function wykonaj(z){ if (z.t === 'attr') z.el.setAttribute(z.n, ''); else if (z.t === 'attr-') z.el.removeAttribute(z.n); else if (z.t === 'class') z.el.classList.add(z.n); } function zapisz(el, typ, nazwa){ var z = { el: el, t: typ, n: nazwa }; if (poHydracji) wykonaj(z); else kolejka.push(z); } function oproznij(){ if (poHydracji) return; poHydracji = true; for (var i = 0; i < kolejka.length; i++) wykonaj(kolejka[i]); kolejka.length = 0; } /* Sygnał z SygnalHydracji pada, gdy uwodni się KORZEŃ. Wyspy odroczone (kafelki repertuaru, FAQ, aktualności) kończą chwilę później — zmierzone 45 ms w trybie deweloperskim. Zapis w tym oknie trafiałby w węzeł, którego React jeszcze nie przejął, więc dokładamy krótką zwłokę. Kosztuje ona tyle, że poświata ładowania gaśnie o ćwierć sekundy później; zysk to brak przerwanego uwadniania całych gałęzi. */ window.addEventListener('ap:hydrated', function(){ setTimeout(oproznij, 300); }, { once: true }); /* Bezpiecznik: gdyby sygnał nie dotarł (błąd JS, trasa bez providera), po dwóch sekundach i tak wypisujemy — lepiej ostrzeżenie w konsoli niż zdjęcia, które na zawsze zostają pod poświatą ładowania. */ setTimeout(oproznij, 2000); var near = window.IntersectionObserver ? new IntersectionObserver(function(entries){ for (var i = 0; i < entries.length; i++) { var e = entries[i]; if (e.isIntersecting) { zapisz(e.target, 'attr', 'data-ap-near'); /* Zdjęcie z pamięci podręcznej jest gotowe, zanim ktokolwiek je zobaczy. Oznaczamy je DOPIERO, gdy zbliży się do kadru — patrz komentarz przy watch(). */ if (e.target.complete && e.target.naturalWidth > 0) { zapisz(e.target, 'attr', 'data-ap-loaded'); near.unobserve(e.target); } } else { zapisz(e.target, 'attr-', 'data-ap-near'); } } }, { rootMargin: '300px' }) : null; function done(){ zapisz(this, 'attr', 'data-ap-loaded'); if (near) near.unobserve(this); } function watch(img){ /* complete bez naturalWidth kłamie: obraz z loading="lazy", który jeszcze nie ruszył, bywa raportowany jako complete (tak robi WebKit) i tracił przez to zarówno obserwator, jak i placeholder pod spodem. Zdjęcia gotowe od razu (z pamięci podręcznej) NIE są oznaczane w tym miejscu, choć byłoby to najprostsze. Powód: skrypt dotyka wtedy węzłów, które React uwadnia dopiero później — kafelki repertuaru leżą pod zgięciem i należą do osobnej wyspy. Taka wyspa zastawała atrybut, którego nie ma w jej własnym renderze, i sypała ostrzeżeniem o niezgodności uwodnienia. Oznaczenie przejmuje obserwator zbliżenia: odpala się dopiero, gdy zdjęcie wchodzi w okolicę kadru, a wtedy jego wyspa jest już uwodniona. Poświata pod zdjęciem i tak jest widoczna wyłącznie w kadrze, więc gość nie zauważy różnicy. */ if (img.complete && img.naturalWidth > 0 && !near) { zapisz(img, 'attr', 'data-ap-loaded'); return; } img.addEventListener('load', done); img.addEventListener('error', done); if (near) near.observe(img); else zapisz(img, 'attr', 'data-ap-near'); } /* Wejście treści przy przewijaniu (ScrollMotionItem). Jeden obserwator na całą stronę: element, który wjedzie w kadr, dostaje klasę i przestaje być obserwowany. W trakcie przewijania nie liczy się tu nic co klatkę. Klasę na ustawiamy od razu, jeszcze przed — CSS ukrywa elementy dopiero, gdy JavaScript działa, więc bez niego wszystko jest widoczne, a nic nie mignie przy pierwszym malowaniu. */ if (window.IntersectionObserver) document.documentElement.classList.add('ap-reveal'); var reveal = window.IntersectionObserver ? new IntersectionObserver(function(entries){ for (var i = 0; i < entries.length; i++) { if (!entries[i].isIntersecting) continue; zapisz(entries[i].target, 'class', 'is-visible'); reveal.unobserve(entries[i].target); } /* -2%, nie -8%: przy -8% element, który kończy się w dolnych 72 px ekranu (przy 900 px wysokości), nie przecinał skurczonego korzenia i zostawał niewidoczny tak długo, jak długo użytkownik nie przewinął dalej. */ }, { rootMargin: '0px 0px -2% 0px' }) : null; var pending = 0; function sweep(){ pending = 0; var list = document.querySelectorAll(SEL); for (var i = 0; i < list.length; i++) watch(list[i]); if (!reveal) return; /* „Już obserwuję" trzymamy w pamięci skryptu, NIE w atrybucie na elemencie. Wcześniej każdy przebieg dopisywał data-ap-seen do wszystkich sekcji w dokumencie — także tych, które React uwadnia później (sekcje odroczone, FAQ, aktualności). Taka sekcja zastawała w HTML-u atrybut, którego nie ma w jej własnym renderze, i React porzucał uwadnianie całej gałęzi. WeakSet nie dotyka drzewa, więc problem znika u źródła. */ var wejscia = document.querySelectorAll('[data-ap-reveal]:not(.is-visible)'); for (var j = 0; j < wejscia.length; j++) { if (widziane.has(wejscia[j])) continue; widziane.add(wejscia[j]); reveal.observe(wejscia[j]); } } function schedule(){ if (!pending) pending = requestAnimationFrame(sweep); } function start(){ sweep(); new MutationObserver(schedule).observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ['src'] }); } /* Start NATYCHMIAST, nie na DOMContentLoaded. Skrypty Next.js mają atrybut defer, więc DOMContentLoaded czeka na ich pobranie — przy wolnym łączu zmierzyliśmy 9,2 s. Przez ten czas klasa ap-reveal już ukrywała sekcje, a obserwator, który ma je pokazać, jeszcze nie istniał: użytkownik widział puste ekrany. MutationObserver na łapie węzły w trakcie strumienia HTML-a, więc sekcje są obserwowane i odsłaniane od razu, gdy się pojawią. To samo dotyczy data-ap-near — bez tego nie pokazywał się nawet placeholder pod niedociągniętym zdjęciem. */ start(); if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', schedule); window.addEventListener('load', schedule); /* Bezpiecznik: gdyby obserwator z jakiegokolwiek powodu nie zadziałał (błąd skryptu, wyjątkowo wolne urządzenie), po 4 s odsłaniamy wszystko, co jest w kadrze. Lepiej stracić animację wejścia niż pokazać pustkę. */ var straznik = 0; function ratuj(){ var poz = document.querySelectorAll('[data-ap-reveal]:not(.is-visible)'); if (!poz.length) { clearInterval(straznik); return; } var h = window.innerHeight || 0; for (var i = 0; i < poz.length; i++) { var r = poz[i].getBoundingClientRect(); if (r.bottom > 0 && r.top < h) poz[i].classList.add('is-visible'); } } /* Bezpiecznik musi pilnować CAŁEJ strony, nie tylko pierwszego ekranu: w chwili t=4 s w kadrze zwykle nie ma jeszcze żadnej sekcji z animacją wejścia (pierwsza jest pod zgięciem), więc jednorazowy przebieg nie ratował niczego. Teraz sprawdzamy co 2 s przez pół minuty i dodatkowo przy przewijaniu — to kilka zapytań o siedem elementów, koszt pomijalny, a gwarancja, że nikt nigdy nie zobaczy pustego ekranu. */ setTimeout(function(){ ratuj(); straznik = setInterval(ratuj, 2000); setTimeout(function(){ clearInterval(straznik); }, 30000); window.addEventListener('scroll', ratuj, { passive: true }); }, 4000); })();