function init_listeners() { document.querySelector('.main').addEventListener('dragover', cancel); document.querySelector('.main').addEventListener('drop', drop); document.querySelector('.main').addEventListener('click', debug); window.addEventListener('keydown', keydown); window.addEventListener('keyup', keyup); } function debug() { schedule_draw(); } function cancel(e) { e.preventDefault(); e.stopPropagation(); } function keydown(e) { if (e.code === 'ArrowLeft') { offset.x += 10 / scale; } else if (e.code === 'ArrowRight') { offset.x -= 10 / scale; } else if (e.code === 'ArrowDown') { offset.y -= 10 / scale; } else if (e.code === 'ArrowUp') { offset.y += 10 / scale; } else if (e.code === 'PageUp') { scale *= 0.9; } else if (e.code === 'PageDown') { scale *= 1.1; } schedule_draw(); } function keyup(e) { } function drop(e) { e.preventDefault(); if (e.dataTransfer.files.length !== 1) { console.error('Only one file at once, please!'); return false; } const file = e.dataTransfer.files[0]; const fr = new FileReader(); const upload_failed = () => { console.error('Upload failed'); }; const upload_started = () => { console.log('Upload started'); }; const upload_finished = () => { const text = fr.result; console.log('Finished. String length:', text.length); parse(text); }; const upload_progress = (e) => { if (e.lengthComputable) { const percent = Math.floor(e.loaded / e.total * 100); console.log(`Progress: ${percent}%`); } else { console.log('Progress: unknown'); } }; fr.addEventListener('abort', upload_failed); fr.addEventListener('error', upload_failed); fr.addEventListener('load', upload_finished); fr.addEventListener('loadstart', upload_started); fr.addEventListener('progress', upload_progress); fr.readAsText(file); }