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
Henrique Dias 2017-07-25 21:49:52 +01:00
parent 683a3d7957
commit 78e0a366e7
2 changed files with 89 additions and 6 deletions

View File

@ -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
} }
} }

View File

@ -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 *