diff --git a/src/clickToCopy.ts b/src/clickToCopy.ts new file mode 100644 index 0000000..812966f --- /dev/null +++ b/src/clickToCopy.ts @@ -0,0 +1,51 @@ +import { Action } from "./types"; + +/** + * + * Copies the text of an element on click: either of the element + * it's attached to or a different element using the target + * parameter. Target is a string representing a valid CSS selector. + * + * Usage: + *

...

+ * + * or + * + * + * + * Demo: https://svelte.dev/repl/667d8ac94e2349f3a1b7b8c5fa4c0082?version=3.32.1 + * + */ + +export function clickToCopy(node: HTMLElement, target?: string): ReturnType { + async function copyText() { + let text: string = target + ? (document.querySelector(target) as HTMLElement).innerText + : node.innerText; + + try { + await navigator.clipboard.writeText(text); + + node.dispatchEvent( + new CustomEvent("copysuccess", { + bubbles: true, + }) + ); + } catch (error) { + node.dispatchEvent( + new CustomEvent("copyerror", { + bubbles: true, + detail: error, + }) + ); + } + } + + node.addEventListener("click", copyText); + + return { + destroy() { + node.removeEventListener("click", copyText); + }, + }; +} diff --git a/src/index.ts b/src/index.ts index fd40007..b1f9b52 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,3 +4,4 @@ export * from './pannable'; export * from './lazyload'; export * from './preventTabClose'; export * from './shortcut'; +export * from './clickToCopy';