Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-22 00:13:30 +01:00
Code Issues Projects Releases Wiki Activity

feat(web reader): add 'original' fit option

Browse source 
closes #71
This commit is contained in:
Gauthier Roebroeck 2020-01-17 14:32:17 +08:00
parent b65b009e0d
commit d030044df3
2 changed files with 34 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
komga-webui/src/types/common.ts
View file

@ -3,3 +3,9 @@ export enum LoadState {
NotLoaded, NotLoaded,
Loading Loading
} }
export enum ImageFit {
Width = 'width',
Height = 'height',
Original = 'original'
}

42
komga-webui/src/views/BookReader.vue
View file

@ -157,13 +157,17 @@
<v-row justify="center"> <v-row justify="center">
<v-col cols="auto"> <v-col cols="auto">
<v-btn-toggle v-model="fitButtons" dense mandatory active-class="primary"> <v-btn-toggle v-model="fitButtons" dense mandatory active-class="primary">
<v-btn @click="setFitHeight(false)"> <v-btn @click="setFit(ImageFit.Width)">
Fit to width Fit to width
</v-btn> </v-btn>
<v-btn @click="setFitHeight(true)"> <v-btn @click="setFit(ImageFit.Height)">
Fit to height Fit to height
</v-btn> </v-btn>
<v-btn @click="setFit(ImageFit.Original)">
Original
</v-btn>
</v-btn-toggle> </v-btn-toggle>
</v-col> </v-col>
</v-row> </v-row>
@ -304,9 +308,10 @@
<script lang="ts"> <script lang="ts">
import { checkWebpFeature } from '@/functions/check-webp' import { checkWebpFeature } from '@/functions/check-webp'
import { ImageFit } from '@/types/common'
import Vue from 'vue' import Vue from 'vue'
const cookieFitHeight = 'webreader.fitHeight' const cookieFit = 'webreader.fit'
const cookieRtl = 'webreader.rtl' const cookieRtl = 'webreader.rtl'
const cookieDoublePages = 'webreader.doublePages' const cookieDoublePages = 'webreader.doublePages'
@ -314,6 +319,7 @@ export default Vue.extend({
name: 'BookReader', name: 'BookReader',
data: () => { data: () => {
return { return {
ImageFit,
baseURL: process.env.VUE_APP_KOMGA_API_URL ? process.env.VUE_APP_KOMGA_API_URL : window.location.origin, baseURL: process.env.VUE_APP_KOMGA_API_URL ? process.env.VUE_APP_KOMGA_API_URL : window.location.origin,
book: {} as BookDto, book: {} as BookDto,
siblingPrevious: {} as BookDto, siblingPrevious: {} as BookDto,
@ -328,7 +334,7 @@ export default Vue.extend({
goToPage: 1, goToPage: 1,
showMenu: false, showMenu: false,
fitButtons: 1, fitButtons: 1,
fitHeight: true, fit: ImageFit.Height,
rtlButtons: 0, rtlButtons: 0,
rtl: false, rtl: false,
doublePages: false, doublePages: false,
@ -353,10 +359,8 @@ export default Vue.extend({
this.setRtl(true) this.setRtl(true)
} }
} }
if (this.$cookies.isKey(cookieFitHeight)) { if (this.$cookies.isKey(cookieFit)) {
if (this.$cookies.get(cookieFitHeight) === 'false') { this.setFit(this.$cookies.get(cookieFit))
this.setFitHeight(false)
}
} }
if (this.$cookies.isKey(cookieDoublePages)) { if (this.$cookies.isKey(cookieDoublePages)) {
if (this.$cookies.get(cookieDoublePages) === 'true') { if (this.$cookies.get(cookieDoublePages) === 'true') {
@ -403,7 +407,7 @@ export default Vue.extend({
return this.currentPage / this.pagesCount * 100 return this.currentPage / this.pagesCount * 100
}, },
maxHeight (): number | string { maxHeight (): number | string {
return this.fitHeight ? this.$vuetify.breakpoint.height : 'auto' return this.fit === ImageFit.Height ? this.$vuetify.breakpoint.height : 'auto'
}, },
slidesRange (): number[] { slidesRange (): number[] {
if (!this.doublePages) { if (!this.doublePages) {
@ -538,10 +542,20 @@ export default Vue.extend({
this.rtlButtons = rtl ? 1 : 0 this.rtlButtons = rtl ? 1 : 0
this.$cookies.set(cookieRtl, rtl, Infinity) this.$cookies.set(cookieRtl, rtl, Infinity)
}, },
setFitHeight (fitHeight: boolean) { setFit (fit: ImageFit) {
this.fitHeight = fitHeight this.fit = fit
this.fitButtons = fitHeight ? 1 : 0 switch (fit) {
this.$cookies.set(cookieFitHeight, fitHeight, Infinity) case ImageFit.Width:
this.fitButtons = 0
break
case ImageFit.Height:
this.fitButtons = 1
break
case ImageFit.Original:
this.fitButtons = 2
break
}
this.$cookies.set(cookieFit, fit, Infinity)
}, },
setDoublePages (doublePages: boolean) { setDoublePages (doublePages: boolean) {
const current = this.currentPage const current = this.currentPage
@ -566,7 +580,7 @@ export default Vue.extend({
return Math.abs(this.currentPage - p) <= 2 return Math.abs(this.currentPage - p) <= 2
}, },
maxWidth (p: number): number | string { maxWidth (p: number): number | string {
if (this.fitHeight) { if (this.fit !== ImageFit.Width) {
return 'auto' return 'auto'
} }
if (this.doublePages && p !== 1 && p !== this.pagesCount) { if (this.doublePages && p !== 1 && p !== this.pagesCount) {