@prose-reader/core 1.65.0 → 1.67.0

package/dist/index.umd.cjs

@@ -468,20 +468,25 @@
       }
     );
     fixReflowable(reader);
-    let observer;
-    if (options.layoutAutoResize === `container`) {
-      reader.context.state$.pipe(
-        operators.map((state) => state.containerElement),
-        operators.filter(isDefined),
-        operators.distinctUntilChanged(),
-        operators.takeUntil(reader.$.destroy$)
-      ).subscribe((container) => {
-        observer = new ResizeObserver(() => {
-          reader == null ? void 0 : reader.layout();
-        });
-        observer.observe(container);
+    const observeContainerResize = (container) => new rxjs.Observable((observer) => {
+      const resizeObserver = new ResizeObserver(() => {
+        observer.next();
       });
-    }
+      resizeObserver.observe(container);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    });
+    const layoutOnContainerResize$ = settingsManager.settings$.pipe(
+      operators.filter(({ layoutAutoResize: layoutAutoResize2 }) => layoutAutoResize2 === "container"),
+      operators.switchMap(() => reader.context.containerElement$),
+      operators.filter(isDefined),
+      operators.switchMap((container) => observeContainerResize(container)),
+      operators.debounceTime(100),
+      operators.tap(() => {
+        reader == null ? void 0 : reader.layout();
+      })
+    );
     const movingSafePan$ = createMovingSafePan$(reader);
     movingSafePan$.subscribe();
     settingsManager.settings$.pipe(
@@ -493,12 +498,12 @@
       }),
       operators.takeUntil(reader.$.destroy$)
     ).subscribe();
+    rxjs.merge(layoutOnContainerResize$).pipe(operators.takeUntil(reader.$.destroy$)).subscribe();
     return {
       ...reader,
       destroy: () => {
         settingsManager.destroy();
         reader.destroy();
-        observer == null ? void 0 : observer.disconnect();
       },
       settings: settingsManager
     };
@@ -2464,6 +2469,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 +2766,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,