@prose-reader/core 1.65.0 → 1.66.0

package/dist/index.umd.cjs

@@ -2464,6 +2464,174 @@
     }
   `;
   };
+  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,
@@ -2593,174 +2761,6 @@
       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,