Medium’daki Hareketli Menü Nasıl Yapılır?

Özellikle Medium.com’un bu özelliği moda haline getirmesinden bu yana hareketli menülerin popülaritesi yükselişte. Kısacası, web sayfasında bazı metin seçtiğinizde hareketli eylem menüsü açılır. Menü, seçimin yakınında belirir ve seçilen metni hızla biçimlendirmenize, vurgulamaya veya paylaşmanıza olanak tanıyan farklı eylemler gösterir.

Bu yazıda, bir web sayfasında seçili bir metin parçası için bir işlem menüsünün nasıl görüntüleneceğini size göstereceğim. Eylem menüsü, kullanıcıların seçtikleri metni takipçilerine tweet atmalarını sağlayacak.

1. HTML’yi oluşturun

Başlangıç HTML’i basit, yalnızca kullanıcının seçebileceği bazı metinlere ihtiyacımız var. Demoda “Fikirden Harekete” adlı projede kullanılan sözlerden bazılarını kullanacağım.

2. İşlem menü şablonu oluşturun

Bir template öğesinin içinde eylem menüsüne ait HTML kodunu ekliyorum. Template etiketi ne olursa olsun, JavaScript’i kullanarak belgeye eklenene kadar tarayıcılar tarafından oluşturulmaz.

Eylem menü düzenini belgeye eklendikten sonra rahatsız edebileceğinden, template etiketinin içinde gereksiz yere yer bırakmayın. İsterseniz, daha fazla seçenek için #shareBox içinde daha fazla düğme ekleyin.

3. CSS oluşturun

#shareBox satır içine aşağıdaki konteyeri ekleyelim:

position: absolute; Kural, menüyü sayfada istediğimiz yere yerleştirebilmemize izin verir.

Ayrıca #shareBox içindeki eylem düğmesini bir arka plan rengi ve resmi ile stilize ettim.

4. JS ile olay işleyicileri ekleyin
JavaScript’e geçerken, metin seçiminin başlangıcını ve sonunu yakalamak için mousedown ve mouseup olayları için olay işleyicileri eklemeliyiz.

Ayrıca, selectstart gibi diğer seçme olayları için araştırma yapabilir ve fare olayları yerine bunları kullanabilirsiniz (ideal olacaktır ancak henüz tarayıcı desteği çok iyi değildir).

Ayrıca querySelector () yöntemini kullanarak template öğesine bir başvuru ekleyin.

5. Önceki seçimleri sil

Mousedown olayında, bazı temizleme işlemlerini gerçekleştiririz, diğer bir önceki seçimi ve ait eylem menüsünü temizleriz.

GetSelection () yöntemi, kullanıcı tarafından o anda seçilen metin aralıklarını temsil eden bir Selection nesnesi döndürür ve removeAllRange () yöntemi, tüm Selection Selection nesnesinden tüm aralıkları kaldırarak önceki seçimi temizler.

6. İşlem menüsünü görüntüleyin

Bir metin seçiminin yapıp yapılmadığını teyit edeceğimiz fare olayı sırasında ve daha ileri hareket etmemiz gerekiyor.

Seçim metin dizesini Seçim nesnesinin toString () yöntemini çağırarak alın. Seçilen metin boş değilse, devam edin ve Seçim nesnesinden ilk aralığı elde edin.

Aralık, belgenin seçili kısmıdır. Genellikle, kullanıcılar ctrl / cmd tuşlarına basarak değil, yalnızca tek bir seçim yapacaktır, bu nedenle, getRangeAt (0) seçeneğini kullanarak seçimden ilk dizge nesnesini (dizin 0’da) alın.

Aralığı bulduktan sonra, seçim makalenin içerdiği bir yerden başlayıp başlamadığına bakın. Aralığın startContainer özelliği, seçim başladığı yerden DOM düğümünü döndürür.

Bazen (bir paragraf içinde seçtiğinizde) değeri yalnızca bir metin düğümündedir; bu durumda, üst öğesi p ​​olur ve p öğesinin üst kısmı article olur (bu örnek kodda sonrası).

Diğer zamanlarda, birden çok paragraf arasında seçim yaptığınızda, startContainer p olur ve üst düğüm article olacaktır. Dolayısıyla, yukarıdaki kodda ikinci durumdaki iki karşılaştırma.

If koşulu geçtikten sonra, eylem menüsünü şablondan getirip belgeye eklemenin zamanı geldi. Aşağıdaki kodu ikinci if ifadesinin içine yerleştirin.

ImportNode () yöntemi, dış belgelerden (bizim durumumuzda, <şablon> daki düğümlerden) düğümleri döndürür. İkinci parametre (true) ile çağrıldığında içe aktarılan öğe / düğüm, alt öğeleri ile birlikte gelecektir.

#shareBox’u belge gövdesine herhangi bir yere yerleştirebilir, şablon öğesine ekledim.

7. İşlem menüsünü yerleştirin

Eylem menüsünü seçilen alanın tam ortasında ve ortasında yerleştirmek istiyoruz. Bunu yapmak için, bir öğenin boyutunu ve konumunu döndüren getBoundingClientRect () yöntemini kullanarak seçilen alanın dikdörtgen değerlerini elde edin.

Ardından, #shareBox’ın üst ve sol değerlerini dikdörtgen değerlerine dayalı olarak güncelleyin. Yeni üst ve sol değerlerin hesaplamasında, ES6 şablonundaki harfleri kullandım.

8. İşlevsellik ekleyin

Seçili metnin yakınında eylem menüsünü ekledik, seçilen metni menü seçenekleri için kullanılabilir hale getirmenin zamanı geldi, böylece üzerinde bir şeyler yapabileceğiz.

Seçilen metni, ‘shareTxt’ adlı paylaşım düğmesinin özel bir özelliğine atayın ve düğmeye mousedown olayı dinleyicisi ekleyin.

AddEventListener () gerçek parametresi mousedown olayının köpürmesini engeller.

OnShareClick () olay işleyicisinde, düğmenin shareTxt özelliğine erişerek seçilen metni bir tweet’e ekleriz.

Düğmeye tıklandığında, yapılması gereken şeyleri yapar, ardından sayfadan kendisini kaldırır. Belgedeki herhangi bir seçimi de silecek.

Kaynak kodu ve demo

Aşağıdaki Codepen demosunda, eylem menüsünün nasıl çalıştığını test edebilirsiniz. Ayrıca tam kaynak kodunu Github repo’muzda bulabilirsiniz.

Bu makelde Medium’da olan metin seçimi yapıldıktan sonra açılan menünün kendi web siteniz için nasıl yapılabileceğini anlattık. Bu konu hakkındaki düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.