@readium/navigator 2.4.0-beta.9 → 2.4.0

package/src/index.ts

@@ -1,8 +1,8 @@
-export * from './Navigator';
-export * from './webpub';
-export * from './epub';
-export * from './audio';
-export * from './helpers';
-export * from './preferences';
-export * from './css';
-export * from './injection';
+export * from './Navigator.ts';
+export * from './webpub/index.ts';
+export * from './epub/index.ts';
+export * from './audio/index.ts';
+export * from './helpers/index.ts';
+export * from './preferences/index.ts';
+export * from './css/index.ts';
+export * from './injection/index.ts';

package/src/injection/Injector.ts

@@ -1,4 +1,4 @@
-import { IInjectableRule, IInjectable, IInjector, IInjectablesConfig } from "./Injectable";
+import { IInjectableRule, IInjectable, IInjector, IInjectablesConfig } from "./Injectable.ts";
 import { Link } from "@readium/shared";
 
 const inferTypeFromResource = (resource: IInjectable): string | undefined => {
@@ -6,19 +6,19 @@ const inferTypeFromResource = (resource: IInjectable): string | undefined => {
     if ("blob" in resource && resource.blob.type) {
         return resource.blob.type;
     }
-    
+
     // For scripts, default to text/javascript
     if (resource.as === "script") {
         return "text/javascript";
     }
-    
+
     // For links, try to infer from URL extension
     if (resource.as === "link" && "url" in resource) {
         const url = resource.url.toLowerCase();
         if (url.endsWith(".css")) return "text/css";
         if ([".js", ".mjs", ".cjs"].some(ext => url.endsWith(ext))) return "text/javascript";
     }
-    
+
     return undefined;
 };
 
@@ -30,7 +30,7 @@ const applyAttributes = (element: HTMLElement, resource: IInjectable): void => {
             if (key === "type" || key === "rel" || key === "href" || key === "src") {
                 return;
             }
-            
+
             if (value !== undefined && value !== null) {
                 // Convert boolean attributes to proper HTML format
                 if (typeof value === "boolean") {
@@ -48,52 +48,52 @@ const applyAttributes = (element: HTMLElement, resource: IInjectable): void => {
 const scriptify = (doc: Document, resource: IInjectable, source: string): HTMLScriptElement => {
     const s = doc.createElement("script");
     s.dataset.readium = "true";
-    
+
     // Set the injectable ID if provided
     if (resource.id) {
         s.id = resource.id;
     }
-    
+
     // Apply root-level type if provided
     const finalType = resource.type || inferTypeFromResource(resource);
     if (finalType) {
         s.type = finalType;
     }
-    
+
     // Apply extra attributes
     applyAttributes(s, resource);
-    
+
     // Always set src from the processed URL
     s.src = source;
-    
+
     return s;
 };
 
 const linkify = (doc: Document, resource: IInjectable, source: string): HTMLLinkElement => {
     const s = doc.createElement("link");
     s.dataset.readium = "true";
-    
+
     // Set the injectable ID if provided
     if (resource.id) {
         s.id = resource.id;
     }
-    
+
     // Apply root-level rel if provided
     if (resource.rel) {
         s.rel = resource.rel;
     }
-    
+
     const finalType = resource.type || inferTypeFromResource(resource);
     if (finalType) {
         s.type = finalType;
     }
-    
+
     // Apply extra attributes
     applyAttributes(s, resource);
-    
+
     // Always set href from the processed URL
     s.href = source;
-    
+
     return s;
 };
 
@@ -103,7 +103,7 @@ export class Injector implements IInjector {
     private readonly rules: IInjectableRule[];
     private readonly allowedDomains: string[] = [];
     private injectableIdCounter = 0;
-    
+
     constructor(config: IInjectablesConfig) {
         // Validate allowed domains - they should be proper URLs for external resources
         this.allowedDomains = (config.allowedDomains || []).map(domain => {
@@ -114,11 +114,11 @@ export class Injector implements IInjector {
                 throw new Error(`Invalid allowed domain: "${domain}". Must be a valid URL (e.g., "https://fonts.googleapis.com").`);
             }
         });
-        
+
         // Assign IDs to injectables that don't have them
         this.rules = config.rules.map(rule => {
             const processedRule: IInjectableRule = { ...rule };
-            
+
             // Process prepend injectables (reverse to preserve order when prepending)
             if (rule.prepend) {
                 processedRule.prepend = rule.prepend.map(injectable => ({
@@ -126,7 +126,7 @@ export class Injector implements IInjector {
                     id: injectable.id || `injectable-${this.injectableIdCounter++}`
                 })).reverse(); // Reverse here so we can process normally later
             }
-            
+
             // Process append injectables (keep original order)
             if (rule.append) {
                 processedRule.append = rule.append.map(injectable => ({
@@ -134,11 +134,11 @@ export class Injector implements IInjector {
                     id: injectable.id || `injectable-${this.injectableIdCounter++}`
                 }));
             }
-            
+
             return processedRule;
         });
     }
-    
+
     public dispose(): void {
         // Cleanup any created blob URLs
         for (const url of this.createdBlobUrls) {
@@ -155,7 +155,7 @@ export class Injector implements IInjector {
         return [...this.allowedDomains]; // Return a copy to prevent external modification
     }
 
-    public async injectForDocument(doc: Document, link: Link): Promise<void> {        
+    public async injectForDocument(doc: Document, link: Link): Promise<void> {
         for (const rule of this.rules) {
             if (this.matchesRule(rule, link)) {
                 await this.applyRule(doc, rule);
@@ -166,7 +166,7 @@ export class Injector implements IInjector {
     private matchesRule(rule: IInjectableRule, link: Link): boolean {
         // Use the original href from the publication, not the resolved blob URL
         const originalHref = link.href;
-        
+
         return rule.resources.some(pattern => {
             if (pattern instanceof RegExp) {
                 return pattern.test(originalHref);
@@ -178,7 +178,7 @@ export class Injector implements IInjector {
     private async getOrCreateBlobUrl(resource: IInjectable): Promise<string> {
         // Use the injectable ID as the cache key
         const cacheKey = resource.id!; // ID is guaranteed to exist after constructor
-        
+
         if (this.blobStore.has(cacheKey)) {
             const entry = this.blobStore.get(cacheKey)!;
             entry.refCount++;
@@ -191,7 +191,7 @@ export class Injector implements IInjector {
             this.createdBlobUrls.add(url);
             return url;
         }
-        
+
         throw new Error("Resource must have a blob property");
     }
 
@@ -231,7 +231,7 @@ export class Injector implements IInjector {
 
     private createPreloadLink(doc: Document, resource: IInjectable, url: string): void {
         if (resource.as !== "link" || resource.rel !== "preload") return;
-        
+
         // Create a new resource object with preload attributes
         const preloadResource: IInjectable = {
             ...resource,
@@ -241,7 +241,7 @@ export class Injector implements IInjector {
                 as: resource.as
             }
         };
-        
+
         const preloadLink = linkify(doc, preloadResource, url);
         doc.head.appendChild(preloadLink);
     }
@@ -258,22 +258,22 @@ export class Injector implements IInjector {
 
     private async applyRule(doc: Document, rule: IInjectableRule): Promise<void> {
         const createdElements: { element: HTMLElement; url: string }[] = [];
-        
+
         // Collect all injectables that pass their conditions before modifying the document
-        const prependInjectables = rule.prepend ? rule.prepend.filter(resource => 
+        const prependInjectables = rule.prepend ? rule.prepend.filter(resource =>
             !resource.condition || resource.condition(doc)
         ) : [];
-        
-        const appendInjectables = rule.append ? rule.append.filter(resource => 
+
+        const appendInjectables = rule.append ? rule.append.filter(resource =>
             !resource.condition || resource.condition(doc)
         ) : [];
-        
+
         try {
             // Process prepend injectables first (already reversed in constructor)
             for (const resource of prependInjectables) {
                 await this.processInjectable(resource, doc, createdElements, "prepend");
             }
-            
+
             // Process append injectables next (in order)
             for (const resource of appendInjectables) {
                 await this.processInjectable(resource, doc, createdElements, "append");
@@ -291,11 +291,11 @@ export class Injector implements IInjector {
             throw error;
         }
     }
-    
+
     private async processInjectable(
-        resource: IInjectable, 
-        doc: Document, 
-        createdElements: { element: HTMLElement; url: string }[], 
+        resource: IInjectable,
+        doc: Document,
+        createdElements: { element: HTMLElement; url: string }[],
         position: "prepend" | "append"
     ): Promise<void> {
         const target = resource.target === "body" ? doc.body : doc.head;
@@ -304,13 +304,13 @@ export class Injector implements IInjector {
         let url: string | null = null;
         try {
             url = await this.getResourceUrl(resource, doc);
-            
+
             if (resource.rel === "preload" && "url" in resource) {
                 this.createPreloadLink(doc, resource, url);
             } else {
                 const element = this.createElement(doc, resource, url);
                 createdElements.push({ element, url });
-                
+
                 if (position === "prepend") {
                     target.prepend(element);
                 } else {
@@ -329,10 +329,10 @@ export class Injector implements IInjector {
     private isValidUrl(url: string, doc: Document): boolean {
         try {
             const parsed = new URL(url, doc.baseURI);
-            
+
             // Allow data URLs
             if (parsed.protocol === "data:") return true;
-            
+
             // Allow blob URLs that we created
             if (parsed.protocol === "blob:" && this.createdBlobUrls.has(url)) {
                 return true;

package/src/injection/epubInjectables.ts

@@ -1,5 +1,5 @@
-import { IInjectableRule, IInjectable } from "../injection/Injectable";
-import { stripJS, stripCSS } from "../helpers/minify";
+import { IInjectableRule, IInjectable } from "../injection/Injectable.ts";
+import { stripJS, stripCSS } from "../helpers/minify.ts";
 import { Metadata, Layout, Link } from "@readium/shared";
 
 import readiumCSSAfter from "@readium/css/css/dist/ReadiumCSS-after.css?raw";
@@ -15,15 +15,15 @@ import onloadProxyContent from "../dom/_readium_executionCleanup.js?raw";
  */
 export function createReadiumEpubRules(metadata: Metadata, readingOrderItems: Link[]): IInjectableRule[] {
     const isFixedLayout = metadata.effectiveLayout === Layout.fixed;
-    
+
     const htmlHrefs = readingOrderItems
         .filter(item => item.mediaType.isHTML)
         .map(item => item.href);
-    
-    const resources = htmlHrefs.length > 0 
-        ? htmlHrefs 
+
+    const resources = htmlHrefs.length > 0
+        ? htmlHrefs
         : [/\.xhtml$/, /\.html$/]; // fallback patterns
-    
+
     // Core injectables that should be prepended
     const prependInjectables: IInjectable[] = [
         // CSS Selector Generator - always injected
@@ -65,7 +65,7 @@ export function createReadiumEpubRules(metadata: Metadata, readingOrderItems: Li
             blob: new Blob([stripCSS(readiumCSSBefore)], { type: "text/css" }),
             rel: "stylesheet"
         });
-        
+
         // Readium CSS Default and After - appended for reflowable
         appendInjectables.unshift(
             // Readium CSS Default - only for reflowable AND no existing styles

package/src/injection/index.ts

@@ -1,2 +1,2 @@
-export * from "./Injectable";
-export * from "./Injector";
+export * from "./Injectable.ts";
+export * from "./Injector.ts";

package/src/injection/webpubInjectables.ts

@@ -1,5 +1,5 @@
 import { IInjectableRule, IInjectable } from "../injection/Injectable";
-import { stripJS, stripCSS } from "../helpers/minify";
+import { stripJS, stripCSS } from "../helpers/minify.ts";
 import { Link } from "@readium/shared";
 
 import readiumCSSWebPub from "@readium/css/css/dist/webPub/ReadiumCSS-webPub.css?raw";

package/src/preferences/Configurable.ts

@@ -1,4 +1,4 @@
-import { IPreferencesEditor } from "./PreferencesEditor";
+import { IPreferencesEditor } from "./PreferencesEditor.ts";
 
 export interface ConfigurableSettings {
   [key: string]: any;
@@ -12,4 +12,4 @@ export interface Configurable<ConfigurableSettings, ConfigurablePreferences> {
   settings: ConfigurableSettings;
   submitPreferences(preferences: ConfigurablePreferences): void;
   preferencesEditor: IPreferencesEditor;
-}
+}

package/src/preferences/PreferencesEditor.ts

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

package/src/preferences/guards.ts

@@ -1,4 +1,4 @@
-import { ExperimentKey, experiments } from './Types';
+import { ExperimentKey, experiments } from './Types.ts';
 
 export function ensureLessThanOrEqual<T extends number | null | undefined>(value: T, compareTo: T): T | undefined {
   if (value === undefined || value === null) {
@@ -94,4 +94,4 @@ export function ensureExperiment(experimentsInput: ExperimentKey[] | null | unde
     return null;
   }
   return experimentsInput.filter(exp => exp in experiments);
-}
+}

package/src/preferences/index.ts

@@ -1,5 +1,5 @@
-export * from "./Configurable";
-export * from "./Preference";
-export * from "./PreferencesEditor";
-export * from "./Types";
-export * from "./guards";
+export * from "./Configurable.ts";
+export * from "./Preference.ts";
+export * from "./PreferencesEditor.ts";
+export * from "./Types.ts";
+export * from "./guards.ts";

package/src/protection/CopyProtector.ts

@@ -4,6 +4,7 @@ export interface CopyProtectionOptions {
 
 export class CopyProtector {
     private copyHandler: (event: ClipboardEvent) => void;
+    private unloadHandler: () => void;
 
     constructor(options: CopyProtectionOptions = {}) {
         this.copyHandler = (event: ClipboardEvent) => {
@@ -12,11 +13,14 @@ export class CopyProtector {
             options.onCopyBlocked?.();
         };
 
+        this.unloadHandler = () => this.destroy();
+
         document.addEventListener("copy", this.copyHandler, true);
-        window.addEventListener("unload", () => this.destroy());
+        window.addEventListener("unload", this.unloadHandler);
     }
 
     public destroy() {
         document.removeEventListener("copy", this.copyHandler, true);
+        window.removeEventListener("unload", this.unloadHandler);
     }
 }

package/src/protection/DevToolsDetector.ts

@@ -1,8 +1,8 @@
-import { sML } from "../helpers/sML";
-import { WorkerConsole } from "./utils/WorkerConsole";
-import { log, table, clear } from "./utils/console";
-import { isBrave } from "./utils/platform";
-import { match } from "./utils/match";
+import { sML } from "../helpers/sML.ts";
+import { WorkerConsole } from "./utils/WorkerConsole.ts";
+import { log, table, clear } from "./utils/console.ts";
+import { isBrave } from "./utils/platform.ts";
+import { match } from "./utils/match.ts";
 
 export interface DevToolsDetectorOptions {
     /** Callback when Developer Tools are detected as open */
@@ -57,12 +57,12 @@ export class DevToolsDetector {
         for (let i = 0; i < 500; i++) {
             largeObject[`${i}`] = `${i}`;
         }
-        
+
         const largeObjectArray: Record<string, string>[] = [];
         for (let i = 0; i < 50; i++) {
             largeObjectArray.push(largeObject);
         }
-        
+
         return largeObjectArray;
     }
 
@@ -81,7 +81,7 @@ export class DevToolsDetector {
      */
     private async calcTablePrintTime(): Promise<number> {
         const largeObjectArray = this.getLargeObjectArray();
-        
+
         if (this.workerConsole) {
             try {
                 const result = await this.workerConsole.table(largeObjectArray);
@@ -105,7 +105,7 @@ export class DevToolsDetector {
      */
     private async calcLogPrintTime(): Promise<number> {
         const largeObjectArray = this.getLargeObjectArray();
-        
+
         if (this.workerConsole) {
             const result = await this.workerConsole.log(largeObjectArray);
             return result.time;
@@ -124,7 +124,7 @@ export class DevToolsDetector {
         return match({
             includes: [
                 () => !!sML.UA.Chrome,
-                () => !!sML.UA.Chromium, 
+                () => !!sML.UA.Chromium,
                 () => !!sML.UA.Safari,
                 () => !!sML.UA.Firefox
             ],
@@ -203,7 +203,7 @@ export class DevToolsDetector {
     private async detectDevTools(): Promise<boolean> {
         // Primary method: Performance-based detection (from original library)
         const performanceResult = await this.checkPerformanceBased();
-        
+
         if (performanceResult) {
             return true;
         }
@@ -227,7 +227,7 @@ export class DevToolsDetector {
 
             if (currentlyOpen !== this.isOpen) {
                 this.isOpen = currentlyOpen;
-                
+
                 if (currentlyOpen) {
                     this.options.onDetected();
                 } else {
@@ -258,7 +258,7 @@ export class DevToolsDetector {
     public async checkNow(): Promise<boolean> {
         const wasOpen = this.isOpen;
         this.isOpen = await this.detectDevTools();
-        
+
         if (this.isOpen !== wasOpen) {
             if (this.isOpen) {
                 this.options.onDetected();
@@ -266,7 +266,7 @@ export class DevToolsDetector {
                 this.options.onClosed();
             }
         }
-        
+
         return this.isOpen;
     }
 
@@ -278,13 +278,13 @@ export class DevToolsDetector {
             clearInterval(this.intervalId);
             this.intervalId = undefined;
         }
-        
+
         // Cleanup Web Worker
         if (this.workerConsole) {
             this.workerConsole.destroy();
             this.workerConsole = undefined;
         }
-        
+
         this.isOpen = false;
         this.checkCount = 0;
     }

package/src/protection/DragAndDropProtector.ts

@@ -5,7 +5,9 @@ export interface DragAndDropProtectionOptions {
 
 export class DragAndDropProtector {
     private dragstartHandler: (event: DragEvent) => void;
+    private dragoverHandler: (event: DragEvent) => void;
     private dropHandler: (event: DragEvent) => void;
+    private unloadHandler: () => void;
 
     constructor(options: DragAndDropProtectionOptions = {}) {
         this.dragstartHandler = (event: DragEvent) => {
@@ -14,6 +16,12 @@ export class DragAndDropProtector {
             options.onDragDetected?.(Array.from(event.dataTransfer?.types ?? []));
         };
 
+        // dragover must be prevented to allow drop to fire in some browsers.
+        this.dragoverHandler = (event: DragEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+
         this.dropHandler = (event: DragEvent) => {
             event.preventDefault();
             event.stopPropagation();
@@ -22,13 +30,18 @@ export class DragAndDropProtector {
             options.onDropDetected?.(types, fileCount);
         };
 
+        this.unloadHandler = () => this.destroy();
+
         document.addEventListener("dragstart", this.dragstartHandler, true);
+        document.addEventListener("dragover", this.dragoverHandler, true);
         document.addEventListener("drop", this.dropHandler, true);
-        window.addEventListener("unload", () => this.destroy());
+        window.addEventListener("unload", this.unloadHandler);
     }
 
     public destroy() {
         document.removeEventListener("dragstart", this.dragstartHandler, true);
+        document.removeEventListener("dragover", this.dragoverHandler, true);
         document.removeEventListener("drop", this.dropHandler, true);
+        window.removeEventListener("unload", this.unloadHandler);
     }
 }

package/src/protection/NavigatorProtector.ts

@@ -1,10 +1,10 @@
-import { AutomationDetector } from "./AutomationDetector";
-import { DevToolsDetector } from "./DevToolsDetector";
-import { IframeEmbeddingDetector } from "./IframeEmbeddingDetector";
-import { PrintProtector } from "./PrintProtector";
-import { ContextMenuProtector } from "./ContextMenuProtector";
+import { AutomationDetector } from "./AutomationDetector.ts";
+import { DevToolsDetector } from "./DevToolsDetector.ts";
+import { IframeEmbeddingDetector } from "./IframeEmbeddingDetector.ts";
+import { PrintProtector } from "./PrintProtector.ts";
+import { ContextMenuProtector } from "./ContextMenuProtector.ts";
 import { ContextMenuEvent } from "@readium/navigator-html-injectables";
-import { IContentProtectionConfig } from "../Navigator";
+import { IContentProtectionConfig } from "../Navigator.ts";
 
 export const NAVIGATOR_SUSPICIOUS_ACTIVITY_EVENT = "readium:navigator:suspiciousActivity";
 

package/src/webpub/WebPubBlobBuilder.ts

@@ -1,5 +1,5 @@
 import { Link, Publication } from "@readium/shared";
-import { Injector } from "../injection/Injector";
+import { Injector } from "../injection/Injector.ts";
 
 export class WebPubBlobBuilder {
     private readonly item: Link;

package/src/webpub/WebPubFrameManager.ts

@@ -1,8 +1,8 @@
 import { Loader, ModuleName } from "@readium/navigator-html-injectables";
-import { FrameComms } from "../epub/frame/FrameComms";
-import { ReadiumWindow } from "../../../navigator-html-injectables/types/src/helpers/dom";
-import { sML } from "../helpers";
-import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../Navigator";
+import { FrameComms } from "../epub/frame/FrameComms.ts";
+import type { ReadiumWindow } from "../../../navigator-html-injectables/types/src/helpers/dom";
+import { sML } from "../helpers/index.ts";
+import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../Navigator.ts";
 
 export class WebPubFrameManager {
     private frame: HTMLIFrameElement;
@@ -31,7 +31,7 @@ export class WebPubFrameManager {
         // Protect against background color bleeding
         this.frame.style.backgroundColor = "#FFFFFF";
         this.source = source;
-        
+
         // Use the provided content protection config directly without overriding defaults
         this.contentProtectionConfig = { ...contentProtectionConfig };
         this.keyboardPeripheralsConfig = [...keyboardPeripheralsConfig];
@@ -68,10 +68,10 @@ export class WebPubFrameManager {
 
     private applyContentProtection() {
         if (!this.comms) this.comms!.resume();
-        
+
         // Send content protection config
         this.comms!.send("peripherals_protection", this.contentProtectionConfig);
-        
+
         // Send keyboard peripherals separately
         if (this.keyboardPeripheralsConfig && this.keyboardPeripheralsConfig.length > 0) {
             this.comms!.send("keyboard_peripherals", this.keyboardPeripheralsConfig);
@@ -186,4 +186,4 @@ export class WebPubFrameManager {
     get ldr() {
         return this.loader;
     }
-}
+}

package/src/webpub/WebPubFramePoolManager.ts

@@ -1,9 +1,9 @@
 import { ModuleName } from "@readium/navigator-html-injectables";
 import { Locator, Publication } from "@readium/shared";
-import { WebPubBlobBuilder } from "./WebPubBlobBuilder";
-import { WebPubFrameManager } from "./WebPubFrameManager";
-import { Injector } from "../injection/Injector";
-import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../Navigator";
+import { WebPubBlobBuilder } from "./WebPubBlobBuilder.ts";
+import { WebPubFrameManager } from "./WebPubFrameManager.ts";
+import { Injector } from "../injection/Injector.ts";
+import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../Navigator.ts";
 
 export class WebPubFramePoolManager {
     private readonly container: HTMLElement;
@@ -19,7 +19,7 @@ export class WebPubFramePoolManager {
     private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
 
     constructor(
-        container: HTMLElement, 
+        container: HTMLElement,
         cssProperties?: { [key: string]: string },
         injector?: Injector | null,
         contentProtectionConfig: IContentProtectionConfig = {},
@@ -142,7 +142,7 @@ export class WebPubFramePoolManager {
                 if(!itm) return;
                 if(!this.blobs.has(href)) {
                     const blobBuilder = new WebPubBlobBuilder(
-                        pub, 
+                        pub,
                         this.currentBaseURL || "",
                         itm,
                         {
@@ -250,4 +250,4 @@ export class WebPubFramePoolManager {
         });
         return ret as DOMRect;
     }
-}
+}