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.
73 lines
2.0 KiB
73 lines
2.0 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',
|
|
'area'
|
|
]
|
|
|
|
connectedCallback () {
|
|
this.addEventListener('dragover', (e) => e.preventDefault())
|
|
this.addEventListener('drop', this.onDrop)
|
|
document.addEventListener('turbo:submit-end', this.toggleLoading)
|
|
this.area?.addEventListener('dragover', this.onDragover)
|
|
this.area?.addEventListener('dragleave', this.onDragleave)
|
|
}
|
|
|
|
disconnectedCallback () {
|
|
this.removeEventListener('drop', this.onDrop)
|
|
document.removeEventListener('turbo:submit-end', this.toggleLoading)
|
|
this.area?.removeEventListener('dragover', this.onDragover)
|
|
this.area?.removeEventListener('dragleave', this.onDragleave)
|
|
}
|
|
|
|
onDragover (e) {
|
|
if (e.dataTransfer?.types?.includes('Files')) {
|
|
this.style.backgroundColor = '#F7F3F0'
|
|
this.classList.remove('border-base-300', 'hover:bg-base-200/30')
|
|
this.classList.add('border-base-content/30')
|
|
}
|
|
}
|
|
|
|
onDragleave () {
|
|
this.style.backgroundColor = null
|
|
this.classList.remove('border-base-content/30')
|
|
this.classList.add('border-base-300', 'hover:bg-base-200/30')
|
|
}
|
|
|
|
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()
|
|
}
|
|
}
|
|
}))
|