19-07-2017 Saat: 18:46
Medium blogunda olan metin seçimi yapıldıktan sonra açılan hareketli menü adıyla anılan menünün kendi web siteniz veya forumunuz için nasıl yapabileceğinizi anlatmak istiyorum.
Ö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.
Kod:
<article>
<h1>Fikirden Harekete</h1>
<p>İşleyen demir, pas tutmaz.</p>
...
</article>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.
Kod:
<template id="shareBoxTemplate"><span id="shareBox"><button></button></span></template>3. CSS oluşturun
#shareBox satır içine aşağıdaki konteyeri ekleyelim:
Kod:
#shareBox {
width: 30px;
height: 30px;
position: absolute;
}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.
Kod:
document.addEventListener('mousedown', onMouseDown);
document.addEventListener('mouseup', onMouseUp);
var temp = document.querySelector('#shareBoxTemplate');
function onMouseDown() {
}
function onMouseUp() {
}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.
Kod:
function onMouseDown() {
document.getSelection().removeAllRanges();
var shareBox = document.querySelector('#shareBox');
if (shareBox !== null)
shareBox.remove();
}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.
Kod:
function onMouseUp() {
var sel = document.getSelection(),
txt = sel.toString();
if (txt !== "") {
var range = sel.getRangeAt(0);
if (range.startContainer.parentElement.parentElement.localName
=== "article"
|| range.startContainer.parentElement.localName
=== "article") {
// some text in the article was selected
}
}
}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.
Kod:
ocument.body.insertBefore(document.importNode(temp.content, true), temp);));#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.
Kod:
var rect = range.getBoundingClientRect();
var shareBox = document.querySelector('#shareBox');
shareBox.style.top = `calc(${rect.top}px - 38px)`;
shareBox.style.left = `calc(${rect.left}px + calc(${rect.width}px / 2) - 30px)`;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.
Kod:
var shareBtn = shareBox.querySelector('button');
shareBtn['shareTxt'] = txt;
shareBtn.addEventListener('mousedown', onShareClick, true);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.
Kod:
function onShareClick() {
window.open(`https://twitter.com/intent/tweet?text=${this.shareTxt}`);
this.remove();
document.getSelection().removeAllRanges()
}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 yapımcının Github repo’sunda bulabilirsiniz.
DEMO
