d2b1404907
* New gallery creation/editing/deleting UI * Finish new gallery UI * port dp changes here * Add ordering fix optional fields * Fix dropping * Fix fmt * Fix version creation broken, edit issues, project type setting * Update gallery in search
96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
<template>
|
|
<div
|
|
ref="drop_area"
|
|
class="drop-area"
|
|
@drop.stop.prevent="
|
|
(event) => {
|
|
$refs.drop_area.style.visibility = 'hidden'
|
|
|
|
if (event.dataTransfer && event.dataTransfer.files && fileAllowed) {
|
|
$emit('change', event.dataTransfer.files)
|
|
}
|
|
}
|
|
"
|
|
@dragenter.prevent="allowDrag"
|
|
@dragover.prevent="allowDrag"
|
|
@dragleave.prevent="$refs.drop_area.style.visibility = 'hidden'"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DropArea',
|
|
props: {
|
|
accept: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
fileAllowed: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
document.addEventListener('dragenter', this.allowDrag)
|
|
},
|
|
methods: {
|
|
allowDrag(event) {
|
|
const file = event.dataTransfer?.items[0]
|
|
|
|
console.log(file)
|
|
if (
|
|
file &&
|
|
this.accept
|
|
.split(',')
|
|
.reduce(
|
|
(acc, t) =>
|
|
acc || file.type.startsWith(t) || file.type === t || t === '*',
|
|
false
|
|
)
|
|
) {
|
|
this.fileAllowed = true
|
|
event.dataTransfer.dropEffect = 'copy'
|
|
event.preventDefault()
|
|
|
|
if (this.$refs.drop_area)
|
|
this.$refs.drop_area.style.visibility = 'visible'
|
|
} else {
|
|
this.fileAllowed = false
|
|
|
|
if (this.$refs.drop_area)
|
|
this.$refs.drop_area.style.visibility = 'hidden'
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.drop-area {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10;
|
|
visibility: hidden;
|
|
background-color: hsla(0, 0%, 0%, 0.5);
|
|
transition: visibility 0.2s ease-in-out, background-color 0.1s ease-in-out;
|
|
display: flex;
|
|
|
|
&::before {
|
|
--indent: 4rem;
|
|
|
|
content: ' ';
|
|
position: relative;
|
|
top: var(--indent);
|
|
left: var(--indent);
|
|
width: calc(100% - (2 * var(--indent)));
|
|
height: calc(100% - (2 * var(--indent)));
|
|
border-radius: 1rem;
|
|
border: 0.25rem dashed var(--color-button-bg);
|
|
}
|
|
}
|
|
</style>
|