Make copy to clipboard an exported utility

This commit is contained in:
Andrew Kingston 2022-02-24 21:48:23 +00:00
parent c944d1fdf5
commit 969e6531d5
4 changed files with 40 additions and 33 deletions

View File

@ -1,42 +1,21 @@
<script>
import Icon from "../Icon/Icon.svelte"
import { copyToClipboard } from "../helpers"
import { notifications } from "../Stores/notifications"
export let value
const onClick = e => {
const onClick = async e => {
e.stopPropagation()
copyToClipboard(value)
}
const copyToClipboard = value => {
return new Promise(res => {
if (navigator.clipboard && window.isSecureContext) {
// Try using the clipboard API first
navigator.clipboard.writeText(value).then(res)
} else {
// Fall back to the textarea hack
let textArea = document.createElement("textarea")
textArea.value = value
textArea.style.position = "fixed"
textArea.style.left = "-9999px"
textArea.style.top = "-9999px"
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
document.execCommand("copy")
textArea.remove()
res()
}
})
.then(() => {
try {
await copyToClipboard(value)
notifications.success("Copied to clipboard")
})
.catch(() => {
} catch (error) {
notifications.error(
"Failed to copy to clipboard. Check the dev console for the value."
)
console.warn("Failed to copy the value", value)
})
}
}
</script>

View File

@ -1,3 +1,5 @@
import { notifications } from "./Stores/notifications"
/**
* Generates a DOM safe UUID.
* Starting with a letter is important to make it DOM safe.
@ -106,3 +108,29 @@ export const deepSet = (obj, key, value) => {
export const cloneDeep = obj => {
return JSON.parse(JSON.stringify(obj))
}
/**
* Copies a value to the clipboard
* @param value the value to copy
*/
export const copyToClipboard = value => {
return new Promise(res => {
if (navigator.clipboard && window.isSecureContext) {
// Try using the clipboard API first
navigator.clipboard.writeText(value).then(res)
} else {
// Fall back to the textarea hack
let textArea = document.createElement("textarea")
textArea.value = value
textArea.style.position = "fixed"
textArea.style.left = "-9999px"
textArea.style.top = "-9999px"
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
document.execCommand("copy")
textArea.remove()
res()
}
})
}