|
| 1 | +import { html } from 'lit'; |
| 2 | +import { property } from 'lit/decorators.js'; |
| 3 | +import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; |
| 4 | +import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils'; |
| 5 | +import { UUIButtonElement } from '@umbraco-ui/uui-button/lib'; |
| 6 | +import { UUICopyTextEvent } from './UUICopyTextEvent.js'; |
| 7 | + |
| 8 | +/** |
| 9 | + * @summary A button to trigger text content to be copied to the clipboard |
| 10 | + * @element uui-button-copy-text |
| 11 | + * @dependency uui-button |
| 12 | + * @dependency uui-icon |
| 13 | + * @fires {UUICopyTextEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard |
| 14 | + * @fires {UUICopyTextEvent} copied - Fires when the content is copied to the clipboard |
| 15 | + * @slot - Use to replace the default content of the copy icon |
| 16 | + */ |
| 17 | +@defineElement('uui-button-copy-text') |
| 18 | +export class UUIButtonCopyTextElement extends UUIButtonElement { |
| 19 | + /** |
| 20 | + * Set a string you wish to copy to the clipboard |
| 21 | + * @type {string} |
| 22 | + * @default '' |
| 23 | + */ |
| 24 | + @property({ type: String }) |
| 25 | + text: string = ''; |
| 26 | + |
| 27 | + /** |
| 28 | + * Copies the text content from another element by specifying the ID of the element |
| 29 | + * The ID of the element does not need to start with # like a CSS selector |
| 30 | + * If this property is set, the value property is ignored |
| 31 | + * @type {string} |
| 32 | + * @attr |
| 33 | + * @default '' |
| 34 | + * @example copy-from="element-id" |
| 35 | + */ |
| 36 | + @property({ type: String, attribute: 'copy-from' }) |
| 37 | + copyFrom: string = ''; |
| 38 | + |
| 39 | + /** |
| 40 | + * The delay in milliseconds before the button returns to its default state after a successful copy |
| 41 | + * @type {number} |
| 42 | + * @attr |
| 43 | + * @default 250 |
| 44 | + */ |
| 45 | + @property({ type: Number, attribute: 'animation-state-delay' }) |
| 46 | + animationStateDelay: number = 250; |
| 47 | + |
| 48 | + #animationTimer?: any; |
| 49 | + |
| 50 | + constructor() { |
| 51 | + super(); |
| 52 | + demandCustomElement(this, 'uui-icon'); |
| 53 | + |
| 54 | + this.addEventListener('click', this.#onClick); |
| 55 | + } |
| 56 | + |
| 57 | + disconnectedCallback(): void { |
| 58 | + super.disconnectedCallback(); |
| 59 | + if (this.#animationTimer) { |
| 60 | + clearTimeout(this.#animationTimer); |
| 61 | + } |
| 62 | + } |
| 63 | + |
| 64 | + readonly #onClick = async () => { |
| 65 | + this.state = 'waiting'; |
| 66 | + |
| 67 | + // By default use the value property |
| 68 | + let valueToCopy = this.text; |
| 69 | + |
| 70 | + // If copy-from is set use that instead |
| 71 | + if (this.copyFrom) { |
| 72 | + // Try & find an element with the ID |
| 73 | + const el = document.getElementById(this.copyFrom); |
| 74 | + if (el) { |
| 75 | + // Override the value to copy, if the element has a value property |
| 76 | + // Such as uui-input or uui-textarea or native inout elements |
| 77 | + if ('value' in el) { |
| 78 | + valueToCopy = (el as any).value; |
| 79 | + } else { |
| 80 | + valueToCopy = el.textContent ?? el.innerText ?? ''; |
| 81 | + } |
| 82 | + } else { |
| 83 | + console.error(`Element ID ${this.copyFrom} not found to copy from`); |
| 84 | + this.state = 'failed'; |
| 85 | + return; |
| 86 | + } |
| 87 | + } |
| 88 | + |
| 89 | + const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING); |
| 90 | + beforeCopyEv.text = valueToCopy; |
| 91 | + this.dispatchEvent(beforeCopyEv); |
| 92 | + |
| 93 | + if (beforeCopyEv.text != null) { |
| 94 | + valueToCopy = beforeCopyEv.text; |
| 95 | + } |
| 96 | + |
| 97 | + try { |
| 98 | + await navigator.clipboard.writeText(valueToCopy); |
| 99 | + const copiedEv = new UUICopyTextEvent(UUICopyTextEvent.COPIED); |
| 100 | + copiedEv.text = valueToCopy; |
| 101 | + this.dispatchEvent(copiedEv); |
| 102 | + this.#animationTimer = setTimeout(() => { |
| 103 | + this.state = 'success'; |
| 104 | + }, this.animationStateDelay); |
| 105 | + } catch (err) { |
| 106 | + this.state = 'failed'; |
| 107 | + console.error('Error copying to clipboard', err); |
| 108 | + } |
| 109 | + }; |
| 110 | + |
| 111 | + protected override renderLabel() { |
| 112 | + return html` |
| 113 | + <slot class="label"> |
| 114 | + <uui-icon name="copy"></uui-icon> |
| 115 | + </slot> |
| 116 | + `; |
| 117 | + } |
| 118 | + |
| 119 | + static override readonly styles = UUIButtonElement.styles; |
| 120 | +} |
| 121 | + |
| 122 | +declare global { |
| 123 | + interface HTMLElementTagNameMap { |
| 124 | + 'uui-button-copy-text': UUIButtonCopyTextElement; |
| 125 | + } |
| 126 | +} |
0 commit comments