-
Notifications
You must be signed in to change notification settings - Fork 0
/
CodeCopy.svelte
106 lines (91 loc) · 2.7 KB
/
CodeCopy.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<script lang="ts">
import { observable } from '@jill64/async-observer'
import { CheckIcon, CopyIcon, LoaderIcon, XIcon } from 'svelte-feather-icons'
import { hydrated } from 'svelte-hydrated'
import { fade } from 'svelte/transition'
/**
* Execute at the start of copying.
* @param promise Promise to resolve when copying is complete.
*/
export let onCopy: ((promise: Promise<string>) => void) | undefined =
undefined
/** Icon size (px) */
export let size = 18
export let background = 'transparent'
export let color = 'whitesmoke'
export let success = 'green'
export let error = 'red'
export let top = '0.5rem'
export let right = '0.5rem'
export let border = 'none'
export let padding = '0.25rem'
export let borderRadius = '0.25rem'
export let margin = '0'
/** Effect when button interaction */
export let effect: 'none' | 'push' | 'pop' = 'pop'
/** Fade duration after mount */
export let duration = 150
const { status, observed } = observable()
let dom: HTMLElement | null
const onClick = observed(async () => {
const source =
dom?.getElementsByTagName('code')[0].innerText.replace(/\n$/, '') ?? ''
const promise = navigator.clipboard.writeText(source)
onCopy?.(promise.then(() => source))
await promise
})
$: textColor =
$status === 'FULFILLED' ? success : $status === 'REJECTED' ? error : color
$: iconSize = size.toString()
</script>
<div bind:this={dom} style:position="relative">
{#if $hydrated}
<button
transition:fade={{ duration }}
title="Copy"
style:--button-background={background}
style:cursor="pointer"
style:color={textColor}
style:top
style:right
style:margin
style:padding
style:border
style:border-radius={borderRadius}
style:position="absolute"
style:display="inline-flex"
style:align-items="center"
style:justify-content="center"
data-button-effect={effect}
on:click={onClick}
>
{#if $status === 'IDLE'}
<CopyIcon size={iconSize} />
{:else if $status === 'PENDING'}
<LoaderIcon size={iconSize} />
{:else if $status === 'FULFILLED'}
<CheckIcon size={iconSize} />
{:else}
<XIcon size={iconSize} />
{/if}
</button>
{/if}
<slot />
</div>
<style>
button {
background: var(--button-background);
}
button[data-button-effect='push']:hover {
background: rgba(0, 0, 0, 0.1);
}
button[data-button-effect='push']:active {
background: rgba(0, 0, 0, 0.2);
}
button[data-button-effect='pop']:hover {
background: rgba(255, 255, 255, 0.1);
}
button[data-button-effect='pop']:active {
background: rgba(255, 255, 255, 0.15);
}
</style>