adjust dropoze border style

This commit is contained in:
Alex Turchyn
2025-05-14 00:54:48 +03:00
committed by Pete Matsyburka
parent 318b65af18
commit 5f44806287
8 changed files with 48 additions and 23 deletions
@@ -165,11 +165,27 @@ export default targetable(class extends HTMLElement {
onDragover (e) {
if (e.dataTransfer?.types?.includes('Files') || this.dataset.targets !== 'dashboard-dropzone.templateCards') {
this.style.backgroundColor = '#F7F3F0'
if (this.classList.contains('before:border-base-300')) {
this.classList.remove('before:border-base-300')
this.classList.add('before:border-base-content/50')
} else if (this.classList.contains('border-base-300')) {
this.classList.remove('border-base-300')
this.classList.add('border-base-content/50')
}
}
}
onDragleave () {
this.style.backgroundColor = null
if (this.classList.contains('before:border-base-content/50')) {
this.classList.remove('before:border-base-content/50')
this.classList.add('before:border-base-300')
} else if (this.classList.contains('border-base-content/50')) {
this.classList.remove('border-base-content/50')
this.classList.add('border-base-300')
}
}
onWindowDragleave = (e) => {
+22 -4
View File
@@ -5,19 +5,37 @@ export default actionable(targetable(class extends HTMLElement {
static [target.static] = [
'loading',
'icon',
'input'
'input',
'area'
]
connectedCallback () {
this.addEventListener('drop', this.onDrop)
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/50')
}
}
onDragleave () {
this.style.backgroundColor = null
this.classList.remove('border-base-content/50')
this.classList.add('border-base-300', 'hover:bg-base-200/30')
}
onDrop (e) {