github-starred/vikunja
2
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-04-30 08:25:58 -05:00
Code Issues 690 Packages Projects Releases 11 Wiki Activity

refactor(attachments): register drag listeners only when edit is enabled

Browse Source 
Instead of checking props.editEnabled in every event handler, only
register the listeners when editing is enabled and remove them when
disabled.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Sprite
2026-01-10 22:33:59 +00:00
committed by kolaente
parent f86be0adf0
commit 8d86f09b50
1 changed files with 22 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/components/tasks/partials/Attachments.vue
View File

@@ -259,10 +259,6 @@ function resetDragState() {
} }
function handleDragEnter(event: DragEvent) { function handleDragEnter(event: DragEvent) {
if (!props.editEnabled) {
return
}
// Only handle file drags - let text drags work natively // Only handle file drags - let text drags work natively
if (!isFileDrag(event)) { if (!isFileDrag(event)) {
return return
@@ -277,10 +273,6 @@ function handleDragEnter(event: DragEvent) {
} }
function handleDragOver(event: DragEvent) { function handleDragOver(event: DragEvent) {
if (!props.editEnabled) {
return
}
// Only prevent default for file drags - this is the key fix! // Only prevent default for file drags - this is the key fix!
// Not preventing default allows native text dragging to work // Not preventing default allows native text dragging to work
if (!isFileDrag(event)) { if (!isFileDrag(event)) {
@@ -292,10 +284,6 @@ function handleDragOver(event: DragEvent) {
} }
function handleDragLeave(event: DragEvent) { function handleDragLeave(event: DragEvent) {
if (!props.editEnabled) {
return
}
if (!isFileDrag(event)) { if (!isFileDrag(event)) {
return return
} }
@@ -310,10 +298,6 @@ function handleDragLeave(event: DragEvent) {
} }
function handleDrop(event: DragEvent) { function handleDrop(event: DragEvent) {
if (!props.editEnabled) {
return
}
// Only handle file drops - let text drops work natively // Only handle file drops - let text drops work natively
if (!isFileDrag(event)) { if (!isFileDrag(event)) {
return return
@@ -334,30 +318,43 @@ function handleDrop(event: DragEvent) {
uploadFilesToTask(files) uploadFilesToTask(files)
} }
onMounted(() => { function addDragListeners() {
document.addEventListener('dragenter', handleDragEnter) document.addEventListener('dragenter', handleDragEnter)
document.addEventListener('dragover', handleDragOver) document.addEventListener('dragover', handleDragOver)
document.addEventListener('dragleave', handleDragLeave) document.addEventListener('dragleave', handleDragLeave)
document.addEventListener('drop', handleDrop) document.addEventListener('drop', handleDrop)
}) }
onUnmounted(() => { function removeDragListeners() {
document.removeEventListener('dragenter', handleDragEnter) document.removeEventListener('dragenter', handleDragEnter)
document.removeEventListener('dragover', handleDragOver) document.removeEventListener('dragover', handleDragOver)
document.removeEventListener('dragleave', handleDragLeave) document.removeEventListener('dragleave', handleDragLeave)
document.removeEventListener('drop', handleDrop) document.removeEventListener('drop', handleDrop)
}
onMounted(() => {
if (props.editEnabled) {
addDragListeners()
}
})
onUnmounted(() => {
removeDragListeners()
})
watch(() => props.editEnabled, (enabled) => {
if (enabled) {
addDragListeners()
} else {
removeDragListeners()
resetDragState()
}
}) })
const showDropzone = computed(() => const showDropzone = computed(() =>
props.editEnabled && isDraggingFiles.value && !isDragOverEditor.value, props.editEnabled && isDraggingFiles.value && !isDragOverEditor.value,
) )
watch(() => props.editEnabled, enabled => {
if (!enabled) {
resetDragState()
}
})
function downloadAttachment(attachment: IAttachment) { function downloadAttachment(attachment: IAttachment) {
attachmentService.download(attachment) attachmentService.download(attachment)
} }