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

package/dist/esm/index.js

@@ -49069,6 +49069,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 +49081,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 +55647,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 +59719,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,19 +59743,59 @@ 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;
     const wrapper = findRequiredElement(document, "#iframe-wrapper");
     if (wrapper.style.height.length > 0) {
       this.wrapperHeight = wrapper.style.height;
-      if (this.lineFocusContainer)
+      if (this.lineFocusContainer && this.lineFocusContainer.style.height.length == 0)
         this.lineFocusContainer.style.height = this.wrapperHeight;
-      if (this.readerContainer) {
+      if (this.readerContainer && this.readerContainer.style.height.length == 0) {
         this.readerContainer.style.height = this.wrapperHeight;
+      }
+      if (this.readerContainer) {
         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) {
@@ -59750,13 +59803,6 @@ var LineFocusModule = class {
     }
   }
   async enableLineFocus() {
-    if (!this.isActive) {
-      const wrapper = findRequiredElement(document, "#iframe-wrapper");
-      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();
@@ -59766,8 +59812,9 @@ var LineFocusModule = class {
     const wrapper = findRequiredElement(document, "#iframe-wrapper");
     if (this.wrapperHeight) {
       wrapper.style.height = this.wrapperHeight;
-    } else if (resetHeight) {
-      wrapper.style.removeProperty("height");
+    }
+    if (!resetHeight) {
+      this.index = 0;
     }
     const doc = this.delegate.iframes[0].contentDocument;
     const html = findIframeElement(doc, "html");
@@ -59999,7 +60046,6 @@ var LineFocusModule = class {
       if (this.lineFocusBottomBlinder)
         this.lineFocusBottomBlinder.style.height = blindersHeight + "px";
     }
-    current.focus();
     current.scrollIntoView({
       block: "center",
       behavior: "smooth"
@@ -60023,7 +60069,6 @@ var LineFocusModule = class {
         if (this.lineFocusBottomBlinder)
           this.lineFocusBottomBlinder.style.height = blindersHeight + "px";
       }
-      current.focus();
       current.scrollIntoView({
         block: "center",
         behavior: "smooth"
@@ -60048,7 +60093,6 @@ var LineFocusModule = class {
         if (this.lineFocusBottomBlinder)
           this.lineFocusBottomBlinder.style.height = blindersHeight + "px";
       }
-      current.focus();
       current.scrollIntoView({
         block: "center",
         behavior: "smooth"