-
Notifications
You must be signed in to change notification settings - Fork 1
/
DataTransferInspector.html
99 lines (97 loc) · 3.24 KB
/
DataTransferInspector.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html>
<head>
<script>
var file_urls = [];
function setContent(data) {
file_urls.forEach(URL.revokeObjectURL);
file_urls = []
var effects = document.getElementById("effects");
effects.innerHTML = "";
effects.appendChild(document.createTextNode("Effects: "+data.effectAllowed));
var target = document.getElementById("target");
var files = {}
Array.from(data.files).forEach(function(file) {
if(files.hasOwnProperty(file.type)) {
debugger;
throw "duplicate file type: "+file.type;
}
files[file.type] = file;
});
target.innerHTML = "";
Array.from(data.items).forEach(function(item) {
var fullType = item.type;
var typeParts = fullType.split('/');
if(typeParts.length != 2) {
debugger;
throw "Type should consist of a type and subtype, not " + item.type;
}
var type = typeParts[0];
var subtype = typeParts[1];
var kind = item.kind;
var node = document.createElement('div');
node.className = "item-display " + kind + "-kind " + type + "-type " + subtype + "-subtype"
var result = target.appendChild(node);
var typeNode = result.appendChild(document.createElement('div'));
typeNode.className = "type-display"
typeNode.appendChild(document.createElement('h2')).appendChild(document.createTextNode(fullType));
var kindNode = result.appendChild(document.createElement('div'));
kindNode.className = "kind-display"
kindNode.appendChild(document.createElement('h3')).appendChild(document.createTextNode(kind));
var contentNode = result.appendChild(document.createElement('div'));
contentNode.className = "value-display"
switch(kind) {
case "string":
var value = data.getData(fullType);
contentNode.appendChild(document.createElement('p'))
.appendChild(document.createTextNode(value));
break;
case "file":
var file = files[fullType];
var link = contentNode.appendChild(document.createElement('a'))
link.appendChild(document.createTextNode(file.name));
var url = URL.createObjectURL(file.slice(0,file.size,fullType));
link.href = url;
link.type = fullType;
link.download = file.name;
file_urls.push(url);
if(type.toUpperCase() === "image".toUpperCase()) {
var image = link
.appendChild(document.createElement("div"))
.appendChild(document.createElement("img"));
image.src = url;
}
break;
default:
debugger;
throw "Unrecognised kind: "+kind;
}
})
};
document.addEventListener('paste', function(event){
document.getElementById("mode").textContent="Paste Data";
event.preventDefault();
setContent(event.clipboardData);
});
document.addEventListener('dragover', function(event) {
event.preventDefault();
});
document.addEventListener('drop', function(event) {
document.getElementById("mode").textContent="Drag and Drop Data";
event.preventDefault();
setContent(event.dataTransfer);
});
</script>
<title>Data Transfer Inspector</title>
<style>
.text-type.plain-subtype .value-display, .text-type.plain-subtype .value-display * {
white-space: pre-wrap;
}
</style>
</head>
<body>
<div id="root">
<h1 id="mode">Empty</h1>
<p id="effects"/>
<div id="target"/></div>
</body>
</html>