@readium/navigator 2.2.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",

package/src/css/Properties.ts

@@ -0,0 +1,47 @@
+export type BodyHyphens = "auto" | "none";
+export type BoxSizing = "content-box" | "border-box";
+export type FontOpticalSizing = "auto" | "none";
+export type FontWidth = "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" | "normal" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded" | number;
+export type Ligatures = "common-ligatures" | "none";
+export type TypeScale = 1 | 1.067 | 1.125 | 1.2 | 1.25 | 1.333 | 1.414 | 1.5 | 1.618;
+export type View = "paged" | "scroll";
+
+export abstract class Properties {
+  constructor() {}
+
+  protected toFlag(name: string) {
+    return `readium-${ name }-on`;
+  }
+
+  protected toUnitless(value: number) {
+    return value.toString();
+  }
+
+  protected toPercentage(value: number, ratio: boolean = false) {
+    if (ratio || value > 0 && value <= 1) {
+      return `${ Math.round(value * 100) }%`;
+    } else {
+      return `${ value }%`;
+    }
+  }
+
+  protected toVw(value: number) {
+    const percentage = Math.round(value * 100);
+    return `${ Math.min(percentage, 100) }vw`;
+  }
+
+  protected toVh(value: number) {
+    const percentage = Math.round(value * 100);
+    return `${ Math.min(percentage, 100) }vh`;
+  }
+
+  protected toPx(value: number) {
+    return `${ value }px`;
+  }
+
+  protected toRem(value: number) {
+    return `${ value }rem`;
+  }
+
+  abstract toCSSProperties(): { [key: string]: string };
+}

package/src/css/index.ts

@@ -0,0 +1 @@
+export * from "./Properties";

package/src/epub/css/Properties.ts

@@ -1,52 +1,14 @@
 import { TextAlignment } from "../../preferences/Types";
-
-export type BodyHyphens = "auto" | "none";
-export type BoxSizing = "content-box" | "border-box";
-export type FontOpticalSizing = "auto" | "none";
-export type FontWidth = "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" | "normal" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded" | number;
-export type Ligatures = "common-ligatures" | "none";
-export type TypeScale = 1 | 1.067 | 1.125 | 1.2 | 1.25 | 1.333 | 1.414 | 1.5 | 1.618;
-export type View = "paged" | "scroll";
-
-abstract class Properties {
-  constructor() {}
-
-  protected toFlag(name: string) {
-    return `readium-${ name }-on`;
-  }
-
-  protected toUnitless(value: number) {
-    return value.toString();
-  }
-
-  protected toPercentage(value: number, ratio: boolean = false) {
-    if (ratio || value > 0 && value <= 1) {
-      return `${ Math.round(value * 100) }%`;
-    } else {
-      return `${ value }%`;
-    }
-  }
-
-  protected toVw(value: number) {
-    const percentage = Math.round(value * 100);
-    return `${ Math.min(percentage, 100) }vw`;
-  }
-
-  protected toVh(value: number) {
-    const percentage = Math.round(value * 100);
-    return `${ Math.min(percentage, 100) }vh`;
-  }
-
-  protected toPx(value: number) {
-    return `${ value }px`;
-  }
-
-  protected toRem(value: number) {
-    return `${ value }rem`;
-  }
-
-  abstract toCSSProperties(): { [key: string]: string };
-}
+import { 
+  BodyHyphens, 
+  BoxSizing, 
+  FontOpticalSizing, 
+  FontWidth, 
+  Ligatures, 
+  Properties, 
+  TypeScale, 
+  View 
+} from "../../css/Properties";
 
 export interface IUserProperties {
   advancedSettings?: boolean | null;

package/src/epub/preferences/EpubDefaults.ts

@@ -15,7 +15,7 @@ import {
   ensureString, 
   ensureValueInRange, 
   withFallback
-} from "./guards";
+} from "../../preferences/guards";
 
 import { sMLWithRequest } from "../../helpers";
 

package/src/epub/preferences/EpubPreferences.ts

@@ -14,7 +14,7 @@ import {
   ensureNonNegative, 
   ensureString, 
   ensureValueInRange 
-} from "./guards";
+} from "../../preferences/guards";
 
 export interface IEpubPreferences {
   backgroundColor?: string | null,

package/src/epub/preferences/EpubPreferencesEditor.ts

@@ -5,9 +5,16 @@ import { EpubSettings } from "./EpubSettings";
 import { BooleanPreference, EnumPreference, Preference, RangePreference } from "../../preferences/Preference";
 import { 
   TextAlignment, 
+  filterRangeConfig, 
   fontSizeRangeConfig, 
   fontWeightRangeConfig, 
-  fontWidthRangeConfig 
+  fontWidthRangeConfig, 
+  letterSpacingRangeConfig,
+  lineHeightRangeConfig,
+  lineLengthRangeConfig,
+  paragraphIndentRangeConfig,
+  paragraphSpacingRangeConfig,
+  wordSpacingRangeConfig
 } from "../../preferences/Types";
 
 import defaultColors from "@readium/css/css/vars/colors.json";
@@ -85,8 +92,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | boolean | null | undefined) => {
         this.updatePreference("darkenFilter", newValue || null);
       },
-      supportedRange: [0, 100],
-      step: 1
+      supportedRange: filterRangeConfig.range,
+      step: filterRangeConfig.step
     });
   }
 
@@ -192,8 +199,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | boolean | null | undefined) => {
         this.updatePreference("invertFilter", newValue || null);
       },
-      supportedRange: [0, 100],
-      step: 1
+      supportedRange: filterRangeConfig.range,
+      step: filterRangeConfig.step
     });
   }
 
@@ -205,8 +212,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | boolean | null | undefined) => {
         this.updatePreference("invertGaijiFilter", newValue || null);
       },
-      supportedRange: [0, 100],
-      step: 1
+      supportedRange: filterRangeConfig.range,
+      step: filterRangeConfig.step
     });
   }
 
@@ -240,8 +247,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("letterSpacing", newValue || null);
       },
-      supportedRange: [0, 1],
-      step: .125
+      supportedRange: letterSpacingRangeConfig.range,
+      step: letterSpacingRangeConfig.step
     });
   }
 
@@ -266,8 +273,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("lineHeight", newValue || null);
       },
-      supportedRange: [1, 2],
-      step: .1
+      supportedRange: lineHeightRangeConfig.range,
+      step: lineHeightRangeConfig.step
     });
   }
 
@@ -290,8 +297,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("maximalLineLength", newValue);
       },
-      supportedRange: [20, 100],
-      step: 1
+      supportedRange: lineLengthRangeConfig.range,
+      step: lineLengthRangeConfig.step
     });
   }
 
@@ -303,8 +310,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("minimalLineLength", newValue);
       },
-      supportedRange: [20, 100],
-      step: 1
+      supportedRange: lineLengthRangeConfig.range,
+      step: lineLengthRangeConfig.step
     });
   }
 
@@ -327,8 +334,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("optimalLineLength", newValue as number);
       },
-      supportedRange: [20, 100],
-      step: 1
+      supportedRange: lineLengthRangeConfig.range,
+      step: lineLengthRangeConfig.step
     });
   }
 
@@ -351,8 +358,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("paragraphIndent", newValue || null);
       },
-      supportedRange: [0, 3],
-      step: .25
+      supportedRange: paragraphIndentRangeConfig.range,
+      step: paragraphIndentRangeConfig.step
     });
   }
 
@@ -364,8 +371,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("paragraphSpacing", newValue || null);
       },
-      supportedRange: [0, 3],
-      step: .25
+      supportedRange: paragraphSpacingRangeConfig.range,
+      step: paragraphSpacingRangeConfig.step
     });
   }
 
@@ -501,8 +508,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("wordSpacing", newValue || null);
       },
-      supportedRange: [0, 2],
-      step: 0.125
+      supportedRange: wordSpacingRangeConfig.range,
+      step: wordSpacingRangeConfig.step
     });
   }
 }

package/src/index.ts

@@ -3,4 +3,5 @@ export * from './webpub';
 export * from './epub';
 export * from './audio';
 export * from './helpers';
-export * from './preferences';
+export * from './preferences';
+export * from './css';

package/src/preferences/Types.ts

@@ -10,6 +10,11 @@ export type RangeConfig = {
   step: number
 }
 
+export const filterRangeConfig: RangeConfig = {
+  range: [0, 100],
+  step: 1
+}
+
 export const fontSizeRangeConfig: RangeConfig = {
   range: [0.7, 4],
   step: 0.05
@@ -23,4 +28,39 @@ export const fontWeightRangeConfig: RangeConfig = {
 export const fontWidthRangeConfig: RangeConfig = {
   range: [50, 250],
   step: 10
+}
+
+export const letterSpacingRangeConfig: RangeConfig = {
+  range: [0, 1],
+  step: .125
+}
+
+export const lineHeightRangeConfig: RangeConfig = {
+  range: [1, 2],
+  step: .1
+}
+
+export const lineLengthRangeConfig: RangeConfig = {
+  range: [20, 100],
+  step: 1
+}
+
+export const paragraphIndentRangeConfig: RangeConfig = {
+  range: [0, 3],
+  step: .25
+}
+
+export const paragraphSpacingRangeConfig: RangeConfig = {
+  range: [0, 3],
+  step: .25
+}
+
+export const wordSpacingRangeConfig: RangeConfig = {
+  range: [0, 2],
+  step: .125
+}
+
+export const zoomRangeConfig: RangeConfig = {
+  range: [0.7, 4],
+  step: 0.05
 }

package/src/{epub/preferences → preferences}/guards.ts

@@ -29,14 +29,13 @@ export function ensureString(value: string | null | undefined): string | null |
 }
 
 export function ensureBoolean(value: boolean | null | undefined): boolean | null | undefined {
-  return typeof value === "boolean" 
-    ? value 
-    : value === undefined || value === null 
-      ? value 
+  return typeof value === "boolean"
+    ? value
+    : value === undefined || value === null
+      ? value
       : undefined;
 }
 
-
 export function ensureEnumValue<T extends string>(value: T | null | undefined, enumType: Record<T, string>): T | null | undefined {
   if (value === undefined) {
     return undefined;
@@ -83,4 +82,4 @@ export function ensureValueInRange(value: number | null | undefined, range: [num
 
 export function withFallback<T>(value: T | null | undefined, defaultValue: T | null): T | null {
   return value === undefined ? defaultValue : value;
-}
+}

package/src/preferences/index.ts

@@ -1,4 +1,5 @@
 export * from "./Configurable";
 export * from "./Preference";
 export * from "./PreferencesEditor";
-export * from "./Types";
+export * from "./Types";
+export * from "./guards";

package/src/webpub/WebPubBlobBuilder.ts

@@ -1,4 +1,5 @@
 import { Link, Publication } from "@readium/shared";
+import { webPubStylesheet } from "./css/WebPubStylesheet";
 
 // Utilities (matching FrameBlobBuilder pattern)
 const blobify = (source: string, type: string) => URL.createObjectURL(new Blob([source], { type }));
@@ -9,6 +10,12 @@ const scriptify = (doc: Document, source: string) => {
     s.src = source.startsWith("blob:") ? source : blobify(source, "text/javascript");
     return s;
 }
+const styleify = (doc: Document, source: string) => {
+    const s = doc.createElement("style");
+    s.dataset.readium = "true";
+    s.textContent = source;
+    return s;
+}
 
 type CacheFunction = () => string;
 const resourceBlobCache = new Map<string, string>();
@@ -46,11 +53,13 @@ export class WebPubBlobBuilder {
     private readonly item: Link;
     private readonly burl: string;
     private readonly pub: Publication;
+    private readonly cssProperties?: { [key: string]: string };
 
-    constructor(pub: Publication, baseURL: string, item: Link) {
+    constructor(pub: Publication, baseURL: string, item: Link, cssProperties?: { [key: string]: string }) {
         this.pub = pub;
         this.item = item;
         this.burl = item.toURL(baseURL) || "";
+        this.cssProperties = cssProperties;
     }
 
     public async build(): Promise<string> {
@@ -74,7 +83,7 @@ export class WebPubBlobBuilder {
             const details = perror.querySelector("div");
             throw new Error(`Failed parsing item ${this.item.href}: ${details?.textContent || perror.textContent}`);
         }
-        return this.finalizeDOM(doc, this.burl, this.item.mediaType, txt);
+        return this.finalizeDOM(doc, this.burl, this.item.mediaType, txt, this.cssProperties);
     }
 
     private hasExecutable(doc: Document): boolean {
@@ -84,9 +93,23 @@ export class WebPubBlobBuilder {
         );
     }
 
-    private finalizeDOM(doc: Document, base: string | undefined, mediaType: any, txt?: string): string {
+    private setProperties(cssProperties: { [key: string]: string }, doc: Document) {
+        for (const key in cssProperties) {
+            const value = cssProperties[key];
+            if (value) doc.documentElement.style.setProperty(key, value);
+        }
+    }
+
+    private finalizeDOM(doc: Document, base: string | undefined, mediaType: any, txt?: string, cssProperties?: { [key: string]: string }): string {
         if(!doc) return "";
 
+        // Add WebPubCSS stylesheet at end of head (like EPUB ReadiumCSS-after)
+        const webPubStyle = styleify(doc, webPubStylesheet);
+        doc.head.appendChild(webPubStyle);
+        if (cssProperties) {
+            this.setProperties(cssProperties, doc);
+        }
+
         doc.body.querySelectorAll("img").forEach((img) => {
             img.setAttribute("fetchpriority", "high");
         });
@@ -98,7 +121,6 @@ export class WebPubBlobBuilder {
             doc.head.firstChild!.before(b);
         }
 
-
         const hasExecutable = this.hasExecutable(doc);
         if(hasExecutable) doc.head.firstChild!.before(rBefore(doc));
         doc.head.firstChild!.before(cssSelectorGenerator(doc));

package/src/webpub/WebPubFrameManager.ts

@@ -8,6 +8,7 @@ export class WebPubFrameManager {
     private loader: Loader | undefined;
     public readonly source: string;
     private comms: FrameComms | undefined;
+    private hidden: boolean = true;
     private destroyed: boolean = false;
 
     private currModules: ModuleName[] = [];
@@ -69,6 +70,7 @@ export class WebPubFrameManager {
         this.frame.style.setProperty("aria-hidden", "true");
         this.frame.style.opacity = "0";
         this.frame.style.pointerEvents = "none";
+        this.hidden = true;
 
         if(this.frame.parentElement) {
             if(this.comms === undefined || !this.comms.ready) return;
@@ -97,6 +99,7 @@ export class WebPubFrameManager {
                         this.frame.style.removeProperty("aria-hidden");
                         this.frame.style.removeProperty("opacity");
                         this.frame.style.removeProperty("pointer-events");
+                        this.hidden = false;
 
                         if (sML.UA.WebKit) {
                             this.comms?.send("force_webkit_recalc", undefined);
@@ -115,6 +118,19 @@ export class WebPubFrameManager {
         });
     }
 
+    setCSSProperties(properties: { [key: string]: string }) {
+        if(this.destroyed || !this.frame.contentWindow) return;
+
+        // We need to resume and halt postMessage to update the properties
+        // if the frame is hidden since it's been halted in hide()
+        if (this.hidden) {
+            if (this.comms) this.comms?.resume();
+            else this.comms = new FrameComms(this.frame.contentWindow!, this.source);
+        }
+        this.comms?.send("update_properties", properties);
+        if (this.hidden) this.comms?.halt();
+    }
+
     get iframe() {
         if(this.destroyed) throw Error("Trying to use frame when it doesn't exist");
         return this.frame;

package/src/webpub/WebPubFramePoolManager.ts

@@ -6,13 +6,16 @@ import { WebPubFrameManager } from "./WebPubFrameManager";
 export class WebPubFramePoolManager {
     private readonly container: HTMLElement;
     private _currentFrame: WebPubFrameManager | undefined;
+    private currentCssProperties: { [key: string]: string } | undefined;
     private readonly pool: Map<string, WebPubFrameManager> = new Map();
     private readonly blobs: Map<string, string> = new Map();
     private readonly inprogress: Map<string, Promise<void>> = new Map();
+    private pendingUpdates: Map<string, { inPool: boolean }> = new Map();
     private currentBaseURL: string | undefined;
 
-    constructor(container: HTMLElement) {
+    constructor(container: HTMLElement, cssProperties?: { [key: string]: string }) {
         this.container = container;
+        this.currentCssProperties = cssProperties;
     }
 
     async destroy() {
@@ -90,11 +93,22 @@ export class WebPubFramePoolManager {
             this.currentBaseURL = pub.baseURL;
 
             const creator = async (href: string) => {
+                // Check if blob needs to be recreated due to CSS property changes
+                if(this.pendingUpdates.has(href) && this.pendingUpdates.get(href)?.inPool === false) {
+                    const url = this.blobs.get(href);
+                    if(url) {
+                        URL.revokeObjectURL(url);
+                        this.blobs.delete(href);
+                        this.pendingUpdates.delete(href);
+                    }
+                }
+
                 if(this.pool.has(href)) {
                     const fm = this.pool.get(href)!;
                     if(!this.blobs.has(href)) {
                         await fm.destroy();
                         this.pool.delete(href);
+                        this.pendingUpdates.delete(href);
                     } else {
                         await fm.load(modules);
                         return;
@@ -103,7 +117,7 @@ export class WebPubFramePoolManager {
                 const itm = pub.readingOrder.findWithHref(href);
                 if(!itm) return;
                 if(!this.blobs.has(href)) {
-                    const blobBuilder = new WebPubBlobBuilder(pub, this.currentBaseURL || "", itm);
+                    const blobBuilder = new WebPubBlobBuilder(pub, this.currentBaseURL || "", itm, this.currentCssProperties);
                     const blobURL = await blobBuilder.build();
                     this.blobs.set(href, blobURL);
                 }
@@ -139,6 +153,39 @@ export class WebPubFramePoolManager {
         this.inprogress.delete(newHref);
     }
 
+    setCSSProperties(properties: { [key: string]: string }) {
+        const deepCompare = (obj1: { [key: string]: string }, obj2: { [key: string]: string }) => {
+            const keys1 = Object.keys(obj1);
+            const keys2 = Object.keys(obj2);
+
+            if (keys1.length !== keys2.length) {
+              return false;
+            }
+
+            for (const key of keys1) {
+              if (obj1[key] !== obj2[key]) {
+                return false;
+              }
+            }
+
+            return true;
+        };
+
+        // If CSSProperties have changed, we update the currentCssProperties,
+        // and set the CSS Properties to all frames already in the pool
+        // We also need to invalidate the blobs and recreate them with the new properties.
+        // We do that in update, by updating them when needed (they are added into the pool)
+        // so that we do not invalidate and recreate blobs over and over again.
+        if(!deepCompare(this.currentCssProperties || {}, properties)) {
+            this.currentCssProperties = properties;
+            this.pool.forEach((frame) => {
+                frame.setCSSProperties(properties);
+            });
+            for (const href of this.blobs.keys()) {
+                this.pendingUpdates.set(href, { inPool: this.pool.has(href) });
+            }
+        }
+    }
     get currentFrames(): (WebPubFrameManager | undefined)[] {
         return [this._currentFrame];
     }