@d-i-t-a/reader 2.0.0-beta.16 → 2.0.0-beta.19

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.linkInPublication = (readingOrder, clickedHref) => readingOrder.some((link) => {
+      return !link.Rel?.includes("external") && this.navigator.publication.getRelativeHref(clickedHref).includes(link.Href);
+    });
     this.isEpubInternal = (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.readingOrder, clickedLink.href);
+      return isEpubInternal;
+    };
+    this.isResourceInternal = (clickedLink) => {
+      if (IS_DEV)
+        console.log("clickedLink: ", clickedLink);
+      const isEpubInternal = this.linkInPublication(this.navigator.publication.resources, clickedLink.href);
       return isEpubInternal;
     };
     this.handleLinks = async (event) => {
@@ -46600,8 +46716,12 @@ var EventHandler = class {
       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 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) {
+                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) {
@@ -49069,6 +49196,10 @@ var iconTemplate = (id2, title, path, classAttr = `icon`) => `<svg xmlns="http:/
   <title id="${id2}">${title}</title>
   ${path}
 </svg>`;
+var iconTemplateWithViewBox = (id2, title, path, viewBox, classAttr = `icon`) => `<svg xmlns="http://www.w3.org/2000/svg" width="${WIDTH_ATTR}" height="${WIDTH_ATTR}" viewBox="${viewBox}" preserveAspectRatio="xMidYMid meet" role="img" class="${classAttr}" aria-labelledBy="${id2}">
+  <title id="${id2}">${title}</title>
+  ${path}
+</svg>`;
 var iconTemplateColored = (id2, title, path, classAttr = `icon`, size, fill) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${VIEWBOX_ATTR}" style="fill:${fill}" preserveAspectRatio="xMidYMid meet" role="img" class="${classAttr}" aria-labelledBy="${id2}">
   <title id="${id2}">${title}</title>
   ${path}
@@ -49077,7 +49208,7 @@ var icons = {
   error: iconTemplate(`error-icon`, `Warning`, `<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>`),
   home: `<path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>`,
   expand: iconTemplate(`expand-icon`, `Enter fullscreen`, `<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>`, `icon active-icon`),
-  loading: iconTemplate(`loading-icon`, `Loading`, `<path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>`),
+  loading: iconTemplateWithViewBox(`loading-icon`, `Loading`, `<path fill="#BBBBBB" d="M145,241.6c-53.3,0-96.6-43.2-96.6-96.6c0-53.3,43.2-96.6,96.6-96.6c53.3,0,96.6,43.2,96.6,96.6 c0,26.7-10.8,50.9-28.3,68.3l7.6,7.6c19.4-19.4,31.5-46.3,31.5-75.9c0-59.3-48-107.3-107.3-107.3S37.7,85.7,37.7,145 c0,59.3,48,107.3,107.3,107.3V241.6z"/>`, "0 0 290 290"),
   next: iconTemplate(`next-icon`, `Next Chapter`, `<path d="M6.49 20.13l1.77 1.77 9.9-9.9-9.9-9.9-1.77 1.77L14.62 12l-8.13 8.13z"/>`),
   previous: iconTemplate(`previous-icon`, `Previous Chapter`, `<path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"/>`),
   settings: iconTemplate(`settings-icon`, `Settings`, `<path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>`, `icon open`),
@@ -55643,6 +55774,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,6 +59846,7 @@ 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;
@@ -59730,6 +59870,11 @@ var LineFocusModule = class {
     if (IS_DEV) {
       console.log("Definitions module stop");
     }
+    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));
   }
   async start() {
     this.delegate.lineFocusModule = this;
@@ -59745,6 +59890,39 @@ var LineFocusModule = class {
         this.readerContainer.style.overflow = "hidden";
       }
     }
+    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));
+    }
+  }
+  keydown(event) {
+    if (event instanceof KeyboardEvent && this.isActive) {
+      const key = event.key;
+      switch (key) {
+        case "ArrowUp":
+          event.stopPropagation();
+          break;
+        case "ArrowDown":
+          event.stopPropagation();
+          break;
+      }
+    }
+  }
+  keyup(event) {
+    if (event instanceof KeyboardEvent && this.isActive) {
+      const key = event.key;
+      switch (key) {
+        case "ArrowUp":
+          this.lineUp();
+          break;
+        case "ArrowDown":
+          this.lineDown();
+          break;
+      }
+    }
   }
   handleResize() {
     if (this.isActive) {
@@ -59761,9 +59939,6 @@ var LineFocusModule = class {
     const wrapper = findRequiredElement(document, "#iframe-wrapper");
     if (this.wrapperHeight) {
       wrapper.style.height = this.wrapperHeight;
-    } else if (resetHeight) {
-      this.index = 0;
-      wrapper.style.removeProperty("height");
     }
     if (!resetHeight) {
       this.index = 0;
@@ -59998,7 +60173,6 @@ var LineFocusModule = class {
       if (this.lineFocusBottomBlinder)
         this.lineFocusBottomBlinder.style.height = blindersHeight + "px";
     }
-    current.focus();
     current.scrollIntoView({
       block: "center",
       behavior: "smooth"
@@ -60022,7 +60196,6 @@ var LineFocusModule = class {
         if (this.lineFocusBottomBlinder)
           this.lineFocusBottomBlinder.style.height = blindersHeight + "px";
       }
-      current.focus();
       current.scrollIntoView({
         block: "center",
         behavior: "smooth"
@@ -60047,7 +60220,6 @@ var LineFocusModule = class {
         if (this.lineFocusBottomBlinder)
           this.lineFocusBottomBlinder.style.height = blindersHeight + "px";
       }
-      current.focus();
       current.scrollIntoView({
         block: "center",
         behavior: "smooth"