DataTransfer API'yi kullanarak bariyerleri ortadan kaldırma

Kullanıcının tarayıcı penceresinin dışında veri paylaşmasını sağlayın.

Jorik Tangelder

Thomas Steiner

HTML5 Drag and Drop API ve Clipboard etkinliklerinin bir parçası olan DataTransfer API'den haberdar olabilirsiniz. Kaynak ve alıcı hedefler arasında veri aktarmak için kullanılabilir.

Sürükle ve bırak ve kopyala yapıştır etkileşimleri genellikle bir sayfadaki etkileşimler için kullanılır. Bu etkileşimler, basit metinleri A noktasından B noktasına aktarmak için kullanılır. Ancak çoğu zaman gözden kaçan şey, bu etkileşimlerin tarayıcı penceresinin ötesine geçmek için kullanılabilmesidir.

Hem tarayıcının yerleşik sürükle ve bırak özelliği hem de kopyalama ve yapıştırma işlemleri, web'de veya başka bir yerdeki diğer uygulamalarla iletişim kurabilir ve herhangi bir kaynağa bağlı değildir. API, verilerin aktarıldığı yere bağlı olarak farklı davranışlara sahip birden fazla veri girişini destekler. Web uygulamanız, gelen etkinlikleri dinlerken aktarılan verileri gönderip alabilir.

Bu özellik, masaüstü web uygulamalarında paylaşım ve birlikte çalışabilirlik hakkındaki düşüncelerimizi değiştirebilir. Artık uygulamalar arasında veri aktarmak için sıkı bir şekilde bağlı entegrasyonlara gerek yok. Bunun yerine, kullanıcılara verileri istedikleri yere aktarma konusunda tam kontrol verebilirsiniz.

Veri aktarma

Başlamak için sürükle ve bırak veya kopyala yapıştır işlemlerini uygulamanız gerekir. Aşağıdaki örneklerde sürükle ve bırak etkileşimleri gösterilmektedir ancak kopyala ve yapıştırma işlemi de benzerdir. Sürükle ve Bırak API'si hakkında bilginiz yoksa HTML5 sürükle ve bırak özelliğini açıklayan mükemmel bir makale var.

MIME türü anahtarlanmış veriler sağlayarak harici uygulamalarla özgürce etkileşim kurabilirsiniz. Çoğu WYSIWYG düzenleyici, metin düzenleyici ve tarayıcı, aşağıdaki örnekte kullanılan "ilkel" mime türlerine yanıt verir.

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

event.dataTransfer özelliğine dikkat edin. Bu işlem, DataTransfer örneğini döndürür. Göreceğiniz gibi, bu nesne bazen farklı ada sahip mülkler tarafından döndürülür.

Veri aktarımını alma işlemi, aktarma işlemiyle neredeyse aynı şekilde çalışır. Alıcı etkinlikleri (drop veya paste) dinleyin ve anahtarları okuyun. Bir öğenin üzerine sürüklendiğinde tarayıcı yalnızca verilerin type anahtarlarına erişebilir. Verilere 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 arasında yaygın olarak desteklenen üç MIME türü vardır:

• text/html: HTML yükünü contentEditable öğelerinde ve Google Dokümanlar, Microsoft Word gibi zengin metin (WYSIWYG) düzenleyicilerinde oluşturur.
• text/plain: Giriş öğelerinin değerini, kod düzenleyicilerinin içeriğini ve text/html'dan yedeği ayarlar.
• 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 URL kısayolu oluşturulur.

text/html, WYSIWYG düzenleyiciler tarafından yaygın olarak kullanıldığı için çok faydalıdır. HTML dokümanlarındaki gibi, veri URL'leri veya herkese açık URL'ler kullanarak kaynakları yerleştirebilirsiniz. Bu yöntem, görselleri (ör. kanvastan) Google Dokümanlar gibi düzenleyicilere aktarırken iyi sonuç verir.

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

Kopyalama ve yapıştırma ile aktarma

DataTransfer API'nin kopyala-yapıştır etkileşimleriyle kullanımı aşağıda gösterilmiştir. DataTransfer nesnesinin, pano etkinlikleri için clipboardData adlı bir mülk tarafından döndürüldüğünü unutmayın.

// 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

Basit MIME türleriyle sınırlı değilsiniz. Aktarılan verileri tanımlamak için herhangi bir anahtar kullanabilirsiniz. Bu, uygulamanızda tarayıcılar arası etkileşimler için yararlı olabilir. Aşağıda gösterildiği gibi, JSON.stringify() ve JSON.parse() işlevlerini kullanarak daha karmaşık verileri aktarabilirsiniz.

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üzdeki uygulamalar arasında iletişim için mükemmel olsa da biçiminizi kullanmayan uygulamalara veri aktarırken kullanıcıyı da sınırlar. Web'de üçüncü taraf uygulamalarıyla bağlantı kurmak istiyorsanız evrensel bir veri biçimine ihtiyacınız vardır.

JSON-LD (Bağlı Veriler) standardı bunun için mükemmel bir seçimdir. Hafiftir ve JavaScript'te okunması ve yazılması kolaydır. Schema.org, kullanılabilecek birçok önceden tanımlanmış tür içerir. Özel şema tanımları da bir seçenektir.

const data = {
  '@context': 'https://schema.org',
  '@type': '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 genel Thing türüyle başlayabilir veya kullanım alanınıza daha yakın bir tür (ör. Event, Person, MediaObject, Place) kullanabilir, hatta gerekirse MedicalEntity gibi son derece spesifik türleri tercih edebilirsiniz. TypeScript'i kullandığınızda schema-dts tür tanımlarındaki arayüz tanımlarını kullanabilirsiniz.

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

Herhangi bir (web) uygulaması arasında kısıtlama olmadan veri aktarma olanaklarının tümünü düşünün: Takvimdeki etkinlikleri favori yapılacaklar uygulamanızla paylaşma, e-postalara sanal dosya ekleme, kişileri paylaşma. Bu harika olur, değil mi? Bu, sizinle başlar. 🙌

Endişeler

DataTransfer API şu anda kullanılabilir durumda olsa da entegrasyondan önce dikkate alınması gereken bazı noktalar vardır.

Tarayıcı uyumluluğu

Masaüstü tarayıcıların tümü yukarıda açıklanan tekniği destekler ancak mobil cihazlar desteklemez. 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 edilmiştir ancak maalesef Android ve iOS testten geçememiştir. Tarayıcılar gelişmeye devam etse de bu teknik şu anda yalnızca masaüstü tarayıcılarla sınırlıdır.

Keşfedilebilirlik

Masaüstü bilgisayarda çalışırken kullanılan sürükle ve bırak ve kopyala yapıştır işlemleri, 40 yıldan uzun süre önce ilk GUI'lerde ortaya çıkan sistem düzeyinde etkileşimlerdir. Dosyaları düzenlemek için bu etkileşimleri kaç kez kullandığınızı düşünün. Bu özellik henüz web'de çok yaygın değil.

Kullanıcıları bu yeni etkileşim hakkında eğitmeniz ve özellikle bilgisayar deneyimi şimdiye kadar mobil cihazlarla sınırlı olan kullanıcılar için bu etkileşimi tanınabilir hale getirecek kullanıcı deneyimi kalıpları oluşturmanız gerekir.

Erişilebilirlik

Sürükle bırakma çok erişilebilir bir etkileşim değildir ancak DataTransfer API, kopyala yapıştırma ile de çalışır. Kopyala-yapıştır etkinliklerini dinlediğinizden emin olun. Bu işlem çok fazla çaba gerektirmez ve kullanıcılarınız bu özelliği eklediğiniz için size teşekkür eder.

Güvenlik ve gizlilik

Bu tekniği kullanırken dikkat etmeniz gereken bazı güvenlik ve gizlilik hususları vardır.

• Kullanıcının cihazındaki diğer uygulamalar, panosundaki verilere erişebilir.
• Taşıdığınız web uygulamaları, verilere değil tür anahtarlarına erişir. Veriler yalnızca bırakıldığında veya yapıştırıldığında kullanılabilir.
• Alınan veriler diğer kullanıcı girişleri gibi ele alınmalı, kullanılmadan önce temizlenmeli ve doğrulanmalıdır.

Transmat yardımcı kitaplığını kullanmaya başlama

Uygulamanızda DataTransfer API'yi kullanmaktan heyecan duyuyor musunuz? GitHub'daki Transmat kitaplığına göz atabilirsiniz. Bu açık kaynak kitaplık, tarayıcı farklılıklarını uyumlu hale getirir, JSON-LD yardımcı programları sağlar, bırakma alanlarını vurgulamak için aktarım etkinliklerine yanıt veren bir gözlemci içerir ve mevcut sürükle ve bırak uygulamaları arasında veri aktarım işlemlerini 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ür ederiz

Unsplash'tan Luba Ertel tarafından oluşturulan hero resim.