'ın kendi üstündeyken // React sunucudan gelen düğümde kendi basmadığı bir öznitelik bulup // "A tree hydrated but some attributes ... didn't match" hatası veriyordu. // React ve 'yi bu karşılaştırmanın dışında tutuyor — yukarıda // aynı script'in eklediği js-fx sınıfı da bu yüzden hiç uyarı üretmedi. // // suppressHydrationWarning ÇÖZÜM DEĞİL: uyarıyı susturur, uyuşmazlığı // olduğu yerde bırakır. Bayrağı React'in karşılaştırmadığı bir düğüme // taşımak uyuşmazlığın kendisini ortadan kaldırıyor. // // CSS tarafı artık [data-stuck] #site-header. Özgüllük (1,1,0) — eski // #site-header[data-stuck] ile birebir aynı, yani globals.css'teki // "iki seçici" gerekçesi olduğu gibi geçerli. function onScroll() { if (window.scrollY > 8) d.documentElement.setAttribute('data-stuck', ''); else d.documentElement.removeAttribute('data-stuck'); scheduleRevealCheck(); } // Sekme arkaya alınınca KARUSELİ durdur — vis'i yalnızca güverteler veriyor, // dönen ifade arkada da dönüyor. Görünmeyen bir karusel için her geçişte // bir düzen hesaplamanın karşılığı yok, ve tarayıcı arka plan sayacını // kısınca JS ile CSS çubuğu birbirinden kopuyor. function onVisibility() { for (var i = 0; i < nodes.length; i++) if (nodes[i].vis) nodes[i].vis(d.hidden); } function run() { // Gezinmeden artakalanlar: düğümü gitmiş sayaçlar sussun, kayıt şişmesin. sweep(); // Gözlemcinin kendisi düğüme değil sayfaya ait; her koşuda yenileniyor. if (io) { io.disconnect(); io = null; } if (revealFrame) { window.cancelAnimationFrame(revealFrame); revealFrame = 0; } revealTargets = []; var reduced = matchMedia('(prefers-reduced-motion: reduce)').matches; // --- kaydırınca ortaya çıkma // // Durum SINIF değil ÖZNİTELİK ile işaretleniyor: data-in, data-stuck. // Sebebi bir yarış: ekranın üstündeki öğeler için gözlemci React // hidrasyondan ÖNCE tetikleniyor. className değişseydi React sunucudan // gelen HTML ile kendi props'unu farklı görüp konsola // "hydration mismatch" basardı. React bu öznitelikleri hiç basmıyor, // dolayısıyla karşılaştırmaya da girmiyorlar. // İLK EKRANDAKİ İÇERİK GİZLENMEZ. // // Kaydırma-reveal'i yalnızca kaydırılarak VARILAN içerik için anlamlı. // İlk ekranda zaten duran bir şeyi gizleyip beklemek onu "geç gelen" ve // bozuk gösteriyor; ayrıca LCP adayı o bölgede olduğunda tarayıcı // görünmeyen ögeyi saymadığı için ölçümü de bozuyor. // // Hangi bloğun ilk ekranda olduğu KODA YAZILAMAZ, ekran yüksekliğine // göre değişiyor. Ölçüldü (1440 genişlik, grup ızgarasının tepesi): // // yükseklik 800 -> tepe 850, ekranın ALTINDA -> kaydırınca gelir // yükseklik 900 -> tepe 850, ekranda -> anında görünür // yükseklik 1080 -> tepe 824, ekranda -> anında görünür // // Eskiden karar yalnızca gözlemciye bırakılmıştı ve rootMargin'in -8% // payı yüzünden 900'de ızgara EKRANDA ama opacity 0 kalıyordu: katlamanın // altında boş bir şerit, ancak kaydırınca beliriyor. 1080'de sorun hiç // görünmüyordu, yani hata ekran yüksekliğine göre var olup yok oluyordu. // // Karar artık konumdan: ilk koşuda ekranda olan geçişsiz açılıyor, // altında kalan gözlemciye gidiyor. // data-instant geçişi kapatıyor — ilk ekrandaki öge belirmez, VARDIR. var showNow = function (el) { markReveal(el, true); }; var targets = d.querySelectorAll('[data-reveal]:not([data-in])'); if (reduced || !('IntersectionObserver' in window)) { for (var i = 0; i < targets.length; i++) showNow(targets[i]); } else { io = new IntersectionObserver(function (entries) { entries.forEach(function (e) { // Kesişme örneklemesi kaçsa bile görünümün üstüne geçmiş içerik // kapalı kalmaz. Normal yol yine isIntersecting. if (!e.isIntersecting && e.boundingClientRect.top >= 0) return; markReveal(e.target, !e.isIntersecting); forgetReveal(e.target); }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }); for (var j = 0; j < targets.length; j++) { // Sınır gözlemcininki DEĞİL, çıplak görüş alanı: gözlemci alttan pay // kesiyor ve o pay tam olarak ekranda-ama-gizli durumunu üretiyordu. if (targets[j].getBoundingClientRect().top < window.innerHeight) showNow(targets[j]); else { revealTargets.push(targets[j]); io.observe(targets[j]); } } } // --- header kaydırma durumu (bkz. onScroll) onScroll(); if (!globalsBound) { addEventListener('scroll', onScroll, { passive: true }); addEventListener('resize', scheduleRevealCheck, { passive: true }); addEventListener('pageshow', scheduleRevealCheck); d.addEventListener('visibilitychange', onVisibility); globalsBound = true; } // --- hero'daki dönen ifade init(d.querySelectorAll('[data-rotate]'), initRotate, reduced); // --- hero karuseli init(d.querySelectorAll('[data-carousel]'), initDeck, reduced); } function initRotate(rot, reduced) { var items = rot.children; if (reduced || items.length < 2) return; // Açık ifadeyi DOM söylüyor. Bugün tarama hep 0 buluyor (sunucu ilk // öğeyi is-on basıyor, known() taze DOM'da tek başlatmayı garantiliyor); // kod o garantiye BAĞLI olmasın diye duruyor. var k = 0; for (var i = 0; i < items.length; i++) { if (items[i].classList.contains('is-on')) { k = i; break; } } var tick = setInterval(function () { items[k].classList.remove('is-on'); k = (k + 1) % items.length; items[k].classList.add('is-on'); }, 2600); return { stop: function () { clearInterval(tick); } }; } /** * Karusel. Sunucudan gelen HTML zaten geçerli bir durum (ilk kare açık, * geri kalanı inert). Buradaki iş sadece o durumu ilerletmek; script hiç * çalışmazsa karusel duran tek bir görsele dönüşür, kırılmaz. */ function initDeck(deck, reduced) { var frames = deck.querySelectorAll('.hero-slide'); if (frames.length < 2) return; var dots = deck.querySelectorAll('.hero-dots button[data-go]'); var frame = deck.querySelector('.hero-frame'); var toggle = deck.querySelector('[data-carousel-toggle]'); var live = deck.querySelector('[data-carousel-live]'); // Süre MÜŞTERİNİN AYARI: blok onu data-interval'e yazıyor (ms), burada // sabit yok — yedek yalnızca öznitelik hiç yoksa devreye giriyor ve o // sayı da bu dosyada değil, lib/heroInterval.ts'te. // // HER OKUMADA YENİDEN, başlangıçta bir kez değil. Sebep önizleme: // müşteri süreyi değiştirdiğinde React özniteliği güncelliyor ama // güverte düğümü yerinde kalıyor (yapı imzası dizi uzunluklarına bakıyor, // sayı değişimi onu kıpırdatmıyor — PreviewDocument'ta yazılı), yani bir // kez okunan değer orada bayatlardı. // // ADI stepMs, çünkü aşağıdaki tuş işleyicisinde ±1 taşıyan başka bir // step var. Bu gövde bir şablon dizesinin içinde, yani ESLint'in // no-shadow'u buraya HİÇ bakmıyor; ayrımı ad yapmak zorunda. // // Kapı > 0, || DEĞİL: ikisi de eksik/boş/NaN'ı eliyor ama || eksi // bir sayıyı geçiriyor ve setInterval(fn, -9000) 4ms'ye kırpılıp karuseli // çıldırtıyor. Bugün yazan tek taraf heroIntervalMs (3000-30000), yani // erişilemez — ama okuyanın kapısı yazanın vaadine değil kendi // ölçüsüne dayanmalı. var stepMs = function () { var ms = +deck.getAttribute('data-interval'); return ms > 0 && ms !== Infinity ? ms : 6000; }; // Açık kareyi DOM söylüyor; initRotate ile aynı gerekçe. var at = 0; for (var s = 0; s < frames.length; s++) { if (frames[s].classList.contains('is-on')) { at = s; break; } } var tick = null; deck.setAttribute('data-ready', ''); // Alt yazının sağda ne kadar yer bırakacağını TAHMİN etme — kontrol // şeridinin gerçek genişliğini ölç. Şerit sabit genişlikte, çünkü her // an tam bir nokta geniş durumda. Elle ayarlanan bir clamp kare sayısı // değişince sessizce yanlış oluyordu. var bar = deck.querySelector('.hero-dots'); if (bar) deck.style.setProperty('--hero-controls', Math.ceil(bar.getBoundingClientRect().width) + 'px'); // NİYET (wantPlay, yalnızca düğme yazar) ile FIRSAT (fare, odak, sekme) // ayrı; nedeni dosya başında. byHidden şu ANKİ sekme durumundan başlıyor: // linke tıklayıp hemen başka sekmeye geçende yeni karusel ilk // visibilitychange'e kadar arka planda dönerdi. var wantPlay = !reduced; var byHover = false, byFocus = false, byHidden = d.hidden; var running = function () { return wantPlay && !byHover && !byFocus && !byHidden; }; var show = function (i, announce) { at = (i + frames.length) % frames.length; for (var f = 0; f < frames.length; f++) { var on = f === at; frames[f].classList.toggle('is-on', on); if (on) frames[f].removeAttribute('inert'); else frames[f].setAttribute('inert', ''); var dot = dots[f]; if (!dot) continue; // Sınıfı önce kaldır, sonra yeniden ekle: sayaç çubuğunun // animasyonu ancak böyle baştan başlıyor. Arada bir düzen // okuması gerekiyor, yoksa tarayıcı iki değişikliği birleştirip // hiçbir şey olmamış sayıyor. dot.classList.remove('is-on'); dot.removeAttribute('aria-current'); if (on) { void dot.offsetWidth; dot.classList.add('is-on'); dot.setAttribute('aria-current', 'true'); } } // Duyuru yalnızca kullanıcı bir şey yaptığında. Kendiliğinden dönerken // HER GEÇİŞTE konuşmak ekran okuyucuyu kullanılamaz hale getirir — ve // aralık artık müşterinin ayarı, 3 saniye de olabilir. if (announce && live) live.textContent = (at + 1) + ' / ' + frames.length; }; var stop = function () { if (tick) tick = clearInterval(tick); }; // Sayacı da çubuğu da BURASI yazıyor: data-auto "geri sayım var", // data-paused "o geri sayım şu an durdu". İkisi ayrı yerlerden yazılınca // çubuk sayacı yalanlıyordu; ayrıntısı dosya başında. var apply = function () { stop(); // Sayaç ile çubuk TEK OKUMADAN: ikisi ayrı ayrı okusaydı araya giren // bir düzenleme çubuğu sayaçla farklı süreye kurabilirdi. var ms = stepMs(); deck.style.setProperty('--hero-interval', ms + 'ms'); if (wantPlay) deck.setAttribute('data-auto', ''); else deck.removeAttribute('data-auto'); if (!running()) return deck.setAttribute('data-paused', ''); deck.removeAttribute('data-paused'); tick = setInterval(function () { show(at + 1); }, ms); }; // Durum değişti. Geçici duraklarken CSS çubuğu donuyor ama JS sayacı // donmuyor; devam ederken ikisini birden baştan başlatmak tek tutarlı // davranış. var sync = function () { if (running()) show(at); apply(); }; // Elle geçiş: sayacı baştan başlat — duraklamışken apply() zaten kurmaz. var goTo = function (i) { show(i, true); apply(); }; for (var q = 0; q < dots.length; q++) { dots[q].addEventListener('click', function () { goTo(+this.getAttribute('data-go')); }); } // Ok tuşları: üç düğme bir grup gibi davransın. deck.addEventListener('keydown', function (e) { var step = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0; if (!step) return; e.preventDefault(); goTo(at + step); if (dots[at]) dots[at].focus(); }); // WCAG 2.2.2: kendiliğinden değişen içeriğin durdurulabilir olması // gerekiyor ve fareyle üstüne gelmek bunu karşılamıyor — klavye ve // ekran okuyucu kullanıcısına ulaşmıyor. Görünür düğme şart. if (toggle) { // İki etiket de paint()'in YAZMADIĞI özniteliklerden okunuyor: // aria-label çalışma anında değişiyor, kendi kaynağı olamaz. var labelPause = toggle.getAttribute('data-label-pause'); var labelPlay = toggle.getAttribute('data-label-play'); // aria-pressed YOK, ikonu data-playing seçiyor: gerekçe dosya başında. var paint = function () { if (wantPlay) toggle.setAttribute('data-playing', ''); else toggle.removeAttribute('data-playing'); // Öznitelik yoksa etikete hiç dokunma: setAttribute null'u "null" // METNİ olarak basar. aria-label'a düşmek çözüm değil, hata oydu. if (labelPause && labelPlay) { toggle.setAttribute('aria-label', wantPlay ? labelPause : labelPlay); } }; toggle.addEventListener('click', function () { wantPlay = !wantPlay; if (wantPlay) { // İmleç güvertenin üstünde çünkü kullanıcı düğmeye TIKLADI; niyet // kendi ürettiği sinyale yenilmesin. byFocus sıfırlanmıyor (inert // tehlikesi — dosya başı); odak KAREDEYSE düğmeye ALINIYOR, çünkü // her tarayıcı tıklanan düğmeyi odaklamıyor ve odağı kareden // çıkarmak zaten doğru yer. byHover = false; // toggle.focus() focusout -> focusTo -> sync() zincirini SENKRON // çalıştırıyor: aşağıdaki sync() tekrar, ilk uygulama değil (ölçüldü, // bu yolda setInterval 2 / clearInterval 1, diğer yollarda 1 / 0). // Zararsız, ama araya konacak satır sync SONRASI duruma bakar. if (frame.contains(d.activeElement)) toggle.focus(); } paint(); sync(); }); paint(); } // Yalnızca fare. Dokunmatikte pointerleave çoğu zaman hiç gelmiyor, // yani parmakla bir kez dokunan kullanıcı karuseli kalıcı durdururdu. // Bayrak zaten o değerdeyse dokunma: "sürdür" byHover'ı sıfırladıktan // sonra gelen pointerleave geri sayımı boşuna başa sarmasın. deck.addEventListener('pointerenter', function (e) { if (e.pointerType === 'mouse' && !byHover) { byHover = true; sync(); } }); deck.addEventListener('pointerleave', function (e) { if (e.pointerType === 'mouse' && byHover) { byHover = false; sync(); } }); // Odak duraklatması KARELER için, kontroller için değil — nedeni dosya // başında. Değer değişmediyse dokunma: noktalar arasında Tab'lamak geri // sayımı başa sarmasın. var focusTo = function (el) { var v = !!el && frame.contains(el); if (v === byFocus) return; byFocus = v; sync(); }; deck.addEventListener('focusin', function (e) { focusTo(e.target); }); // relatedTarget odağı ALAN öğe. null ise odak sayfadan tamamen çıkmış // demektir (adres çubuğu, başka pencere) — karede değil. deck.addEventListener('focusout', function (e) { focusTo(e.relatedTarget); }); // Parmakla/imleçle kaydırma. Jestin karusele ait olmasını globals.css // sağlıyor (.hero-deck, touch-action) — o bildirim olmadan bu blok // dokunmatikte hiç çalışmıyor; gerekçe dosya başında. Basma noktası // işaretçi KİMLİĞİYLE saklanıyor ki bırakma aynı işaretçiye ait olsun; // çok parmakta ikinci parmak birincinin ölçümünü bozmasın. var from = null; // Bastırma işareti BAYRAK DEĞİL ZAMAN, ve pointerdown'da da sıfırlanıyor: // beklenen tıklama hiç gelmeyebiliyor, gelmezse eski bayrak kullanıcının // SONRAKİ tıklamasını yutuyordu. Ölçümü ve iki kapının gerekçesi dosya // başında. var swipedAt = 0; deck.addEventListener('pointerdown', function (e) { swipedAt = 0; // focusInFrame: odak kaydırma başlarken KAREDE miydi. Soru BASMA anında // soruluyor, bırakma anında değil: fotoğrafa basmak odağı daha // mousedown'da body'ye düşürüyor (ölçüldü), yani pointerup'ta sormak // "odak karedeydi" bilgisini kaçırıyor. from = { id: e.pointerId, x: e.clientX, y: e.clientY, t: e.timeStamp, focusInFrame: frame.contains(d.activeElement) }; }); var endDrag = function () { from = null; }; deck.addEventListener('pointercancel', endDrag); // Güverteyi terk eden basma da orijini düşürsün. Farede şart: yakalama // olmadığı için dışarıda bırakılan basmanın pointerup'ı buraya hiç // gelmiyor, orijin ise duruyordu — ve farede pointerId hep 1 olduğu için // DIŞARIDA başlayıp güvertede biten bir sonraki jest o bayat orijinle // eşleşip kareyi kullanıcı kaydırmadan atlatıyordu (ölçüldü, dosya başı). // KABARCIK evresi şart: pointerleave kabarcık yapmıyor, yani bu yalnızca // güverteyi terk eden işaretçiyi görüyor — yakalama evresinde olsaydı // fotoğraftan alt yazıya geçen jest de iptal olurdu (ölçüldü). Dokunmatik // yolu bozulmuyor, orada pointerleave pointerup'tan SONRA geliyor. deck.addEventListener('pointerleave', endDrag); deck.addEventListener('pointerup', function (e) { if (!from || from.id !== e.pointerId) return endDrag(); var dx = e.clientX - from.x; var dy = e.clientY - from.y; var quick = e.timeStamp - from.t < 800; var focusInFrame = from.focusInFrame; endDrag(); if (Math.abs(dx) < 40 || Math.abs(dx) < Math.abs(dy) * 1.5 || !quick) return; swipedAt = e.timeStamp; goTo(at + (dx < 0 ? 1 : -1)); // Ok tuşlarıyla aynı gerekçe (dosya başı): odağı inert olacak karede // bırakmak onu kaybetmek demek. Kare dışındaki odağa dokunulmuyor. if (focusInFrame && dots[at]) dots[at].focus(); }); // Kaydırmanın sonundaki tıklama bağlantıyı açmasın. Yakalama evresinde, // çünkü hedefin inert olmasına güvenmek tarayıcıya bağlı bir varsayım. // Bu iş imleç yolunun: dokunmatikte tıklama sentezlenmiyor (dosya başı). // Bayat işaret bastırmıyor; ölçülen gecikme 0 ms, yani 700ms'lik pencere // yalnızca jestini aşmış işareti eliyor. deck.addEventListener('click', function (e) { if (!swipedAt) return; var fresh = e.timeStamp - swipedAt < 700; swipedAt = 0; if (!fresh) return; e.preventDefault(); e.stopPropagation(); }, true); // SÜRE DEĞİŞİRSE HEMEN UYGULA — ve bu satır YALNIZCA ÖNİZLEME için var. // Sitede data-interval hiç değişmiyor (sayfa yeniden basılır), yani // gözlemci orada hiç tetiklenmiyor. Panelde ise güverte düğümü // düzenleme boyunca yerinde duruyor: React özniteliği güncelliyor ama // run() düğümü known() gördüğü için initDeck'i bir daha çağırmıyor ve // apply() kendiliğinden koşmuyor. Onsuz, çerçevede oynata BASIP SONRA // süreyi değiştiren müşteri eski hızı izlemeye devam ediyordu — bir // sonraki hover/odak/nokta tıklamasına kadar, yani belki hiç. // // Süzgeç tek özniteliğe bağlı: apply() data-auto/data-paused ve // satır içi stil yazıyor, süzgeç olmasaydı kendi yazdığını duyup // sonsuz döngüye girerdi. var watch = new MutationObserver(apply); watch.observe(deck, { attributes: true, attributeFilter: ['data-interval'] }); apply(); // Kayıttaki stop SÜPÜRME temizliği: düğüm DOM'dan düşünce sayaç da // gözlemci de susmalı. stopun KENDİSİNE eklenemez — onu apply() de // çağırıyor ve gözlemci ilk yeniden kurulumda ölürdü. return { stop: function () { stop(); watch.disconnect(); }, vis: function (hidden) { byHidden = hidden; sync(); }, }; } window.__targazFx = run; if (d.readyState !== 'loading') run(); else d.addEventListener('DOMContentLoaded', run); })();

Genleşme Tankları

Genleşme Tankı