adjust dropoze border style
This commit is contained in:
committed by
Pete Matsyburka
parent
318b65af18
commit
5f44806287
@@ -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) => {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user