diff --git a/public/js/reader.js b/public/js/reader.js index 4b0ff010..a5d8e6b1 100644 --- a/public/js/reader.js +++ b/public/js/reader.js @@ -135,7 +135,11 @@ const readerComponent = () => { const idx = parseInt(this.curItem.id); const newIdx = idx + (isNext ? 1 : -1); - if (newIdx <= 0 || newIdx > this.items.length) return; + if (newIdx <= 0) return; + if (newIdx > this.items.length) { + this.showControl(idx); + return; + } if (newIdx + this.preloadLookahead < this.items.length + 1) { this.preloadImage(this.items[newIdx + this.preloadLookahead - 1].url); @@ -253,12 +257,20 @@ const readerComponent = () => { }); }, /** - * Shows the control modal + * Handles clicked image * * @param {Event} event - The triggering event */ - showControl(event) { + clickImage(event) { const idx = event.currentTarget.id; + this.showControl(idx); + }, + /** + * Shows the control modal + * + * @param {number} idx - selected page index + */ + showControl(idx) { this.selectedIndex = idx; UIkit.modal($('#modal-sections')).show(); }, diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr index 395de413..feac115b 100644 --- a/src/views/reader.html.ecr +++ b/src/views/reader.html.ecr @@ -30,7 +30,7 @@ :height="item.height" :id="item.id" :style="`margin-top:${margin}px; margin-bottom:${margin}px`" - @click="showControl($event)" + @click="clickImage($event)" /> <%- if next_entry_url -%> @@ -46,7 +46,7 @@ 'uk-align-center': true, 'uk-animation-slide-left': flipAnimation === 'left', 'uk-animation-slide-right': flipAnimation === 'right' - }" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" @click="showControl($event)" :style="` + }" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" @click="clickImage($event)" :style="` width:${mode === 'width' ? '100vw' : 'auto'}; height:${mode === 'height' ? '100vh' : 'auto'}; margin-bottom:0;