@readium/navigator-html-injectables 2.3.0 → 2.3.1-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator-html-injectables",
-  "version": "2.3.0",
+  "version": "2.3.1-alpha.1",
   "type": "module",
   "description": "An embeddable solution for connecting frames of HTML publications with a Readium Navigator",
   "author": "readium",
@@ -26,10 +26,6 @@
     "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",
@@ -49,11 +45,15 @@
     "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"
+    "vite": "^7.3.1",
+    "@readium/shared": "2.2.0-alpha.1"
+  },
+  "scripts": {
+    "clean": "rimraf types dist",
+    "build": "pnpm clean && tsc && vite build"
   }
-}
+}

package/src/helpers/css.ts

@@ -1,5 +1,7 @@
 import { ReadiumWindow } from "./dom";
 
+export const isTypedOMSupported = typeof window.CSSTransformValue !== 'undefined';
+
 export function getProperties(wnd: ReadiumWindow) {
     const cssProperties: { [key: string]: string } = {};
 

package/src/modules/snapper/ColumnSnapper.ts

@@ -8,6 +8,7 @@ import { rangeFromLocator } from "../../helpers/locator";
 import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/dom";
 import { PatternAnalyzer } from "../../protection/PatternAnalyzer";
 import { BaseSuspiciousActivityEvent } from "../Peripherals";
+import { isTypedOMSupported } from "../../helpers/css";
 
 const COLUMN_SNAPPER_STYLE_ID = "readium-column-snapper-style";
 
@@ -133,7 +134,13 @@ export class ColumnSnapper extends Snapper {
                 const spos = position(startX, so, elapsed, period);
                 doc.scrollLeft = spos;
                 if(this.overscroll !== 0)
-                    doc.style.transform = `translate3d(${-lpos}px, 0px, 0px)`;
+                    if(isTypedOMSupported) {
+                        doc.attributeStyleMap.set("transform", new CSSTransformValue([
+                            new CSSTranslate(CSS.px(-lpos), CSS.px(0), CSS.px(0))
+                        ]));
+                    } else {
+                        doc.style.transform = `translate3d(${-lpos}px, 0px, 0px)`;
+                    }
 
                 if (elapsed < period)
                     this.wnd.requestAnimationFrame(step);
@@ -237,10 +244,22 @@ export class ColumnSnapper extends Snapper {
         const newpos = this.alreadyScrollLeft + dro;
         if(newpos < 0) {
             this.overscroll = newpos;
-            this.doc().style.transform = `translate3d(${-this.overscroll}px, 0px, 0px)`;
+            if(isTypedOMSupported) {
+                this.doc().attributeStyleMap.set("transform", new CSSTransformValue([
+                    new CSSTranslate(CSS.px(-newpos), CSS.px(0), CSS.px(0))
+                ]));
+            } else {
+                this.doc().style.transform = `translate3d(${-newpos}px, 0px, 0px)`;
+            }
         } else if((newpos + this.wnd.innerWidth) > this.cachedScrollWidth) {
             this.overscroll = newpos;
-            this.doc().style.transform = `translate3d(${-newpos}px, 0px, 0px)`;
+            if(isTypedOMSupported) {
+                this.doc().attributeStyleMap.set("transform", new CSSTransformValue([
+                    new CSSTranslate(CSS.px(-newpos), CSS.px(0), CSS.px(0))
+                ]));
+            } else {
+                this.doc().style.transform = `translate3d(${-newpos}px, 0px, 0px)`;
+            }
         } else {
             this.overscroll = 0;
             this.doc().style.removeProperty("transform");

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

@@ -1,4 +1,5 @@
 import { ReadiumWindow } from "./dom";
+export declare const isTypedOMSupported: boolean;
 export declare function getProperties(wnd: ReadiumWindow): {
     [key: string]: string;
 };