Merge pull request #301 from Leeingnyo/feature/show-control-at-end-in…

…-paged-mode Show control after reading all (in paged mode)
getmango · May 13, 2022 · eac274a · eac274a
2 parents ce1dcff + 2865669
commit eac274a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git 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
@@ -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)"
               />
           </template>
           <%- 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;