@d-i-t-a/reader 2.0.0-beta.14 → 2.0.0-beta.17

package/dist/esm/index.js

@@ -55643,6 +55643,14 @@ var IFrameNavigator = class extends import_events.default {
         this.nextChapterBottomAnchorElement.style.display = "none";
       if (this.previousChapterTopAnchorElement)
         this.previousChapterTopAnchorElement.style.display = "none";
+      if (this.keyboardEventHandler) {
+        this.keyboardEventHandler.onBackwardSwipe = this.handlePreviousChapterClick.bind(this);
+        this.keyboardEventHandler.onForwardSwipe = this.handleNextChapterClick.bind(this);
+      }
+      if (this.touchEventHandler) {
+        this.touchEventHandler.onBackwardSwipe = this.handlePreviousPageClick.bind(this);
+        this.touchEventHandler.onForwardSwipe = this.handleNextPageClick.bind(this);
+      }
     } else {
       this.settings.isPaginated().then((paginated) => {
         if (paginated) {
@@ -59707,11 +59715,13 @@ init_polyfills();
 var DEFAULT_BACKGROUND_COLOR_OPACITY2 = 0.5;
 var LineFocusModule = class {
   constructor(delegate, properties, highlighter, api) {
+    this.hasEventListener = false;
     this.lines = [];
     this.index = 0;
     this.isActive = false;
     this.isDebug = false;
     this.lineFocusContainer = document.getElementById(`lineFocusContainer`);
+    this.readerContainer = document.getElementById(`D2Reader-Container`);
     this.lineFocusTopBlinder = document.getElementById(`lineFocusTopBlinder`);
     this.lineFocusBottomBlinder = document.getElementById(`lineFocusBottomBlinder`);
     this.wrapperHeight = void 0;
@@ -59732,6 +59742,44 @@ var LineFocusModule = class {
   }
   async start() {
     this.delegate.lineFocusModule = this;
+    const wrapper = findRequiredElement(document, "#iframe-wrapper");
+    if (wrapper.style.height.length > 0) {
+      this.wrapperHeight = wrapper.style.height;
+      if (this.lineFocusContainer && this.lineFocusContainer.style.height.length == 0)
+        this.lineFocusContainer.style.height = this.wrapperHeight;
+      if (this.readerContainer && this.readerContainer.style.height.length == 0) {
+        this.readerContainer.style.height = this.wrapperHeight;
+      }
+      if (this.readerContainer) {
+        this.readerContainer.style.overflow = "hidden";
+      }
+    }
+  }
+  keydown(event) {
+    if (event instanceof KeyboardEvent) {
+      const key = event.key;
+      switch (key) {
+        case "ArrowUp":
+          event.stopPropagation();
+          break;
+        case "ArrowDown":
+          event.stopPropagation();
+          break;
+      }
+    }
+  }
+  keyup(event) {
+    if (event instanceof KeyboardEvent) {
+      const key = event.key;
+      switch (key) {
+        case "ArrowUp":
+          this.lineUp();
+          break;
+        case "ArrowDown":
+          this.lineDown();
+          break;
+      }
+    }
   }
   handleResize() {
     if (this.isActive) {
@@ -59739,27 +59787,39 @@ var LineFocusModule = class {
     }
   }
   async enableLineFocus() {
-    if (!this.isActive) {
-      const wrapper = findRequiredElement(document, "#iframe-wrapper");
-      wrapper.style.overflow = "hidden";
-      if (wrapper.style.height.length > 0) {
-        this.wrapperHeight = wrapper.style.height;
-      }
-      wrapper.style.height = "100vh";
-    }
     this.isActive = true;
     await this.delegate.settings.scroll(true);
     this.lineFocus();
+    if (!this.hasEventListener) {
+      this.hasEventListener = true;
+      addEventListenerOptional(document, "keydown", this.keydown.bind(this));
+      addEventListenerOptional(document, "keyup", this.keyup.bind(this));
+      addEventListenerOptional(this.delegate.iframes[0].contentDocument, "keydown", this.keydown.bind(this));
+      addEventListenerOptional(this.delegate.iframes[0].contentDocument, "keyup", this.keyup.bind(this));
+    }
   }
   disableLineFocus(resetHeight = true) {
     this.isActive = false;
+    if (this.hasEventListener) {
+      this.hasEventListener = false;
+      removeEventListenerOptional(document, "keydown", this.keydown.bind(this));
+      removeEventListenerOptional(document, "keyup", this.keyup.bind(this));
+      removeEventListenerOptional(this.delegate.iframes[0].contentDocument, "keydown", this.keydown.bind(this));
+      removeEventListenerOptional(this.delegate.iframes[0].contentDocument, "keyup", this.keyup.bind(this));
+    }
     const wrapper = findRequiredElement(document, "#iframe-wrapper");
-    wrapper.style.overflow = "auto";
     if (this.wrapperHeight) {
       wrapper.style.height = this.wrapperHeight;
     } else if (resetHeight) {
+      this.index = 0;
       wrapper.style.removeProperty("height");
     }
+    if (!resetHeight) {
+      this.index = 0;
+    }
+    const doc = this.delegate.iframes[0].contentDocument;
+    const html = findIframeElement(doc, "html");
+    html.style.removeProperty("--USER__maxMediaHeight");
     this.wrapperHeight = void 0;
     if (this.lineFocusContainer)
       this.lineFocusContainer.style.display = "none";
@@ -59779,6 +59839,10 @@ var LineFocusModule = class {
   }
   lineFocus() {
     const wrapper = findRequiredElement(document, "#iframe-wrapper");
+    const doc = this.delegate.iframes[0].contentDocument;
+    const html = findIframeElement(doc, "html");
+    let maxHeight = this.properties.maxHeight ? getHeight() * this.properties.maxHeight / 100 : getHeight() / 2;
+    html.style.setProperty("--USER__maxMediaHeight", maxHeight + "px");
     function insertAfter(referenceNode, newNode) {
       referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
     }
@@ -59810,8 +59874,6 @@ var LineFocusModule = class {
       insertAfter(wrapper, divAfter2);
     }
     this.lines = [];
-    const self2 = this;
-    const doc = self2.delegate.iframes[0].contentDocument;
     if (doc) {
       let random_rgba = function() {
         const o = Math.round, r = Math.random, s = 255;
@@ -59974,10 +60036,8 @@ var LineFocusModule = class {
   }
   currentLine() {
     let current = this.lines[this.index];
-    let previous = this.lines[this.index];
-    let next = this.lines[this.index];
-    let top = previous.style.top;
-    let bottom = parseInt(next.style.top.replace("px", "")) + parseInt(next.style.height.replace("px", ""));
+    let top = current.style.top;
+    let bottom = parseInt(current.style.top.replace("px", "")) + parseInt(current.style.height.replace("px", ""));
     let height = bottom - parseInt(top.replace("px", ""));
     if (this.lineFocusContainer) {
       let lineFocusHeight = parseInt(getComputedStyle(this.lineFocusContainer).height.replace("px", ""));
@@ -59987,7 +60047,6 @@ var LineFocusModule = class {
       if (this.lineFocusBottomBlinder)
         this.lineFocusBottomBlinder.style.height = blindersHeight + "px";
     }
-    current.focus();
     current.scrollIntoView({
       block: "center",
       behavior: "smooth"
@@ -60000,10 +60059,8 @@ var LineFocusModule = class {
         this.index = this.lines.length - 1;
       }
       let current = this.lines[this.index];
-      let previous = this.lines[this.index];
-      let next = this.lines[this.index];
-      let top = previous.style.top;
-      let bottom = parseInt(next.style.top.replace("px", "")) + parseInt(next.style.height.replace("px", ""));
+      let top = current.style.top;
+      let bottom = parseInt(current.style.top.replace("px", "")) + parseInt(current.style.height.replace("px", ""));
       let height = bottom - parseInt(top.replace("px", ""));
       if (this.lineFocusContainer) {
         let lineFocusHeight = parseInt(getComputedStyle(this.lineFocusContainer).height.replace("px", ""));
@@ -60013,7 +60070,6 @@ var LineFocusModule = class {
         if (this.lineFocusBottomBlinder)
           this.lineFocusBottomBlinder.style.height = blindersHeight + "px";
       }
-      current.focus();
       current.scrollIntoView({
         block: "center",
         behavior: "smooth"
@@ -60027,10 +60083,8 @@ var LineFocusModule = class {
         this.index = 0;
       }
       let current = this.lines[this.index];
-      let previous = this.lines[this.index];
-      let next = this.lines[this.index];
-      let top = previous.style.top;
-      let bottom = parseInt(next.style.top.replace("px", "")) + parseInt(next.style.height.replace("px", ""));
+      let top = current.style.top;
+      let bottom = parseInt(current.style.top.replace("px", "")) + parseInt(current.style.height.replace("px", ""));
       let height = bottom - parseInt(top.replace("px", ""));
       if (this.lineFocusContainer) {
         let lineFocusHeight = parseInt(getComputedStyle(this.lineFocusContainer).height.replace("px", ""));
@@ -60040,7 +60094,6 @@ var LineFocusModule = class {
         if (this.lineFocusBottomBlinder)
           this.lineFocusBottomBlinder.style.height = blindersHeight + "px";
       }
-      current.focus();
       current.scrollIntoView({
         block: "center",
         behavior: "smooth"
@@ -60052,10 +60105,14 @@ var LineFocusModule = class {
   }
   findRects(parent) {
     const textNodes = this.findTextNodes(parent);
+    const imageNodes = Array.from(parent.getElementsByTagName("img"));
     let newNodes = [];
     textNodes.forEach((node) => {
       newNodes.push(...this.measureTextNodes(node));
     });
+    imageNodes.forEach((node) => {
+      newNodes.push(...this.measureImageNodes(node));
+    });
     return newNodes;
   }
   findTextNodes(parentElement, nodes = []) {
@@ -60088,6 +60145,21 @@ var LineFocusModule = class {
       }
     }
   }
+  measureImageNodes(node) {
+    try {
+      const range = document.createRange();
+      range.selectNode(node);
+      const rect = Array.from(range.getClientRects());
+      range.detach();
+      return rect;
+    } catch (error) {
+      if (IS_DEV) {
+        console.log("measureTextNode " + error);
+        console.log("measureTextNode " + node);
+        console.log(node.textContent);
+      }
+    }
+  }
 };
 
 // src/reader.ts
@@ -60517,14 +60589,23 @@ var D2Reader = class {
   }
   async applyLineFocusSettings(userSettings) {
     if (userSettings.lines) {
-      if (this.lineFocusModule)
+      if (this.lineFocusModule) {
+        const lines = this.lineFocusModule.properties.lines ?? 1;
+        this.lineFocusModule.index = this.lineFocusModule.index * lines / parseInt(userSettings.lines);
+        this.lineFocusModule.index = Math.abs(parseInt(this.lineFocusModule.index.toFixed()));
         this.lineFocusModule.properties.lines = parseInt(userSettings.lines);
-      await this.lineFocusModule?.enableLineFocus();
+        if (this.lineFocusModule.isActive) {
+          await this.lineFocusModule.enableLineFocus();
+        }
+      }
     }
     if (userSettings.debug !== void 0) {
-      if (this.lineFocusModule)
+      if (this.lineFocusModule) {
         this.lineFocusModule.isDebug = userSettings.debug;
-      await this.lineFocusModule?.enableLineFocus();
+        if (this.lineFocusModule.isActive) {
+          await this.lineFocusModule.enableLineFocus();
+        }
+      }
     }
   }
   lineUp() {