@d-i-t-a/reader 3.0.0-alpha.19 → 3.0.0-alpha.20

package/dist/esm/index.js

@@ -77562,6 +77562,12 @@ var ReflowableBookView = class {
         const spacer = doc.getElementById("r2d2bc-column-spacer");
         if (spacer) spacer.remove();
       }
+      if (this.scrollContainerMode === "iframe") {
+        this.height = computeIframeContentHeight(
+          this.iframe,
+          this.attributes
+        );
+      }
       this.setSize();
       this.setIframeHeight(this.iframe);
     } else {
@@ -77635,12 +77641,9 @@ var ReflowableBookView = class {
     }
   }
   getCurrentPosition() {
-    const wrapper = findRequiredElement(
-      document,
-      "#iframe-wrapper"
-    );
     if (this.scrollMode) {
-      return wrapper.scrollTop / this.scrollingElement.scrollHeight;
+      const extent = this.getScrollExtent();
+      return extent > 0 ? this.getScrollOffset() / extent : 0;
     } else {
       const width = this.getColumnWidth();
       const leftWidth = this.getLeftColumnsWidth();
@@ -77650,24 +77653,20 @@ var ReflowableBookView = class {
     }
   }
   goToProgression(position) {
-    const wrapper = findRequiredElement(
-      document,
-      "#iframe-wrapper"
-    );
     if (this.scrollMode) {
-      wrapper.scrollTop = this.scrollingElement.scrollHeight * position;
-    } else {
-      const width = this.getColumnWidth();
-      const leftWidth = this.getLeftColumnsWidth();
-      const rightWidth = this.getRightColumnsWidth();
-      const totalWidth = leftWidth + width + rightWidth;
-      const newLeftWidth = position * totalWidth;
-      let roundedLeftWidth = Math.round(newLeftWidth / width) * width;
-      if (roundedLeftWidth >= totalWidth) {
-        roundedLeftWidth = roundedLeftWidth - width;
-      }
-      this.setLeftColumnsWidth(roundedLeftWidth);
+      this.setScrollOffset(this.getScrollExtent() * position);
+      return;
     }
+    const width = this.getColumnWidth();
+    const leftWidth = this.getLeftColumnsWidth();
+    const rightWidth = this.getRightColumnsWidth();
+    const totalWidth = leftWidth + width + rightWidth;
+    const newLeftWidth = position * totalWidth;
+    let roundedLeftWidth = Math.round(newLeftWidth / width) * width;
+    if (roundedLeftWidth >= totalWidth) {
+      roundedLeftWidth = roundedLeftWidth - width;
+    }
+    this.setLeftColumnsWidth(roundedLeftWidth);
   }
   goToCssSelector(cssSelector, relative) {
     let doc = this.iframe.contentDocument;
@@ -77728,11 +77727,7 @@ var ReflowableBookView = class {
   // at top in scroll mode
   atStart() {
     if (this.scrollMode) {
-      const wrapper = findRequiredElement(
-        document,
-        "#iframe-wrapper"
-      );
-      return wrapper.scrollTop === 0;
+      return this.getScrollOffset() === 0;
     } else {
       const leftWidth = this.getLeftColumnsWidth();
       return leftWidth <= 0;
@@ -77741,11 +77736,7 @@ var ReflowableBookView = class {
   // at bottom in scroll mode
   atEnd() {
     if (this.scrollMode) {
-      const wrapper = findRequiredElement(
-        document,
-        "#iframe-wrapper"
-      );
-      return Math.ceil(this.scrollingElement.scrollHeight - wrapper.scrollTop) - 1 <= getHeight();
+      return Math.ceil(this.getScrollExtent() - this.getScrollOffset()) - 1 <= getHeight();
     } else {
       const rightWidth = Math.floor(this.getRightColumnsWidth());
       if (rightWidth <= 0) return true;
@@ -77755,19 +77746,11 @@ var ReflowableBookView = class {
     }
   }
   goToPreviousPage() {
-    const wrapper = findRequiredElement(
-      document,
-      "#iframe-wrapper"
-    );
     if (this.scrollMode) {
-      const leftHeight = wrapper.scrollTop;
+      const leftHeight = this.getScrollOffset();
       const height = this.getScreenHeight() - 40;
       const offset = leftHeight - height;
-      if (offset >= 0) {
-        wrapper.scrollTop = offset;
-      } else {
-        wrapper.scrollTop = 0;
-      }
+      this.setScrollOffset(offset >= 0 ? offset : 0);
     } else {
       const leftWidth = this.getLeftColumnsWidth();
       const width = this.getColumnWidth();
@@ -77784,20 +77767,12 @@ var ReflowableBookView = class {
     }
   }
   goToNextPage() {
-    const wrapper = findRequiredElement(
-      document,
-      "#iframe-wrapper"
-    );
     if (this.scrollMode) {
-      const leftHeight = wrapper.scrollTop;
+      const leftHeight = this.getScrollOffset();
       const height = this.getScreenHeight() - 40;
-      const scrollHeight = this.scrollingElement.scrollHeight;
+      const scrollHeight = this.getScrollExtent();
       const offset = leftHeight + height;
-      if (offset < scrollHeight) {
-        wrapper.scrollTop = offset;
-      } else {
-        wrapper.scrollTop = scrollHeight;
-      }
+      this.setScrollOffset(offset < scrollHeight ? offset : scrollHeight);
     } else {
       const leftWidth = this.getLeftColumnsWidth();
       const width = this.getColumnWidth();
@@ -77882,7 +77857,48 @@ var ReflowableBookView = class {
     );
     return wrapper.clientHeight;
   }
+  /**
+   * Which element provides the scrollbar in scroll mode.
+   *
+   * - `"host"` (default): `#iframe-wrapper` scrolls; iframe grows to content.
+   * - `"iframe"`: iframe's own document scrolls; iframe stays at viewport.
+   */
+  get scrollContainerMode() {
+    return this.attributes?.scrollContainer === "iframe" ? "iframe" : "host";
+  }
+  /** Current scroll offset (px from top) of the active scroll container. */
+  getScrollOffset() {
+    if (this.scrollContainerMode === "iframe") {
+      return this.scrollingElement?.scrollTop ?? 0;
+    }
+    const wrapper = findRequiredElement(
+      document,
+      "#iframe-wrapper"
+    );
+    return wrapper.scrollTop;
+  }
+  /** Set scroll offset on the active scroll container. */
+  setScrollOffset(value) {
+    if (this.scrollContainerMode === "iframe") {
+      if (this.scrollingElement) this.scrollingElement.scrollTop = value;
+      return;
+    }
+    const wrapper = findRequiredElement(
+      document,
+      "#iframe-wrapper"
+    );
+    wrapper.scrollTop = value;
+  }
+  /**
+   * Total scrollable height. Same value in both modes — iframe's internal
+   * document `scrollHeight`, because the iframe's document is always the
+   * source of truth for "how much content is there."
+   */
+  getScrollExtent() {
+    return this.scrollingElement?.scrollHeight ?? 0;
+  }
   setIframeHeight(iframe) {
+    if (this.scrollContainerMode === "iframe") return;
     let d = (0, import_debounce.default)((iframe2) => {
       if (iframe2) {
         let body = iframe2.contentWindow.document.body, html = iframe2.contentWindow.document.documentElement;
@@ -77920,6 +77936,8 @@ var ReflowableBookView = class {
         doc.documentElement.style.height = this.height + "px";
       }
       this.iframe.height = this.height + "px";
+    } else if (this.scrollContainerMode === "iframe") {
+      this.iframe.height = this.height + "px";
     } else {
       let html = this.iframe.contentWindow?.document?.documentElement;
       this.iframe.height = html?.offsetHeight + "px";
@@ -90468,7 +90486,10 @@ var EpubNavigator = class _EpubNavigator extends VisualNavigator {
       if (this.iframes.length === 0) {
         wrapper.style.overflow = "auto";
         let iframe3 = document.createElement("iframe");
-        iframe3.setAttribute("SCROLLING", "no");
+        iframe3.setAttribute(
+          "scrolling",
+          this.attributes?.scrollContainer === "iframe" ? "auto" : "no"
+        );
         iframe3.setAttribute("allowtransparency", "true");
         iframe3.style.verticalAlign = "top";
         this.iframes.push(iframe3);
@@ -90965,7 +90986,7 @@ var EpubNavigator = class _EpubNavigator extends VisualNavigator {
             document,
             "#iframe-wrapper"
           );
-          wrapper.onscroll = async () => {
+          const onScroll = async () => {
             this.isScrolling = true;
             await this.savePosition();
             if (this.view?.atEnd()) {
@@ -91006,6 +91027,13 @@ var EpubNavigator = class _EpubNavigator extends VisualNavigator {
             }
             onDoScrolling();
           };
+          if (this.attributes?.scrollContainer === "iframe") {
+            wrapper.onscroll = null;
+            const cw = this.iframes[0]?.contentWindow;
+            if (cw) cw.onscroll = onScroll;
+          } else {
+            wrapper.onscroll = onScroll;
+          }
           if (this.chapterTitle) this.chapterTitle.style.display = "none";
           if (this.chapterPosition) this.chapterPosition.style.display = "none";
           if (this.remainingPositions)
@@ -91337,6 +91365,10 @@ var EpubNavigator = class _EpubNavigator extends VisualNavigator {
         await this.modules.mediaOverlays.initialize();
       }
       setTimeout(async () => {
+        const iframeDocument = iframe.contentDocument;
+        if (iframeDocument?.fonts?.ready) {
+          await iframeDocument.fonts.ready;
+        }
         if (this.newElementId) {
           const element = iframe.contentDocument.getElementById(
             this.newElementId