@d-i-t-a/reader 2.0.0-beta.18 → 2.0.0-beta.20

package/dist/esm/index.js

@@ -46005,6 +46005,9 @@ var Publication = class extends import_publication.Publication {
   get readingOrder() {
     return this.Spine ?? [];
   }
+  get resources() {
+    return this.Resources ?? [];
+  }
   get tableOfContents() {
     if (this.sample?.isSampleRead && this.positions?.length > 0) {
       return this.limitedTOC();
@@ -46501,6 +46504,111 @@ var Popup = class {
       }
     }
   }
+  async hidePopover() {
+    let footnote = this.navigator.iframes[0].contentDocument?.getElementById("d2-popover");
+    if (footnote) {
+      footnote.parentElement?.removeChild(footnote);
+    }
+    const wrapper = findRequiredElement(document, "#iframe-wrapper");
+    wrapper.style.overflow = "auto";
+  }
+  async showPopover(link, event) {
+    const href = link.getAttribute("href");
+    const src = link.getAttribute("src");
+    function getAbsoluteHref(href2) {
+      const currentUrl = document.location.href;
+      return new URL(href2, currentUrl).href;
+    }
+    if (href) {
+      let absolute = getAbsoluteHref(href);
+      if (absolute) {
+        event.preventDefault();
+        event.stopPropagation();
+        let popover = this.navigator.iframes[0].contentDocument?.getElementById("d2-popover");
+        if (popover) {
+          popover.parentElement?.removeChild(popover);
+        }
+        const d2popover = document.createElement("div");
+        d2popover.id = "d2-popover";
+        d2popover.className = "d2-popover is-active";
+        const wrapper = findRequiredElement(document, "#iframe-wrapper");
+        wrapper.style.overflow = "hidden";
+        d2popover.style.top = wrapper.scrollTop + "px";
+        d2popover.style.height = wrapper.clientHeight * 0.9 + "px";
+        const d2wrapper = document.createElement("div");
+        d2wrapper.className = "d2-popover-wrapper";
+        d2popover.appendChild(d2wrapper);
+        const d2content = document.createElement("div");
+        d2content.className = "d2-popover-content";
+        d2wrapper.appendChild(d2content);
+        await fetch(absolute).then((r) => r.text()).then(async (data) => {
+          d2content.innerHTML = data;
+          let doc = this.navigator.iframes[0].contentDocument;
+          if (doc) {
+            doc.body.appendChild(d2popover);
+          }
+        });
+        let win = this.navigator.iframes[0].contentWindow;
+        if (!win) {
+          return;
+        }
+        let self2 = this;
+        win.onclick = function(ev) {
+          if (event.target !== ev.target) {
+            if (d2popover.parentElement) {
+              self2.hidePopover();
+              if (win) {
+                win.onclick = null;
+              }
+            }
+          }
+        };
+      }
+    } else if (src) {
+      let absolute = getAbsoluteHref(src);
+      if (absolute) {
+        event.preventDefault();
+        event.stopPropagation();
+        let popover = this.navigator.iframes[0].contentDocument?.getElementById("d2-popover");
+        if (popover) {
+          popover.parentElement?.removeChild(popover);
+        }
+        const d2popover = document.createElement("div");
+        d2popover.id = "d2-popover";
+        d2popover.className = "d2-popover is-active";
+        const wrapper = findRequiredElement(document, "#iframe-wrapper");
+        wrapper.style.overflow = "hidden";
+        d2popover.style.top = wrapper.scrollTop + "px";
+        d2popover.style.height = wrapper.clientHeight * 0.9 + "px";
+        const d2wrapper = document.createElement("div");
+        d2wrapper.className = "d2-popover-wrapper";
+        d2popover.appendChild(d2wrapper);
+        const d2content = document.createElement("img");
+        d2content.className = "d2-popover-content";
+        d2wrapper.appendChild(d2content);
+        d2content.src = src;
+        let doc = this.navigator.iframes[0].contentDocument;
+        if (doc) {
+          doc.body.appendChild(d2popover);
+        }
+        let win = this.navigator.iframes[0].contentWindow;
+        if (!win) {
+          return;
+        }
+        let self2 = this;
+        win.onclick = function(ev) {
+          if (event.target !== ev.target) {
+            if (d2popover.parentElement) {
+              self2.hidePopover();
+              if (win) {
+                win.onclick = null;
+              }
+            }
+          }
+        };
+      }
+    }
+  }
   showPopup(element, event) {
     let footnote = this.navigator.iframes[0].contentDocument?.getElementById("d2-popup");
     if (footnote) {
@@ -46586,11 +46694,19 @@ var EventHandler = class {
       }
       return null;
     };
-    this.isEpubInternal = (clickedLink) => {
+    this.linkInPublication = (readingOrder, clickedHref) => readingOrder.some((link) => {
+      return !link.Rel?.includes("external") && this.navigator.publication.getRelativeHref(clickedHref).includes(link.Href);
+    });
+    this.isReadingOrderInternal = (clickedLink) => {
+      if (IS_DEV)
+        console.log("clickedLink: ", clickedLink);
+      const isEpubInternal = this.linkInPublication(this.navigator.publication.readingOrder, clickedLink.href);
+      return isEpubInternal;
+    };
+    this.isResourceInternal = (clickedLink) => {
       if (IS_DEV)
         console.log("clickedLink: ", clickedLink);
-      const linkInReadingOrder = (readingOrder, clickedPathname) => readingOrder.some((link) => !link.Rel?.includes("external") && link.Href.includes(clickedPathname));
-      const isEpubInternal = linkInReadingOrder(this.navigator.publication.readingOrder, clickedLink.pathname);
+      const isEpubInternal = this.linkInPublication(this.navigator.publication.resources, clickedLink.href);
       return isEpubInternal;
     };
     this.handleLinks = async (event) => {
@@ -46599,9 +46715,13 @@ var EventHandler = class {
       const link = this.checkForLink(event);
       if (link) {
         const isSameOrigin = window.location.protocol === link.protocol && window.location.port === link.port && window.location.hostname === link.hostname;
-        const isEpubInternal = this.isEpubInternal(link);
+        const isEpubInternal = this.isReadingOrderInternal(link);
+        const isResourceInternal = this.isResourceInternal(link);
+        if (!isResourceInternal) {
+          await this.popup.hidePopover();
+        }
         const isInternal = link.href.indexOf("#");
-        if (!isSameOrigin && !isEpubInternal) {
+        if (!isSameOrigin && !isEpubInternal && !isResourceInternal) {
           window.open(link.href, "_blank");
           event.preventDefault();
           event.stopPropagation();
@@ -46613,6 +46733,8 @@ var EventHandler = class {
               const attribute = link2.getAttribute("epub:type") === "noteref";
               if (attribute) {
                 await this.popup.handleFootnote(link2, event);
+              } else if (isResourceInternal && !isEpubInternal) {
+                await this.popup.showPopover(link2, event);
               } else {
                 this.onInternalLink(event);
               }
@@ -46632,6 +46754,12 @@ var EventHandler = class {
   }
   setupEvents(element) {
     if (element !== null) {
+      element.addEventListener("dblclick", async (event) => {
+        let htmlElement = event.target;
+        if (event.target && htmlElement.tagName.toLowerCase() === "img") {
+          await this.popup.showPopover(htmlElement, event);
+        }
+      }, true);
       element.addEventListener("click", this.handleLinks.bind(this));
     } else {
       throw "cannot setup events for null";
@@ -46808,10 +46936,9 @@ var ReflowableBookView = class {
     }
   }
   goToElement(element, relative) {
-    const wrapper = findRequiredElement(document, "#iframe-wrapper");
     if (this.scrollMode) {
       if (element) {
-        wrapper.scrollTop = element.offsetTop;
+        element.scrollIntoView({ block: "center" });
       }
     } else {
       if (element) {
@@ -58316,9 +58443,12 @@ var TTSModule = class {
       }
     });
   }
-  cancel() {
-    if (this.api?.stopped)
-      this.api?.stopped();
+  cancel(api = true) {
+    if (api) {
+      if (this.api?.stopped)
+        this.api?.stopped();
+      this.delegate.emit("readaloud.stopped", "stopped");
+    }
     this.userScrolled = false;
     window.speechSynthesis.cancel();
     if (this.splittingResult && this.delegate.tts?.enableSplitter) {
@@ -58347,7 +58477,7 @@ var TTSModule = class {
       this.api?.started();
     var self2 = this;
     this.userScrolled = false;
-    this.cancel();
+    this.cancel(false);
     if (this.delegate.tts?.enableSplitter) {
       if (partial) {
         var allWords = self2.body.querySelectorAll("[data-word]");