@readium/navigator 2.4.0-alpha.7 → 2.4.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.4.0-alpha.7",
+  "version": "2.4.0-alpha.9",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",
@@ -55,8 +55,8 @@
     "typescript-plugin-css-modules": "^5.2.0",
     "user-agent-data-types": "^0.4.2",
     "vite": "^7.3.1",
-    "@readium/shared": "2.1.5",
-    "@readium/navigator-html-injectables": "2.3.0"
+    "@readium/navigator-html-injectables": "2.3.0",
+    "@readium/shared": "2.1.5"
   },
   "scripts": {
     "clean": "rimraf types dist",

package/src/epub/frame/FrameBlobBuilder.ts

@@ -76,14 +76,8 @@ export default class FrameBlobBuilder {
 
         // Load the HTML resource
         const link = await this.currentResource.link();
-        const txt = await this.currentResource.readAsString();
-        if(!txt) throw new Error(`Failed reading item ${link.href}`);
-        
-        const doc = new DOMParser().parseFromString(
-            txt,
-            link.mediaType.string as DOMParserSupportedType
-        );
-
+        const doc = await this.currentResource.readAsXML() as HTMLDocument;
+        if(!doc) throw new Error(`Failed reading item ${link.href}`);
         const perror = doc.querySelector("parsererror");
         if (perror) {
             const details = perror.querySelector("div");
@@ -118,7 +112,7 @@ export default class FrameBlobBuilder {
         const simg = document.createElement("img");
         simg.src = burl || "";
         simg.alt = link.title || "";
-        simg.decoding = "async";
+        await simg.decode(); // Reduce repaints
         doc.body.appendChild(simg);
 
         // Apply resource injections if injection service is provided

package/src/epub/frame/FrameManager.ts

@@ -25,7 +25,7 @@ export class FrameManager {
         this.frame.sandbox.value = "allow-same-origin allow-scripts";
         this.frame.classList.add("readium-navigator-iframe");
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.opacity = "0";
         this.frame.style.position = "absolute";
         this.frame.style.pointerEvents = "none";
@@ -100,7 +100,7 @@ export class FrameManager {
     async hide(): Promise<void> {
         if(this.destroyed) return;
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.opacity = "0";
         this.frame.style.pointerEvents = "none";
         this.hidden = true;
@@ -129,9 +129,9 @@ export class FrameManager {
                     
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
-                        this.frame.style.removeProperty("aria-hidden");
                         this.frame.style.removeProperty("opacity");
                         this.frame.style.removeProperty("pointer-events");
+                        this.frame.ariaHidden = null;
                         this.hidden = false;
 
                         if (sML.UA.WebKit) {

package/src/epub/fxl/FXLFrameManager.ts

@@ -21,7 +21,7 @@ export class FXLFrameManager {
     public debugHref: string;
     private loadPromise: Promise<Window> | undefined;
     private showPromise: Promise<void> | undefined;
-    private pageSize: { width: number, height: number } | undefined = undefined;
+    private viewportSize: { width: number, height: number } | undefined = undefined;
 
     constructor(
         peripherals: FXLPeripherals, 
@@ -41,7 +41,7 @@ export class FXLFrameManager {
         this.frame.classList.add("blank");
         this.frame.scrolling = "no";
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.display = "none";
         this.frame.style.position = "absolute";
         this.frame.style.pointerEvents = "none";
@@ -52,9 +52,9 @@ export class FXLFrameManager {
         this.frame.dataset.originalHref = debugHref;
         this.source = "about:blank";
 
-        // NEW
         this.wrapper = document.createElement("div");
         this.wrapper.style.position = "relative";
+        this.wrapper.style.contain = "strict";
         this.wrapper.style.float = this.wrapper.style.cssFloat = direction === ReadingProgression.rtl ? "right" : "left";
     }
 
@@ -108,7 +108,7 @@ export class FXLFrameManager {
 
     // Parses the page size from the viewport meta tag of the loaded resource.
     loadPageSize(): { width: number, height: number } {
-        if(this.pageSize) return this.pageSize;
+        if(this.viewportSize) return this.viewportSize;
         const wnd = this.frame.contentWindow!;
 
         // Try to get the page size from the viewport meta tag
@@ -125,16 +125,17 @@ export class FXLFrameManager {
                 else if(match[1] === "height")
                     height = Number.parseFloat(match[2]);
             }
-            if(width > 0 && height > 0)
-                return { width, height };
+            if(width > 0 && height > 0) {
+                this.viewportSize = { width, height };
+                return this.viewportSize;
+            }
         }
 
         // Otherwise get it from the size of the loaded content
-        this.pageSize = {
+        return {
             width: wnd.document.body.scrollWidth,
             height: wnd.document.body.scrollHeight
-        };
-        return this.pageSize;
+        }
     }
 
     update(page?: Page) {
@@ -158,7 +159,7 @@ export class FXLFrameManager {
         }
 
         this.frame.style.removeProperty("visibility");
-        this.frame.style.removeProperty("aria-hidden");
+        this.frame.ariaHidden = null;
         this.frame.style.removeProperty("pointer-events");
         this.frame.classList.remove("blank");
         this.frame.classList.add("loaded");
@@ -174,7 +175,7 @@ export class FXLFrameManager {
         if(!this.loaded) return;
         this.deselect();
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.pointerEvents = "none";
         this.frame.classList.add("blank");
         this.frame.classList.remove("loaded");
@@ -192,6 +193,8 @@ export class FXLFrameManager {
             this.source = "about:blank";
             this.frame.contentWindow!.location.replace("about:blank");
             this.frame.style.display = "none";
+            this.frame.style.width = "0px";
+            this.frame.style.height = "0px";
         });
     }
 

package/src/webpub/WebPubFrameManager.ts

@@ -23,7 +23,7 @@ export class WebPubFrameManager {
         this.frame = document.createElement("iframe");
         this.frame.classList.add("readium-navigator-iframe");
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.opacity = "0";
         this.frame.style.position = "absolute";
         this.frame.style.pointerEvents = "none";
@@ -98,7 +98,7 @@ export class WebPubFrameManager {
     async hide(): Promise<void> {
         if(this.destroyed) return;
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.opacity = "0";
         this.frame.style.pointerEvents = "none";
         this.hidden = true;
@@ -129,7 +129,7 @@ export class WebPubFrameManager {
                     this.applyContentProtection();
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
-                        this.frame.style.removeProperty("aria-hidden");
+                        this.frame.ariaHidden = null;
                         this.frame.style.removeProperty("opacity");
                         this.frame.style.removeProperty("pointer-events");
                         this.hidden = false;

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

@@ -17,7 +17,7 @@ export declare class FXLFrameManager {
     debugHref: string;
     private loadPromise;
     private showPromise;
-    private pageSize;
+    private viewportSize;
     constructor(peripherals: FXLPeripherals, direction: ReadingProgression, debugHref: string, contentProtectionConfig?: IContentProtectionConfig, keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig);
     load(modules: ModuleName[], source: string): Promise<Window>;
     loadPageSize(): {