Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
109 lines (86 sloc) 3.51 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dump drag&amp;drop / copy&amp;paste data</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
</head>
<body class="container">
<h1>Dump drag&amp;drop / copy&amp;paste data</h1>
<p>
Source code for this page on Github: <a href="https://github.com/tistre/js-copy-drag-json-ld/blob/master/dump-data.html">dump-data.html</a>
You can test it with <a href="example.html">example.html</a>.
</p>
<div id="dropTarget" class="alert alert-secondary">
Drop link here
</div>
<form onsubmit="return false;">
<div class="form-group">
<label>Paste link here:</label>
<input type="text" class="form-control" id="pasteInput"/>
</div>
<div class="form-group">
<button type="button" class="btn btn-secondary" onclick="resetAll()">Reset</button>
</div>
</form>
<h3>Found data:</h3>
<div id="dataOutput"></div>
<template id="itemOutputTemplate">
<div class="card" style="margin-bottom: 10px;">
<div class="card-header">Type</div>
<div class="card-body">
<pre class="card-text">Value</pre>
</div>
</div>
</template>
<script type="text/javascript">
function onDragOver(event) {
// Prevent default to allow drop
event.preventDefault();
}
function onDrop(event) {
event.preventDefault();
outputData(event.dataTransfer);
}
function onPaste(event) {
outputData(event.clipboardData);
}
function resetAll() {
document.querySelector('#dataOutput').innerHTML = '';
document.getElementById('pasteInput').value = '';
}
function outputData(data) {
document.querySelector('#dataOutput').innerHTML = '';
if (data.items != null) {
for (let i = 0; i < data.items.length; i++) {
// In Google Chrome, the DataTransferItem is gone after the getAsString() callback
// executes, so we need to copy its information beforehand
const itemKind = data.items[i].kind;
const itemType = data.items[i].type;
data.items[i].getAsString(function (itemValue) {
console.log(itemValue, itemKind, itemType);
outputItem({kind: itemKind, type: itemType, value: itemValue});
});
}
}
}
function outputItem(item) {
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if (!('content' in document.createElement('template'))) {
alert('Please use a browser that supports templates.');
}
const template = document.querySelector('#itemOutputTemplate');
const dataOutput = document.querySelector('#dataOutput');
const clone = document.importNode(template.content, true);
clone.querySelector('div.card-header').textContent = item.type;
clone.querySelector('pre.card-text').textContent = item.value;
dataOutput.appendChild(clone);
}
document.getElementById('dropTarget').addEventListener('dragover', onDragOver, false);
document.getElementById('dropTarget').addEventListener('drop', onDrop, false);
document.getElementById('pasteInput').addEventListener('paste', onPaste, false);
</script>
</body>
</html>