167 lines
4.1 KiB
HTML
167 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Paste Image Demo</title>
|
|
<!-- TODO: More style reuse -->
|
|
<style>
|
|
|
|
button {
|
|
border-radius: 0.5em;
|
|
padding: 0.25em .5em;
|
|
margin-right: 1em;
|
|
background-color: #CFC;
|
|
}
|
|
|
|
#dropZone {
|
|
background-color: #ccc;
|
|
min-width: 10em;
|
|
min-height: 10em;
|
|
border: 2px dashed #888;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: #888;
|
|
padding: 1em;
|
|
}
|
|
|
|
kbd {
|
|
border: 1px #CCC outset;
|
|
padding: 0em 0.2em;
|
|
border-radius: 0.3em;
|
|
margin: 0.2em;
|
|
background-color: #EEE;
|
|
box-shadow: 0.2em 0.2em 0.5em rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.toolbar {
|
|
padding: .5em 0em;
|
|
background-color: #EEF;
|
|
}
|
|
|
|
#data_url_bin {
|
|
overflow-x: auto;
|
|
display: block;
|
|
}
|
|
|
|
|
|
</style>
|
|
<script src="../lib/cm6.bundle.min.js"></script>
|
|
<script type="module">
|
|
let editor_view = null;
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const dropZone = document.getElementById('dropZone');
|
|
|
|
const data_url_bin = document.getElementById('data_url_bin');
|
|
const copy_url = document.getElementById('copy_url');
|
|
const copy_script = document.getElementById('copy_script');
|
|
|
|
document.addEventListener('paste', async (event) => {
|
|
const items = event.clipboardData.items;
|
|
for (let item of items) {
|
|
if (item.type.indexOf("image") !== -1) {
|
|
const blob = item.getAsFile();
|
|
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(blob);
|
|
reader.addEventListener('load', ({ target }) => {
|
|
data_url_bin.innerText = target.result;
|
|
|
|
const initial_code = `const image = new Image();\nimage.src = ${JSON.stringify(target.result)};`;
|
|
|
|
if (editor_view) {
|
|
editor_view.dispatch({
|
|
changes: [{
|
|
from: 0,
|
|
to: editor_view.state.doc.length,
|
|
insert: initial_code,
|
|
}]
|
|
});
|
|
} else {
|
|
const editor = document.getElementById("editor");
|
|
const initial_state = cm6.createEditorState(initial_code);
|
|
editor_view = cm6.createEditorView(initial_state, editor);
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
const url = URL.createObjectURL(blob);
|
|
const img = new Image();
|
|
img.src = url;
|
|
dropZone.innerHTML = '';
|
|
dropZone.appendChild(img);
|
|
//console.log("Pasted image element:", await (await fetch(url)).blob());
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
|
|
copy_url.addEventListener('click', () => {
|
|
navigator.clipboard.writeText(data_url_bin.textContent);
|
|
notify('Data URL copied');
|
|
});
|
|
|
|
copy_script.addEventListener('click', () => {
|
|
navigator.clipboard.writeText(editor_view.state.doc.toString());
|
|
notify('Script copied');
|
|
});
|
|
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.altKey && event.key.toLowerCase() === 'd') {
|
|
event.preventDefault();
|
|
copy_url.dispatchEvent(new Event('click'));
|
|
}
|
|
if (event.altKey && event.key.toLowerCase() === 's') {
|
|
event.preventDefault();
|
|
copy_script.dispatchEvent(new Event('click'));
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
|
|
function notify(brief) {
|
|
//TODO - move this stuff to a common API we can use in different places
|
|
if (Notification.permission === 'granted') {
|
|
new Notification(brief);
|
|
} else {
|
|
const toast = document.createElement('div');
|
|
toast.textContent = brief;
|
|
Object.assign(toast.style, {
|
|
position: 'fixed',
|
|
bottom: '1em',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
background: '#333',
|
|
color: '#fff',
|
|
padding: '0.5em 1em',
|
|
borderRadius: '5px',
|
|
opacity: '0.9',
|
|
zIndex: 1000,
|
|
pointerEvents: 'none',
|
|
});
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 1500);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="toolbar">
|
|
<button id="copy_url">Copy <i>Data URL</i></button>(<kbd>Alt</kbd><kbd>D</kbd>)
|
|
<button id="copy_script">Copy loader script</button>(<kbd>Alt</kbd><kbd>S</kbd>)
|
|
</div>
|
|
<div id="dropZone">Paste an image here (<kbd>Ctrl</kbd><kbd>V</kbd>)</div>
|
|
<h2>Data URL</h2>
|
|
<code id="data_url_bin"></code>
|
|
<h2>EcmaScript</h2>
|
|
<div id="editor"></div>
|
|
|
|
|
|
</body>
|
|
</html> |