Notion'un Slash Menüsünü 70 Satır JavaScript ile Yeniden İnşa Ettim
Notion büyüleyici hissettiriyor. Bir eğik çizgi (slash) yazıyorsunuz ve bir menü beliriyor. Bir seçenek seçiyorsunuz ve metniniz dönüşüyor.
Bu özelliği 70 satır vanilla JavaScript kullanarak yeniden inşa ettim. İşin sırrı basit bir mantıkta yatıyor.
DesignFromZero serimin 9. günü ünlü UI tasarımlarına odaklanıyor. Bu araçları anlamak için onları sıfırdan yeniden inşa ediyorum.
Mantık üç parçaya dayanıyor:
- Veri modelleri: Bir doküman, bloklardan oluşan bir listedir. Her blok bir veri parçası tutar. Bu, onun tipidir.
- Tetikleyici: Her yazı yazdığınızda kod metni kontrol eder. Eğer metin bir eğik çizgi ile başlıyorsa menü açılır.
- Filtre: Menü, komutları bulmak için anahtar kelimeler kullanır. Heading 1 gibi bir komut, h1 veya title gibi anahtar kelimelere sahip olabilir. Bu, arama işleminin akıllıca hissedilmesini sağlar.
Kod, navigasyon için basit bir yöntem kullanıyor. Modulo operatörünü kullanmak, ok tuşlarını kullanarak liste içinde hareket etmenize olanak tanır. Seçimi en alttan tekrar en başa döndürür.
Enter tuşuna bastığınızda, kod iki görev gerçekleştirir:
- Verideki blok tipini günceller. Ardından CSS görsel değişikliği yönetir.
- Eğik çizgiyi ve komut metnini temizler.
Karmaşık özellikler genellikle basit temellere dayanır. Bir slash menüsü; sadece veri, bir önek kontrolü ve bir tip değişiminden ibarettir.
Canlı demoyu buradan deneyin: https://dev48v.infy.uk/design/day9-notion-slash.html
Tüm detaylı incelemeyi buradan okuyun: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i