Implement #3363 Make optional pagenumber text option

app/bibleview-js/src/components/BibleView.vue

@@ -54,6 +54,11 @@
       <div class="prev-page-button" @click.stop="scrollUpDown(true)" :style="{width: `${calculatedConfig.marginLeft}px`}"/>
       <div class="next-page-button" @click.stop="scrollUpDown()" :style="{width: `${calculatedConfig.marginRight}px`}" />
     </template>
+    <div class="pagenumber" :style="{bottom: `${appSettings.bottomOffset}px`}" v-if="config.showPageNumber">
+      <div class="pagenumber-text">
+        {{ pageNumber }}
+      </div>
+    </div>
     <div
         v-if="appSettings.isBottomWindow"
         @touchmove.stop.prevent
@@ -136,7 +141,7 @@ const customCss = useCustomCss();
 provide(customCssKey, customCss);
 
 const scroll = useScroll(config, appSettings, calculatedConfig, verseHighlight, documentPromise);
-const {doScrolling, scrollToId} = scroll;
+const {doScrolling, scrollToId, scrollYAtStart, scrollY} = scroll;
 provide(scrollKey, scroll);
 const globalBookmarks = useGlobalBookmarks(config);
 const android = useAndroid(globalBookmarks, config);
@@ -336,16 +341,18 @@ setupEventBusListener("adjust_loading_count", (a: number) => {
 const isLoading = computed(() => documents.length === 0 || loadingCount.value > 0);
 
 function scrollUpDown(up = false) {
-    let amount =
-        window.innerHeight
-        - calculatedConfig.value.topOffset
-        - appSettings.bottomOffset;
+    let amount = calculatedConfig.value.pageHeight;
     if (documentType.value !== "bible" || (documentType.value === "bible" && !config.topMargin)) {
         amount -= 1.5*lineHeight.value; // 1.5 times because last line might be otherwise displayed partially
     }
     doScrolling(window.scrollY + (up ? -amount : amount), 0)
 }
 
+const pageNumber = computed(() => {
+    const num = (scrollY.value - scrollYAtStart.value) / calculatedConfig.value.pageHeight;
+    return num.toFixed(1);
+});
+
 setupEventBusListener("scroll_down", () => scrollUpDown());
 setupEventBusListener("scroll_up", () => scrollUpDown(true));
 
@@ -588,6 +595,34 @@ a {
   width: 0;
 }
 
+.pagenumber {
+  z-index: 5;
+  position: fixed;
+  right: 2mm;
+  margin-bottom: 2mm;
+  bottom: 0;
+  width: 1cm;
+  height: 0.5cm;
+  font-size: 70%;
+  font-weight: bold;
+  color: var(--text-color);
+  background: rgba(207, 207, 207, 0.71);
+  .noAnimation & {
+    background-color: var(--background-color);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--text-color);
+  }
+  border-radius: 0.5cm;
+  justify-content: center;
+  .pagenumber-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
 .prev-page-button {
   @extend .next-page-button;
   left: 0;

app/bibleview-js/src/composables/config.ts

@@ -85,6 +85,7 @@ export type Config = {
         maxWidth: number,
     },
     topMargin: number,
+    showPageNumber: boolean,
 }
 
 export type BibleModalButtonId = "BOOKMARK"|"BOOKMARK_NOTES"|"MY_NOTES"|"SHARE"|"COMPARE"|"SPEAK"
@@ -169,6 +170,7 @@ export function useConfig(documentType: Ref<BibleViewDocumentType>) {
             maxWidth: 300,
         },
         topMargin: 0,
+        showPageNumber: false,
     });
     const rtl = new URLSearchParams(window.location.search).get("rtl") === "true";
     const nightMode = new URLSearchParams(window.location.search).get("night") === "true";
@@ -229,8 +231,9 @@ export function useConfig(documentType: Ref<BibleViewDocumentType>) {
 
         const marginLeft = margin + (leftPadding - rightPadding)/2;
         const marginRight = margin + (rightPadding - leftPadding)/2;
+        const pageHeight = window.innerHeight - topOffset - appSettings.bottomOffset;
 
-        return {topOffset, topMargin, marginLeft, marginRight};
+        return {topOffset, topMargin, marginLeft, marginRight, pageHeight};
     });
 
     window.bibleViewDebug.config = config;

app/bibleview-js/src/composables/infinite-scroll.ts

@@ -21,7 +21,7 @@
  * @author Martin Denham [mjdenham at gmail dot com]
  */
 
-import {computed, nextTick, onMounted, watch} from "vue";
+import {computed, nextTick, onMounted, ref, watch} from "vue";
 import {filterNotNull, setupWindowEventListener} from "@/utils";
 import {UseAndroid} from "@/composables/android";
 import {AnyDocument, isOsisDocument} from "@/types/documents";

app/bibleview-js/src/composables/scroll.ts

@@ -17,7 +17,7 @@
 
 import {computed, nextTick, ref, Ref, watch} from "vue";
 import {setupEventBusListener} from "@/eventbus";
-import {isInViewport} from "@/utils";
+import {isInViewport, setupWindowEventListener} from "@/utils";
 import {AppSettings, CalculatedConfig, Config} from "@/composables/config";
 import {useOrdinalHighlight} from "@/composables/ordinal-highlight";
 import {Nullable} from "@/types/common";
@@ -179,6 +179,11 @@ export function useScroll(
         }
     }
 
+    const scrollY = ref<number>(0);
+    setupWindowEventListener('scroll', () => scrollY.value = window.scrollY);
+
+    const scrollYAtStart = ref<number>(0);
+
     async function setupContent(
         {
             jumpToOrdinal = null,
@@ -210,13 +215,14 @@ export function useScroll(
             console.log("scrolling to beginning of document (now)");
             scrollToId(null, {now: true, force: true});
         }
+        scrollYAtStart.value = window.scrollY;
 
         console.log("Content is set ready!");
     }
 
     setupEventBusListener("set_offsets", setToolbarOffset)
     setupEventBusListener("scroll_to_verse", scrollToId)
     setupEventBusListener("setup_content", setupContent)
-    return {scrollToId, isScrolling, doScrolling}
+    return {scrollToId, isScrolling, doScrolling, scrollYAtStart, scrollY}
 }