Display vertical pages at full width
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Simon Bruder 2019-08-01 22:25:38 +00:00
parent 8f3a7b93e5
commit 8949744657
No known key found for this signature in database
GPG key ID: 6F03E0000CC5B62F

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation"> <div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation">
<div class="page-container"> <div class="page-container">
<img :style="{ width: pageWidth + '%' }" :src="info.pages[page]" @load="setScroll"> <img ref="currentImage" :style="{ width: orientation === 'vertical' ? pageWidth + '%' : '100%' }" :src="info.pages[page]" @load="setScroll(); setOrientation()">
<!-- prefetching --> <!-- prefetching -->
<img style="display: none;" :src="info.pages[page-1]"> <img style="display: none;" :src="info.pages[page-1]">
<img style="display: none;" :src="info.pages[page+1]"> <img style="display: none;" :src="info.pages[page+1]">
@ -34,7 +34,8 @@ export default {
scrollPositions: [], scrollPositions: [],
pageWidth: 60, pageWidth: 60,
showSidebar: true, showSidebar: true,
direction: 'rtl' direction: 'rtl',
orientation: 'vertical'
} }
}, },
computed: { computed: {
@ -98,6 +99,18 @@ export default {
} else { } else {
throw new Error('cannot change reading direction: invalid direction currently set') throw new Error('cannot change reading direction: invalid direction currently set')
} }
},
setOrientation () {
let image = this.$refs.currentImage
if (image.width < image.height) {
this.orientation = 'vertical'
} else if (image.width > image.height) {
this.orientation = 'horizonal'
} else if (image.width === image.height) {
this.orientation = 'square'
}
} }
} }
} }