@readium/navigator 1.3.3 → 2.0.0-beta.1

package/src/preferences/Preference.ts

@@ -0,0 +1,272 @@
+export interface IPreference<T> {
+  /**
+   * The current value of the preference.
+   */
+  value: T | null | undefined;
+
+  /**
+   * The value that will be effectively used by the Configurable object if preferences are submitted as they are.
+   */
+  effectiveValue: T | null | undefined;
+
+  /**
+   * Indicates if this preference will be effectively used by the Configurable object if preferences are submitted as they are.
+   */
+  isEffective: boolean;
+
+  /**
+   * Unset the preference.
+   * Equivalent to set(null).
+   */
+  clear(): void;
+}
+
+export interface IBooleanPreference extends IPreference<boolean> {
+  /**
+   * Toggle the preference to its opposite value.
+   */
+  toggle(): void;
+}
+
+export interface IEnumPreference<T> extends IPreference<T> {
+  /**
+   * The possible values for this preference.
+   */
+  supportedValues: T[];
+}
+
+export interface IRangePreference<T> extends IPreference<T> {
+  /**
+   * The supported range [min, max] for this preference.
+   */
+  supportedRange: [T, T];
+
+  /**
+   * The step value for the incrementing/decrementing into the range.
+   */
+  step: number;
+
+  /**
+   * Increase the preference value.
+   */
+  increment(): void;
+
+  /**
+   * Decrease the preference value.
+   */
+  decrement(): void;
+
+  /**
+   * Format the preference value as a string.
+   */
+  format(value: T): string;
+}
+
+export class Preference<T> implements Preference<T> {
+  protected _value?: T | null;
+  protected readonly _effectiveValue?: T | null;
+  protected readonly _isEffective: boolean;
+
+  protected _onChange: (newValue: T | null | undefined) => void;
+
+  constructor({
+    initialValue = null, 
+    effectiveValue, 
+    isEffective,
+    onChange
+  } : { 
+    initialValue?: T | null, 
+    effectiveValue?: T | null, 
+    isEffective: boolean,
+    onChange: (newValue: T | null | undefined) => void
+  }) {
+    this._value = initialValue;
+    this._effectiveValue = effectiveValue;
+    this._isEffective = isEffective;
+    this._onChange = onChange;
+  }
+
+  set value(value: T | null | undefined) {
+    this._value = value;
+    this._onChange(this._value);
+  }
+
+  get value(): T | null | undefined {
+    return this._value;
+  }
+
+  get effectiveValue(): T | null | undefined {
+    return this._effectiveValue;
+  }
+
+  get isEffective(): boolean {
+    return this._isEffective;
+  }
+
+  clear(): void {
+    this._value = null;
+  }
+}
+
+export class BooleanPreference extends Preference<boolean> implements IBooleanPreference {
+  set value(value: boolean | null | undefined) {
+    this._value = value;
+    this._onChange(this._value);
+  }
+
+  get value(): boolean | null | undefined {
+    return this._value;
+  }
+
+  get effectiveValue(): boolean | null | undefined {
+    return this._effectiveValue;
+  }
+
+  get isEffective(): boolean {
+    return this._isEffective;
+  }
+
+  clear(): void {
+    this._value = null;
+  }
+
+  toggle(): void {
+    this._value = !this._value;
+    this._onChange(this._value);
+  }
+}
+
+export class EnumPreference<T extends string | number | symbol> extends Preference<T> implements IEnumPreference<T> {
+  private readonly _supportedValues: T[];
+
+  constructor({
+      initialValue = null, 
+      effectiveValue, 
+      isEffective,
+      onChange, 
+      supportedValues
+    } : { 
+      initialValue?: T | null, 
+      effectiveValue?: T | null, 
+      isEffective: boolean,
+      onChange: (newValue: T | null | undefined) => void,
+      supportedValues: T[]
+    }) {
+    super({ initialValue, effectiveValue, isEffective, onChange });
+    this._supportedValues = supportedValues;
+  }
+
+  set value(value: T | null | undefined) {
+    if (value && !this._supportedValues.includes(value)) {
+      throw new Error(`Value '${ String(value) }' is not in the supported values for this preference.`);
+    }
+    this._value = value;
+    this._onChange(this._value);
+  }
+
+  get value(): T | null | undefined {
+    return this._value;
+  }
+
+  get effectiveValue(): T | null | undefined {
+    return this._effectiveValue;
+  }
+
+  get isEffective(): boolean {
+    return this._isEffective;
+  }
+
+  get supportedValues(): T[] {
+    return this._supportedValues;
+  }
+
+  clear(): void {
+    this._value = null;
+  }
+}
+
+export class RangePreference<T extends number> extends Preference<T> implements IRangePreference<T> {
+  private readonly _supportedRange: [T, T];
+  private readonly _step: number;
+  private readonly _decimals: number;
+
+  constructor({
+      initialValue = null, 
+      effectiveValue, 
+      isEffective,
+      onChange, 
+      supportedRange,
+      step
+    } : { 
+      initialValue?: T | null, 
+      effectiveValue?: T | null, 
+      isEffective: boolean,
+      onChange: (newValue: T | null | undefined) => void,
+      supportedRange: [T, T],
+      step: number
+    }
+  ) {
+    super({ initialValue, effectiveValue, isEffective, onChange });
+    this._supportedRange = supportedRange;
+    this._step = step;
+    this._decimals = this._step.toString().includes('.') 
+      ? this._step.toString().split('.')[1].length 
+      : 0;
+  }
+
+  set value(value: T | null | undefined) {
+    if (value && (value < this._supportedRange[0] || value > this._supportedRange[1])) {
+      throw new Error(`Value '${ String(value) }' is out of the supported range for this preference.`);
+    }
+    this._value = value;
+    this._onChange(this._value);
+  }
+
+  get value(): T | null | undefined {
+    return this._value;
+  }
+
+  get effectiveValue(): T | null | undefined {
+    return this._effectiveValue;
+  }
+
+  get isEffective(): boolean {
+    return this._isEffective;
+  }
+
+  get supportedRange(): [T, T] {
+    return this._supportedRange;
+  }
+
+  get step(): number {
+    return this._step;
+  }
+
+  increment(): void {
+    if (this._value && this._value < this._supportedRange[1]) {
+      this._value = Math.min(
+        Math.round((this._value + this._step) * 10 ** this._decimals) / 10 ** this._decimals,
+        this._supportedRange[1]
+      ) as T;
+      this._onChange(this._value);
+    }
+  }
+
+  decrement(): void {
+    if (this._value && this._value > this._supportedRange[0]) {
+      this._value = Math.max(
+        Math.round((this._value - this._step) * 10 ** this._decimals) / 10 ** this._decimals,
+        this._supportedRange[0]
+      ) as T;
+      this._onChange(this._value);
+    }
+  }
+
+  format(value: T): string {
+    return value.toString();
+  }
+
+  clear(): void {
+    this._value = null;
+  }
+}

package/src/preferences/PreferencesEditor.ts

@@ -0,0 +1,6 @@
+import { ConfigurablePreferences } from "./Configurable";
+
+export interface IPreferencesEditor {
+  preferences: ConfigurablePreferences;
+  clear(): void;
+}

package/src/preferences/Types.ts

@@ -0,0 +1,39 @@
+export enum TextAlignment {
+  start = "start",
+  left = "left",
+  right = "right",
+  justify = "justify"
+};
+
+export enum Theme {
+  day = "day",
+  sepia = "sepia",
+  night = "night",
+  custom = "custom"
+}
+
+export enum LayoutStrategy {
+  margin = "margin",
+  lineLength = "lineLength",
+  columns = "columns"
+}
+
+export type RangeConfig = {
+  range: [number, number],
+  step: number
+}
+
+export const fontSizeRangeConfig: RangeConfig = {
+  range: [0.7, 4],
+  step: 0.05
+}
+
+export const fontWeightRangeConfig: RangeConfig = {
+  range: [100, 1000],
+  step: 100
+}
+
+export const fontWidthRangeConfig: RangeConfig = {
+  range: [50, 250],
+  step: 10
+}

package/src/preferences/index.ts

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

package/types/src/epub/EpubNavigator.d.ts

@@ -1,12 +1,20 @@
 import { EPUBLayout, Link, Locator, Publication, ReadingProgression } from "@readium/shared";
-import { VisualNavigator } from "../";
+import { Configurable, ConfigurablePreferences, ConfigurableSettings, VisualNavigator } from "../";
 import { FramePoolManager } from "./frame/FramePoolManager";
 import { FXLFramePoolManager } from "./fxl/FXLFramePoolManager";
 import { CommsEventKey } from "@readium/navigator-html-injectables";
 import { BasicTextSelection, FrameClickEvent } from "@readium/navigator-html-injectables";
 import { FXLFrameManager } from "./fxl/FXLFrameManager";
 import { FrameManager } from "./frame/FrameManager";
+import { IEpubPreferences, EpubPreferences } from "./preferences/EpubPreferences";
+import { IEpubDefaults } from "./preferences/EpubDefaults";
+import { EpubSettings } from "./preferences";
+import { EpubPreferencesEditor } from "./preferences/EpubPreferencesEditor";
 export type ManagerEventKey = "zoom";
+export interface EpubNavigatorConfiguration {
+    preferences: IEpubPreferences;
+    defaults: IEpubDefaults;
+}
 export interface EpubNavigatorListeners {
     frameLoaded: (wnd: Window) => void;
     positionChanged: (locator: Locator) => void;
@@ -18,7 +26,7 @@ export interface EpubNavigatorListeners {
     handleLocator: (locator: Locator) => boolean;
     textSelected: (selection: BasicTextSelection) => void;
 }
-export declare class EpubNavigator extends VisualNavigator {
+export declare class EpubNavigator extends VisualNavigator implements Configurable<ConfigurableSettings, ConfigurablePreferences> {
     private readonly pub;
     private readonly container;
     private readonly listeners;
@@ -28,9 +36,25 @@ export declare class EpubNavigator extends VisualNavigator {
     private lastLocationInView;
     private currentProgression;
     readonly layout: EPUBLayout;
-    constructor(container: HTMLElement, pub: Publication, listeners: EpubNavigatorListeners, positions?: Locator[], initialPosition?: Locator | undefined);
+    private _preferences;
+    private _defaults;
+    private _settings;
+    private _css;
+    private _preferencesEditor;
+    private resizeObserver;
+    constructor(container: HTMLElement, pub: Publication, listeners: EpubNavigatorListeners, positions?: Locator[], initialPosition?: Locator | undefined, configuration?: EpubNavigatorConfiguration);
     static determineLayout(pub: Publication): EPUBLayout;
     load(): Promise<void>;
+    get settings(): Readonly<EpubSettings>;
+    get preferencesEditor(): EpubPreferencesEditor;
+    submitPreferences(preferences: EpubPreferences): Promise<void>;
+    private applyPreferences;
+    private handleFXLPrefs;
+    private updateCSS;
+    private compileCSSProperties;
+    private commitCSS;
+    resizeHandler(): Promise<void>;
+    get ownerWindow(): Window & typeof globalThis;
     /**
      * Exposed to the public to compensate for lack of implemented readium conveniences
      * TODO remove when settings management is incorporated

package/types/src/epub/css/Properties.d.ts

@@ -0,0 +1,177 @@
+import { TextAlignment, Theme } 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";
+declare abstract class Properties {
+    constructor();
+    protected toFlag(name: string): string;
+    protected toUnitless(value: number): string;
+    protected toPercentage(value: number, ratio?: boolean): string;
+    protected toVw(value: number): string;
+    protected toVh(value: number): string;
+    protected toPx(value: number): string;
+    protected toRem(value: number): string;
+    abstract toCSSProperties(): {
+        [key: string]: string;
+    };
+}
+export interface IUserProperties {
+    advancedSettings?: boolean | null;
+    a11yNormalize?: boolean | null;
+    appearance?: Theme | null;
+    backgroundColor?: string | null;
+    blendFilter?: boolean | null;
+    bodyHyphens?: BodyHyphens | null;
+    colCount?: number | null;
+    darkenFilter?: boolean | number | null;
+    deprecatedFontSize?: boolean | null;
+    fontFamily?: string | null;
+    fontOpticalSizing?: FontOpticalSizing | null;
+    fontOverride?: boolean | null;
+    fontSize?: number | null;
+    fontSizeNormalize?: boolean | null;
+    fontWeight?: number | null;
+    fontWidth?: FontWidth | null;
+    invertFilter?: boolean | number | null;
+    invertGaijiFilter?: boolean | number | null;
+    iPadOSPatch?: boolean | null;
+    letterSpacing?: number | null;
+    ligatures?: Ligatures | null;
+    lineHeight?: number | null;
+    lineLength?: number | null;
+    linkColor?: string | null;
+    noRuby?: boolean | null;
+    paraIndent?: number | null;
+    paraSpacing?: number | null;
+    selectionBackgroundColor?: string | null;
+    selectionTextColor?: string | null;
+    textAlign?: TextAlignment | null;
+    textColor?: string | null;
+    view?: View | null;
+    visitedColor?: string | null;
+    wordSpacing?: number | null;
+}
+export declare class UserProperties extends Properties {
+    a11yNormalize: boolean | null;
+    appearance: Theme | null;
+    backgroundColor: string | null;
+    blendFilter: boolean | null;
+    bodyHyphens: BodyHyphens | null;
+    colCount: number | null | undefined;
+    darkenFilter: boolean | number | null;
+    deprecatedFontSize: boolean | null;
+    fontFamily: string | null;
+    fontOpticalSizing: FontOpticalSizing | null;
+    fontOverride: boolean | null;
+    fontSize: number | null;
+    fontSizeNormalize: boolean | null;
+    fontWeight: number | null;
+    fontWidth: FontWidth | null;
+    invertFilter: boolean | number | null;
+    invertGaijiFilter: boolean | number | null;
+    iPadOSPatch: boolean | null;
+    letterSpacing: number | null;
+    ligatures: Ligatures | null;
+    lineHeight: number | null;
+    lineLength: number | null;
+    linkColor: string | null;
+    noRuby: boolean | null;
+    paraIndent: number | null;
+    paraSpacing: number | null;
+    selectionBackgroundColor?: string | null;
+    selectionTextColor?: string | null;
+    textAlign: TextAlignment | null;
+    textColor: string | null;
+    view: View | null;
+    visitedColor: string | null;
+    wordSpacing: number | null;
+    constructor(props: IUserProperties);
+    toCSSProperties(): {
+        [key: string]: string;
+    };
+}
+export interface IRSProperties {
+    backgroundColor?: string | null;
+    baseFontFamily?: string | null;
+    baseFontSize?: number | null;
+    baseLineHeight?: number | null;
+    boxSizingMedia?: BoxSizing | null;
+    boxSizingTable?: BoxSizing | null;
+    colWidth?: string | null;
+    colCount?: number | null;
+    colGap?: number | null;
+    codeFontFamily?: string | null;
+    compFontFamily?: string | null;
+    defaultLineLength?: number | null;
+    flowSpacing?: number | null;
+    humanistTf?: string | null;
+    linkColor?: string | null;
+    maxMediaWidth?: number | null;
+    maxMediaHeight?: number | null;
+    modernTf?: string | null;
+    monospaceTf?: string | null;
+    noVerticalPagination?: boolean | null;
+    oldStyleTf?: string | null;
+    pageGutter?: number | null;
+    paraIndent?: number | null;
+    paraSpacing?: number | null;
+    primaryColor?: string | null;
+    sansSerifJa?: string | null;
+    sansSerifJaV?: string | null;
+    sansTf?: string | null;
+    secondaryColor?: string | null;
+    selectionBackgroundColor?: string | null;
+    selectionTextColor?: string | null;
+    serifJa?: string | null;
+    serifJaV?: string | null;
+    textColor?: string | null;
+    typeScale?: TypeScale | null;
+    visitedColor?: string | null;
+}
+export declare class RSProperties extends Properties {
+    backgroundColor: string | null;
+    baseFontFamily: string | null;
+    baseFontSize: number | null;
+    baseLineHeight: number | null;
+    boxSizingMedia: BoxSizing | null;
+    boxSizingTable: BoxSizing | null;
+    colWidth: string | null;
+    colCount: number | null;
+    colGap: number | null;
+    codeFontFamily: string | null;
+    compFontFamily: string | null;
+    defaultLineLength: number | null;
+    flowSpacing: number | null;
+    humanistTf: string | null;
+    linkColor: string | null;
+    maxMediaWidth: number | null;
+    maxMediaHeight: number | null;
+    modernTf: string | null;
+    monospaceTf: string | null;
+    noVerticalPagination: boolean | null;
+    oldStyleTf: string | null;
+    pageGutter: number | null;
+    paraIndent: number | null;
+    paraSpacing: number | null;
+    primaryColor: string | null;
+    sansSerifJa: string | null;
+    sansSerifJaV: string | null;
+    sansTf: string | null;
+    secondaryColor: string | null;
+    selectionBackgroundColor: string | null;
+    selectionTextColor: string | null;
+    serifJa: string | null;
+    serifJaV: string | null;
+    textColor: string | null;
+    typeScale: TypeScale | null;
+    visitedColor: string | null;
+    constructor(props: IRSProperties);
+    toCSSProperties(): {
+        [key: string]: string;
+    };
+}
+export {};

package/types/src/epub/css/ReadiumCSS.d.ts

@@ -0,0 +1,32 @@
+import { LineLengths } from "../../helpers";
+import { LayoutStrategy } from "../../preferences";
+import { EpubSettings } from "../preferences/EpubSettings";
+import { RSProperties, UserProperties } from "./Properties";
+export interface IReadiumCSS {
+    rsProperties: RSProperties;
+    userProperties: UserProperties;
+    lineLengths: LineLengths;
+    container: HTMLElement;
+    constraint: number;
+    layoutStrategy?: LayoutStrategy | null;
+}
+export declare class ReadiumCSS {
+    rsProperties: RSProperties;
+    userProperties: UserProperties;
+    lineLengths: LineLengths;
+    container: HTMLElement;
+    containerParent: HTMLElement;
+    constraint: number;
+    layoutStrategy: LayoutStrategy;
+    private cachedColCount;
+    private effectiveContainerWidth;
+    constructor(props: IReadiumCSS);
+    update(settings: EpubSettings): void;
+    private updateLineLengths;
+    private updateLayout;
+    private getCompensatedMetrics;
+    private paginate;
+    private computeScrollLength;
+    setContainerWidth(): void;
+    resizeHandler(): void;
+}

package/types/src/epub/css/index.d.ts

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

package/types/src/epub/frame/FrameBlobBuilder.d.ts

@@ -3,11 +3,15 @@ export default class FrameBlobBuider {
     private readonly item;
     private readonly burl;
     private readonly pub;
-    constructor(pub: Publication, baseURL: string, item: Link);
+    private readonly cssProperties?;
+    constructor(pub: Publication, baseURL: string, item: Link, cssProperties?: {
+        [key: string]: string;
+    });
     build(fxl?: boolean): Promise<string>;
     private buildHtmlFrame;
     private buildImageFrame;
     private hasExecutable;
     private hasStyle;
+    private setProperties;
     private finalizeDOM;
 }

package/types/src/epub/frame/FrameManager.d.ts

@@ -5,12 +5,17 @@ export declare class FrameManager {
     private loader;
     readonly source: string;
     private comms;
+    private hidden;
+    private destroyed;
     private currModules;
     constructor(source: string);
     load(modules: ModuleName[]): Promise<Window>;
     destroy(): Promise<void>;
     hide(): Promise<void>;
     show(atProgress?: number): Promise<void>;
+    setCSSProperties(properties: {
+        [key: string]: string;
+    }): void;
     get iframe(): HTMLIFrameElement;
     get realSize(): DOMRect;
     get window(): Window;

package/types/src/epub/frame/FramePoolManager.d.ts

@@ -5,13 +5,20 @@ export declare class FramePoolManager {
     private readonly container;
     private readonly positions;
     private _currentFrame;
+    private currentCssProperties;
     private readonly pool;
     private readonly blobs;
     private readonly inprogress;
+    private pendingUpdates;
     private currentBaseURL;
-    constructor(container: HTMLElement, positions: Locator[]);
+    constructor(container: HTMLElement, positions: Locator[], cssProperties?: {
+        [key: string]: string;
+    });
     destroy(): Promise<void>;
     update(pub: Publication, locator: Locator, modules: ModuleName[], force?: boolean): Promise<void>;
+    setCSSProperties(properties: {
+        [key: string]: string;
+    }): void;
     get currentFrames(): (FrameManager | undefined)[];
     get currentBounds(): DOMRect;
 }

package/types/src/epub/fxl/FXLFramePoolManager.d.ts

@@ -25,7 +25,6 @@ export declare class FXLFramePoolManager {
     private readonly spreadPresentation;
     private orientationInternal;
     private containerHeightCached;
-    private readonly resizeBoundHandler;
     private resizeTimeout;
     readonly peripherals: FXLPeripherals;
     constructor(container: HTMLElement, positions: Locator[], pub: Publication);
@@ -33,7 +32,6 @@ export declare class FXLFramePoolManager {
     set listener(listener: FrameCommsListener);
     get listener(): FrameCommsListener;
     get doNotDisturb(): boolean;
-    private nativeResizeHandler;
     /**
      * When window resizes, resize slider components as well
      */
@@ -60,7 +58,7 @@ export declare class FXLFramePoolManager {
     get slength(): number;
     get shift(): boolean;
     private get nLandscape();
-    setPerPage(perPage: number): void;
+    setPerPage(perPage: number | null): void;
     /**
      * Moves sliders frame to position of currently active slide
      */

package/types/src/epub/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./EpubNavigator";
 export * from "./frame";
 export * from "./fxl";
+export * from "./preferences";
+export * from "./css";