@readium/navigator-html-injectables 2.3.1-alpha.2 → 2.4.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator-html-injectables",
-  "version": "2.3.1-alpha.2",
+  "version": "2.4.0-beta.1",
   "type": "module",
   "description": "An embeddable solution for connecting frames of HTML publications with a Readium Navigator",
   "author": "readium",
@@ -26,6 +26,10 @@
     "reader",
     "viewer"
   ],
+  "scripts": {
+    "clean": "rimraf types dist",
+    "build": "pnpm clean && tsc && vite build"
+  },
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
   "types": "./types/src/index.d.ts",
@@ -45,15 +49,11 @@
     "node": ">=18"
   },
   "devDependencies": {
+    "@readium/shared": "workspace:*",
     "css-selector-generator": "^3.8.0",
     "rimraf": "^6.1.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "@readium/shared": "2.2.0-alpha.1"
-  },
-  "scripts": {
-    "clean": "rimraf types dist",
-    "build": "pnpm clean && tsc && vite build"
+    "vite": "^7.3.1"
   }
-}
+}

package/src/Loader.ts

@@ -1,6 +1,6 @@
-import { Comms } from "./comms/comms";
-import { ReadiumWindow } from "./helpers/dom";
-import { Module, ModuleDerived, ModuleLibrary, ModuleName } from "./modules";
+import { Comms } from "./comms/comms.ts";
+import { ReadiumWindow } from "./helpers/dom.ts";
+import { Module, ModuleDerived, ModuleLibrary, ModuleName } from "./modules/index.ts";
 
 /**
  * The Module loader. Handles initialization of the HTML injectables

package/src/comms/comms.ts

@@ -1,6 +1,6 @@
-import { ReadiumWindow } from "../helpers/dom";
-import { CommsEventKey, CommsCommandKey } from "./keys";
-import { mid } from "./mid";
+import { ReadiumWindow } from "../helpers/dom.ts";
+import { CommsEventKey, CommsCommandKey } from "./keys.ts";
+import { mid } from "./mid.ts";
 
 export const COMMS_VERSION = 1;
 
@@ -21,7 +21,7 @@ export type CommsAck = (ok: boolean) => void;
 export type CommsCallback = (data: unknown, ack: CommsAck) => void; // TODO: maybe more than void?
 
 /**
- * Comms is basically a wrapper around window.postMessage that 
+ * Comms is basically a wrapper around window.postMessage that
  * adds structure to the messages and lets modules register callbacks.
  */
 export class Comms {
@@ -165,4 +165,4 @@ export class Comms {
             this.destination.postMessage(msg, this.origin, transfer);
         }
     }
-}
+}

package/src/comms/index.ts

@@ -1,3 +1,3 @@
-export * from './comms';
-export * from './keys';
-export * from './mid';
+export * from './comms.ts';
+export * from './keys.ts';
+export * from './mid.ts';

package/src/helpers/css.ts

@@ -1,6 +1,4 @@
-import { ReadiumWindow } from "./dom";
-
-export const isTypedOMSupported = () => typeof window.CSSTransformValue !== 'undefined';
+import { ReadiumWindow } from "./dom.ts";
 
 export function getProperties(wnd: ReadiumWindow) {
     const cssProperties: { [key: string]: string } = {};
@@ -52,4 +50,4 @@ export function setProperty(wnd: ReadiumWindow, key: string, value: string) {
 // Easy way to remove a CSS property
 export function removeProperty(wnd: ReadiumWindow, key: string) {
     wnd.document.documentElement.style.removeProperty(key);
-}
+}

package/src/helpers/document.ts

@@ -1,7 +1,10 @@
-import { ReadiumWindow } from "./dom";
+import { ReadiumWindow } from "./dom.ts";
 
 export function isRTL(wnd: ReadiumWindow): boolean {
-    return wnd.document.body.dir.toLowerCase() === "rtl";
+    // Check body first (author-declared direction), then fall back to the
+    // root element where we inject dir="rtl" for RTL publications.
+    const dir = wnd.document.body.dir || wnd.document.documentElement.dir;
+    return dir.toLowerCase() === "rtl";
 }
 
 export function getColumnCountPerScreen(wnd: ReadiumWindow): number {
@@ -12,7 +15,7 @@ export function getColumnCountPerScreen(wnd: ReadiumWindow): number {
     );
 }
 
-/** 
+/**
 * Returns the "content height" of an element, which is its clientHeight
 * minus any vertical padding.
 *
@@ -26,9 +29,9 @@ export function getContentHeight(el: Element): number {
 }
 
 /**
- * We have to make sure that the total number of columns is a multiple 
- * of the number of columns per screen. 
- * Otherwise it causes snapping and page turning issues. 
+ * We have to make sure that the total number of columns is a multiple
+ * of the number of columns per screen.
+ * Otherwise it causes snapping and page turning issues.
  * To fix this, we insert and remove blank virtual columns at the end of the resource.
  */
 export function appendVirtualColumnIfNeeded(wnd: ReadiumWindow): boolean {
@@ -56,7 +59,7 @@ export function appendVirtualColumnIfNeeded(wnd: ReadiumWindow): boolean {
     const lonelyColCount = totalColCount % colCountPerScreen;
 
     const needed = colCountPerScreen === 1 || lonelyColCount === 0
-        ? 0 
+        ? 0
         : colCountPerScreen - lonelyColCount;
 
     if (needed > 0) {
@@ -84,14 +87,14 @@ export function appendVirtualColumnIfNeeded(wnd: ReadiumWindow): boolean {
  * This forces a recalculation in WebKit browsers.
  * It is needed in scroll mode to ensure that the content is scrollable.
  * Webkit seems to find itself in some kind of limbo if we do not do that.
- * It has everything correct but the scroll listener is non-functional, 
+ * It has everything correct but the scroll listener is non-functional,
  * unless you force a recalc or reflow.
  * It is not needed in paginated mode.
  */
 export function forceWebkitRecalc(wnd: ReadiumWindow) {
-    // Borrowed from APB themselves… 
+    // Borrowed from APB themselves…
     const styleElement = wnd.document.createElement("style");
     styleElement.appendChild(wnd.document.createTextNode("*{}"));
     wnd.document.body.appendChild(styleElement);
     wnd.document.body.removeChild(styleElement);
-}
+}

package/src/helpers/locator.ts

@@ -1,5 +1,5 @@
 import { Locator } from "@readium/shared";
-import { TextQuoteAnchor } from "../vendor/hypothesis/anchoring/types";
+import { TextQuoteAnchor } from "../vendor/hypothesis/anchoring/types.ts";
 
 function isReplacedLikeElement(element: Element): boolean {
     const tagName = element.tagName.toUpperCase();
@@ -66,4 +66,4 @@ export function rangeFromLocator(doc: Document, locator: Locator) {
         console.error(e);
     }
     return null;
-}
+}

package/src/index.ts

@@ -1,4 +1,4 @@
-export * from './comms';
-export * from './modules';
-export * from './Loader';
-export * from './protection';
+export * from './comms/index.ts';
+export * from './modules/index.ts';
+export * from './Loader.ts';
+export * from './protection/index.ts';

package/src/modules/Decorator.ts

@@ -1,12 +1,12 @@
 import { Locator } from "@readium/shared";
-import { Comms } from "../comms/comms";
-import { Module } from "./Module";
-import { rangeFromLocator } from "../helpers/locator";
-import { ModuleName } from "./ModuleLibrary";
-import { Rect, getClientRectsNoOverlap } from "../helpers/rect";
-import { getProperty } from "../helpers/css";
-import { ReadiumWindow } from "../helpers/dom";
-import { isDarkColor, getContrastingTextColor } from "../helpers/color";
+import { Comms } from "../comms/comms.ts";
+import { Module } from "./Module.ts";
+import { rangeFromLocator } from "../helpers/locator.ts";
+import { ModuleName } from "./ModuleLibrary.ts";
+import { Rect, getClientRectsNoOverlap } from "../helpers/rect.ts";
+import { getProperty } from "../helpers/css.ts";
+import { ReadiumWindow } from "../helpers/dom.ts";
+import { isDarkColor, getContrastingTextColor } from "../helpers/color.ts";
 
 const DEFAULT_HIGHLIGHT_COLOR = "#FFFF00"; // Yellow in HEX
 
@@ -184,7 +184,7 @@ class DecorationGroup {
         const [stylesheet, highlighter]: [HTMLStyleElement, any] = this.requireContainer(true) as [HTMLStyleElement, unknown];
         highlighter.add(item.range);
 
-        const backgroundColor = getProperty(this.wnd, "--USER__backgroundColor") || 
+        const backgroundColor = getProperty(this.wnd, "--USER__backgroundColor") ||
                               this.wnd.getComputedStyle(this.wnd.document.documentElement).getPropertyValue("background-color");
         const tint = item.decoration?.style?.tint ?? DEFAULT_HIGHLIGHT_COLOR;
 
@@ -198,7 +198,7 @@ class DecorationGroup {
 
     /**
      * Layouts a single DecorationItem.
-     * @param item 
+     * @param item
      */
     private layout(item: DecorationItem) {
         if (this.experimentalHighlights && !this.notTextFlag?.has(item.id)) {
@@ -264,7 +264,7 @@ class DecorationGroup {
 
         template.innerHTML = `
         <div
-            data-readium="true" 
+            data-readium="true"
             class="readium-highlight"
             style="${[
                 `background-color: ${item.decoration?.style?.tint ?? DEFAULT_HIGHLIGHT_COLOR} !important`,
@@ -416,7 +416,7 @@ export class Decorator extends Module {
 
     private extractCustomProperty(style: string | null, propertyName: string): string | null {
         if (!style) return null;
-        
+
         const match = style.match(new RegExp(`${propertyName}:\\s*([^;]+)`));
         return match ? match[1].trim() : null;
     }
@@ -478,24 +478,24 @@ export class Decorator extends Module {
                     const element = mutation.target as Element;
                     const oldStyle = mutation.oldValue;
                     const newStyle = element.getAttribute("style");
-                    
+
                     // Check if the relevant CSS custom properties actually changed
                     const oldAppearance = this.extractCustomProperty(oldStyle, "--USER__appearance");
                     const newAppearance = this.extractCustomProperty(newStyle, "--USER__appearance");
                     const oldBgColor = this.extractCustomProperty(oldStyle, "--USER__backgroundColor");
                     const newBgColor = this.extractCustomProperty(newStyle, "--USER__backgroundColor");
-                    
-                    return oldAppearance !== newAppearance || 
+
+                    return oldAppearance !== newAppearance ||
                            oldBgColor !== newBgColor;
                 }
                 return false;
             });
-            
+
             if (shouldUpdate) {
                 this.updateHighlightStyles();
             }
         });
-        
+
         this.backgroundObserver.observe(wnd.document.documentElement, {
             attributes: true,
             attributeFilter: ["style"],
@@ -519,4 +519,4 @@ export class Decorator extends Module {
         comms.log("Decorator Unmounted");
         return true;
     }
-}
+}

package/src/modules/Module.ts

@@ -1,6 +1,6 @@
-import { Comms } from "../comms";
-import { ReadiumWindow } from "../helpers/dom";
-import { ModuleName } from "./ModuleLibrary";
+import { Comms } from "../comms/index.ts";
+import { ReadiumWindow } from "../helpers/dom.ts";
+import { ModuleName } from "./ModuleLibrary.ts";
 
 export abstract class Module {
     static readonly moduleName: ModuleName; // snake_case name of the module, must be unique.
@@ -20,4 +20,4 @@ export abstract class Module {
     abstract unmount(wnd: ReadiumWindow, comms: Comms): boolean;
 }
 
-export type ModuleDerived = {new (): Module} & typeof Module;
+export type ModuleDerived = {new (): Module} & typeof Module;

package/src/modules/ModuleLibrary.ts

@@ -1,13 +1,14 @@
-import { ModuleDerived } from "./Module";
-import { ColumnSnapper } from "./snapper/ColumnSnapper";
-import { ScrollSnapper } from "./snapper/ScrollSnapper";
-import { WebPubSnapper } from "./snapper/WebPubSnapper";
-import { Peripherals } from "./Peripherals";
-import { ReflowableSetup } from "./setup/ReflowableSetup";
-import { FixedSetup } from "./setup/FixedSetup";
-import { Decorator } from "./Decorator";
-import { WebPubSetup } from "./setup/WebPubSetup";
-import { PrintProtector } from "../protection/PrintProtector";
+import { ModuleDerived } from "./Module.ts";
+import { ColumnSnapper } from "./snapper/ColumnSnapper.ts";
+import { ScrollSnapper } from "./snapper/ScrollSnapper.ts";
+import { WebPubSnapper } from "./snapper/WebPubSnapper.ts";
+import { Peripherals } from "./Peripherals.ts";
+import { ReflowableSetup } from "./setup/ReflowableSetup.ts";
+import { FixedSetup } from "./setup/FixedSetup.ts";
+import { Decorator } from "./Decorator.ts";
+import { WebPubSetup } from "./setup/WebPubSetup.ts";
+import { PrintProtector } from "../protection/PrintProtector.ts";
+import { CJKVerticalSnapper } from "./snapper/CJKVerticalSnapper.ts";
 
 // All the module names. TODO: Come up with a better way of collecting these in a way TS will recognize
 export type ModuleName =
@@ -15,6 +16,7 @@ export type ModuleName =
     "snapper" |
     "column_snapper" |
     "scroll_snapper" |
+    "cjk_vertical_snapper" |
     "webpub_snapper" |
     "fixed_setup" |
     "decorator" |
@@ -38,6 +40,7 @@ export const ReflowableModules: ModuleName[] = [
     "peripherals",
     "column_snapper",
     "scroll_snapper",
+    "cjk_vertical_snapper",
     "print_protection"
 ];
 
@@ -60,5 +63,6 @@ export const ModuleLibrary = new Map<string, ModuleDerived>([
     Decorator,
     ColumnSnapper,
     ScrollSnapper,
+    CJKVerticalSnapper,
     PrintProtector
-].map(m => [m.moduleName, m])); // Turn module list into K/V list for quick access by name
+].map(m => [m.moduleName, m])); // Turn module list into K/V list for quick access by name