@readium/navigator 2.2.0 → 2.2.1

package/src/webpub/WebPubNavigator.ts

@@ -1,9 +1,22 @@
 import { Link, Locator, Publication, ReadingProgression, LocatorLocations } from "@readium/shared";
 import { VisualNavigator, VisualNavigatorViewport, ProgressionRange } from "../Navigator";
+import { Configurable } from "../preferences/Configurable";
 import { WebPubFramePoolManager } from "./WebPubFramePoolManager";
 import { BasicTextSelection, CommsEventKey, FrameClickEvent, ModuleLibrary, ModuleName, WebPubModules } from "@readium/navigator-html-injectables";
 import * as path from "path-browserify";
 import { ManagerEventKey } from "../epub/EpubNavigator";
+import { WebPubCSS } from "./css/WebPubCSS";
+import { WebUserProperties } from "./css/Properties";
+import { IWebPubPreferences, WebPubPreferences } from "./preferences/WebPubPreferences";
+import { IWebPubDefaults, WebPubDefaults } from "./preferences/WebPubDefaults";
+import { WebPubSettings } from "./preferences/WebPubSettings";
+import { IPreferencesEditor } from "../preferences/PreferencesEditor";
+import { WebPubPreferencesEditor } from "./preferences/WebPubPreferencesEditor";
+
+export interface WebPubNavigatorConfiguration {
+    preferences: IWebPubPreferences;
+    defaults: IWebPubDefaults;
+}
 
 export interface WebPubNavigatorListeners {
     frameLoaded: (wnd: Window) => void;
@@ -27,27 +40,43 @@ const defaultListeners = (listeners: WebPubNavigatorListeners): WebPubNavigatorL
     customEvent: listeners.customEvent || (() => {}),
     handleLocator: listeners.handleLocator || (() => false),
     textSelected: listeners.textSelected || (() => {})
-});
+})
 
-class WebPubNavigator extends VisualNavigator {
+export class WebPubNavigator extends VisualNavigator implements Configurable<WebPubSettings, WebPubPreferences> {
     private readonly pub: Publication;
     private readonly container: HTMLElement;
     private readonly listeners: WebPubNavigatorListeners;
-    private framePool: WebPubFramePoolManager;
+    private framePool!: WebPubFramePoolManager;
     private currentIndex: number = 0;
     private currentLocation: Locator;
+
+    private _preferences: WebPubPreferences;
+    private _defaults: WebPubDefaults;
+    private _settings: WebPubSettings;
+    private _css: WebPubCSS;
+    private _preferencesEditor: WebPubPreferencesEditor | null = null;
+    
     private webViewport: VisualNavigatorViewport = {
         readingOrder: [],
         progressions: new Map(),
         positions: null
     };
 
-    constructor(container: HTMLElement, pub: Publication, listeners: WebPubNavigatorListeners, initialPosition: Locator | undefined = undefined) {
+    constructor(container: HTMLElement, pub: Publication, listeners: WebPubNavigatorListeners, initialPosition: Locator | undefined = undefined, configuration: WebPubNavigatorConfiguration = { preferences: {}, defaults: {} }) {
         super();
         this.pub = pub;
         this.container = container;
         this.listeners = defaultListeners(listeners);
-        this.framePool = new WebPubFramePoolManager(this.container);
+
+        // Initialize preference system
+        this._preferences = new WebPubPreferences(configuration.preferences);
+        this._defaults = new WebPubDefaults(configuration.defaults);
+        this._settings = new WebPubSettings(this._preferences, this._defaults);
+        this._css = new WebPubCSS({
+            userProperties: new WebUserProperties({ zoom: this._settings.zoom })
+        });
+
+        // Initialize current location
         if (initialPosition && typeof initialPosition.copyWithLocations === 'function') {
             this.currentLocation = initialPosition;
             // Update currentIndex to match the initial position
@@ -60,13 +89,61 @@ class WebPubNavigator extends VisualNavigator {
         }
     }
 
-    async load(): Promise<void> {
-        await this.framePool.update(this.pub, this.currentLocation, this.determineModules());
+    public async load() {
+        await this.updateCSS(false);
+        const cssProperties = this.compileCSSProperties(this._css);
+        this.framePool = new WebPubFramePoolManager(this.container, cssProperties);
 
-        this.attachListener();
+        await this.apply();
+    }
 
-        // Notify listeners of initial position
-        this.listeners.positionChanged(this.currentLocation);
+    // Configurable interface implementation
+    public get settings(): Readonly<WebPubSettings> {
+        return Object.freeze({ ...this._settings });
+    }
+
+    public get preferencesEditor(): IPreferencesEditor {
+        if (this._preferencesEditor === null) {
+            this._preferencesEditor = new WebPubPreferencesEditor(this._preferences, this.settings, this.pub.metadata);
+        }
+        return this._preferencesEditor;
+    }
+
+    public async submitPreferences(preferences: WebPubPreferences) {
+        this._preferences = this._preferences.merging(preferences) as WebPubPreferences;
+        await this.applyPreferences();
+    }
+
+    private async applyPreferences() {
+        this._settings = new WebPubSettings(this._preferences, this._defaults);
+
+        if (this._preferencesEditor !== null) {
+            this._preferencesEditor = new WebPubPreferencesEditor(this._preferences, this.settings, this.pub.metadata);
+        }
+
+        // Apply preferences using CSS system like EPUB
+        await this.updateCSS(true);
+    }
+
+    private async updateCSS(commit: boolean) {
+        this._css.update(this._settings);
+
+        if (commit) await this.commitCSS(this._css);
+    };
+
+    private compileCSSProperties(css: WebPubCSS) {
+        const properties: { [key: string]: string } = {};
+
+        for (const [key, value] of Object.entries(css.userProperties.toCSSProperties())) {
+            properties[key] = value;
+        }
+
+        return properties;
+    }
+
+    private async commitCSS(css: WebPubCSS) {
+        const properties = this.compileCSSProperties(css);
+        this.framePool.setCSSProperties(properties);
     }
 
     public eventListener(key: CommsEventKey | ManagerEventKey, data: unknown) {

package/src/webpub/css/Properties.ts

@@ -0,0 +1,71 @@
+import { TextAlignment } from "../../preferences/Types";
+import { BodyHyphens, Ligatures, Properties } from "../../css/Properties";
+
+export interface IWebUserProperties {
+  a11yNormalize?: boolean | null;
+  bodyHyphens?: BodyHyphens | null;
+  fontFamily?: string | null;
+  fontWeight?: number | null;
+  letterSpacing?: number | null;
+  ligatures?: Ligatures | null;
+  lineHeight?: number | null;
+  noRuby?: boolean | null;
+  paraIndent?: number | null;
+  paraSpacing?: number | null;
+  textAlign?: TextAlignment | null;
+  wordSpacing?: number | null;
+  zoom: number | null;
+}
+
+export class WebUserProperties extends Properties {
+  a11yNormalize: boolean | null;
+  bodyHyphens: BodyHyphens | null;
+  fontFamily: string | null;
+  fontWeight: number | null;
+  letterSpacing: number | null;
+  ligatures: Ligatures | null;
+  lineHeight: number | null;
+  noRuby: boolean | null;
+  paraIndent: number | null;
+  paraSpacing: number | null;
+  textAlign: TextAlignment | null;
+  wordSpacing: number | null;
+  zoom: number | null;
+
+  constructor(props: IWebUserProperties) {
+    super();
+    this.a11yNormalize = props.a11yNormalize ?? null;
+    this.bodyHyphens = props.bodyHyphens ?? null;
+    this.fontFamily = props.fontFamily ?? null;
+    this.fontWeight = props.fontWeight ?? null;
+    this.letterSpacing = props.letterSpacing ?? null;
+    this.ligatures = props.ligatures ?? null;
+    this.lineHeight = props.lineHeight ?? null;
+    this.noRuby = props.noRuby ?? null;
+    this.paraIndent = props.paraIndent ?? null;
+    this.paraSpacing = props.paraSpacing ?? null;
+    this.textAlign = props.textAlign ?? null;
+    this.wordSpacing = props.wordSpacing ?? null;
+    this.zoom = props.zoom ?? null;
+  }
+
+  toCSSProperties() {
+    const cssProperties: { [key: string]: string } = {};
+
+    if (this.a11yNormalize) cssProperties["--USER__a11yNormalize"] = this.toFlag("a11y");
+    if (this.bodyHyphens) cssProperties["--USER__bodyHyphens"] = this.bodyHyphens;
+    if (this.fontFamily) cssProperties["--USER__fontFamily"] = this.fontFamily;
+    if (this.fontWeight != null) cssProperties["--USER__fontWeight"] = this.toUnitless(this.fontWeight);
+    if (this.letterSpacing != null) cssProperties["--USER__letterSpacing"] = this.toRem(this.letterSpacing);
+    if (this.ligatures) cssProperties["--USER__ligatures"] = this.ligatures;
+    if (this.lineHeight != null) cssProperties["--USER__lineHeight"] = this.toUnitless(this.lineHeight);
+    if (this.noRuby) cssProperties["--USER__noRuby"] = this.toFlag("noRuby");
+    if (this.paraIndent != null) cssProperties["--USER__paraIndent"] = this.toRem(this.paraIndent);
+    if (this.paraSpacing != null) cssProperties["--USER__paraSpacing"] = this.toRem(this.paraSpacing);
+    if (this.textAlign) cssProperties["--USER__textAlign"] = this.textAlign;
+    if (this.wordSpacing != null) cssProperties["--USER__wordSpacing"] = this.toRem(this.wordSpacing);
+    if (this.zoom !== null) cssProperties["--USER__zoom"] = this.toPercentage(this.zoom, true);
+
+    return cssProperties;
+  }
+}

package/src/webpub/css/WebPubCSS.ts

@@ -0,0 +1,42 @@
+import { WebPubSettings } from "../preferences/WebPubSettings";
+import { IWebUserProperties, WebUserProperties } from "./Properties";
+
+export interface IWebPubCSS {
+  userProperties: WebUserProperties;
+}
+
+export class WebPubCSS {
+  userProperties: WebUserProperties;
+
+  constructor(props: IWebPubCSS) {
+    this.userProperties = props.userProperties;
+  }
+
+  update(settings: WebPubSettings) {
+    const updated: IWebUserProperties = {
+      a11yNormalize: settings.textNormalization,
+      bodyHyphens: typeof settings.hyphens !== "boolean" 
+        ? null 
+        : settings.hyphens 
+          ? "auto" 
+          : "none",
+      fontFamily: settings.fontFamily,
+      fontWeight: settings.fontWeight,
+      letterSpacing: settings.letterSpacing,
+      ligatures: typeof settings.ligatures !== "boolean" 
+        ? null 
+        : settings.ligatures 
+          ? "common-ligatures" 
+          : "none",
+      lineHeight: settings.lineHeight,
+      noRuby: settings.noRuby,
+      paraIndent: settings.paragraphIndent,
+      paraSpacing: settings.paragraphSpacing,
+      textAlign: settings.textAlign,
+      wordSpacing: settings.wordSpacing,
+      zoom: settings.zoom
+    };
+
+    this.userProperties = new WebUserProperties(updated);
+  }
+}

package/src/webpub/css/WebPubStylesheet.ts

@@ -0,0 +1,204 @@
+// WebPubCSS is equivalent to ReadiumCSS for WebPub
+
+export const webPubStylesheet = `
+/* FontFamily */
+
+:root[style*="--USER__fontFamily"] {
+  font-family: var(--USER__fontFamily) !important;
+}
+
+:root[style*="--USER__fontFamily"] * {
+  font-family: revert !important;
+}
+
+/* FontWeight */
+
+:root[style*="--USER__fontWeight"] body {
+  font-weight: var(--USER__fontWeight) !important;
+}
+
+/* Attempt to handle known bolds */
+:root[style*="--USER__fontWeight"] b,
+:root[style*="--USER__fontWeight"] strong {
+  font-weight: bolder;
+}
+
+/* Hyphens */
+
+:root[style*="--USER__bodyHyphens"] {
+  -webkit-hyphens: var(--USER__bodyHyphens) !important;
+  -moz-hyphens: var(--USER__bodyHyphens) !important;
+  -ms-hyphens: var(--USER__bodyHyphens) !important;
+  -epub-hyphens: var(--USER__bodyHyphens) !important;
+  hyphens: var(--USER__bodyHyphens) !important;
+}
+
+:root[style*="--USER__bodyHyphens"] body,
+:root[style*="--USER__bodyHyphens"] p,
+:root[style*="--USER__bodyHyphens"] li,
+:root[style*="--USER__bodyHyphens"] div,
+:root[style*="--USER__bodyHyphens"] dd {
+  -webkit-hyphens: inherit;
+  -moz-hyphens: inherit;
+  -ms-hyphens: inherit;
+  -epub-hyphens: inherit;
+  hyphens: inherit;
+}
+
+/* LetterSpacing */
+
+:root[style*="--USER__letterSpacing"] h1,
+:root[style*="--USER__letterSpacing"] h2,
+:root[style*="--USER__letterSpacing"] h3,
+:root[style*="--USER__letterSpacing"] h4,
+:root[style*="--USER__letterSpacing"] h5,
+:root[style*="--USER__letterSpacing"] h6,
+:root[style*="--USER__letterSpacing"] p,
+:root[style*="--USER__letterSpacing"] li,
+:root[style*="--USER__letterSpacing"] div,
+:root[style*="--USER__letterSpacing"] dt,
+:root[style*="--USER__letterSpacing"] dd {
+  letter-spacing: var(--USER__letterSpacing);
+  font-variant: none;
+}
+
+/* Ligatures */
+
+:root[style*="--USER__ligatures"] {
+  font-variant-ligatures: var(--USER__ligatures) !important;
+}
+
+:root[style*="--USER__ligatures"] * {
+  font-variant-ligatures: inherit !important;
+}
+
+/* LineHeight */
+
+:root[style*="--USER__lineHeight"] {
+  line-height: var(--USER__lineHeight) !important;
+}
+
+:root[style*="--USER__lineHeight"] body,
+:root[style*="--USER__lineHeight"] p,
+:root[style*="--USER__lineHeight"] li,
+:root[style*="--USER__lineHeight"] div {
+  line-height: inherit;
+}
+
+/* ParagraphIndent */
+
+:root[style*="--USER__paraIndent"] p {
+  text-indent: var(--USER__paraIndent) !important;
+}
+
+:root[style*="--USER__paraIndent"] p *,
+:root[style*="--USER__paraIndent"] p:first-letter {
+  text-indent: 0 !important;
+}
+
+/* ParagraphSpacing */
+
+:root[style*="--USER__paraSpacing"] p {
+  margin-block: var(--USER__paraSpacing) !important;
+}
+
+/* Ruby */
+
+:root[style*="readium-noRuby-on"] body rt,
+:root[style*="readium-noRuby-on"] body rp {
+  display: none;
+}
+
+/* TextAlign */
+
+:root[style*="--USER__textAlign"] {
+  text-align: var(--USER__textAlign);
+}
+
+:root[style*="--USER__textAlign"] body,
+:root[style*="--USER__textAlign"] p:not(blockquote p):not(figcaption p):not(hgroup p),
+:root[style*="--USER__textAlign"] li,
+:root[style*="--USER__textAlign"] dd {
+  text-align: var(--USER__textAlign) !important;
+  -moz-text-align-last: auto !important;
+  -epub-text-align-last: auto !important;
+  text-align-last: auto !important;
+}
+
+/* TextNormalize */
+
+:root[style*="readium-a11y-on"] {
+  font-weight: normal !important;
+  font-style: normal !important;
+}
+
+:root[style*="readium-a11y-on"] *:not(code):not(var):not(kbd):not(samp) {
+  font-family: inherit !important;
+  font-weight: inherit !important;
+  font-style: inherit !important;
+}
+
+:root[style*="readium-a11y-on"] * {
+  text-decoration: none !important;
+  font-variant-caps: normal !important;
+  font-variant-position: normal !important;
+  font-variant-numeric: normal !important;
+}
+
+:root[style*="readium-a11y-on"] sup,
+:root[style*="readium-a11y-on"] sub {
+  font-size: 1rem !important;
+  vertical-align: baseline !important;
+}
+
+/* Word Spacing */
+
+:root[style*="--USER__wordSpacing"] h1,
+:root[style*="--USER__wordSpacing"] h2,
+:root[style*="--USER__wordSpacing"] h3,
+:root[style*="--USER__wordSpacing"] h4,
+:root[style*="--USER__wordSpacing"] h5,
+:root[style*="--USER__wordSpacing"] h6,
+:root[style*="--USER__wordSpacing"] p,
+:root[style*="--USER__wordSpacing"] li,
+:root[style*="--USER__wordSpacing"] div,
+:root[style*="--USER__wordSpacing"] dt,
+:root[style*="--USER__wordSpacing"] dd {
+  word-spacing: var(--USER__wordSpacing);
+}
+
+/* Zoom */
+
+:root {
+  --USER__zoom: 1;
+}
+
+:root[style*="--USER__zoom"] body {
+  zoom: var(--USER__zoom) !important;
+}
+
+@supports selector(figure:has(> img)) {
+  :root[style*="--USER__zoom"] figure:has(> img),
+  :root[style*="--USER__zoom"] figure:has(> video),
+  :root[style*="--USER__zoom"] figure:has(> svg),
+  :root[style*="--USER__zoom"] figure:has(> canvas),
+  :root[style*="--USER__zoom"] figure:has(> iframe),
+  :root[style*="--USER__zoom"] figure:has(> audio),
+  :root[style*="--USER__zoom"] div:has(> img),
+  :root[style*="--USER__zoom"] div:has(> video),
+  :root[style*="--USER__zoom"] div:has(> svg),
+  :root[style*="--USER__zoom"] div:has(> canvas),
+  :root[style*="--USER__zoom"] div:has(> iframe),
+  :root[style*="--USER__zoom"] div:has(> audio),
+  :root[style*="--USER__zoom"] table {
+    zoom: calc(100% / var(--USER__zoom)) !important;
+  }
+
+  :root[style*="--USER__zoom"] figcaption,
+  :root[style*="--USER__zoom"] caption,
+  :root[style*="--USER__zoom"] td,
+  :root[style*="--USER__zoom"] th {
+    zoom: var(--USER__zoom) !important;
+  }
+}
+`;

package/src/webpub/css/index.ts

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

package/src/webpub/index.ts

@@ -1,4 +1,6 @@
 export * from "./WebPubNavigator";
 export * from "./WebPubBlobBuilder";
 export * from "./WebPubFrameManager";
-export * from "./WebPubFramePoolManager";
+export * from "./WebPubFramePoolManager";
+export * from "./preferences";
+export * from "./css";

package/src/webpub/preferences/WebPubDefaults.ts

@@ -0,0 +1,61 @@
+import { 
+  fontWeightRangeConfig, 
+  TextAlignment, 
+  zoomRangeConfig 
+} from "../../preferences/Types";
+
+import {
+  ensureBoolean,
+  ensureEnumValue,
+  ensureNonNegative,
+  ensureValueInRange,
+  ensureString
+} from "../../preferences/guards";
+
+export interface IWebPubDefaults {
+  fontFamily?: string | null,
+  fontWeight?: number | null,
+  hyphens?: boolean | null,
+  letterSpacing?: number | null,
+  ligatures?: boolean | null,
+  lineHeight?: number | null,
+  noRuby?: boolean | null,
+  paragraphIndent?: number | null,
+  paragraphSpacing?: number | null,
+  textAlign?: TextAlignment | null,
+  textNormalization?: boolean | null,
+  wordSpacing?: number | null,
+  zoom?: number | null
+}
+
+export class WebPubDefaults {
+  fontFamily: string | null;
+  fontWeight: number | null;
+  hyphens: boolean | null;
+  letterSpacing: number | null;
+  ligatures: boolean | null;
+  lineHeight: number | null;
+  noRuby: boolean | null;
+  paragraphIndent: number | null;
+  paragraphSpacing: number | null;
+  textAlign: TextAlignment | null;
+  textNormalization: boolean | null;
+  wordSpacing: number | null;
+  zoom: number;
+
+  constructor(defaults: IWebPubDefaults) {
+    this.fontFamily = ensureString(defaults.fontFamily) || null;
+    this.fontWeight = ensureValueInRange(defaults.fontWeight, fontWeightRangeConfig.range) || null;
+    this.hyphens = ensureBoolean(defaults.hyphens) ?? null;
+    this.letterSpacing = ensureNonNegative(defaults.letterSpacing) || null;
+    this.ligatures = ensureBoolean(defaults.ligatures) ?? null;
+    this.lineHeight = ensureNonNegative(defaults.lineHeight) || null;
+    this.noRuby = ensureBoolean(defaults.noRuby) ?? false;
+    this.paragraphIndent = ensureNonNegative(defaults.paragraphIndent) ?? null;
+    this.paragraphSpacing = ensureNonNegative(defaults.paragraphSpacing) ?? null;
+    this.textAlign = ensureEnumValue<TextAlignment>(defaults.textAlign, TextAlignment) || null;
+    this.textNormalization = ensureBoolean(defaults.textNormalization) ?? false;
+    this.wordSpacing = ensureNonNegative(defaults.wordSpacing) || null;
+    this.zoom = ensureValueInRange(defaults.zoom, zoomRangeConfig.range) || 1;
+  }
+}

package/src/webpub/preferences/WebPubPreferences.ts

@@ -0,0 +1,88 @@
+import { ConfigurablePreferences } from "../../preferences/Configurable";
+
+import { 
+  fontWeightRangeConfig, 
+  TextAlignment, 
+  zoomRangeConfig 
+} from "../../preferences/Types";
+
+import {
+  ensureBoolean,
+  ensureEnumValue,
+  ensureNonNegative,
+  ensureString,
+  ensureValueInRange
+} from "../../preferences/guards";
+
+export interface IWebPubPreferences {
+  fontFamily?: string | null,
+  fontWeight?: number | null,
+  hyphens?: boolean | null,
+  letterSpacing?: number | null,
+  ligatures?: boolean | null,
+  lineHeight?: number | null,
+  noRuby?: boolean | null,
+  paragraphIndent?: number | null,
+  paragraphSpacing?: number | null,
+  textAlign?: TextAlignment | null,
+  textNormalization?: boolean | null,
+  wordSpacing?: number | null,
+  zoom?: number | null
+}
+
+export class WebPubPreferences implements ConfigurablePreferences {
+  fontFamily?: string | null;
+  fontWeight?: number | null;
+  hyphens?: boolean | null;
+  letterSpacing?: number | null;
+  ligatures?: boolean | null;
+  lineHeight?: number | null;
+  noRuby?: boolean | null;
+  paragraphIndent?: number | null;
+  paragraphSpacing?: number | null;
+  textAlign?: TextAlignment | null;
+  textNormalization?: boolean | null;
+  wordSpacing?: number | null;
+  zoom?: number | null;
+
+  constructor(preferences: IWebPubPreferences = {}) {
+    this.fontFamily = ensureString(preferences.fontFamily);
+    this.fontWeight = ensureValueInRange(preferences.fontWeight, fontWeightRangeConfig.range);
+    this.hyphens = ensureBoolean(preferences.hyphens);
+    this.letterSpacing = ensureNonNegative(preferences.letterSpacing);
+    this.ligatures = ensureBoolean(preferences.ligatures);
+    this.lineHeight = ensureNonNegative(preferences.lineHeight);
+    this.noRuby = ensureBoolean(preferences.noRuby);
+    this.paragraphIndent = ensureNonNegative(preferences.paragraphIndent);
+    this.paragraphSpacing = ensureNonNegative(preferences.paragraphSpacing);
+    this.textAlign = ensureEnumValue<TextAlignment>(preferences.textAlign, TextAlignment);
+    this.textNormalization = ensureBoolean(preferences.textNormalization);
+    this.wordSpacing = ensureNonNegative(preferences.wordSpacing);
+    this.zoom = ensureValueInRange(preferences.zoom, zoomRangeConfig.range);
+  }
+
+  static serialize(preferences: WebPubPreferences): string {
+    const { ...properties } = preferences;
+    return JSON.stringify(properties);
+  }
+
+  static deserialize(preferences: string): WebPubPreferences | null {
+    try {
+      const parsedPreferences = JSON.parse(preferences);
+      return new WebPubPreferences(parsedPreferences);
+    } catch (error) {
+      console.error("Failed to deserialize preferences:", error);
+      return null;
+    }
+  }
+
+  merging(other: ConfigurablePreferences): ConfigurablePreferences {
+    const merged: IWebPubPreferences = { ...this };
+    for (const key of Object.keys(other) as (keyof IWebPubPreferences)[]) {
+      if (other[key] !== undefined) {
+        merged[key] = other[key];
+      }
+    }
+    return new WebPubPreferences(merged);
+  }
+}