170 lines
3.8 KiB
Vue
170 lines
3.8 KiB
Vue
<template>
|
|
<div class="item"
|
|
role="button"
|
|
tabindex="0"
|
|
draggable="true"
|
|
@dragstart="dragStart"
|
|
@dragover="dragOver"
|
|
@drop="drop"
|
|
@click="click"
|
|
@dblclick="open"
|
|
@touchstart="touchstart"
|
|
:data-dir="isDir"
|
|
:aria-label="name"
|
|
:aria-selected="isSelected">
|
|
<div>
|
|
<i class="material-icons">{{ icon }}</i>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="name">{{ name }}</p>
|
|
|
|
<p v-if="isDir" class="size" data-order="-1">—</p>
|
|
<p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
|
|
|
|
<p class="modified">
|
|
<time :datetime="modified">{{ humanTime() }}</time>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapGetters, mapState } from 'vuex'
|
|
import filesize from 'filesize'
|
|
import moment from 'moment'
|
|
import { files as api } from '@/api'
|
|
|
|
export default {
|
|
name: 'item',
|
|
data: function () {
|
|
return {
|
|
touches: 0
|
|
}
|
|
},
|
|
props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
|
|
computed: {
|
|
...mapState(['selected', 'req']),
|
|
...mapGetters(['selectedCount']),
|
|
isSelected () {
|
|
return (this.selected.indexOf(this.index) !== -1)
|
|
},
|
|
icon () {
|
|
if (this.isDir) return 'folder'
|
|
if (this.type === 'image') return 'insert_photo'
|
|
if (this.type === 'audio') return 'volume_up'
|
|
if (this.type === 'video') return 'movie'
|
|
return 'insert_drive_file'
|
|
},
|
|
canDrop () {
|
|
if (!this.isDir) return false
|
|
|
|
for (let i of this.selected) {
|
|
if (this.req.items[i].url === this.url) {
|
|
return false
|
|
}
|
|
}
|
|
|
|
return true
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations(['addSelected', 'removeSelected', 'resetSelected']),
|
|
humanSize: function () {
|
|
return filesize(this.size)
|
|
},
|
|
humanTime: function () {
|
|
return moment(this.modified).fromNow()
|
|
},
|
|
dragStart: function () {
|
|
if (this.selectedCount === 0) {
|
|
this.addSelected(this.index)
|
|
return
|
|
}
|
|
|
|
if (!this.isSelected) {
|
|
this.resetSelected()
|
|
this.addSelected(this.index)
|
|
}
|
|
},
|
|
dragOver: function (event) {
|
|
if (!this.canDrop) return
|
|
|
|
event.preventDefault()
|
|
let el = event.target
|
|
|
|
for (let i = 0; i < 5; i++) {
|
|
if (!el.classList.contains('item')) {
|
|
el = el.parentElement
|
|
}
|
|
}
|
|
|
|
el.style.opacity = 1
|
|
},
|
|
drop: function (event) {
|
|
if (!this.canDrop) return
|
|
event.preventDefault()
|
|
|
|
if (this.selectedCount === 0) return
|
|
|
|
let items = []
|
|
|
|
for (let i of this.selected) {
|
|
items.push({
|
|
from: this.req.items[i].url,
|
|
to: this.url + this.req.items[i].name
|
|
})
|
|
}
|
|
|
|
api.move(items)
|
|
.then(() => {
|
|
this.$store.commit('setReload', true)
|
|
})
|
|
.catch(this.$showError)
|
|
},
|
|
click: function (event) {
|
|
if (this.selectedCount !== 0) event.preventDefault()
|
|
if (this.$store.state.selected.indexOf(this.index) !== -1) {
|
|
this.removeSelected(this.index)
|
|
return
|
|
}
|
|
|
|
if (event.shiftKey && this.selected.length === 1) {
|
|
let fi = 0
|
|
let la = 0
|
|
|
|
if (this.index > this.selected[0]) {
|
|
fi = this.selected[0] + 1
|
|
la = this.index
|
|
} else {
|
|
fi = this.index
|
|
la = this.selected[0] - 1
|
|
}
|
|
|
|
for (; fi <= la; fi++) {
|
|
this.addSelected(fi)
|
|
}
|
|
|
|
return
|
|
}
|
|
|
|
if (!event.ctrlKey && !this.$store.state.multiple) this.resetSelected()
|
|
this.addSelected(this.index)
|
|
},
|
|
touchstart () {
|
|
setTimeout(() => {
|
|
this.touches = 0
|
|
}, 300)
|
|
|
|
this.touches++
|
|
if (this.touches > 1) {
|
|
this.open()
|
|
}
|
|
},
|
|
open: function () {
|
|
this.$router.push({path: this.url})
|
|
}
|
|
}
|
|
}
|
|
</script>
|