mirror of https://github.com/docusealco/docuseal
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.2 KiB
55 lines
1.2 KiB
import { actionable } from '@github/catalyst/lib/actionable'
|
|
import { target, targetable } from '@github/catalyst/lib/targetable'
|
|
|
|
export default actionable(targetable(class extends HTMLElement {
|
|
static [target.static] = [
|
|
'loading',
|
|
'icon',
|
|
'input'
|
|
]
|
|
|
|
connectedCallback () {
|
|
this.addEventListener('drop', this.onDrop)
|
|
|
|
this.addEventListener('dragover', (e) => e.preventDefault())
|
|
|
|
document.addEventListener('turbo:submit-end', this.toggleLoading)
|
|
}
|
|
|
|
disconnectedCallback () {
|
|
document.removeEventListener('turbo:submit-end', this.toggleLoading)
|
|
}
|
|
|
|
onDrop (e) {
|
|
e.preventDefault()
|
|
|
|
this.input.files = e.dataTransfer.files
|
|
|
|
this.uploadFiles(e.dataTransfer.files)
|
|
}
|
|
|
|
onSelectFiles (e) {
|
|
e.preventDefault()
|
|
|
|
this.uploadFiles(this.input.files)
|
|
}
|
|
|
|
toggleLoading = (e) => {
|
|
if (e && e.target && (!e.target.contains(this) || !e.detail?.formSubmission?.formElement?.contains(this))) {
|
|
return
|
|
}
|
|
|
|
this.loading.classList.toggle('hidden')
|
|
this.icon.classList.toggle('hidden')
|
|
this.classList.toggle('opacity-50')
|
|
}
|
|
|
|
uploadFiles () {
|
|
this.toggleLoading()
|
|
|
|
if (this.dataset.submitOnUpload) {
|
|
this.closest('form').querySelector('button[type="submit"]').click()
|
|
}
|
|
}
|
|
}))
|