JavaScript API — WebBlocks UI

WBTheme WBModal WBDrawer WBDropdown WBTabs WBAccordion WBSidebar WBNavGroup WBToast WBPopover WBTooltip WBDismiss WBCommandPalette WBAjaxToggle Kurallar

Modül özeti

Modül	window.*	Temel metotlar
theme.js	WBTheme	setMode, setAccent, setPreset, setRadius, setDensity
modal.js	WBModal	open(id), close(id)
drawer.js	WBDrawer	open(id), close(id)
dropdown.js	WBDropdown	open(el), close(el)
tabs.js	WBTabs	activate(tabEl)
accordion.js	WBAccordion	open(itemEl), close(itemEl)
sidebar.js	WBSidebar	open(), close()
nav-group.js	WBNavGroup	open(groupEl), close(groupEl), init()
toast.js	WBToast	show(msg, opts), dismiss(toastEl)
popover.js	WBPopover	open(wrapperEl), close(wrapperEl), closeAll()
tooltip.js	WBTooltip	show(el), hide(el), hideAll()
dismiss.js	WBDismiss	dismiss(el)
command-palette.js	WBCommandPalette	open(id), close(id), register(id, opts)
ajax-toggle.js	WBAjaxToggle	handle(checkboxEl) — change olayıyla otomatik

WBTheme

theme.js

Tüm tema eksenlerini yönetir — <html> üzerinde data-* özniteliklerini ayarlar ve değerleri localStorage'a kaydeder.

WBTheme.setMode(value: 'light' | 'dark' | 'auto')

WBTheme.setAccent(value: string)

WBTheme.setPreset(value: string)

WBTheme.setRadius(value: 'sharp' | 'soft')

WBTheme.setDensity(value: 'compact' | 'comfortable')

// Karanlık mod
WBTheme.setMode('dark');

// Vurgu rengi değiştir
WBTheme.setAccent('forest');

// Ön ayar uygula (radius/shadow/density/font/border içerir)
WBTheme.setPreset('rounded');

// Tekil eksenleri ayarla
WBTheme.setRadius('sharp');
WBTheme.setDensity('compact');

Data özniteliği tetikleyicileri (JS gerektirmez)

<!-- Döngü: light → dark → auto -->
<button data-wb-mode-cycle>Modu değiştir</button>

<!-- Belirli bir mod ayarla -->
<button data-wb-mode-set="dark">Koyu</button>
<button data-wb-mode-set="light">Açık</button>
<button data-wb-mode-set="auto">Otomatik</button>

<!-- Vurgu rengi ayarla -->
<button data-wb-accent-set="ocean">Ocean</button>
<button data-wb-accent-set="forest">Forest</button>

localStorage anahtarları: wb-mode, wb-accent, wb-preset, wb-radius, wb-density. Değerler sayfa yüklendiğinde otomatik olarak geri yüklenir. Sıfırlamak için bu anahtarları temizleyin.

WBModal

modal.js

İletişim kutusu katmanlarını açar ve kapatır. is-open/is-leaving durumlarını, sayfa kaydırma kilidini, Escape tuşunu ve arka plan tıklamasını yönetir.

WBModal.open(id: string)

WBModal.close(id: string)

WBModal.open('my-modal');
WBModal.close('my-modal');

Data özniteliği tetikleyicileri

<!-- Aç -->
<button data-wb-toggle="modal" data-wb-target="#my-modal">Aç</button>

<!-- Kapat (modal içinde) -->
<button data-wb-dismiss="modal">Kapat</button>
<div class="wb-modal-backdrop" data-wb-dismiss="modal"></div>

Onay iletişim kutusu (wb-confirm)

<div class="wb-modal wb-confirm" id="confirm-delete">
  <div class="wb-modal-backdrop" data-wb-dismiss="modal"></div>
  <div class="wb-modal-dialog">
    <div class="wb-confirm-icon wb-confirm-danger">!</div>
    <h4 class="wb-confirm-title">Kaydı sil?</h4>
    <p class="wb-confirm-desc">Bu işlem geri alınamaz.</p>
    <div class="wb-confirm-actions">
      <button class="wb-btn wb-btn-ghost" data-wb-dismiss="modal">İptal</button>
      <button class="wb-btn wb-btn-danger" id="confirm-btn">Sil</button>
    </div>
  </div>
</div>

WBDrawer

drawer.js

Tam odak tuzaklı kayan yan panel. Klavye: Escape kapatır; Tab panel içinde döngüsel gezinir.

WBDrawer.open(id: string)

WBDrawer.close(id: string)

WBDrawer.open('my-drawer');
WBDrawer.close('my-drawer');

Data özniteliği tetikleyicileri

<button data-wb-toggle="drawer" data-wb-target="#my-drawer">Aç</button>
<button data-wb-dismiss="drawer">Kapat</button>

WBDropdown

dropdown.js

Bir wb-dropdown sarmalayıcısında is-open durumunu değiştirir. Dışarı tıklamada ve Escape tuşunda kapanır.

WBDropdown.open(wrapperEl: Element)

WBDropdown.close(wrapperEl: Element)

var wrapper = document.querySelector('.wb-dropdown');
WBDropdown.open(wrapper);
WBDropdown.close(wrapper);

Data özniteliği tetikleyicisi

<div class="wb-dropdown">
  <button data-wb-toggle="dropdown">Menüyü aç</button>
  <div class="wb-dropdown-menu">...</div>
</div>

WBTabs

tabs.js

Sekme öğelerini ve karşılık gelen panelleri etkinleştirir.

WBTabs.activate(tabEl: Element)

var tab = document.querySelector('[data-wb-tab="tab2"]');
WBTabs.activate(tab);

HTML yapısı

<div class="wb-tabs">
  <div class="wb-tab-list">
    <button class="wb-tab-item is-active" data-wb-tab="panel1">Sekme 1</button>
    <button class="wb-tab-item"            data-wb-tab="panel2">Sekme 2</button>
  </div>
  <div class="wb-tab-panels">
    <div class="wb-tab-panel is-active" id="panel1">İçerik 1</div>
    <div class="wb-tab-panel"           id="panel2">İçerik 2</div>
  </div>
</div>

WBAccordion

accordion.js

Akordeon öğelerinde is-open durumunu değiştirir. wb-accordion-trigger tıklamaları otomatik olarak bağlanır.

WBAccordion.open(itemEl: Element)

WBAccordion.close(itemEl: Element)

var item = document.querySelector('.wb-accordion-item');
WBAccordion.open(item);
WBAccordion.close(item);

WBSidebar

sidebar.js

Mobil kenar çubuğu katmanını açar ve kapatır. .wb-sidebar ve .wb-dashboard-shell üzerinde is-open ekler/kaldırır.

WBSidebar.open()

WBSidebar.close()

WBSidebar.open();
WBSidebar.close();

Data özniteliği tetikleyicisi

<button data-wb-toggle="sidebar">☰ Menü</button>

WBNavGroup

nav-group.js

Kenar çubuğu içinde daraltılabilir gezinme grupları. İsteğe bağlı akordeon modu desteği.

WBNavGroup.open(groupEl: Element)

WBNavGroup.close(groupEl: Element)

WBNavGroup.init() Dinamik DOM değişikliklerinden sonra çağırın

<!-- Temel grup -->
<div class="wb-nav-group">
  <button class="wb-nav-group-trigger">
    Kullanıcılar
    <svg class="wb-nav-group-chevron" width="12" height="12" viewBox="0 0 24 24"
         fill="none" stroke="currentColor" stroke-width="2">
      <path d="m6 9 6 6 6-6"/>
    </svg>
  </button>
  <div class="wb-nav-group-body">
    <a href="#" class="wb-sidebar-link">Tüm Kullanıcılar</a>
    <a href="#" class="wb-sidebar-link">Roller</a>
  </div>
</div>

<!-- Akordeon modu: bir grup açıldığında diğerlerini kapatır -->
<nav class="wb-sidebar-nav" data-wb-nav-group-accordion>
  <!-- gezinme grupları buraya -->
</nav>

WBToast

toast.js

Programatik olarak bildirim toastları gösterir. İlk çağrıda kapsayıcıyı otomatik oluşturur.

WBToast.show(message: string, options?: object) → Element

WBToast.dismiss(toastEl: Element)

Seçenekler

Seçenek	Tür	Varsayılan	Açıklama
type	string	'default'	'default' · 'success' · 'error' · 'warning' · 'info'
duration	number	4000	Otomatik kapanma gecikmesi (ms). 0 = devre dışı.
position	string	'top-right'	'top-right' · 'top-center' · 'top-left' · 'bottom-center' · 'bottom-left'
dismissible	boolean	true	Toast üzerinde kapatma düğmesi göster

// Basit
WBToast.show('Ayarlar kaydedildi.');

// Türle birlikte
WBToast.show('Kayıt silindi!', { type: 'success' });
WBToast.show('Yükleme başarısız.', { type: 'error' });

// Özel süre + konum
WBToast.show('İşleniyor…', {
  type: 'info',
  duration: 0,          // kapatılana kadar kalır
  position: 'bottom-center'
});

// Programatik kapatma
var toast = WBToast.show('Uzun mesaj');
WBToast.dismiss(toast);

WBPopover

popover.js

Bir wb-popover-wrapper üzerinde is-open durumunu değiştirir. Dışarı tıklamada ve Escape tuşunda kapanır.

WBPopover.open(wrapperEl: Element)

WBPopover.close(wrapperEl: Element)

WBPopover.closeAll()

<div class="wb-popover-wrapper">
  <button data-wb-toggle="popover">Tıklayın</button>
  <div class="wb-popover wb-popover-top">
    <div class="wb-popover-title">Başlık</div>
    <div class="wb-popover-body">Buradaki içerik.</div>
  </div>
</div>

<!-- Yerleşimler: wb-popover-top / -right / -bottom / -left -->

WBTooltip

tooltip.js

data-wb-tooltip ile tanımlanan araç ipuçlarını gösterir/gizler. Hover ve odakta tetiklenir. Varsayılan 300ms gösterme gecikmesi.

WBTooltip.show(el: Element)

WBTooltip.hide(el: Element)

WBTooltip.hideAll()

<!-- HTML -->
<button data-wb-tooltip="Kaydetmek için tıkla"
        data-wb-tooltip-placement="top">
  Kaydet
</button>

<!-- Yerleşimler: top (varsayılan) / right / bottom / left -->

<!-- JS -->
var el = document.querySelector('[data-wb-tooltip]');
WBTooltip.show(el);
WBTooltip.hide(el);

WBDismiss

dismiss.js

Uyarıları ve banner'ları kaldırmadan önce is-leaving animasyonuyla kapatır.

WBDismiss.dismiss(el: Element)

<!-- HTML -->
<div class="wb-alert wb-alert-info" id="my-alert">
  Mesaj metni.
  <button data-wb-dismiss="alert" class="wb-alert-close">&times;</button>
</div>

<!-- JS -->
WBDismiss.dismiss(document.getElementById('my-alert'));

data-wb-dismiss="alert" özniteliği kapatmayı otomatik olarak bağlar. Programatik kullanım, harici koddan kapatmanız gereken durumlar içindir.

WBCommandPalette

command-palette.js

Klavye navigasyonlu tam ekran komut paleti. Cmd+K / Ctrl+K ile açılır.

WBCommandPalette.register(id: string, options?: object)

WBCommandPalette.open(id: string)

WBCommandPalette.close(id: string)

Seçenekler

Seçenek	Tür	Açıklama
onSearch	function(query, results)	Her tuş vuruşunda çağrılır. Sorgu dizesi ve filtrelenmiş sonuç NodeList'i alır.

// Temel kayıt (yerleşik metin araması)
WBCommandPalette.register('#my-cmd');

// Özel arama işleyicisiyle
WBCommandPalette.register('#my-cmd', {
  onSearch: function(query, results) {
    // results, sorguyla eşleşen .wb-cmd-result öğelerinin NodeList'idir
    console.log(query, results.length + ' sonuç');
  }
});

// Programatik aç/kapat
WBCommandPalette.open('#my-cmd');
WBCommandPalette.close('#my-cmd');

Klavye kısayolları

Tuş	Eylem
Cmd/Ctrl+K	İlk kayıtlı paleti aç
↑ / ↓	Sonuçlarda gezin
Enter	Seçili sonucu etkinleştir
Escape	Paleti kapat

WBAjaxToggle

ajax-toggle.js

Bir onay kutusu değiştiğinde AJAX POST isteği gönderir. CSRF token'ı meta[name=csrf-token] etiketinden okur. Hata durumunda geri alır ve toast gösterir.

WBAjaxToggle.handle(checkboxEl: Element) change olayıyla otomatik çağrılır

Data öznitelikleri

Öznitelik	Zorunlu	Açıklama
data-wb-ajax-toggle	Evet	Onay kutusunu AJAX toggle davranışı için işaretler
data-wb-url	Evet	Toggle isteği için POST URL'si
data-wb-field	Hayır	Gönderilecek JSON alan adı (`{ field: checked }`). Varsayılan: `value`
data-wb-success	Hayır	Başarıda gösterilen toast mesajı
data-wb-error	Hayır	Hata durumunda gösterilen toast mesajı (varsayılan: 'Error occurred')

<!-- HTML -->
<input
  type="checkbox"
  class="wb-switch"
  data-wb-ajax-toggle
  data-wb-url="/api/users/42/toggle-active"
  data-wb-field="is_active"
  data-wb-success="Durum güncellendi"
  data-wb-error="Durum güncellenemedi"
  checked
>

<!-- Laravel Blade örneği -->
<input
  type="checkbox"
  class="wb-switch"
  data-wb-ajax-toggle
  data-wb-url="{{ route('users.toggle', $user) }}"
  data-wb-field="is_active"
  data-wb-success="Durum güncellendi"
  {{ $user->is_active ? 'checked' : '' }}
>

<!-- CSRF meta etiketi (<head> içinde gerekli) -->
<meta name="csrf-token" content="{{ csrf_token() }}">

İstek formatı

// POST to data-wb-url
// Başlıklar: Content-Type: application/json, X-CSRF-TOKEN: ...
// Gövde:    { "is_active": true }

// Başarıda: WBToast(data-wb-success, { type: 'success' }) göster
// Hata:     onay kutusu durumunu geri al + WBToast(data-wb-error, { type: 'error' }) göster

JS Kuralları

Tüm modüller genelinde kullanılan ortak kalıplar.

Durum sınıfları

Sınıf	Kullanım
is-open	Öğe görünür/aktif (modal, drawer, dropdown, sidebar)
is-active	Seçili durum (sekmeler, nav bağlantıları, filtre çipleri)
is-selected	Seçim durumu (tablo satırları, liste öğeleri)
is-leaving	Çıkış animasyonu devam ediyor — is-open kaldırılmadan önce eklenir

is-leaving animasyon kalıbı

Tüm kapanma animasyonları ani kaybolmayı önlemek için bu sırayı izler:

// 1. is-leaving ekle (CSS çıkış geçişini tetikler)
element.classList.add('is-leaving');

// 2. transitionend bekle (300ms yedekle)
element.addEventListener('transitionend', function handler() {
  element.classList.remove('is-open', 'is-leaving');
  element.removeEventListener('transitionend', handler);
}, { once: true });

// transitionend tetiklenmezse yedek
setTimeout(function() {
  element.classList.remove('is-open', 'is-leaving');
}, 300);

Evrensel data özniteliği bağlantısı

<!-- Herhangi bir değiştirilebilir bileşeni aç -->
<button data-wb-toggle="modal|drawer|dropdown|sidebar|cmd"
        data-wb-target="#target-id">Aç</button>

<!-- İçeriden kapat -->
<button data-wb-dismiss="modal|drawer|alert">Kapat</button>

Modül kalıbı: Tüm modüller bir IIFE kullanır — (function(){ 'use strict'; … })() — ve API'lerini window üzerinde sunar. Global ad alanı kirliliği oluşmaz; her modül tamamen bağımsızdır.