Class: CopyToClipboard

CopyToClipboard()

<brut-copy-to-clipboard>

Wraps a <BUTTON> that will copy text from another element into the system clipboard. It will set various attributes on itself to allow styling the states of the process.

Overall, the flow is as follows:

  1. When the button is clicked, its default is prevented, and the element with the id of the element attribute is located.
  2. If found, this element gets the copying attribute set.
  3. If the copy completes successfully: a. copying is removed b. copied is set c. copied is scheduled for removal in 2000ms or the number of milliseconds in the copied-lifetime attribute.
  4. If the copy failed: a. copying is removed b. errored is set c. The brut:copyfailed event is fired. It's detail contains a text: value with the text that was attempted to be copied.

The intention is to use these attributes to style whatever UX you want.

Constructor

new CopyToClipboard()

Properties:
Name Type Description
element string

ID of the element whose textContent is what will be copied to the clipboard.
copied-lifetime number

number of milliseconds to wait before clearing the copied attribute after a successful copy.
copying boolean

Set after a copy is initiated, but before it completes
copied boolean

Set after a copy is completed successfully
errored boolean

Set after a copy is fails
Source:
Fires:
  • brut:copyfailed Fired when the copy fails to complete
Example
<pre><code id="code">dx/exec bin/setup</code></pre>
<brut-copy-to-clipboard element="code">
  <button>Copy</button>
</brut-copy-to-clipboard>