Web sitelerinde yayınlanan kod parçacıklarını paylaşmak veya başkalarıyla iletişim kurmak sıkça gerçekleştirilen bir iştir. Ancak, bazen bu kodları kopyalamak ve yapıştırmak zorlayıcı olabilir. İşte bu noktada, kod parçacıklarını kopyalamayı kolaylaştırmak için bir JavaScript aracı kullanabilirsiniz. Bu araç, her <code> elementi için bir “Kopyala” düğmesi oluşturur ve tıklanarak kodları panoya kopyalamanızı sağlar.
Kullanıcı deneyimini artırmak için her geçen gün yeni yaklaşım tarzları ortaya çıkıyor. Günümüzde websitelerinde çoğunlukla kodlar paylaşılıyor, ancak kullanıcılar bu kodları kopyalamak için imleçle seçmek ve Ctrl + C yapmak zorunda kalıyor. Bunun yerine JavaScript ile dinamik olarak bir düğmesi oluşturmak ve seçili bir HTML elementinin içerisindeki kodları kopyalamak aslında gayet basit. Şimdi, paylaştığımız kodlara böyle bir özelliğin nasıl kazandırıldığına göz atacağız.
Yaklaşım tarzı
Döküman içerisinde bazen HTML elementler, CSS özellikler veya JavaScript komutlarını belirtmek için de <code> elementini kullanabiliriz. Eğer <code> elementini seçerek bu elementlerin olduğuı her yere JavaScript ile dinamik bir düğme oluşturmaya kalksaydık, o zaman HTML belge içerisinde büyük bir karmaşa yaşanabilirdi. Bunun için biz, kodumuza bir ‘sınıf’ atayacağız ve yalnızca seçtiğimiz bu sınıfın içerisindeki <code> elementlerine düğme oluşturacağız. Bu düğmeye tıklandığında, son kullanıcı, paylaşılan kodu kopyalama imkanı elde edecek.
Paylaştığımız kod, bir <pre> elementi içerisinde yer aldığı için öncelikle bu elementi seçmemiz, daha sonra ‘sınıf’ seçmemiz gerekecek. Sınıfı seçtikten sonra ise bir boşluk bırakacağız ve HTML elementimizi, yani <code> elementini seçeceğiz.
Nasıl Çalışır?
Bu JavaScript işlevselliği, sayfa yüklendiğinde <code> elementlerini tespit eder ve her biri için bir “Kopyala” düğmesi oluşturur. Bu düğmeler tıklandığında, ilgili kod parçacığı panoya kopyalanır ve kullanıcıya “Kopyalandı” mesajı gösterilir.
Kod Örneği
Aşağıda, bu işlevselliği gerçekleştiren JavaScript kodunu bulabilirsiniz:
// Her elementi için bir düğme oluşturan fonksiyon
function createCopyButtons() {
// Sadece "vb-code" sınıfına sahip elementleri içindeki elementlerini seç
let codeElements = document.querySelectorAll('pre.adt-code code');
// Her biri için döngüye gir
for (let codeElement of codeElements) {
// Bir id belirle
let id = 'code-' + Math.random().toString(36).substr(2, 9);
// elementine id'yi ata
codeElement.id = id;
// Bir düğme oluştur
let button = document.createElement('button');
// Düğmeye "Kopyala" metnini ekle
button.textContent = 'Kopyala';
// Düğmeye tıklandığında copyToClipboard fonksiyonunu çağır
button.addEventListener('click', function () {
copyToClipboard(id);
});
// Butonu elementinin yanına ekle
codeElement.parentNode.insertBefore(button, codeElement.nextSibling);
}
}
// Belirtilen id'li elementinin içeriğini kopyalayan fonksiyon
function copyToClipboard(id) {
// elementini seç
let codeElement = document.getElementById(id);
// Kopyalanacak metni al
let textToCopy = codeElement.textContent;
// Geçici bir input oluştur
let input = document.createElement('input');
// Inputun değerine metni ata
input.value = textToCopy;
// Inputu sayfaya ekle
document.body.appendChild(input);
// Inputun içeriğini seç
input.select();
// Kopyala komutunu çalıştır
document.execCommand('copy');
// Inputu sayfadan kaldır
document.body.removeChild(input);
// showCopyAlert fonksiyonunu çağır
showCopyAlert(id);
}
// Kopyalama işleminden sonra uyarı mesajı gösteren fonksiyon
function showCopyAlert(id) {
// elementini seç
let codeElement = document.getElementById(id);
// Bir span oluştur
let span = document.createElement('span');
// Spana "Kopyalandı" metnini ekle
span.textContent = 'Kopyalandı';
// Spana bir stil uygula
span.style.color = 'green';
span.style.fontWeight = 'bold';
span.style.marginLeft = '10px';
// Spanı elementinin yanına ekle
codeElement.parentNode.insertBefore(span, codeElement.nextSibling.nextSibling);
// Bir süre sonra spanı kaldır
setTimeout(function () {
span.remove();
}, 1000);
}
// Sayfa yüklendiğinde createCopyButtons fonksiyonunu çağır
window.addEventListener('load', createCopyButtons);
