mirror of https://github.com/docusealco/docuseal
Alex Turchyn
2 years ago
parent
ed157dc952
commit
d0c7d449d5
@ -1,152 +1,15 @@
|
|||||||
// Source: https://github.com/github/clipboard-copy-element
|
|
||||||
// License: MIT
|
|
||||||
export default class extends HTMLElement {
|
export default class extends HTMLElement {
|
||||||
constructor () {
|
|
||||||
super()
|
|
||||||
this.addEventListener('click', clicked)
|
|
||||||
this.addEventListener('focus', focused)
|
|
||||||
this.addEventListener('blur', blurred)
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback () {
|
connectedCallback () {
|
||||||
if (!this.hasAttribute('tabindex')) {
|
this.addEventListener('click', (e) => {
|
||||||
this.setAttribute('tabindex', '0')
|
e.stopPropagation()
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.hasAttribute('role')) {
|
|
||||||
this.setAttribute('role', 'button')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get value () {
|
|
||||||
return this.getAttribute('value') || ''
|
|
||||||
}
|
|
||||||
|
|
||||||
set value (text) {
|
|
||||||
this.setAttribute('value', text)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createNode (text) {
|
|
||||||
const node = document.createElement('pre')
|
|
||||||
node.style.width = '1px'
|
|
||||||
node.style.height = '1px'
|
|
||||||
node.style.position = 'fixed'
|
|
||||||
node.style.top = '5px'
|
|
||||||
node.textContent = text
|
|
||||||
return node
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyNode (node) {
|
|
||||||
if ('clipboard' in navigator) {
|
|
||||||
return navigator.clipboard.writeText(node.textContent || '')
|
|
||||||
}
|
|
||||||
|
|
||||||
const selection = getSelection()
|
|
||||||
if (selection == null) {
|
|
||||||
return Promise.reject(new Error())
|
|
||||||
}
|
|
||||||
|
|
||||||
selection.removeAllRanges()
|
|
||||||
|
|
||||||
const range = document.createRange()
|
|
||||||
range.selectNodeContents(node)
|
|
||||||
selection.addRange(range)
|
|
||||||
|
|
||||||
document.execCommand('copy')
|
|
||||||
selection.removeAllRanges()
|
|
||||||
return Promise.resolve()
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyText (text) {
|
|
||||||
if ('clipboard' in navigator) {
|
|
||||||
return navigator.clipboard.writeText(text)
|
|
||||||
}
|
|
||||||
|
|
||||||
const body = document.body
|
|
||||||
if (!body) {
|
|
||||||
return Promise.reject(new Error())
|
|
||||||
}
|
|
||||||
|
|
||||||
const node = createNode(text)
|
navigator.clipboard.writeText(this.dataset.text || this.innerText.trim())
|
||||||
body.appendChild(node)
|
})
|
||||||
copyNode(node)
|
|
||||||
body.removeChild(node)
|
|
||||||
return Promise.resolve()
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyTarget (content) {
|
|
||||||
if (
|
|
||||||
content instanceof HTMLInputElement ||
|
|
||||||
content instanceof HTMLTextAreaElement
|
|
||||||
) {
|
|
||||||
return copyText(content.value)
|
|
||||||
} else if (
|
|
||||||
content instanceof HTMLAnchorElement &&
|
|
||||||
content.hasAttribute('href')
|
|
||||||
) {
|
|
||||||
return copyText(content.href)
|
|
||||||
} else {
|
|
||||||
return copyNode(content)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function copy (button) {
|
|
||||||
const id = button.getAttribute('for')
|
|
||||||
const text = button.getAttribute('value')
|
|
||||||
|
|
||||||
function trigger () {
|
|
||||||
button.dispatchEvent(new CustomEvent('clipboard-copy', { bubbles: true }))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleActiveIcon () {
|
disconnectedCallback () {
|
||||||
if (button.classList.contains('swap')) {
|
this.querySelectorAll('input').forEach((e) => {
|
||||||
button.classList.toggle('swap-active')
|
e.checked = false
|
||||||
}
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (text) {
|
|
||||||
await copyText(text)
|
|
||||||
trigger()
|
|
||||||
toggleActiveIcon()
|
|
||||||
} else if (id) {
|
|
||||||
const root = 'getRootNode' in Element.prototype ? button.getRootNode() : button.ownerDocument
|
|
||||||
|
|
||||||
if (!(root instanceof Document || ('ShadowRoot' in window && root instanceof ShadowRoot))) return
|
|
||||||
|
|
||||||
const node = root.getElementById(id)
|
|
||||||
|
|
||||||
if (node) {
|
|
||||||
await copyTarget(node)
|
|
||||||
trigger()
|
|
||||||
toggleActiveIcon()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function clicked (event) {
|
|
||||||
const button = event.currentTarget
|
|
||||||
|
|
||||||
if (button instanceof HTMLElement) {
|
|
||||||
copy(button)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function keydown (event) {
|
|
||||||
if (event.key === ' ' || event.key === 'Enter') {
|
|
||||||
const button = event.currentTarget
|
|
||||||
|
|
||||||
if (button instanceof HTMLElement) {
|
|
||||||
event.preventDefault()
|
|
||||||
copy(button)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function focused (event) {
|
|
||||||
event.currentTarget.addEventListener('keydown', keydown)
|
|
||||||
}
|
|
||||||
|
|
||||||
function blurred (event) {
|
|
||||||
event.currentTarget.removeEventListener('keydown', keydown)
|
|
||||||
}
|
}
|
||||||
|
|||||||
|
After Width: | Height: | Size: 496 B |
|
After Width: | Height: | Size: 523 B |
@ -0,0 +1,17 @@
|
|||||||
|
<clipboard-copy data-text="<%= text %>">
|
||||||
|
<label class="<%= local_assigns[:class] %>">
|
||||||
|
<input type="radio" class="peer hidden">
|
||||||
|
<span class="peer-checked:hidden flex items-center space-x-2">
|
||||||
|
<%= svg_icon('link', class: local_assigns[:icon_class] || 'w-6 h-6 text-white') %>
|
||||||
|
<span>
|
||||||
|
<%= local_assigns[:copy_title] || 'Copy' %>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span class="hidden peer-checked:flex items-center space-x-2">
|
||||||
|
<%= svg_icon('clipboard_copy', class: local_assigns[:icon_class] || 'w-6 h-6 text-white') %>
|
||||||
|
<span>
|
||||||
|
<%= local_assigns[:copied_title] || 'Copied' %>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</clipboard-copy>
|
||||||
Loading…
Reference in new issue