https://morfoz.ai/public/sekme-kaydirici.js?v=1790769371

1/**
2 * YATAY SEKME ŞERİDİ — kaydırılabilir olduğunu GÖSTERİR.
3 *
4 * NEDEN VAR: asistan düzenleme modalinde 9 sekme var ve şerit
5 * `overflow-x:auto` + gizli kaydırma çubuğuyla çiziliyordu. Yani şerit
6 * teknik olarak kaydırılıyordu ama:
7 *   - hiçbir görsel işaret yoktu (çubuk gizli), sağdaki sekmelerin VAR
8 *     olduğu anlaşılmıyordu;
9 *   - farede yatay kaydırma ancak Shift+tekerlek ile mümkün, kimse
10 *     denemiyor;
11 *   - sekme klavyeyle/kod ile seçilince görünür alana gelmiyordu.
12 * Kullanıcının tarifi: "sekmeler çok arttı ve scroll etmiyorsun, ekrana
13 * sığmıyor".
14 *
15 * ⛔ İŞARETLEME DEĞİŞMİYOR. Şeridin kendi HTML'ine dokunulmuyor; sarmalayıcı
16 *    ve oklar çalışma anında ekleniyor. Böylece sekme ekleyen/gizleyen
17 *    mevcut kod (bkz. assistant-flows.js) olduğu gibi çalışmaya devam
18 *    ediyor.
19 *
20 * ⛔ TAŞMA YOKSA HİÇBİR ŞEY GÖRÜNMEZ. Geniş ekranda ok da gölge de
21 *    çizilmiyor — var olmayan bir sorunun arayüzü olmamalı.
22 */
23
24const SARMAL = 'sk-sarmal';
25const _bagli = new WeakSet();
26
27/**
28 * @param {HTMLElement} serit `overflow-x:auto` olan sekme kabı
29 * @param {string} aktifSecici görünür alana çekilecek sekmenin seçicisi
30 */
31export function kaydiriciBagla(serit, aktifSecici = '.asst-edit-tab.active') {
32  if (!serit || _bagli.has(serit)) return;
33  _bagli.add(serit);
34  _stilKur();
35
36  const sarmal = document.createElement('div');
37  sarmal.className = SARMAL;
38  serit.parentNode.insertBefore(sarmal, serit);
39  sarmal.appendChild(serit);
40
41  const ok = (yon) => {
42    const b = document.createElement('button');
43    b.type = 'button';
44    b.className = `sk-ok sk-ok-${yon}`;
45    b.tabIndex = -1;                       // klavye zaten sekmeleri geziyor
46    b.setAttribute('aria-hidden', 'true');
47    b.innerHTML = yon === 'sol' ? '‹' : '›';
48    b.addEventListener('click', () => {
49      serit.scrollBy({ left: yon === 'sol' ? -160 : 160, behavior: 'smooth' });
50    });
51    sarmal.appendChild(b);
52    return b;
53  };
54  const solOk = ok('sol');
55  const sagOk = ok('sag');
56
57  function durumTazele() {
58    const tasma = serit.scrollWidth - serit.clientWidth;
59    // 2px pay: kesirli piksel genişliklerinde tasma 0.5 çıkıp okları
60    // sonsuza kadar açık bırakabiliyor.
61    const acik = tasma > 2;
62    sarmal.classList.toggle('sk-tasiyor', acik);
63    solOk.hidden = !acik || serit.scrollLeft <= 1;
64    sagOk.hidden = !acik || serit.scrollLeft >= tasma - 1;
65  }
66
67  // DİKEY TEKERLEK → YATAY KAYDIRMA. Asıl eksik olan buydu: fare
68  // kullananların çoğu Shift+tekerleği bilmiyor.
69  serit.addEventListener('wheel', (e) => {
70    if (serit.scrollWidth <= serit.clientWidth) return;
71    // Yatay jest zaten geliyorsa (trackpad) karışma.
72    if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
73    e.preventDefault();
74    serit.scrollLeft += e.deltaY;
75  }, { passive: false });
76
77  serit.addEventListener('scroll', durumTazele, { passive: true });
78  try {
79    new ResizeObserver(durumTazele).observe(serit);
80  } catch { window.addEventListener('resize', durumTazele); }
81
82  // Seçili sekme görünür alana gelsin: bir sekme kodla seçildiğinde
83  // (bildirimden, "kaydet"ten sonra) şeridin dışında kalabiliyordu.
84  const gorunurYap = () => {
85    const a = serit.querySelector(aktifSecici);
86    try { a?.scrollIntoView({ inline: 'nearest', block: 'nearest' }); } catch {}
87    durumTazele();
88  };
89  serit.addEventListener('click', () => setTimeout(gorunurYap, 0));
90  try {
91    new MutationObserver(gorunurYap).observe(serit, {
92      subtree: true, attributes: true, attributeFilter: ['class', 'style'],
93    });
94  } catch { /* eski tarayıcı: tıklama yolu yine çalışıyor */ }
95
96  durumTazele();
97  gorunurYap();
98}
99
100function _stilKur() {
101  if (document.getElementById('sekmeKaydiriciStil')) return;
102  const s = document.createElement('style');
103  s.id = 'sekmeKaydiriciStil';
104  s.textContent = `
105    .${SARMAL}{position:relative;min-width:0}
106    /* Kenar solmaları: sağda/solda daha fazla sekme olduğunu söyler.
107       Yalnız taşma varken çiziliyor. */
108    .${SARMAL}.sk-tasiyor::before,
109    .${SARMAL}.sk-tasiyor::after{
110      content:'';position:absolute;top:0;bottom:1px;width:34px;
111      pointer-events:none;z-index:2}
112    .${SARMAL}.sk-tasiyor::before{left:0;
113      background:linear-gradient(to right,var(--bg-soft,#F2EEF8),transparent)}
114    .${SARMAL}.sk-tasiyor::after{right:0;
115      background:linear-gradient(to left,var(--bg-soft,#F2EEF8),transparent)}
116    .sk-ok{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
117      width:24px;height:24px;padding:0;line-height:1;
118      display:flex;align-items:center;justify-content:center;
119      border:1px solid var(--border,rgba(58,28,89,.14));border-radius:100px;
120      background:var(--surface,#fff);color:var(--text-secondary,#6B5F7E);
121      font-size:15px;cursor:pointer;
122      box-shadow:0 1px 4px rgba(31,20,48,.12)}
123    .sk-ok:hover{color:var(--brand,#6B2387);border-color:var(--brand,#6B2387)}
124    .sk-ok[hidden]{display:none}

125    .sk-ok-sol{left:2px}
126    .sk-ok-sag{right:2px}
127  `;
128  document.head.appendChild(s);
129}