@readium/navigator 2.6.1 → 2.7.1

package/src/epub/EpubNavigator.ts

@@ -1,9 +1,9 @@
-import { Layout, Link, Locator, LocatorText, Profile, Publication, ReadingProgression } from "@readium/shared";
+import { Layout, Link, Locator, LocatorText, Profile, Publication, ReadingProgression, Timeline, TimelineItem, getCssSelector, getHtmlId } from "@readium/shared";
 import { Configurable, ConfigurableSettings, LineLengths, ProgressionRange, VisualNavigator, VisualNavigatorViewport } from "../index.ts";
 import { FramePoolManager } from "./frame/FramePoolManager.ts";
 import { FXLFramePoolManager } from "./fxl/FXLFramePoolManager.ts";
-import { CommsEventKey, ContextMenuEvent, DecorationActivatedEvent, FXLModules, ModuleLibrary, ModuleName, ReflowableModules, BasicTextSelection, FrameClickEvent, SuspiciousActivityEvent, KeyboardPeripheralEvent } from "@readium/navigator-html-injectables";
-import { Decoration, DecorationActivationEvent, DecorationObserver, DecorableNavigator, DecoratorConfig, decorationsEqual, resolveDecorationForWire, BUILTIN_DECORATION_TYPES } from "../decorations/index.ts";
+import { CommsEventKey, ContextMenuEvent, DecorationActivatedEvent, DecorationPointerEnterData, DecorationPointerLeaveData, FXLModules, ModuleLibrary, ModuleName, ReflowableModules, BasicTextSelection, FrameClickEvent, SuspiciousActivityEvent, KeyboardPeripheralEvent } from "@readium/navigator-html-injectables";
+import { Decoration, OnDecorationActivatedEvent, OnDecorationPointerEnterEvent, OnDecorationPointerLeaveEvent, DecorationObserver, DecorableNavigator, DecoratorConfig, decorationsEqual, resolveDecorationForWire, supportsDecorationStyle as canRenderDecorationStyle, DecorationStyleType } from "../decorations/index.ts";
 import * as path from "path-browserify";
 import { FXLFrameManager } from "./fxl/FXLFrameManager.ts";
 import { FrameManager } from "./frame/FrameManager.ts";
@@ -36,6 +36,7 @@ export interface EpubNavigatorConfiguration {
 export interface EpubNavigatorListeners {
     frameLoaded: (wnd: Window) => void;
     positionChanged: (locator: Locator) => void;
+    timelineItemChanged: (item: TimelineItem | undefined) => void;
     tap: (e: FrameClickEvent) => boolean; // Return true to prevent handling here
     click: (e: FrameClickEvent) => boolean;  // Return true to prevent handling here
     zoom: (scale: number) => void;
@@ -53,6 +54,7 @@ export interface EpubNavigatorListeners {
 const defaultListeners = (listeners: EpubNavigatorListeners): EpubNavigatorListeners => ({
     frameLoaded: listeners.frameLoaded || (() => {}),
     positionChanged: listeners.positionChanged || (() => {}),
+    timelineItemChanged: listeners.timelineItemChanged || (() => {}),
     tap: listeners.tap || (() => false),
     click: listeners.click || (() => false),
     zoom: listeners.zoom || (() => {}),
@@ -73,6 +75,8 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     private framePool!: FramePoolManager | FXLFramePoolManager;
     private positions!: Locator[];
     private currentLocation!: Locator;
+    private _currentTimelineItem: TimelineItem | undefined;
+    private _timelineAugmented = false;
     private lastLocationInView: Locator | undefined;
     private currentProgression: ReadingProgression;
     private _layout: Layout;
@@ -99,7 +103,9 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
 
     private _decorations: Map<string, Decoration[]> = new Map();
     private _decorationObservers: Map<string, Set<DecorationObserver>> = new Map();
+    private _decorationHoveredDecorations: Map<string, Decoration> = new Map();
     private _decorationActivationState: Map<string, boolean> = new Map();
+    private _decorationHoverState: Map<string, boolean> = new Map();
     private _decorationActivationConsumed = false;
 
     private reflowViewport: VisualNavigatorViewport = {
@@ -270,7 +276,11 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                 cssProperties,
                 this._injector,
                 this._contentProtection,
-                this._keyboardPeripherals
+                this._keyboardPeripherals,
+                (href) => this.pub.timeline.segmentsForHref(href)
+                    .flatMap(item => item.references)
+                    .map(ref => { const h = ref.indexOf('#'); return h >= 0 ? ref.slice(h + 1) : ''; })
+                    .filter(Boolean)
             );
         }
 
@@ -436,6 +446,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             case "_pong":
                 this.listeners.frameLoaded(this._cframes[0]!.iframe.contentWindow!);
                 this.listeners.positionChanged(this.currentLocation);
+                this._notifyTimelineChange(this.currentLocation);
                 if (sourceFrame) {
                     const frames = this._cframes.filter(f => !!f) as (FrameManager | FXLFrameManager)[];
                     const i = frames.indexOf(sourceFrame);
@@ -456,6 +467,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                     text: loc?.text
                 });
                 this.listeners.positionChanged(this.currentLocation);
+                this._notifyTimelineChange(this.currentLocation);
                 break;
             case "text_selected": {
                 const selection = data as BasicTextSelection;
@@ -476,6 +488,12 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                 if (handled) this._decorationActivationConsumed = true;
                 break;
             }
+            case "decoration_pointer_enter":
+                this._handleDecorationPointerEnter(data as DecorationPointerEnterData);
+                break;
+            case "decoration_pointer_leave":
+                this._handleDecorationPointerLeave(data as DecorationPointerLeaveData);
+                break;
             case "click":
             case "tap":
                 if (this._decorationActivationConsumed) {
@@ -645,9 +663,8 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
 
     // DecorableNavigator
 
-    public supportsDecorationStyle(styleTypeId: string): boolean {
-        return BUILTIN_DECORATION_TYPES.has(styleTypeId) ||
-            !!this._decoratorConfig.decorationTemplates?.[styleTypeId];
+    public supportsDecorationStyle(styleTypeId: DecorationStyleType | string): boolean {
+        return canRenderDecorationStyle(styleTypeId, this._decoratorConfig.decorationTemplates);
     }
 
     public registerDecorationObserver(group: string, observer: DecorationObserver): void {
@@ -655,19 +672,34 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             this._decorationObservers.set(group, new Set());
         this._decorationObservers.get(group)!.add(observer);
 
-        // Store activation state and send to current frames
-        this._decorationActivationState.set(group, true);
-        this._sendDecorationActivationToFrames(group, true);
+        // Enable activation if the observer handles it
+        if (observer.onDecorationActivated) {
+            this._decorationActivationState.set(group, true);
+            this._sendDecorationActivationToFrames(group, true);
+        }
+
+        // Enable hover if the observer declares hover callbacks
+        if (observer.onDecorationPointerEnter || observer.onDecorationPointerLeave) {
+            this._decorationHoverState.set(group, true);
+            this._sendDecorationHoverToFrames(group, true);
+        }
     }
 
     public unregisterDecorationObserver(observer: DecorationObserver): void {
         this._decorationObservers.forEach((set, group) => {
-            if (set.has(observer)) {
-                set.delete(observer);
-                if (set.size === 0) {
-                    this._decorationActivationState.delete(group);
-                    this._sendDecorationActivationToFrames(group, false);
-                }
+            if (!set.has(observer)) return;
+            set.delete(observer);
+
+            const stillActivatable = [...set].some(o => o.onDecorationActivated);
+            if (this._decorationActivationState.has(group) && !stillActivatable) {
+                this._decorationActivationState.delete(group);
+                this._sendDecorationActivationToFrames(group, false);
+            }
+
+            const stillHoverable = [...set].some(o => o.onDecorationPointerEnter || o.onDecorationPointerLeave);
+            if (this._decorationHoverState.has(group) && !stillHoverable) {
+                this._decorationHoverState.delete(group);
+                this._sendDecorationHoverToFrames(group, false);
             }
         });
     }
@@ -679,6 +711,13 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         });
     }
 
+    private _sendDecorationHoverToFrames(group: string, hoverable: boolean): void {
+        const frames = this._cframes.filter(f => !!f) as (FrameManager | FXLFrameManager)[];
+        frames.forEach(f => {
+            if (f.msg) f.msg.send("decoration_hoverable", { group, hoverable });
+        });
+    }
+
     public applyDecorations(decorations: Decoration[], group: string): void {
         const previous = this._decorations.get(group) ?? [];
         const prevById = new Map(previous.map(d => [d.id, d]));
@@ -706,6 +745,10 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         if (activatable !== undefined) {
             this._sendDecorationActivationToFrames(group, activatable);
         }
+        const hoverable = this._decorationHoverState.get(group);
+        if (hoverable !== undefined) {
+            this._sendDecorationHoverToFrames(group, hoverable);
+        }
     }
 
     private _sendDecorationOps(
@@ -751,6 +794,9 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         for (const [group, activatable] of this._decorationActivationState) {
             frame.msg.send("decoration_activatable", { group, activatable });
         }
+        for (const [group, hoverable] of this._decorationHoverState) {
+            frame.msg.send("decoration_hoverable", { group, hoverable });
+        }
     }
 
     private _reapplyDecorationsToCurrentFrames(): void {
@@ -769,13 +815,36 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         const decoration = (this._decorations.get(data.group) ?? []).find(d => d.id === data.decorationId);
         if (!decoration) return false;
 
-        const event: DecorationActivationEvent = { decoration, group: data.group, rect: data.rect, point: data.point };
+        const event: OnDecorationActivatedEvent = { decoration, group: data.group, rect: data.rect, point: data.point };
         let anyHandled = false;
         for (const obs of observers)
-            if (obs.onDecorationActivated(event)) anyHandled = true;
+            if (obs.onDecorationActivated?.(event)) anyHandled = true;
         return anyHandled;
     }
 
+    private _handleDecorationPointerEnter(data: DecorationPointerEnterData): void {
+        const observers = this._decorationObservers.get(data.group);
+        if (!observers || observers.size === 0) return;
+        const decoration = (this._decorations.get(data.group) ?? []).find(d => d.id === data.decorationId);
+        if (!decoration) return;
+        this._decorationHoveredDecorations.set(data.group, decoration);
+        const event: OnDecorationPointerEnterEvent = { decoration, group: data.group, rect: data.rect, point: data.point };
+        for (const obs of observers)
+            obs.onDecorationPointerEnter?.(event);
+    }
+
+    private _handleDecorationPointerLeave(data: DecorationPointerLeaveData): void {
+        const observers = this._decorationObservers.get(data.group);
+        if (!observers || observers.size === 0) return;
+        const decoration = (this._decorations.get(data.group) ?? []).find(d => d.id === data.decorationId)
+            ?? this._decorationHoveredDecorations.get(data.group);
+        this._decorationHoveredDecorations.delete(data.group);
+        if (!decoration) return;
+        const event: OnDecorationPointerLeaveEvent = { decoration, group: data.group, rect: data.rect, point: data.point };
+        for (const obs of observers)
+            obs.onDecorationPointerLeave?.(event);
+    }
+
     // End of Decoration
 
     public async destroy() {
@@ -790,7 +859,9 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         await this.framePool?.destroy();
         this._decorations.clear();
         this._decorationObservers.clear();
+        this._decorationHoveredDecorations.clear();
         this._decorationActivationState.clear();
+        this._decorationHoverState.clear();
     }
 
     private async changeResource(relative: number): Promise<boolean> {
@@ -829,6 +900,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             // positionChanged via _pong; on back-then-forward to an
             // already-loaded frame no _pong fires, so dispatch explicitly here.
             this.listeners.positionChanged(this.currentLocation);
+            this._notifyTimelineChange(this.currentLocation);
             return true;
         }
 
@@ -931,6 +1003,10 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         this.lastLocationInView = nearestPositions.last;
         this.updateViewport(progression);
         this.listeners.positionChanged(this.currentLocation);
+        const locatorForTimeline = progression.fragmentId
+            ? this.currentLocation.copyWithLocations({ fragments: [`#${progression.fragmentId}`] })
+            : this.currentLocation;
+        this._notifyTimelineChange(locatorForTimeline);
         await this.framePool.update(this.pub, this.currentLocation, this.determineModules());
     }
 
@@ -1033,9 +1109,54 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         return this.pub;
     }
 
+    get timeline(): Timeline {
+        const t = this.pub.timeline;
+        if (!this._timelineAugmented && this.positions?.length) {
+            const positions = this.positions;
+            // We have no way to tell which position within an href corresponds to which
+            // toc entry (fragment ids aren't resolvable against the positions list). So
+            // only the first *leaf* entry for a given href without a fragment match gets
+            // the resource's start position; every other leaf entry sharing that href is
+            // left without a position rather than being given one we can't actually derive.
+            // Container items (chapters with their own toc children) are skipped entirely
+            // here — otherwise the chapter itself would claim the one derivable slot before
+            // any of its displayed children get a turn.
+            const assignedHrefs = new Set<string>();
+            t.augment((item, link) => {
+                if (item.children?.length) return {};
+                const hashIndex = link.href.indexOf('#');
+                const bare = hashIndex >= 0 ? link.href.slice(0, hashIndex) : link.href;
+                const fragment = hashIndex >= 0 ? link.href.slice(hashIndex + 1) : undefined;
+                const entries = positions.filter(p => p.href === bare);
+                if (!entries.length) return {};
+                const atFragment = fragment
+                    ? entries.find(p => p.locations.fragments[0] === fragment)
+                    : undefined;
+                let candidate: Locator | undefined;
+                if (atFragment) {
+                    candidate = atFragment;
+                } else if (!assignedHrefs.has(bare)) {
+                    assignedHrefs.add(bare);
+                    candidate = entries.reduce((min, p) =>
+                        (p.locations.position ?? Infinity) < (min.locations.position ?? Infinity) ? p : min
+                    );
+                } else {
+                    candidate = undefined;
+                }
+                if (!candidate) return {};
+                return {
+                    position: candidate.locations.position,
+                    scroll: atFragment?.locations.progression,
+                };
+            });
+            this._timelineAugmented = true;
+        }
+        return t;
+    }
+
     private async loadLocator(locator: Locator, cb: (ok: boolean) => void) {
         let done = false;
-        let cssSelector = (typeof locator.locations.getCssSelector === "function") && locator.locations.getCssSelector();
+        let cssSelector = getCssSelector(locator.locations);
         if(locator.text?.highlight) {
             done = await new Promise<boolean>((res, _) => {
                 // Attempt to go to a highlighted piece of text in the resource
@@ -1067,7 +1188,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         // This sanity check has to be performed because we're still passing non-locator class
         // locator objects to this function. This is not good and should eventually be forbidden
         // or the locator should be deserialized sometime before this function.
-        const hid = (typeof locator.locations.htmlId === "function") && locator.locations.htmlId();
+        const hid = getHtmlId(locator.locations);
         if(hid)
             done = await new Promise<boolean>((res, _) => {
                 // Attempt to go to an HTML ID in the resource
@@ -1113,4 +1234,12 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     public goLink(link: Link, animated: boolean, cb: (ok: boolean) => void): void {
         return this.go(link.locator, animated, cb);
     }
+
+    private _notifyTimelineChange(locator: Locator): void {
+        const item = this.timeline.locate(locator);
+        if (item !== this._currentTimelineItem) {
+            this._currentTimelineItem = item;
+            this.listeners.timelineItemChanged(item);
+        }
+    }
 }

package/src/epub/frame/FrameManager.ts

@@ -1,7 +1,7 @@
 import { Loader, ModuleName } from "@readium/navigator-html-injectables";
 import { FrameComms } from "./FrameComms.ts";
-import type { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
-import { sML } from "@readium/navigator-html-injectables";
+import type { ReadiumWindow } from "@readium/navigator-html-injectables";
+import { sML } from "@readium/helpers";
 import type { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 import { KeyboardConditionBridge } from "../../peripherals/KeyboardConditionBridge.ts";
 
@@ -21,7 +21,8 @@ export class FrameManager {
     constructor(
         source: string,
         contentProtectionConfig: IContentProtectionConfig = {},
-        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = []
+        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = [],
+        private readonly timelineFragmentIds: string[] = []
     ) {
         this.frame = document.createElement("iframe");
         this.frame.sandbox.value = "allow-same-origin allow-scripts";
@@ -141,6 +142,10 @@ export class FrameManager {
                     // Apply content protection synchronously
                     this.applyContentProtection();
 
+                    // Send timeline fragment IDs so the snapper can set up observers
+                    if (this.timelineFragmentIds.length > 0)
+                        this.comms?.send("timeline_entries", this.timelineFragmentIds);
+
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
                         this.frame.style.removeProperty("aria-hidden");

package/src/epub/frame/FramePoolManager.ts

@@ -21,6 +21,7 @@ export class FramePoolManager {
     private readonly injector: Injector | null = null;
     private readonly contentProtectionConfig: IContentProtectionConfig;
     private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
+    private readonly getFragmentIds: (href: string) => string[];
 
     constructor(
         container: HTMLElement,
@@ -28,7 +29,8 @@ export class FramePoolManager {
         cssProperties?: { [key: string]: string },
         injector?: Injector | null,
         contentProtectionConfig?: IContentProtectionConfig,
-        keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig
+        keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig,
+        getFragmentIds?: (href: string) => string[]
     ) {
         this.container = container;
         this.positions = positions;
@@ -36,6 +38,7 @@ export class FramePoolManager {
         this.injector = injector ?? null;
         this.contentProtectionConfig = contentProtectionConfig || {};
         this.keyboardPeripheralsConfig = keyboardPeripheralsConfig || [];
+        this.getFragmentIds = getFragmentIds ?? (() => []);
     }
 
     async destroy() {
@@ -171,7 +174,7 @@ export class FramePoolManager {
                 }
 
                 // Create <iframe>
-                const fm = new FrameManager(this.blobs.get(href)!, this.contentProtectionConfig, this.keyboardPeripheralsConfig);
+                const fm = new FrameManager(this.blobs.get(href)!, this.contentProtectionConfig, this.keyboardPeripheralsConfig, this.getFragmentIds(href));
                 if(href !== newHref) await fm.hide(); // Avoid unecessary hide
                 this.container.appendChild(fm.iframe);
                 await fm.load(modules);

package/src/epub/fxl/FXLCoordinator.ts

@@ -1,4 +1,4 @@
-import { sML } from "@readium/navigator-html-injectables";
+import { sML } from "@readium/helpers";
 
 export interface Point {
     X: number;

package/src/epub/fxl/FXLFrameManager.ts

@@ -2,7 +2,7 @@ import { Loader, ModuleName } from "@readium/navigator-html-injectables";
 import { Page, ReadingProgression } from "@readium/shared";
 import { FrameComms } from "../frame/FrameComms.ts";
 import { FXLPeripherals } from "./FXLPeripherals.ts";
-import type { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
+import type { ReadiumWindow } from "@readium/navigator-html-injectables";
 import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 import { KeyboardConditionBridge } from "../../peripherals/KeyboardConditionBridge.ts";
 

package/src/epub/preferences/EpubDefaults.ts

@@ -19,7 +19,7 @@ import {
   withFallback
 } from "../../preferences/guards.ts";
 
-import { sMLWithRequest } from "@readium/navigator-html-injectables";
+import { sMLWithRequest } from "@readium/helpers";
 
 export interface IEpubDefaults {
   backgroundColor?: string | null,

package/src/epub/preferences/EpubSettings.ts

@@ -3,7 +3,7 @@ import { ExperimentKey, TextAlignment } from "../../preferences/Types.ts";
 import { EpubDefaults } from "./EpubDefaults.ts";
 import { EpubPreferences } from "./EpubPreferences.ts";
 
-import { sMLWithRequest } from "@readium/navigator-html-injectables";
+import { sMLWithRequest } from "@readium/helpers";
 
 export interface IEpubSettings {
   backgroundColor?: string | null,

package/src/protection/DevToolsDetector.ts

@@ -1,4 +1,4 @@
-import { sML } from "@readium/navigator-html-injectables";
+import { sML } from "@readium/helpers";
 import { WorkerConsole } from "./utils/WorkerConsole.ts";
 import { log, table, clear } from "./utils/console.ts";
 import { isBrave } from "./utils/platform.ts";

package/src/webpub/WebPubFrameManager.ts

@@ -1,7 +1,7 @@
 import { Loader, ModuleName } from "@readium/navigator-html-injectables";
 import { FrameComms } from "../epub/frame/FrameComms.ts";
-import type { ReadiumWindow } from "../../../navigator-html-injectables/types/src/helpers/dom";
-import { sML } from "@readium/navigator-html-injectables";
+import type { ReadiumWindow } from "@readium/navigator-html-injectables";
+import { sML } from "@readium/helpers";
 import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../Navigator.ts";
 import { KeyboardConditionBridge } from "../peripherals/KeyboardConditionBridge.ts";
 
@@ -20,7 +20,8 @@ export class WebPubFrameManager {
     constructor(
         source: string,
         contentProtectionConfig: IContentProtectionConfig = {},
-        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = []
+        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = [],
+        private readonly timelineFragmentIds: string[] = []
     ) {
         this.frame = document.createElement("iframe");
         this.frame.classList.add("readium-navigator-iframe");
@@ -138,6 +139,11 @@ export class WebPubFrameManager {
                 this.comms?.send("focus", undefined, () => {
                     // Apply content protection synchronously
                     this.applyContentProtection();
+
+                    // Send timeline fragment IDs so the snapper can set up observers
+                    if (this.timelineFragmentIds.length > 0)
+                        this.comms?.send("timeline_entries", this.timelineFragmentIds);
+
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
                         this.frame.style.removeProperty("aria-hidden");

package/src/webpub/WebPubFramePoolManager.ts

@@ -17,19 +17,22 @@ export class WebPubFramePoolManager {
     private readonly injector?: Injector | null = null;
     private readonly contentProtectionConfig: IContentProtectionConfig;
     private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
+    private readonly getFragmentIds: (href: string) => string[];
 
     constructor(
         container: HTMLElement,
         cssProperties?: { [key: string]: string },
         injector?: Injector | null,
         contentProtectionConfig: IContentProtectionConfig = {},
-        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = []
+        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = [],
+        getFragmentIds?: (href: string) => string[]
     ) {
         this.container = container;
         this.currentCssProperties = cssProperties;
         this.injector = injector;
         this.contentProtectionConfig = contentProtectionConfig;
         this.keyboardPeripheralsConfig = [...keyboardPeripheralsConfig];
+        this.getFragmentIds = getFragmentIds ?? (() => []);
     }
 
     async destroy() {
@@ -154,7 +157,7 @@ export class WebPubFramePoolManager {
                     this.blobs.set(href, blobURL);
                 }
 
-                const fm = new WebPubFrameManager(this.blobs.get(href)!, this.contentProtectionConfig, this.keyboardPeripheralsConfig);
+                const fm = new WebPubFrameManager(this.blobs.get(href)!, this.contentProtectionConfig, this.keyboardPeripheralsConfig, this.getFragmentIds(href));
                 if(href !== newHref) await fm.hide();
                 this.container.appendChild(fm.iframe);
                 await fm.load(modules);