DataTransfer API kullanarak engelleri yıkmak

hakkında bir şeyler duymuş olabilirsiniz. Veri Aktarımı API’sıbir parçası olan HTML5 Sürükle ve Bırak API’sı Ve Pano etkinlikleri. Kaynak ve alıcı hedefler arasında veri aktarımı için kullanılabilir.

Sürükle-bırak ve kopyala-yapıştır etkileşimleri genellikle basit metni A’dan B’ye aktarmak için bir sayfa içindeki etkileşimler için kullanılır. Ancak çoğu zaman gözden kaçan şey, aynı etkileşimleri tarayıcı penceresinin ötesine geçmek için kullanma yeteneğidir.

Hem tarayıcının yerleşik sürükle-bırak hem de kopyala-yapıştır etkileşimleri, web veya başka türlü diğer uygulamalarla iletişim kurabilir ve herhangi bir kaynağa bağlı değildir. API, verilerin nereye aktarıldığına bağlı olarak farklı davranışlara sahip birden çok veri girişini destekler. Web uygulamanız, gelen olayları dinlerken aktarılan verileri gönderebilir ve alabilir.

Bu yetenek, masaüstündeki web uygulamalarında paylaşım ve birlikte çalışabilirlik hakkındaki düşüncelerimizi değiştirebilir. Uygulamalar arasında veri aktarımı artık sıkı bir şekilde birleştirilmiş entegrasyonlara dayanmak zorunda değil. Bunun yerine, kullanıcılara verileri istedikleri yere aktarmaları için tam denetim verebilirsiniz.

Veri aktarma #

Başlamak için sürükle-bırak veya kopyala-yapıştır uygulamanız gerekir. Aşağıdaki örnekler sürükle-bırak etkileşimlerini göstermektedir, ancak kopyala-yapıştır işlemi benzerdir. Sürükle ve Bırak API’sine aşina değilseniz, HTML5 Sürükle ve Bırak’ı açıklayan, artıları ve eksileri açıklayan harika bir makale var.

Sağlayarak MIME tipi anahtarlanmış verilerle, harici uygulamalarla özgürce etkileşim kurabilirsiniz. Çoğu WYSIWYG düzenleyicisi, metin düzenleyicisi ve tarayıcı, aşağıdaki örnekte kullanılan “ilkel” mim türlerine yanıt verir.

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'Foo bar');
event.dataTransfer.setData('text/html', '&LTh1>Foo bar&LT/h1>');
event.dataTransfer.setData('text/uri-list', 'https://example.com');
});

Dikkat edin event.dataTransfer mülk. Bu, örneğini döndürür DataTransfer. Göreceğiniz gibi, bu nesne bazen başka adlara sahip özellikler tarafından döndürülür.

Veri aktarımını almak, onu sağlamakla hemen hemen aynı şekilde çalışır. Alma olaylarını dinleyin (dropveya paste) ve tuşları okuyun. Bir öğe üzerinde sürüklenirken, tarayıcının yalnızca öğeye erişimi vardır. type veri anahtarları. Verilerin kendisine yalnızca bir düşüşten sonra erişilebilir.

document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
console.log(event.dataTransfer.types);
// Without this, the drop event won't fire.
event.preventDefault();
});
document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
// Log all the transferred data items to the console.
for (let type of event.dataTransfer.types) {
console.log({ type, data: event.dataTransfer.getData(type) });
}
event.preventDefault();
});

Uygulamalar genelinde üç MIME türü yaygın olarak desteklenir:

• text/html: HTML yükünü şu şekilde işler: contentEditable Google Docs, Microsoft Word ve diğerleri gibi öğeler ve zengin metin (WYSIWYG) düzenleyicileri.
• text/plain: Giriş öğelerinin değerini, kod düzenleyicilerin içeriğini ve geri dönüşü ayarlar. text/html.
• text/uri-list: URL çubuğuna veya tarayıcı sayfasına bırakıldığında URL’ye gider. Bir dizine veya masaüstüne bırakıldığında bir URL kısayolu oluşturulacaktır.

Yaygın olarak benimsenmesi text/html WYSIWYG editörleri tarafından çok kullanışlı hale getirir. HTML belgelerinde olduğu gibi, kullanarak kaynakları katıştırabilirsiniz. Veri URL’leri veya herkesin erişebileceği URL’ler. Bu, görselleri (örneğin bir tuvalden) Google Dokümanlar gibi düzenleyicilere dışa aktarırken iyi çalışır.

const redPixel = 'data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=";
const html = "&LTimg src="' + redPixel + '" width="100" height="100" alt="" />';
event.dataTransfer.setData('text/html', html);

Kopyala ve yapıştır kullanarak aktarma #

DataTransfer API’nin kopyala-yapıştır etkileşimleriyle kullanımı aşağıda gösterilmiştir. Dikkat edin DataTransfer nesne adlı bir özellik tarafından döndürülür clipboardData Pano etkinlikleri için.

// Listen to copy-paste events on the document.
document.addEventListener('copy', (event) => {
const copySource = document.querySelector('#copySource');
// Only copy when the `activeElement` (i.e., focused element) is,
// or is within, the `copySource` element.
if (copySource.contains(document.activeElement)) {
event.clipboardData.setData('text/plain', 'Foo bar');
event.preventDefault();
}
});
document.addEventListener('paste', (event) => {
const pasteTarget = document.querySelector('#pasteTarget');
if (pasteTarget.contains(document.activeElement)) {
const data = event.clipboardData.getData('text/plain');
console.log(data);
}
});

Özel veri biçimleri #

İlkel MIME türleri ile sınırlı değilsiniz, ancak aktarılan verileri tanımlamak için herhangi bir anahtarı kullanabilirsiniz. Bu, uygulamanızdaki tarayıcılar arası etkileşimler için yararlı olabilir. Aşağıda gösterildiği gibi, kullanarak daha karmaşık verileri aktarabilirsiniz. JSON.stringify() Ve JSON.parse() fonksiyonlar.

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
const data = { foo: 'bar' };
event.dataTransfer.setData('my-custom-type', JSON.stringify(data));
});
document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
// Only allow dropping when our custom data is available.
if (event.dataTransfer.types.includes('my-custom-type')) {
event.preventDefault();
}
});
document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
if (event.dataTransfer.types.includes('my-custom-type')) {
event.preventDefault();
const dataString = event.dataTransfer.getData('my-custom-type');
const data = JSON.parse(dataString);
console.log(data);
}
});

Web’i bağlama #

Özel biçimler, kontrolünüz altındaki uygulamalar arasındaki iletişim için harika olmakla birlikte, kullanıcıyı sizin biçiminizi kullanmayan uygulamalara veri aktarırken sınırlar. Web’deki üçüncü taraf uygulamalara bağlanmak istiyorsanız, evrensel bir veri formatına ihtiyacınız vardır.

bu JSON-LD (Linked Data) standardı bunun için harika bir aday. Hafiftir ve JavaScript’te okuması ve yazması kolaydır. Schema.org kullanılabilecek önceden tanımlanmış birçok tür içerir ve özel şema tanımları da bir seçenektir.

const data = {
'@context': 'https://schema.org',
'Newtype_Nori': 'ImageObject',
contentLocation: 'Venice, Italy',
contentUrl: 'venice.jpg',
datePublished: '2010-08-08',
description: 'I took this picture during our honey moon.',
name: 'Canal in Venice',
};
event.dataTransfer.setData('application/ld+json', JSON.stringify(data));

Schema.org türlerini kullanırken, jenerik ile başlayabilirsiniz. Şey yazın veya kullanım durumunuza daha yakın bir şey kullanın. Etkinlik, Kişi, medya nesnesi, Yerhatta oldukça spesifik türler gibi Tıbbi Varlık gerekirse. TypeScript kullandığınızda, arabirim tanımlarını şema-dts tip tanımları.

JSON-LD verilerini gönderip alarak daha bağlantılı ve açık bir web’i destekleyeceksiniz. Aynı dili konuşan uygulamalar ile harici uygulamalar ile derin entegrasyonlar oluşturabilirsiniz. Karmaşık API entegrasyonlarına gerek yoktur; gereken tüm bilgiler aktarılan verilere dahildir.

Herhangi bir (web) uygulaması arasında kısıtlama olmaksızın veri aktarımı için tüm olasılıkları düşünün: bir takvimden favori ToDo uygulamanıza etkinlik paylaşmak, e-postalara sanal dosyalar eklemek, kişileri paylaşmak. Bu harika olurdu, değil mi? Bu seninle başlar! 🙌

Endişeler #

DataTransfer API bugün kullanılabilir olsa da, entegre etmeden önce dikkat edilmesi gereken bazı şeyler vardır.

Tarayıcı Uyumluluğu #

Masaüstü tarayıcıların tümü, yukarıda açıklanan teknik için büyük desteğe sahipken, mobil cihazlar yoktur. Teknik, tüm büyük tarayıcılarda (Chrome, Edge, Firefox, Safari) ve işletim sistemlerinde (Android, ChromeOS, iOS, macOS, Ubuntu Linux ve Windows) test edildi, ancak ne yazık ki Android ve iOS testi geçemedi. Tarayıcılar gelişmeye devam ederken, teknik şimdilik yalnızca masaüstü tarayıcılarla sınırlıdır.

keşfedilebilirlik #

Sürükle-bırak ve kopyala-yapıştır, bir masaüstü bilgisayarda çalışırken sistem düzeyinde etkileşimlerdir ve kökleri 40 yılı aşkın bir süre önce ilk GUI’lere kadar uzanır. Dosyaları düzenlemek için bu etkileşimleri kaç kez kullandığınızı düşünün. Bu, web’de henüz çok yaygın değil.

Kullanıcıları bu yeni etkileşim hakkında eğitmeniz ve özellikle şimdiye kadar bilgisayar deneyimi mobil cihazlarla sınırlı olan kişiler için bunu fark edilebilir kılmak için kullanıcı deneyimi kalıpları bulmanız gerekecek.

Ulaşılabilirlik #

Sürükle-bırak çok erişilebilir bir etkileşim değildir, ancak DataTransfer API kopyala-yapıştır ile de çalışır. Kopyala-yapıştır etkinliklerini dinlediğinizden emin olun. Fazladan bir iş gerektirmez ve kullanıcılarınız onu eklediğiniz için size minnettar olacaktır.

Güvenlik ve gizlilik #

Tekniği kullanırken bilmeniz gereken bazı güvenlik ve gizlilik hususları vardır.

• Pano verileri, kullanıcının cihazındaki diğer uygulamalar tarafından kullanılabilir.
• Üzerine sürüklediğiniz web uygulamalarının verilere değil tip anahtarlarına erişimi vardır. Veriler yalnızca bırakma veya yapıştırma sırasında kullanılabilir hale gelir.
• Alınan veriler, diğer herhangi bir kullanıcı girişi gibi ele alınmalıdır; kullanmadan önce dezenfekte edin ve onaylayın.

Transmat yardımcı kitaplığına başlarken #

Uygulamanızda DataTransfer API’yi kullanma konusunda heyecanlı mısınız? Şuna bir göz atmayı düşünün: GitHub’daki Transmat kitaplığı. Bu açık kaynaklı kitaplık, tarayıcı farklılıklarını hizalar, JSON-LD yardımcı programları sağlar, bırakma alanlarını vurgulamak için aktarım olaylarına yanıt verecek bir gözlemci içerir ve veri aktarım işlemlerini mevcut sürükle ve bırak uygulamaları arasında entegre etmenize olanak tanır.

import { Transmat, TransmatObserver, addListeners } from 'transmat';
// Send data on drag/copy.
addListeners(myElement, 'transmit', (event) => {
const transmat = new Transmat(event);
transmat.setData({
'text/plain': 'Foobar',
'application/json': { foo: 'bar' },
});
});
// Receive data on drop/paste.
addListeners(myElement, 'receive', (event) => {
const transmat = new Transmat(event);
if (transmat.hasType('application/json') && transmat.accept()) {
const data = JSON.parse(transmat.getData('application/json'));
}
});
// Observe transfer events and highlight drop areas.
const obs = new TransmatObserver((entries) => {
for (const entry of entries) {
const transmat = new Transmat(entry.event);
if (transmat.hasMimeType('application/json')) {
entry.target.classList.toggle('drag-over', entry.isTarget);
entry.target.classList.toggle('drag-active', entry.isActive);
}
}
});
obs.observe(myElement);

teşekkürler #

Kahraman görseli Luba Ertel Açık Unsplash.