Add drag and drop support.

This commit is contained in:
Will Scullin 2020-07-09 06:11:54 -07:00
parent ebe3821b0f
commit 7a3cff10ec
No known key found for this signature in database
GPG Key ID: 9092A5C0A673416B
2 changed files with 33 additions and 5 deletions

View File

@ -58,7 +58,9 @@ var tapes = {};
<!-- Web FE --> <!-- Web FE -->
</head> </head>
<body> <body ondragover="Apple1.handleDragOver(event)"
ondrop="Apple1.handleDrop(event)"
ondragend="Apple1.handleDragEnd(event)">
<div style="margin: auto; width: 604px"> <div style="margin: auto; width: 604px">
<h1 style="font-size: 24px" class="motter">Apple 1js</h1> <h1 style="font-size: 24px" class="motter">Apple 1js</h1>
<h2 id="subtitle">An Apple 1 Emulator in JavaScript</h2> <h2 id="subtitle">An Apple 1 Emulator in JavaScript</h2>

View File

@ -80,9 +80,9 @@ if (typeof window.webkitAudioContext !== 'undefined') {
context = new window.AudioContext(); context = new window.AudioContext();
} }
export function doLoadLocal() { export function doLoadLocal(files) {
context.resume(); context.resume();
var files = document.querySelector('#local_file').files; files = files || document.querySelector('#local_file').files;
if (files.length == 1) { if (files.length == 1) {
var file = files[0]; var file = files[0];
var fileReader = new FileReader(); var fileReader = new FileReader();
@ -106,8 +106,8 @@ export function doLoadLocal() {
aci.buffer = buf; aci.buffer = buf;
MicroModal.close('local-modal'); MicroModal.close('local-modal');
}, },
function(error) { function() {
window.alert(error.message); window.alert('Unable to read tape file: ' + file.name);
} }
); );
}; };
@ -352,6 +352,32 @@ export function doLoadText() {
MicroModal.close('input-modal'); MicroModal.close('input-modal');
} }
export function handleDragOver(event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}
export function handleDrop(event) {
event.preventDefault();
event.stopPropagation();
var dt = event.dataTransfer;
if (dt.files.length > 0) {
doLoadLocal(dt.files);
}
}
export function handleDragEnd(event) {
var dt = event.dataTransfer;
if (dt.items) {
for (var i = 0; i < dt.items.length; i++) {
dt.items.remove(i);
}
} else {
event.dataTransfer.clearData();
}
}
MicroModal.init(); MicroModal.init();
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {