Added copy as data URL or copy as EcmaScript
This commit is contained in:
@@ -3,7 +3,16 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Paste Image Demo</title>
|
<title>Paste Image Demo</title>
|
||||||
|
<!-- TODO: More style reuse -->
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 0.5em;
|
||||||
|
padding: 0.25em .5em;
|
||||||
|
margin-right: 1em;
|
||||||
|
background-color: #CFC;
|
||||||
|
}
|
||||||
|
|
||||||
#dropZone {
|
#dropZone {
|
||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
min-width: 10em;
|
min-width: 10em;
|
||||||
@@ -14,22 +23,40 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #888;
|
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 {
|
#data_url_bin {
|
||||||
cursor: pointer;
|
overflow-x: auto;
|
||||||
white-space: pre-wrap;
|
display: block;
|
||||||
word-wrap: break-word;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
<script src="../lib/cm6.bundle.min.js"></script>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
|
let editor_view = null;
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const dropZone = document.getElementById('dropZone');
|
const dropZone = document.getElementById('dropZone');
|
||||||
|
|
||||||
const data_url_bin = document.getElementById('data_url_bin');
|
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) => {
|
document.addEventListener('paste', async (event) => {
|
||||||
const items = event.clipboardData.items;
|
const items = event.clipboardData.items;
|
||||||
for (let item of items) {
|
for (let item of items) {
|
||||||
@@ -40,6 +67,24 @@
|
|||||||
reader.readAsDataURL(blob);
|
reader.readAsDataURL(blob);
|
||||||
reader.addEventListener('load', ({ target }) => {
|
reader.addEventListener('load', ({ target }) => {
|
||||||
data_url_bin.innerText = target.result;
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
@@ -54,14 +99,38 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
data_url_bin.addEventListener('click', ({ target }) => {
|
copy_url.addEventListener('click', () => {
|
||||||
navigator.clipboard.writeText(target.textContent);
|
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
|
//TODO - move this stuff to a common API we can use in different places
|
||||||
if (Notification.permission === 'granted') {
|
if (Notification.permission === 'granted') {
|
||||||
new Notification("Copied to clipboard");
|
new Notification(brief);
|
||||||
} else {
|
} else {
|
||||||
const toast = document.createElement('div');
|
const toast = document.createElement('div');
|
||||||
toast.textContent = "Copied!";
|
toast.textContent = brief;
|
||||||
Object.assign(toast.style, {
|
Object.assign(toast.style, {
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
bottom: '1em',
|
bottom: '1em',
|
||||||
@@ -77,13 +146,21 @@
|
|||||||
document.body.appendChild(toast);
|
document.body.appendChild(toast);
|
||||||
setTimeout(() => toast.remove(), 1500);
|
setTimeout(() => toast.remove(), 1500);
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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 (Ctrl+V)</div>
|
<div id="dropZone">Paste an image here (Ctrl+V)</div>
|
||||||
<code id="data_url_bin" style="width: 80vw"></code>
|
<h2>Data URL</h2>
|
||||||
|
<code id="data_url_bin"></code>
|
||||||
|
<h2>EcmaScript</h2>
|
||||||
|
<div id="editor"></div>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user