diff --git a/includes/style.less b/includes/style.less index e811bca..0be7cc3 100644 --- a/includes/style.less +++ b/includes/style.less @@ -22,6 +22,11 @@ button { white-space: nowrap; width: 100%; + &.half { + float: left; + width: 50%; + } + &.pagination:not(.normal) { position: absolute; bottom: 5vmin; diff --git a/index.pug b/index.pug index d1248ad..05b8aaf 100644 --- a/index.pug +++ b/index.pug @@ -101,9 +101,9 @@ html(lang="en-gb") p#added textarea#output(autocomplete="off") - br - button#download download + button#clipboard.half copy to clipboard + button#download.half download button.pagination.prev#add add another image button.pagination.start#reset start again diff --git a/script.js b/script.js index 5cd6d01..84dc166 100644 --- a/script.js +++ b/script.js @@ -24,6 +24,18 @@ function download(filename, text) { document.body.removeChild(element); } +function copyToClipboard() { + const button = el("clipboard"); + + el("output").select(); + document.execCommand("copy"); + button.innerText = "copied!"; + + setTimeout(() => { + button.innerText = "copy to clipboard"; + }, 2000); +} + function el(id) { return document.getElementById(id); } @@ -64,6 +76,7 @@ async function run() { const buttonAddImage = el("add"); const buttonBackToImage = el("back-to-image"); + const buttonCopyToClipboard = el("clipboard") const buttonDownload = el("download"); const buttonGameDataProceed = el("game-data-next"); const buttonImageProceed = el("image-next"); @@ -241,6 +254,9 @@ async function run() { download("output.bitsy", textareaGameDataOutput.value); } + buttonCopyToClipboard.addEventListener("click", copyToClipboard); + buttonCopyToClipboard.addEventListener("touchend", copyToClipboard); + buttonDownload.addEventListener("click", handleDownload); buttonDownload.addEventListener("touchend", handleDownload);