Display vertical pages at full width
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
8f3a7b93e5
commit
8949744657
|
@ -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'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue