Next/Prev buttons on preview
Former-commit-id: b781ebfd2407c93287ac37c14f1a2b8df088e0ce [formerly 4a6a39de6060466b410ad27426184bb03036eae2] [formerly bb88f9194b7cc463e473b6f836b898d16f9e424f [formerly 4fa584cad9
]]
Former-commit-id: 7d6652c394003c44223bbc0a063801c2d1fdb347 [formerly 30d4d1e466fbe3d319a9e6080a5a419922b6556b]
Former-commit-id: 6b43910e02422095e19217e770def053e2b60b95
pull/726/head
parent
683a3d7957
commit
78e0a366e7
|
@ -11,6 +11,9 @@
|
||||||
<info-button></info-button>
|
<info-button></info-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<button class="action" @click="prev" v-show="hasPrevious"><i class="material-icons">chevron_left</i></button>
|
||||||
|
<button class="action" @click="next" v-show="hasNext"><i class="material-icons">chevron_right</i></button>
|
||||||
|
|
||||||
<div class="preview">
|
<div class="preview">
|
||||||
<img v-if="req.type == 'image'" :src="raw()">
|
<img v-if="req.type == 'image'" :src="raw()">
|
||||||
<audio v-else-if="req.type == 'audio'" :src="raw()" controls></audio>
|
<audio v-else-if="req.type == 'audio'" :src="raw()" controls></audio>
|
||||||
|
@ -31,6 +34,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import url from '@/utils/url'
|
import url from '@/utils/url'
|
||||||
|
import api from '@/utils/api'
|
||||||
import InfoButton from './buttons/Info'
|
import InfoButton from './buttons/Info'
|
||||||
import DeleteButton from './buttons/Delete'
|
import DeleteButton from './buttons/Delete'
|
||||||
import RenameButton from './buttons/Rename'
|
import RenameButton from './buttons/Rename'
|
||||||
|
@ -44,22 +48,86 @@ export default {
|
||||||
RenameButton,
|
RenameButton,
|
||||||
DownloadButton
|
DownloadButton
|
||||||
},
|
},
|
||||||
computed: mapState(['req']),
|
data: function () {
|
||||||
|
return {
|
||||||
|
previousLink: '',
|
||||||
|
nextLink: '',
|
||||||
|
listing: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['req', 'oldReq']),
|
||||||
|
hasPrevious () {
|
||||||
|
return (this.previousLink !== '')
|
||||||
|
},
|
||||||
|
hasNext () {
|
||||||
|
return (this.nextLink !== '')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
window.addEventListener('keyup', this.key)
|
||||||
|
api.fetch(url.removeLastDir(this.$route.path))
|
||||||
|
.then(req => {
|
||||||
|
this.listing = req
|
||||||
|
this.updateLinks()
|
||||||
|
})
|
||||||
|
.catch(error => { console.log(error) })
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
window.removeEventListener('keyup', this.key)
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
download: function () {
|
download () {
|
||||||
let url = `${this.$store.state.baseURL}/api/download`
|
let url = `${this.$store.state.baseURL}/api/download`
|
||||||
url += this.req.url.slice(6)
|
url += this.req.url.slice(6)
|
||||||
|
|
||||||
return url
|
return url
|
||||||
},
|
},
|
||||||
raw: function () {
|
raw () {
|
||||||
return `${this.download()}?&inline=true`
|
return `${this.download()}?&inline=true`
|
||||||
},
|
},
|
||||||
back: function (event) {
|
back (event) {
|
||||||
let uri = url.removeLastDir(this.$route.path) + '/'
|
let uri = url.removeLastDir(this.$route.path) + '/'
|
||||||
this.$router.push({ path: uri })
|
this.$router.push({ path: uri })
|
||||||
},
|
},
|
||||||
allowEdit: function (event) {
|
prev () {
|
||||||
|
this.$router.push({ path: this.previousLink })
|
||||||
|
},
|
||||||
|
next () {
|
||||||
|
this.$router.push({ path: this.nextLink })
|
||||||
|
},
|
||||||
|
key (event) {
|
||||||
|
event.preventDefault()
|
||||||
|
|
||||||
|
if (event.which === 13 || event.which === 39) { // right arrow
|
||||||
|
if (this.hasNext) this.next()
|
||||||
|
} else if (event.which === 37) { // left arrow
|
||||||
|
if (this.hasPrevious) this.prev()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateLinks () {
|
||||||
|
let pos = null
|
||||||
|
|
||||||
|
for (let i = 0; i < this.listing.items.length; i++) {
|
||||||
|
if (this.listing.items[i].name === this.req.name) {
|
||||||
|
pos = i
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pos === null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pos !== 0) {
|
||||||
|
this.previousLink = this.listing.items[pos - 1].url
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pos !== this.listing.items.length - 1) {
|
||||||
|
this.nextLink = this.listing.items[pos + 1].url
|
||||||
|
}
|
||||||
|
},
|
||||||
|
allowEdit (event) {
|
||||||
return this.$store.state.user.allowEdit
|
return this.$store.state.user.allowEdit
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -111,7 +111,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0.5em 0.5em 0.5em 1em;
|
padding: 0.5em;
|
||||||
height: 3.7em;
|
height: 3.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -159,6 +159,21 @@
|
||||||
color: rgba(255, 255, 255, 0.5)
|
color: rgba(255, 255, 255, 0.5)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#previewer>button {
|
||||||
|
margin: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#previewer>button:first-of-type {
|
||||||
|
left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#previewer>button:last-of-type {
|
||||||
|
right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* * * * * * * * * * * * * * * *
|
/* * * * * * * * * * * * * * * *
|
||||||
* PROMPT *
|
* PROMPT *
|
||||||
|
|
Loading…
Reference in New Issue