@prose-reader/enhancer-refit 1.241.0

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { Reader } from '@prose-reader/core';
+import { Observable } from 'rxjs';
+export type RefitEnhancerAPI = {
+    readonly __PROSE_READER_ENHANCER_REFIT: boolean;
+    refit: {
+        update: (settings: Partial<RefitEnhancerOptions>) => void;
+        settings$: Observable<RefitEnhancerOptions>;
+    };
+};
+export type RefitEnhancerOptions = {
+    viewportFit?: "desktop" | "tablet" | "fit" | "custom";
+    customWidth?: number;
+};
+export declare const refitEnhancer: <InheritOptions, InheritOutput extends Reader>(next: (options: InheritOptions) => InheritOutput) => (options: InheritOptions & {
+    refit?: Partial<RefitEnhancerOptions>;
+}) => InheritOutput & RefitEnhancerAPI;

package/dist/index.js

@@ -0,0 +1,70 @@
+import { HTML_ATTRIBUTE_DATA_READER_ID, HTML_ATTRIBUTE_VIEWPORT_CLASSNAME, ReactiveEntity } from '@prose-reader/core';
+import { combineLatest, map, distinctUntilChanged, tap } from 'rxjs';
+
+class Settings extends ReactiveEntity {
+  update(settings) {
+    super.mergeCompare(settings);
+  }
+}
+const refitEnhancer = (next) => (options) => {
+  const { refit = {}, ...rest } = options;
+  const reader = next(rest);
+  const settings = new Settings(refit);
+  const stylesheetId = `prose-reader-refit-${reader.id}`;
+  const maxWidthCssVariable = `--${stylesheetId}-max-width`;
+  const style = document.createElement("style");
+  style.id = stylesheetId;
+  style.textContent = `
+      [${HTML_ATTRIBUTE_DATA_READER_ID}] .${HTML_ATTRIBUTE_VIEWPORT_CLASSNAME} {
+        border: 1px solid red;
+        margin: auto;
+        width: 100%;
+        max-width: var(${maxWidthCssVariable});
+      }
+    `;
+  document.head.appendChild(style);
+  const viewportFitSubscription = combineLatest([
+    settings.watch(["viewportFit", "customWidth"]),
+    reader.settings.watch(["computedPageTurnMode"])
+  ]).pipe(
+    map(([{ viewportFit, customWidth }, { computedPageTurnMode }]) => {
+      if (computedPageTurnMode === "scrollable") {
+        if (viewportFit === "desktop") {
+          return "800px";
+        }
+        if (viewportFit === "tablet") {
+          return "600px";
+        }
+        if (viewportFit === "custom") {
+          return `${customWidth ?? 100}%`;
+        }
+      }
+      return "100%";
+    }),
+    distinctUntilChanged(),
+    tap((maxWidth) => {
+      document.documentElement.style.setProperty(
+        maxWidthCssVariable,
+        maxWidth
+      );
+      reader.layout();
+    })
+  ).subscribe();
+  const destroy = () => {
+    viewportFitSubscription.unsubscribe();
+    document.head.removeChild(style);
+    reader.destroy();
+  };
+  return {
+    ...reader,
+    __PROSE_READER_ENHANCER_REFIT: true,
+    destroy,
+    refit: {
+      update: settings.update.bind(settings),
+      settings$: settings
+    }
+  };
+};
+
+export { refitEnhancer };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import {\n  HTML_ATTRIBUTE_DATA_READER_ID,\n  HTML_ATTRIBUTE_VIEWPORT_CLASSNAME,\n  ReactiveEntity,\n  type Reader,\n} from \"@prose-reader/core\"\nimport {\n  combineLatest,\n  distinctUntilChanged,\n  map,\n  type Observable,\n  tap,\n} from \"rxjs\"\n\nexport type RefitEnhancerAPI = {\n  readonly __PROSE_READER_ENHANCER_REFIT: boolean\n  refit: {\n    update: (settings: Partial<RefitEnhancerOptions>) => void\n    settings$: Observable<RefitEnhancerOptions>\n  }\n}\n\nexport type RefitEnhancerOptions = {\n  viewportFit?: \"desktop\" | \"tablet\" | \"fit\" | \"custom\"\n  customWidth?: number\n}\n\nclass Settings extends ReactiveEntity<RefitEnhancerOptions> {\n  update(settings: RefitEnhancerOptions) {\n    super.mergeCompare(settings)\n  }\n}\n\nexport const refitEnhancer =\n  <InheritOptions, InheritOutput extends Reader>(\n    next: (options: InheritOptions) => InheritOutput,\n  ) =>\n  (\n    options: InheritOptions & {\n      refit?: Partial<RefitEnhancerOptions>\n    },\n  ): InheritOutput & RefitEnhancerAPI => {\n    const { refit = {}, ...rest } = options\n    const reader = next(rest as InheritOptions)\n    const settings = new Settings(refit)\n    const stylesheetId = `prose-reader-refit-${reader.id}`\n    const maxWidthCssVariable = `--${stylesheetId}-max-width`\n\n    const style = document.createElement(\"style\")\n    style.id = stylesheetId\n    style.textContent = `\n      [${HTML_ATTRIBUTE_DATA_READER_ID}] .${HTML_ATTRIBUTE_VIEWPORT_CLASSNAME} {\n        border: 1px solid red;\n        margin: auto;\n        width: 100%;\n        max-width: var(${maxWidthCssVariable});\n      }\n    `\n\n    document.head.appendChild(style)\n\n    const viewportFitSubscription = combineLatest([\n      settings.watch([\"viewportFit\", \"customWidth\"]),\n      reader.settings.watch([\"computedPageTurnMode\"]),\n    ])\n      .pipe(\n        map(([{ viewportFit, customWidth }, { computedPageTurnMode }]) => {\n          if (computedPageTurnMode === \"scrollable\") {\n            if (viewportFit === \"desktop\") {\n              return \"800px\"\n            }\n\n            if (viewportFit === \"tablet\") {\n              return \"600px\"\n            }\n\n            if (viewportFit === \"custom\") {\n              return `${customWidth ?? 100}%`\n            }\n          }\n\n          return \"100%\"\n        }),\n        distinctUntilChanged(),\n        tap((maxWidth) => {\n          document.documentElement.style.setProperty(\n            maxWidthCssVariable,\n            maxWidth,\n          )\n          reader.layout()\n        }),\n      )\n      .subscribe()\n\n    const destroy = () => {\n      viewportFitSubscription.unsubscribe()\n      document.head.removeChild(style)\n      reader.destroy()\n    }\n\n    return {\n      ...reader,\n      __PROSE_READER_ENHANCER_REFIT: true,\n      destroy,\n      refit: {\n        update: settings.update.bind(settings),\n        settings$: settings,\n      },\n    }\n  }\n"],"names":[],"mappings":";;;AA2BA,MAAM,iBAAiB,cAAA,CAAqC;AAAA,EAC1D,OAAO,QAAA,EAAgC;AACrC,IAAA,KAAA,CAAM,aAAa,QAAQ,CAAA;AAAA;AAE/B;AAEO,MAAM,aAAA,GACX,CACE,IAAA,KAEF,CACE,OAAA,KAGqC;AACrC,EAAA,MAAM,EAAE,KAAA,GAAQ,EAAC,EAAG,GAAG,MAAK,GAAI,OAAA;AAChC,EAAA,MAAM,MAAA,GAAS,KAAK,IAAsB,CAAA;AAC1C,EAAA,MAAM,QAAA,GAAW,IAAI,QAAA,CAAS,KAAK,CAAA;AACnC,EAAA,MAAM,YAAA,GAAe,CAAA,mBAAA,EAAsB,MAAA,CAAO,EAAE,CAAA,CAAA;AACpD,EAAA,MAAM,mBAAA,GAAsB,KAAK,YAAY,CAAA,UAAA,CAAA;AAE7C,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AAC5C,EAAA,KAAA,CAAM,EAAA,GAAK,YAAA;AACX,EAAA,KAAA,CAAM,WAAA,GAAc;AAAA,OAAA,EACf,6BAA6B,MAAM,iCAAiC,CAAA;AAAA;AAAA;AAAA;AAAA,uBAAA,EAIpD,mBAAmB,CAAA;AAAA;AAAA,IAAA,CAAA;AAIxC,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;AAE/B,EAAA,MAAM,0BAA0B,aAAA,CAAc;AAAA,IAC5C,QAAA,CAAS,KAAA,CAAM,CAAC,aAAA,EAAe,aAAa,CAAC,CAAA;AAAA,IAC7C,MAAA,CAAO,QAAA,CAAS,KAAA,CAAM,CAAC,sBAAsB,CAAC;AAAA,GAC/C,CAAA,CACE,IAAA;AAAA,IACC,GAAA,CAAI,CAAC,CAAC,EAAE,WAAA,EAAa,aAAY,EAAG,EAAE,oBAAA,EAAsB,CAAA,KAAM;AAChE,MAAA,IAAI,yBAAyB,YAAA,EAAc;AACzC,QAAA,IAAI,gBAAgB,SAAA,EAAW;AAC7B,UAAA,OAAO,OAAA;AAAA;AAGT,QAAA,IAAI,gBAAgB,QAAA,EAAU;AAC5B,UAAA,OAAO,OAAA;AAAA;AAGT,QAAA,IAAI,gBAAgB,QAAA,EAAU;AAC5B,UAAA,OAAO,CAAA,EAAG,eAAe,GAAG,CAAA,CAAA,CAAA;AAAA;AAC9B;AAGF,MAAA,OAAO,MAAA;AAAA,KACR,CAAA;AAAA,IACD,oBAAA,EAAqB;AAAA,IACrB,GAAA,CAAI,CAAC,QAAA,KAAa;AAChB,MAAA,QAAA,CAAS,gBAAgB,KAAA,CAAM,WAAA;AAAA,QAC7B,mBAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,MAAA,CAAO,MAAA,EAAO;AAAA,KACf;AAAA,IAEF,SAAA,EAAU;AAEb,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,uBAAA,CAAwB,WAAA,EAAY;AACpC,IAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;AAC/B,IAAA,MAAA,CAAO,OAAA,EAAQ;AAAA,GACjB;AAEA,EAAA,OAAO;AAAA,IACL,GAAG,MAAA;AAAA,IACH,6BAAA,EAA+B,IAAA;AAAA,IAC/B,OAAA;AAAA,IACA,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,QAAQ,CAAA;AAAA,MACrC,SAAA,EAAW;AAAA;AACb,GACF;AACF;;;;"}

package/dist/index.umd.cjs

@@ -0,0 +1,77 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@prose-reader/core'), require('rxjs')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@prose-reader/core', 'rxjs'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["prose-reader-enhancer-refit"] = {}, global.core, global.rxjs));
+})(this, (function (exports, core, rxjs) { 'use strict';
+
+  class Settings extends core.ReactiveEntity {
+    update(settings) {
+      super.mergeCompare(settings);
+    }
+  }
+  const refitEnhancer = (next) => (options) => {
+    const { refit = {}, ...rest } = options;
+    const reader = next(rest);
+    const settings = new Settings(refit);
+    const stylesheetId = `prose-reader-refit-${reader.id}`;
+    const maxWidthCssVariable = `--${stylesheetId}-max-width`;
+    const style = document.createElement("style");
+    style.id = stylesheetId;
+    style.textContent = `
+      [${core.HTML_ATTRIBUTE_DATA_READER_ID}] .${core.HTML_ATTRIBUTE_VIEWPORT_CLASSNAME} {
+        border: 1px solid red;
+        margin: auto;
+        width: 100%;
+        max-width: var(${maxWidthCssVariable});
+      }
+    `;
+    document.head.appendChild(style);
+    const viewportFitSubscription = rxjs.combineLatest([
+      settings.watch(["viewportFit", "customWidth"]),
+      reader.settings.watch(["computedPageTurnMode"])
+    ]).pipe(
+      rxjs.map(([{ viewportFit, customWidth }, { computedPageTurnMode }]) => {
+        if (computedPageTurnMode === "scrollable") {
+          if (viewportFit === "desktop") {
+            return "800px";
+          }
+          if (viewportFit === "tablet") {
+            return "600px";
+          }
+          if (viewportFit === "custom") {
+            return `${customWidth ?? 100}%`;
+          }
+        }
+        return "100%";
+      }),
+      rxjs.distinctUntilChanged(),
+      rxjs.tap((maxWidth) => {
+        document.documentElement.style.setProperty(
+          maxWidthCssVariable,
+          maxWidth
+        );
+        reader.layout();
+      })
+    ).subscribe();
+    const destroy = () => {
+      viewportFitSubscription.unsubscribe();
+      document.head.removeChild(style);
+      reader.destroy();
+    };
+    return {
+      ...reader,
+      __PROSE_READER_ENHANCER_REFIT: true,
+      destroy,
+      refit: {
+        update: settings.update.bind(settings),
+        settings$: settings
+      }
+    };
+  };
+
+  exports.refitEnhancer = refitEnhancer;
+
+  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+}));
+//# sourceMappingURL=index.umd.cjs.map

package/dist/index.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.cjs","sources":["../src/index.ts"],"sourcesContent":["import {\n  HTML_ATTRIBUTE_DATA_READER_ID,\n  HTML_ATTRIBUTE_VIEWPORT_CLASSNAME,\n  ReactiveEntity,\n  type Reader,\n} from \"@prose-reader/core\"\nimport {\n  combineLatest,\n  distinctUntilChanged,\n  map,\n  type Observable,\n  tap,\n} from \"rxjs\"\n\nexport type RefitEnhancerAPI = {\n  readonly __PROSE_READER_ENHANCER_REFIT: boolean\n  refit: {\n    update: (settings: Partial<RefitEnhancerOptions>) => void\n    settings$: Observable<RefitEnhancerOptions>\n  }\n}\n\nexport type RefitEnhancerOptions = {\n  viewportFit?: \"desktop\" | \"tablet\" | \"fit\" | \"custom\"\n  customWidth?: number\n}\n\nclass Settings extends ReactiveEntity<RefitEnhancerOptions> {\n  update(settings: RefitEnhancerOptions) {\n    super.mergeCompare(settings)\n  }\n}\n\nexport const refitEnhancer =\n  <InheritOptions, InheritOutput extends Reader>(\n    next: (options: InheritOptions) => InheritOutput,\n  ) =>\n  (\n    options: InheritOptions & {\n      refit?: Partial<RefitEnhancerOptions>\n    },\n  ): InheritOutput & RefitEnhancerAPI => {\n    const { refit = {}, ...rest } = options\n    const reader = next(rest as InheritOptions)\n    const settings = new Settings(refit)\n    const stylesheetId = `prose-reader-refit-${reader.id}`\n    const maxWidthCssVariable = `--${stylesheetId}-max-width`\n\n    const style = document.createElement(\"style\")\n    style.id = stylesheetId\n    style.textContent = `\n      [${HTML_ATTRIBUTE_DATA_READER_ID}] .${HTML_ATTRIBUTE_VIEWPORT_CLASSNAME} {\n        border: 1px solid red;\n        margin: auto;\n        width: 100%;\n        max-width: var(${maxWidthCssVariable});\n      }\n    `\n\n    document.head.appendChild(style)\n\n    const viewportFitSubscription = combineLatest([\n      settings.watch([\"viewportFit\", \"customWidth\"]),\n      reader.settings.watch([\"computedPageTurnMode\"]),\n    ])\n      .pipe(\n        map(([{ viewportFit, customWidth }, { computedPageTurnMode }]) => {\n          if (computedPageTurnMode === \"scrollable\") {\n            if (viewportFit === \"desktop\") {\n              return \"800px\"\n            }\n\n            if (viewportFit === \"tablet\") {\n              return \"600px\"\n            }\n\n            if (viewportFit === \"custom\") {\n              return `${customWidth ?? 100}%`\n            }\n          }\n\n          return \"100%\"\n        }),\n        distinctUntilChanged(),\n        tap((maxWidth) => {\n          document.documentElement.style.setProperty(\n            maxWidthCssVariable,\n            maxWidth,\n          )\n          reader.layout()\n        }),\n      )\n      .subscribe()\n\n    const destroy = () => {\n      viewportFitSubscription.unsubscribe()\n      document.head.removeChild(style)\n      reader.destroy()\n    }\n\n    return {\n      ...reader,\n      __PROSE_READER_ENHANCER_REFIT: true,\n      destroy,\n      refit: {\n        update: settings.update.bind(settings),\n        settings$: settings,\n      },\n    }\n  }\n"],"names":["ReactiveEntity","HTML_ATTRIBUTE_DATA_READER_ID","HTML_ATTRIBUTE_VIEWPORT_CLASSNAME","combineLatest","map","distinctUntilChanged","tap"],"mappings":";;;;;;EA2BA,MAAM,iBAAiBA,mBAAA,CAAqC;EAAA,EAC1D,OAAO,QAAA,EAAgC;EACrC,IAAA,KAAA,CAAM,aAAa,QAAQ,CAAA;EAAA;EAE/B;AAEO,QAAM,aAAA,GACX,CACE,IAAA,KAEF,CACE,OAAA,KAGqC;EACrC,EAAA,MAAM,EAAE,KAAA,GAAQ,EAAC,EAAG,GAAG,MAAK,GAAI,OAAA;EAChC,EAAA,MAAM,MAAA,GAAS,KAAK,IAAsB,CAAA;EAC1C,EAAA,MAAM,QAAA,GAAW,IAAI,QAAA,CAAS,KAAK,CAAA;EACnC,EAAA,MAAM,YAAA,GAAe,CAAA,mBAAA,EAAsB,MAAA,CAAO,EAAE,CAAA,CAAA;EACpD,EAAA,MAAM,mBAAA,GAAsB,KAAK,YAAY,CAAA,UAAA,CAAA;EAE7C,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;EAC5C,EAAA,KAAA,CAAM,EAAA,GAAK,YAAA;EACX,EAAA,KAAA,CAAM,WAAA,GAAc;AAAA,OAAA,EACfC,kCAA6B,MAAMC,sCAAiC,CAAA;AAAA;AAAA;AAAA;AAAA,uBAAA,EAIpD,mBAAmB,CAAA;AAAA;AAAA,IAAA,CAAA;EAIxC,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;EAE/B,EAAA,MAAM,0BAA0BC,kBAAA,CAAc;EAAA,IAC5C,QAAA,CAAS,KAAA,CAAM,CAAC,aAAA,EAAe,aAAa,CAAC,CAAA;EAAA,IAC7C,MAAA,CAAO,QAAA,CAAS,KAAA,CAAM,CAAC,sBAAsB,CAAC;EAAA,GAC/C,CAAA,CACE,IAAA;EAAA,IACCC,QAAA,CAAI,CAAC,CAAC,EAAE,WAAA,EAAa,aAAY,EAAG,EAAE,oBAAA,EAAsB,CAAA,KAAM;EAChE,MAAA,IAAI,yBAAyB,YAAA,EAAc;EACzC,QAAA,IAAI,gBAAgB,SAAA,EAAW;EAC7B,UAAA,OAAO,OAAA;EAAA;EAGT,QAAA,IAAI,gBAAgB,QAAA,EAAU;EAC5B,UAAA,OAAO,OAAA;EAAA;EAGT,QAAA,IAAI,gBAAgB,QAAA,EAAU;EAC5B,UAAA,OAAO,CAAA,EAAG,eAAe,GAAG,CAAA,CAAA,CAAA;EAAA;EAC9B;EAGF,MAAA,OAAO,MAAA;EAAA,KACR,CAAA;EAAA,IACDC,yBAAA,EAAqB;EAAA,IACrBC,QAAA,CAAI,CAAC,QAAA,KAAa;EAChB,MAAA,QAAA,CAAS,gBAAgB,KAAA,CAAM,WAAA;EAAA,QAC7B,mBAAA;EAAA,QACA;EAAA,OACF;EACA,MAAA,MAAA,CAAO,MAAA,EAAO;EAAA,KACf;EAAA,IAEF,SAAA,EAAU;EAEb,EAAA,MAAM,UAAU,MAAM;EACpB,IAAA,uBAAA,CAAwB,WAAA,EAAY;EACpC,IAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;EAC/B,IAAA,MAAA,CAAO,OAAA,EAAQ;EAAA,GACjB;EAEA,EAAA,OAAO;EAAA,IACL,GAAG,MAAA;EAAA,IACH,6BAAA,EAA+B,IAAA;EAAA,IAC/B,OAAA;EAAA,IACA,KAAA,EAAO;EAAA,MACL,MAAA,EAAQ,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,QAAQ,CAAA;EAAA,MACrC,SAAA,EAAW;EAAA;EACb,GACF;EACF;;;;;;;;;;"}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@prose-reader/enhancer-refit",
+  "version": "1.241.0",
+  "type": "module",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "scripts": {
+    "start": "vite build --watch --mode development",
+    "build": "tsc && vite build"
+  },
+  "peerDependencies": {
+    "@prose-reader/core": "^1.117.0"
+  }
+}