nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-22 09:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

bulk-operations multiSelect items UI v0.1

Browse Source
This commit is contained in:
Milos Holba
2020-11-26 12:26:30 +01:00
parent 1654dc8678
commit 0eb0939598
5 changed files with 97 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
resources/js/components/FilesView/FileBrowser.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="file-content" :class="{ 'is-offset': uploadingFilesCount, 'is-dragging': isDragging }"
<div class="file-content" id="file-content-id" :class="{ 'is-offset': uploadingFilesCount, 'is-dragging': isDragging }"
@dragover.prevent
@drop.stop.prevent="dropUpload($event)"
@dragover="dragEnter"
@@ -29,6 +29,7 @@
:class="FilePreviewType"
>
<FileItemList
@drag.native="mousePosition"
@dragstart="dragStart(item)"
@drop.stop.native.prevent="dragFinish(item, $event)"
@contextmenu.native.prevent="contextMenu($event, item)"
@@ -81,6 +82,7 @@
<!--If file info panel empty show message-->
<EmptyMessage v-if="fileInfoDetail.length === 0" :message="$t('messages.nothing_to_preview')" icon="eye-off"/>
</div>
<MultiSelected @click.prevent="" :clone-element="dragInProgress" :style="{ top: positionY + 'px', left: positionX + 'px' }" id="multi-selected" v-if="dragInProgress && this.fileInfoDetail.length > 1" />
</div>
</template>
@@ -135,10 +137,25 @@
return {
draggingId: undefined,
isDragging: false,
mobileMultiSelect: false
mobileMultiSelect: false,
dragInProgress:false,
positionY:undefined,
positionX:undefined
}
},
methods: {
mousePosition() {
let contentLeft = document.getElementById('file-content-id').getBoundingClientRect().left -15
if(event.clientX > contentLeft ) {
this.positionY = event.clientY -85
this.positionX = event.clientX -350
}else if (event.clientX < contentLeft){
this.positionY = event.clientY -15
this.positionX = event.clientX -30
}
// console.log(event.clientX, contentLeft)
},
dropUpload(event) {
// Upload external file
this.$uploadExternalFiles(event, this.currentFolder.unique_id)
@@ -152,16 +169,11 @@
this.isDragging = false
},
dragStart(data) {
let elementClone = event.target.cloneNode(true)
elementClone.className = 'draged-clone'
console.log(elementClone)
// elementClone.style.backgroundColor = "red"
// let element = document.getElementsByClassName('file-item')
// element.style.display = "none"
// var crt = this.cloneNode(true);
// crt.style.backgroundColor = "red";
// this.style.display = "none"
let img = document.createElement('img')
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
event.dataTransfer.setDragImage(img, 0, 0)
this.dragInProgress = true
events.$emit('dragstart', data)
@@ -170,6 +182,7 @@
},
dragFinish(data, event) {
this.dragInProgress = false
if (event.dataTransfer.items.length == 0) {
// Prevent to drop on file or image
@@ -222,7 +235,8 @@
})
events.$on('drop', () => {
this.isDragging = false
this.isDragging = false,
this.dragInProgress = false
})
events.$on('fileItem:deselect', () =>
@@ -250,6 +264,13 @@
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
#multi-selected {
position: fixed;
pointer-events: none;
z-index: 100;
}
.draged-clone {
display: none !important;
opacity: 0 !important;