vrr/komga
2
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2026-05-05 23:37:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(epubreader): add navigation modes with click/tap, buttons, or both

Browse source
This commit is contained in:
Gauthier Roebroeck 2023-12-05 14:30:20 +08:00
parent 3a1499024f
commit 2f0f94dc53
2 changed files with 66 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

6
komga-webui/src/locales/en.json
View file

@ -706,6 +706,12 @@
"layout": "Layout",
"layout_paginated": "Paginated",
"layout_scroll": "Scroll",
"navigation_mode": "Navigation mode",
"navigation_options": {
"both": "Both",
"buttons": "Buttons",
"click": "Click / Tap"
},
"page_margins": "Page margins",
"viewing_theme": "Viewing theme"
},

66
komga-webui/src/views/EpubReader.vue
View file

@ -146,24 +146,30 @@
<a id="previous-chapter" rel="prev" role="button" aria-labelledby="previous-label"
style="left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: block"
:style="`top: ${showToolbars ? 48 : 0}px`"
:class="settings.navigationButtons ? '' : 'hidden'"
>
<v-icon style="left: calc(50% - 12px); position: relative;">mdi-chevron-up</v-icon>
</a>
<a id="next-chapter" rel="next" role="button" aria-labelledby="next-label"
:class="settings.navigationButtons ? '' : 'hidden'"
style="bottom: 0;left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: block">
<v-icon style="left: calc(50% - 12px);position: relative;">mdi-chevron-down</v-icon>
</a>
</div>
<footer id="footerMenu">
<a rel="prev" class="disabled" role="button" aria-labelledby="previous-label" style="top: 50%;left:0;position: fixed;height: 100px;
background: #d3d3d33b;">
<a rel="prev" class="disabled" role="button" aria-labelledby="previous-label"
style="top: 50%;left:0;position: fixed;height: 100px;background: #d3d3d33b;"
:class="settings.navigationButtons ? '' : 'hidden'"
>
<v-icon style="top: calc(50% - 12px);
position: relative;">mdi-chevron-left
</v-icon>
</a>
<a rel="next" class="disabled" role="button" aria-labelledby="next-label" style="top: 50%;right:0;position: fixed;height: 100px;
background: #d3d3d33b;">
<a rel="next" class="disabled" role="button" aria-labelledby="next-label"
style="top: 50%;right:0;position: fixed;height: 100px;background: #d3d3d33b;"
:class="settings.navigationButtons ? '' : 'hidden'"
>
<v-icon style="top: calc(50% - 12px);position: relative;">mdi-chevron-right</v-icon>
</a>
</footer>
@ -191,6 +197,14 @@
:disabled="!screenfull.isEnabled"/>
</v-list-item>
<v-list-item>
<settings-select
:items="navigationOptions"
v-model="navigationMode"
:label="$t('epubreader.settings.navigation_mode')"
/>
</v-list-item>
<v-subheader class="font-weight-black text-h6">{{ $t('bookreader.settings.display') }}</v-subheader>
<v-list-item>
@ -293,10 +307,11 @@ import {flattenToc} from '@/functions/toc'
import ShortcutHelpDialog from '@/components/dialogs/ShortcutHelpDialog.vue'
import screenfull from 'screenfull'
import {getBookReadRouteFromMediaProfile} from '@/functions/book-format'
import SettingsSelect from '@/components/SettingsSelect.vue'
export default Vue.extend({
name: 'EpubReader',
components: {ShortcutHelpDialog, TocList, SettingsSwitch},
components: {SettingsSelect, ShortcutHelpDialog, TocList, SettingsSwitch},
data: function () {
return {
screenfull,
@ -340,14 +355,23 @@ export default Vue.extend({
{text: this.$t('enums.epubreader.column_count.two').toString(), value: '2'},
],
settings: {
// R2D2BC
appearance: 'readium-default-on',
pageMargins: 1,
lineHeight: 1,
fontSize: 100,
verticalScroll: false,
columnCount: 'auto',
// Epub Reader
alwaysFullscreen: false,
navigationClick: true,
navigationButtons: true,
},
navigationOptions: [
{text: this.$t('epubreader.settings.navigation_options.buttons').toString(), value: 'button'},
{text: this.$t('epubreader.settings.navigation_options.click').toString(), value: 'click'},
{text: this.$t('epubreader.settings.navigation_options.both').toString(), value: 'buttonclick'},
],
tocs: {
toc: undefined as unknown as TocEntry[],
landmarks: undefined as unknown as TocEntry[],
@ -516,6 +540,18 @@ export default Vue.extend({
else screenfull.isEnabled && screenfull.exit()
},
},
navigationMode: {
get: function (): string {
let r = this.settings.navigationButtons ? 'button' : ''
if (this.settings.navigationClick) r += 'click'
return r
},
set: function (value: string): void {
this.settings.navigationButtons = value.includes('button')
this.settings.navigationClick = value.includes('click')
this.$store.commit('setEpubreaderSettings', this.settings)
},
},
},
methods: {
previousBook() {
@ -568,13 +604,27 @@ export default Vue.extend({
clickThrough(e: MouseEvent) {
if (e.detail === 1) {
this.clickTimer = setTimeout(() => {
this.toggleToolbars()
this.singleClick(e)
}, 200)
}
if (e.detail === 2) {
clearTimeout(this.clickTimer)
}
},
singleClick(e: MouseEvent) {
if (this.verticalScroll) {
if (this.settings.navigationClick) {
if (e.y < this.$vuetify.breakpoint.height / 4) return this.d2Reader.previousPage()
if (e.y > this.$vuetify.breakpoint.height * .75) return this.d2Reader.nextPage()
}
} else {
if (this.settings.navigationClick) {
if (e.x < this.$vuetify.breakpoint.width / 4) return this.d2Reader.previousPage()
if (e.x > this.$vuetify.breakpoint.width * .75) return this.d2Reader.nextPage()
}
}
this.toggleToolbars()
},
async setup(bookId: string) {
this.book = await this.$komgaBooks.getBook(bookId)
this.series = await this.$komgaSeries.getOneSeries(this.book.seriesId)
@ -828,4 +878,8 @@ export default Vue.extend({
.scrolltab-content {
max-height: calc(100vh - 48px);
}
.hidden {
display: none !important;
}
</style>