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 {
|
||||
constructor () {
|
||||
super()
|
||||
this.addEventListener('click', clicked)
|
||||
this.addEventListener('focus', focused)
|
||||
this.addEventListener('blur', blurred)
|
||||
}
|
||||
|
||||
connectedCallback () {
|
||||
if (!this.hasAttribute('tabindex')) {
|
||||
this.setAttribute('tabindex', '0')
|
||||
}
|
||||
|
||||
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())
|
||||
}
|
||||
this.addEventListener('click', (e) => {
|
||||
e.stopPropagation()
|
||||
|
||||
const node = createNode(text)
|
||||
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 }))
|
||||
navigator.clipboard.writeText(this.dataset.text || this.innerText.trim())
|
||||
})
|
||||
}
|
||||
|
||||
function toggleActiveIcon () {
|
||||
if (button.classList.contains('swap')) {
|
||||
button.classList.toggle('swap-active')
|
||||
}
|
||||
disconnectedCallback () {
|
||||
this.querySelectorAll('input').forEach((e) => {
|
||||
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