@readium/navigator-html-injectables 1.2.0 → 1.3.2

package/src/modules/setup/Setup.ts

@@ -1,5 +1,5 @@
 import { Comms } from "../../comms/comms";
-import { ReadiumWindow } from "../../helpers/dom";
+import { ReadiumWindow, EPUBReadingSystem } from "../../helpers/dom";
 import { Module } from "../Module";
 import { ModuleName } from "../ModuleLibrary";
 
@@ -72,6 +72,35 @@ export abstract class Setup extends Module {
             false
         );
 
+        // Add reading system property to navigator
+        Reflect.defineProperty(wnd.navigator, "epubReadingSystem", {
+            value: {
+                name: "readium-ts-toolkit",
+                version: import.meta.env.PACKAGE_VERSION,
+                hasFeature: (feature: string, _version = "") => {
+                    switch (feature) {
+                        case "dom-manipulation":
+                            return true;
+                        case "layout-changes":
+                            return true;
+                        case "touch-events":
+                            return true;
+                        case "mouse-events":
+                            return true;
+                        case "keyboard-events":
+                            return true;
+                        case "spine-scripting":
+                            return true;
+                        case "embedded-web-content":
+                            return true;
+                        default:
+                            return false;
+                    }
+                }
+            } as EPUBReadingSystem,
+            writable: false
+        });
+
         // Add all currently active animations and cancel them
         if("getAnimations" in wnd.document) {
             wnd.document.getAnimations().forEach((a) => {

package/src/modules/snapper/ColumnSnapper.ts

@@ -40,7 +40,7 @@ export class ColumnSnapper extends Snapper {
     }
 
     reportProgress() {
-        this.comms.send("progress", this.wnd.scrollX / this.cachedScrollWidth);
+        this.comms.send("progress", { progress: this.wnd.scrollX / this.cachedScrollWidth, reference: this.wnd.innerWidth / this.doc().scrollWidth });
     }
 
     private shakeTimeout = 0;
@@ -229,6 +229,8 @@ export class ColumnSnapper extends Snapper {
         this.comms = comms;
         if(!super.mount(wnd, comms)) return false;
 
+        wnd.navigator.epubReadingSystem.layoutStyle = "paginated";
+
         // Add styling to hide the scrollbar
         const d = wnd.document.createElement("style");
         d.dataset.readium = "true";

package/src/modules/snapper/ScrollSnapper.ts

@@ -30,14 +30,16 @@ export class ScrollSnapper extends Snapper {
             customElements.define("anchor-observer", AnchorObserver);
     }
 
-    private reportProgress(progress: number) {
-        this.comms.send("progress", progress);
+    private reportProgress(data: { progress: number, reference: number }) {
+        this.comms.send("progress", data);
     }
 
     mount(wnd: ReadiumWindow, comms: Comms): boolean {
         this.wnd = wnd;
         this.comms = comms;
 
+        wnd.navigator.epubReadingSystem.layoutStyle = "scrolling";
+
         // Add styling to hide the scrollbar
         const style = wnd.document.createElement("style");
         style.dataset.readium = "true";
@@ -66,7 +68,7 @@ export class ScrollSnapper extends Snapper {
 
             this.wnd.requestAnimationFrame(() => {
               this.doc().scrollTop = this.doc().offsetHeight * position;
-              this.reportProgress(position);
+              this.reportProgress({ progress: position, reference: this.wnd.innerHeight / this.doc().scrollHeight });
               deselect(this.wnd);
               ack(true);
           });
@@ -80,7 +82,8 @@ export class ScrollSnapper extends Snapper {
             }
             this.wnd.requestAnimationFrame(() => {
                 this.doc().scrollTop = element.getBoundingClientRect().top + wnd.scrollY - wnd.innerHeight / 2;
-                this.reportProgress(this.doc().scrollTop / this.doc().offsetHeight);
+                const progress = this.doc().scrollTop / this.doc().offsetHeight;
+                this.reportProgress({ progress: progress, reference: this.wnd.innerHeight / this.doc().scrollHeight });
                 deselect(this.wnd);
                 ack(true);
             });
@@ -111,7 +114,8 @@ export class ScrollSnapper extends Snapper {
             }
             this.wnd.requestAnimationFrame(() => {
                 this.doc().scrollTop = r.getBoundingClientRect().top + wnd.scrollY - wnd.innerHeight / 2;
-                this.reportProgress(this.doc().scrollTop / this.doc().offsetHeight);
+                const progress = this.doc().scrollTop / this.doc().offsetHeight
+                this.reportProgress({ progress: progress, reference: this.wnd.innerHeight / this.doc().scrollHeight });
                 deselect(this.wnd);
                 ack(true);
             });
@@ -120,14 +124,14 @@ export class ScrollSnapper extends Snapper {
         comms.register("go_start", ScrollSnapper.moduleName, (_, ack) => {
             if (this.doc().scrollTop === 0) return ack(false);
             this.doc().scrollTop = 0;
-            this.reportProgress(0);
+            this.reportProgress({ progress: 0, reference: this.wnd.innerHeight / this.doc().scrollHeight });
             ack(true);
         });
 
         comms.register("go_end", ScrollSnapper.moduleName, (_, ack) => {
             if (this.doc().scrollTop === 0) return ack(false);
             this.doc().scrollTop = 0;
-            this.reportProgress(0);
+            this.reportProgress({ progress: 0, reference: this.wnd.innerHeight / this.doc().scrollHeight });
             ack(true);
         })
 
@@ -142,7 +146,8 @@ export class ScrollSnapper extends Snapper {
         ], ScrollSnapper.moduleName, (_, ack) => ack(false));
 
         comms.register("focus", ScrollSnapper.moduleName, (_, ack) => {
-            this.reportProgress(this.doc().scrollTop / this.doc().offsetHeight);
+            const progress = this.doc().scrollTop / this.doc().offsetHeight
+            this.reportProgress({ progress: progress, reference: this.wnd.innerHeight / this.doc().scrollHeight });
             ack(true);
         });
 

package/types/src/helpers/dom.d.ts

@@ -1,6 +1,12 @@
 import { Locator } from "@readium/shared";
 import type { getCssSelector } from "css-selector-generator";
 type BlockedEventData = [0, Function, any[], any[]] | [1, Event, EventTarget];
+export interface EPUBReadingSystem {
+    name: string;
+    version: string;
+    layoutStyle: "paginated" | "scrolling";
+    hasFeature: (feature: string, version?: string) => boolean;
+}
 export interface ReadiumWindow extends Window {
     _readium_blockEvents: boolean;
     _readium_blockedEvents: BlockedEventData[];
@@ -8,6 +14,9 @@ export interface ReadiumWindow extends Window {
     _readium_cssSelectorGenerator: {
         getCssSelector: typeof getCssSelector;
     };
+    navigator: Navigator & {
+        epubReadingSystem: EPUBReadingSystem;
+    };
 }
 export declare function deselect(wnd: ReadiumWindow): void;
 export declare function nearestInteractiveElement(element: Element): Element | null;

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

@@ -1,3 +1,4 @@
+export * from './Decorator';
 export * from './Module';
 export * from './ModuleLibrary';
 export * from './Peripherals';