Show control after reading at the end in paged mode

This commit is contained in:
Leeingnyo 2022-05-13 08:35:04 +09:00
parent ce1dcff229
commit 28656695c6
2 changed files with 17 additions and 5 deletions

View File

@ -135,7 +135,11 @@ const readerComponent = () => {
const idx = parseInt(this.curItem.id); const idx = parseInt(this.curItem.id);
const newIdx = idx + (isNext ? 1 : -1); 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) { if (newIdx + this.preloadLookahead < this.items.length + 1) {
this.preloadImage(this.items[newIdx + this.preloadLookahead - 1].url); 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 * @param {Event} event - The triggering event
*/ */
showControl(event) { clickImage(event) {
const idx = event.currentTarget.id; const idx = event.currentTarget.id;
this.showControl(idx);
},
/**
* Shows the control modal
*
* @param {number} idx - selected page index
*/
showControl(idx) {
this.selectedIndex = idx; this.selectedIndex = idx;
UIkit.modal($('#modal-sections')).show(); UIkit.modal($('#modal-sections')).show();
}, },

View File

@ -30,7 +30,7 @@
:height="item.height" :height="item.height"
:id="item.id" :id="item.id"
:style="`margin-top:${margin}px; margin-bottom:${margin}px`" :style="`margin-top:${margin}px; margin-bottom:${margin}px`"
@click="showControl($event)" @click="clickImage($event)"
/> />
</template> </template>
<%- if next_entry_url -%> <%- if next_entry_url -%>
@ -46,7 +46,7 @@
'uk-align-center': true, 'uk-align-center': true,
'uk-animation-slide-left': flipAnimation === 'left', 'uk-animation-slide-left': flipAnimation === 'left',
'uk-animation-slide-right': flipAnimation === 'right' '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'}; width:${mode === 'width' ? '100vw' : 'auto'};
height:${mode === 'height' ? '100vh' : 'auto'}; height:${mode === 'height' ? '100vh' : 'auto'};
margin-bottom:0; margin-bottom:0;