Masaüstünde sağ tık, mobilde uzun basma - hızlı erişim menüsü.
Bir şarkıya sağ tıklayın - anında seçenekler çıkar: Çal, Sıraya Ekle, Favorilere Ekle, Puan Ver... Telefonunuzda mı? Şarkıya 500ms basılı tutun - aynı menü açılır. Her içerik türü için farklı seçenekler: Şarkı menüsü, albüm menüsü, playlist menüsü.
Farenin sağ tuşuna basın. Menü imlecin yanında açılır. Tıklayarak seçim yapın.
Parmağınızı yarım saniye basılı tutun. Hafif titreşim + menü açılır. Kaydırarak seçin.
Menü ekran dışına taşmaz. Sağda yer yoksa solda açılır, altta yer yoksa yukarıda açılır.
Zaten favorilerdeyse "Favorilerden Çıkar" yazar. Bağlama göre seçenekler değişir.
Dışarı tıkla veya ESC tuşuna bas - menü kapanır. Seçim yaptığında da kapanır.
Mobilde menü açılınca telefon hafifçe titrer. Dokunsal geri bildirim.
Kullanıcı sağ tık yaptığında context menu gösterilirken arka planda şu işlemler gerçekleşir:
contextmenu eventi dinlenir, preventDefault() ile tarayıcının varsayılan menüsü engellenir. Tıklanan elementin data-context attribute'u okunarak hangi içerik türü olduğu (şarkı, albüm, playlist) belirlenir.
@contextmenu.prevent="showMenu($event, item)"
Mouse koordinatları (clientX, clientY) alınır. Menü boyutu hesaplanır. Ekran kenarlarına taşma kontrolü yapılır. Gerekirse menü yukarı veya sola kayar.
style="left: ${Math.min(x, window.innerWidth - menuWidth)}px"
İçerik türüne göre menü öğeleri belirlenir. Şarkı için "Sıraya Ekle", "Favorilere Ekle", albüm için "Tümünü Çal" gibi seçenekler gösterilir. Kullanıcı yetkisine göre bazı seçenekler gizlenir.
menuItems.filter(item => item.canShow(currentUser, target))
Şarkı zaten favorilerde mi? Playlistte mi? Bu kontroller yapılır ve menü metni buna göre değişir. "Favorilere Ekle" veya "Favorilerden Çıkar" dinamik olarak gösterilir.
isFavorite ? 'Favorilerden Çıkar' : 'Favorilere Ekle'
Menü öğesine tıklandığında ilgili aksiyon tetiklenir. AJAX ile sunucuya istek gönderilir (favori ekle/çıkar). Başarılı olursa toast notification gösterilir, UI güncellenir.
fetch('/api/favorites', {method: 'POST'}).then(showToast)
Başka yere tıklandığında veya Escape tuşuna basıldığında menü kapanır. Click-outside pattern ile window'a eklenen listener menüyü kapatır ve kendini temizler.
@click.away="menuOpen = false" @keydown.escape="menuOpen = false"