nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix multiple selection

Browse Source 
added esc clear
This commit is contained in:
Weidi Deng 2020-12-11 15:29:34 +08:00
parent 4eceee4269
commit 7c56617072
1 changed files with 40 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/views/Share.vue
View File

@ -33,6 +33,12 @@
<div class="share__box__element share__box__center"> <div class="share__box__element share__box__center">
<qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue> <qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue>
</div> </div>
<div v-if="file.isDir" class="share__box__element share__box__center">
<label>
<input type="checkbox" v-model="multiple">
{{ $t('buttons.selectMultiple') }}
</label>
</div>
</div> </div>
<div v-if="file.isDir" class="share__box share__box__items"> <div v-if="file.isDir" class="share__box share__box__items">
<div class="share__box__header" v-if="file.isDir"> <div class="share__box__header" v-if="file.isDir">
@ -42,7 +48,8 @@
<div class="item" v-for="(item) in file.items.slice(0, this.showLimit)" :key="base64(item.name)" <div class="item" v-for="(item) in file.items.slice(0, this.showLimit)" :key="base64(item.name)"
:aria-selected="selected.includes(item.name)" :aria-selected="selected.includes(item.name)"
@click="click(item.name)" @click="click(item.name)"
@dblclick="dbclick(item.name)" @dblclick="dblclick(item.name)"
@touchstart="touchstart(item.name)"
> >
<div> <div>
<i class="material-icons">{{ item.isDir ? 'folder' : (item.type==='image') ? 'insert_photo' : 'insert_drive_file' }}</i> <i class="material-icons">{{ item.isDir ? 'folder' : (item.type==='image') ? 'insert_photo' : 'insert_drive_file' }}</i>
@ -79,6 +86,8 @@ export default {
notFound: false, notFound: false,
file: null, file: null,
showLimit: 500, showLimit: 500,
multiple: false,
touches: 0,
selected: [], selected: [],
firstSelected: -1 firstSelected: -1
}), }),
@ -88,6 +97,12 @@ export default {
created: function () { created: function () {
this.fetchData() this.fetchData()
}, },
mounted () {
window.addEventListener('keydown', this.keyEvent)
},
beforeDestroy () {
window.removeEventListener('keydown', this.keyEvent)
},
computed: { computed: {
hasSelected: function () { hasSelected: function () {
return this.selected.length > 0 return this.selected.length > 0
@ -163,6 +178,8 @@ export default {
fetchData: async function () { fetchData: async function () {
this.loaded = false this.loaded = false
this.notFound = false this.notFound = false
this.multiple = false
this.touches = 0
this.selected = [] this.selected = []
this.firstSelected = -1 this.firstSelected = -1
try { try {
@ -216,12 +233,32 @@ export default {
return return
} }
if (!event.ctrlKey && !this.hasSelected) this.resetSelected() if (!event.ctrlKey && !event.metaKey && !this.multiple) this.resetSelected()
if (this.firstSelected === -1) this.firstSelected = index if (this.firstSelected === -1) this.firstSelected = index
this.addSelected(name) this.addSelected(name)
}, },
dbclick: function (name) { dblclick: function (name) {
this.$router.push({path: `/share/${this.hash}${name}`}) this.$router.push({path: `/share/${this.hash}${name}`})
},
touchstart (name) {
setTimeout(() => {
this.touches = 0
}, 300)
this.touches++
if (this.touches > 1) {
this.dblclick(name)
}
},
keyEvent (event) {
// Esc!
if (event.keyCode === 27) {
// If we're on a listing, unselect all
// files and folders.
if (this.hasSelected) {
this.resetSelected()
}
}
} }
} }
} }