@prose-reader/core 1.65.0 → 1.66.0

package/dist/index.js

@@ -2463,6 +2463,174 @@ const buildDocumentStyle = ({
     }
   `;
 };
+const buildStyleForViewportFrame = () => {
+  return `
+      ${getStyleForViewportDocument()}
+      html {
+        width: 100%;
+        height: 100%;
+      }
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+      ${/*
+  * @see https://hammerjs.github.io/touch-action/
+  */
+  ``}
+      html, body {
+        touch-action: none;
+      }
+    `;
+};
+const buildStyleForReflowableImageOnly = ({
+  isScrollable,
+  enableTouch
+}) => {
+  return `
+      ${/*
+  * @see https://hammerjs.github.io/touch-action/
+  */
+  ``}
+      html, body {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        ${enableTouch ? `
+          touch-action: none
+        ` : ``}
+      }
+      ${isScrollable ? `
+        img {
+          height: auto !important;
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+          ${// we make sure img spread on entire screen
+  ``}
+          width: 100%;
+          ${/**
+  * line break issue
+  * @see https://stackoverflow.com/questions/37869020/image-not-taking-up-the-full-height-of-container
+  */
+  ``}
+          display: block;
+        }
+      ` : ``}
+    `;
+};
+const buildStyleWithMultiColumn = ({
+  width,
+  columnHeight,
+  columnWidth
+}) => {
+  return `
+      parsererror {
+        display: none !important;
+      }
+      ${/*
+    might be html * but it does mess up things like figure if so.
+    check accessible_epub_3
+  */
+  ``}
+      html, body {
+        margin: 0;
+        padding: 0 !important;
+        -max-width: ${columnWidth}px !important;
+      }
+      ${/*
+    body {
+      height: ${columnHeight}px !important;
+      width: ${columnWidth}px !important;
+      -margin-left: ${horizontalMargin}px !important;
+      -margin-right: ${horizontalMargin}px !important;
+      -margin: ${verticalMargin}px ${horizontalMargin}px !important;
+      -padding-top: ${horizontalMargin}px !important;
+      -padding-bottom: ${horizontalMargin}px !important;
+    }
+  */
+  ``}
+      body {
+        padding: 0 !important;
+        width: ${width}px !important;
+        height: ${columnHeight}px !important;
+        overflow-y: hidden;
+        column-gap: 0px !important;
+        column-width: ${columnWidth}px !important;
+        column-fill: auto !important;
+        word-wrap: break-word;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+      }
+      body:focus-visible {
+        ${/*
+    we make sure that there are no outline when we focus something inside the iframe
+  */
+  ``}
+        outline: none;
+      }
+      ${/*
+  * @see https://hammerjs.github.io/touch-action/
+  */
+  ``}
+      html, body {
+        touch-action: none;
+      }
+      ${/*
+    this messes up hard, be careful with this
+  */
+  ``}
+      * {
+        -max-width: ${columnWidth}px !important;
+      }
+      ${/*
+    this is necessary to have a proper calculation when determining size
+    of iframe content. If an img is using something like width:100% it would expand to
+    the size of the original image and potentially gives back a wrong size (much larger)
+    @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
+  */
+  ``}
+      img, video, audio, object, svg {
+        max-width: 100%;
+        max-width: ${columnWidth}px !important;
+        max-height: ${columnHeight}px !important;
+        -pointer-events: none;
+        -webkit-column-break-inside: avoid;
+        page-break-inside: avoid;
+        break-inside: avoid;
+      }
+      figure {
+        d-max-width: ${columnWidth}px !important;
+      }
+      img {
+        object-fit: contain;
+        break-inside: avoid;
+        box-sizing: border-box;
+        d-max-width: ${columnWidth}px !important;
+      }
+      ${/*
+    img, video, audio, object, svg {
+      max-height: ${columnHeight}px !important;
+      box-sizing: border-box;
+      object-fit: contain;
+      -webkit-column-break-inside: avoid;
+      page-break-inside: avoid;
+      break-inside: avoid;
+    }
+  */
+  ``}
+      table {
+        max-width: ${columnWidth}px !important;
+        table-layout: fixed;
+      }
+      td {
+        max-width: ${columnWidth}px;
+      }
+    `;
+};
 const createReflowableSpineItem = ({
   item,
   context,
@@ -2592,174 +2760,6 @@ const createReflowableSpineItem = ({
     layout
   };
 };
-const buildStyleForViewportFrame = () => {
-  return `
-    ${getStyleForViewportDocument()}
-    html {
-      width: 100%;
-      height: 100%;
-    }
-    body {
-      width: 100%;
-      height: 100%;
-      margin: 0;
-    }
-    ${/*
-  * @see https://hammerjs.github.io/touch-action/
-  */
-  ``}
-    html, body {
-      touch-action: none;
-    }
-  `;
-};
-const buildStyleForReflowableImageOnly = ({
-  isScrollable,
-  enableTouch
-}) => {
-  return `
-    ${/*
-  * @see https://hammerjs.github.io/touch-action/
-  */
-  ``}
-    html, body {
-      width: 100%;
-      margin: 0;
-      padding: 0;
-      ${enableTouch ? `
-        touch-action: none
-      ` : ``}
-    }
-    ${isScrollable ? `
-      img {
-        height: auto !important;
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        ${// we make sure img spread on entire screen
-  ``}
-        width: 100%;
-        ${/**
-  * line break issue
-  * @see https://stackoverflow.com/questions/37869020/image-not-taking-up-the-full-height-of-container
-  */
-  ``}
-        display: block;
-      }
-    ` : ``}
-  `;
-};
-const buildStyleWithMultiColumn = ({
-  width,
-  columnHeight,
-  columnWidth
-}) => {
-  return `
-    parsererror {
-      display: none !important;
-    }
-    ${/*
-    might be html * but it does mess up things like figure if so.
-    check accessible_epub_3
-  */
-  ``}
-    html, body {
-      margin: 0;
-      padding: 0 !important;
-      -max-width: ${columnWidth}px !important;
-    }
-    ${/*
-    body {
-      height: ${columnHeight}px !important;
-      width: ${columnWidth}px !important;
-      -margin-left: ${horizontalMargin}px !important;
-      -margin-right: ${horizontalMargin}px !important;
-      -margin: ${verticalMargin}px ${horizontalMargin}px !important;
-      -padding-top: ${horizontalMargin}px !important;
-      -padding-bottom: ${horizontalMargin}px !important;
-    }
-  */
-  ``}
-    body {
-      padding: 0 !important;
-      width: ${width}px !important;
-      height: ${columnHeight}px !important;
-      overflow-y: hidden;
-      column-gap: 0px !important;
-      column-width: ${columnWidth}px !important;
-      column-fill: auto !important;
-      word-wrap: break-word;
-      box-sizing: border-box;
-    }
-    body {
-      margin: 0;
-    }
-    body:focus-visible {
-      ${/*
-    we make sure that there are no outline when we focus something inside the iframe
-  */
-  ``}
-      outline: none;
-    }
-    ${/*
-  * @see https://hammerjs.github.io/touch-action/
-  */
-  ``}
-    html, body {
-      touch-action: none;
-    }
-    ${/*
-    this messes up hard, be careful with this
-  */
-  ``}
-    * {
-      -max-width: ${columnWidth}px !important;
-    }
-    ${/*
-    this is necessary to have a proper calculation when determining size
-    of iframe content. If an img is using something like width:100% it would expand to
-    the size of the original image and potentially gives back a wrong size (much larger)
-    @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
-  */
-  ``}
-    img, video, audio, object, svg {
-      max-width: 100%;
-      max-width: ${columnWidth}px !important;
-      max-height: ${columnHeight}px !important;
-      -pointer-events: none;
-      -webkit-column-break-inside: avoid;
-      page-break-inside: avoid;
-      break-inside: avoid;
-    }
-    figure {
-      d-max-width: ${columnWidth}px !important;
-    }
-    img {
-      object-fit: contain;
-      break-inside: avoid;
-      box-sizing: border-box;
-      d-max-width: ${columnWidth}px !important;
-    }
-    ${/*
-    img, video, audio, object, svg {
-      max-height: ${columnHeight}px !important;
-      box-sizing: border-box;
-      object-fit: contain;
-      -webkit-column-break-inside: avoid;
-      page-break-inside: avoid;
-      break-inside: avoid;
-    }
-  */
-  ``}
-    table {
-      max-width: ${columnWidth}px !important;
-      table-layout: fixed;
-    }
-    td {
-      max-width: ${columnWidth}px;
-    }
-  `;
-};
 const createSpineItem = ({
   item,
   context,