@readium/navigator-html-injectables 2.6.3 → 2.7.0

package/dist/helpers/locator.js

@@ -1 +1 @@
-import{getCssSelector as i}from"@readium/shared";import{TextQuoteAnchor as l}from"../vendor/hypothesis/anchoring/types.js";function a(o){const t=o.tagName.toUpperCase();return t==="IMG"||t==="VIDEO"||t==="AUDIO"||t==="IFRAME"||t==="OBJECT"||t==="EMBED"||t==="CANVAS"}function g(o,t){try{const r=t.locations,f=t.text;if(f&&f.highlight){let e;r&&i(r)&&(e=o.querySelector(i(r))),e||(e=o.body);const n=new l(e,f.highlight,{prefix:f.before,suffix:f.after});try{return n.toRange()}catch{return console.warn("Quote not found:",n),null}}if(r){let e=null;if(!e&&i(r)&&(e=o.querySelector(i(r))),!e&&r.fragments){for(const n of r.fragments)if(e=o.getElementById(n),e)break}if(e){const n=o.createRange();return e.childNodes.length===0||a(e)?(n.selectNode(e),n):(n.setStartBefore(e),n.setEndAfter(e),n)}}}catch(r){console.error(r)}return null}export{g as rangeFromLocator};
+import{getDomRange as u,getTextFragment as g,getCssSelector as a}from"@readium/shared";import{processTextFragmentDirective as d}from"@readium/helpers";import{TextQuoteAnchor as m}from"../vendor/hypothesis/anchoring/types.js";function h(n){const r=n.tagName.toUpperCase();return r==="IMG"||r==="VIDEO"||r==="AUDIO"||r==="IFRAME"||r==="OBJECT"||r==="EMBED"||r==="CANVAS"}function f(n,r){const o=r&&a(r);let l=null;if(o)try{l=n.querySelector(o)}catch(e){console.warn(`Invalid cssSelector: ${o}`,e)}return l??n.body??n.documentElement}function i(n,r){let o;try{o=n.querySelector(r.cssSelector)}catch(s){return console.error(`Invalid domRange cssSelector: ${r.cssSelector}`,s),null}if(!o)return console.error(`Can't resolve domRange cssSelector: ${r.cssSelector}`),null;const l=n.createTreeWalker(o,NodeFilter.SHOW_TEXT);let e=0,t;for(;t=l.nextNode();){if(e===r.textNodeIndex)return{node:t,offset:r.charOffset};e++}return console.error(`Can't resolve domRange textNodeIndex ${r.textNodeIndex} for selector: ${r.cssSelector}`),null}function E(n,r){try{const o=r.locations,l=r.text;if(o){const e=u(o);if(e){const t=i(n,e.start),s=e.end?i(n,e.end):t;if(t&&s)try{const c=n.createRange();return t.offset!==void 0?c.setStart(t.node,t.offset):c.setStartBefore(t.node),s.offset!==void 0?c.setEnd(s.node,s.offset):c.setEndBefore(s.node),c}catch(c){console.warn("Invalid domRange, falling back:",c)}}}if(o){const e=g(o);if(e){const t=f(n,o),s=d(e,n,t);if(s.length>0)return s[0]}}if(l&&l.highlight){const e=f(n,o),t=new m(e,l.highlight,{prefix:l.before,suffix:l.after});try{return t.toRange()}catch{return console.warn("Quote not found:",t),null}}if(o){let e=null;if(!e&&a(o)&&(e=n.querySelector(a(o))),!e&&o.fragments){for(const t of o.fragments)if(e=n.getElementById(t),e)break}if(e){const t=n.createRange();return e.childNodes.length===0||h(e)?(t.selectNode(e),t):(t.setStartBefore(e),t.setEndAfter(e),t)}}}catch(o){console.error(o)}return null}export{E as rangeFromLocator};

package/dist/modules/setup/Setup.js

@@ -1 +1 @@
-import{Module as l}from"../Module.js";const i=class i extends l{constructor(){super(...arguments),this.mediaPlayingCount=0,this.allAnimations=new Set}wndOnErr(e){this.comms?.send("error",{message:e.message,filename:e.filename,lineno:e.lineno,colno:e.colno})}unblock(e){for(e._readium_blockEvents=!1;e._readium_blockedEvents?.length>0;){const t=e._readium_blockedEvents.shift();switch(t[0]){case 0:Reflect.apply(t[1],t[2],t[3]);break;case 1:const a=t[1],n=t[2];e.removeEventListener(a.type,e._readium_eventBlocker,!0);const s=new Event(a.type,{bubbles:a.bubbles,cancelable:a.cancelable});n?n.dispatchEvent(s):e.dispatchEvent(s);break}}}onMediaPlayEvent(){this.mediaPlayingCount++,this.comms?.send("media_play",this.mediaPlayingCount)}onMediaPauseEvent(){this.mediaPlayingCount>0&&this.mediaPlayingCount--,this.comms?.send("media_pause",this.mediaPlayingCount)}pauseAllMedia(e){const t=e.document.querySelectorAll("audio,video");for(let a=0;a<t.length;a++)t[a].pause()}mount(e,t){this.comms=t,e.addEventListener("error",this.wndOnErr,!1),Reflect.defineProperty(e.navigator,"epubReadingSystem",{value:{name:"readium-ts-toolkit",version:"2.6.3",hasFeature:(n,s="")=>{switch(n){case"dom-manipulation":return!0;case"layout-changes":return!0;case"touch-events":return!0;case"mouse-events":return!0;case"keyboard-events":return!0;case"spine-scripting":return!0;case"embedded-web-content":return!0;default:return!1}}},writable:!1}),"getAnimations"in e.document&&e.document.getAnimations().forEach(n=>{n.cancel(),this.allAnimations.add(n)}),t.register("activate",i.moduleName,(n,s)=>{this.allAnimations.forEach(r=>{r.cancel(),r.play()}),s(!0)}),t.register("unfocus",i.moduleName,(n,s)=>{this.pauseAllMedia(e),this.allAnimations.forEach(r=>r.pause()),s(!0)});const a=e.document.querySelectorAll("audio,video");for(let n=0;n<a.length;n++){const s=a[n];s.addEventListener("play",this.onMediaPlayEvent,{passive:!0}),s.addEventListener("pause",this.onMediaPauseEvent,{passive:!0})}return t.log("Setup Mounted"),!0}unmount(e,t){return e.removeEventListener("error",this.wndOnErr),e.removeEventListener("play",this.onMediaPlayEvent),e.removeEventListener("pause",this.onMediaPauseEvent),this.allAnimations.forEach(a=>a.cancel()),this.allAnimations.clear(),t.log("Setup Unmounted"),!0}};i.moduleName="setup";let o=i;export{o as Setup};
+import{Module as l}from"../Module.js";const i=class i extends l{constructor(){super(...arguments),this.mediaPlayingCount=0,this.allAnimations=new Set}wndOnErr(e){this.comms?.send("error",{message:e.message,filename:e.filename,lineno:e.lineno,colno:e.colno})}unblock(e){for(e._readium_blockEvents=!1;e._readium_blockedEvents?.length>0;){const t=e._readium_blockedEvents.shift();switch(t[0]){case 0:Reflect.apply(t[1],t[2],t[3]);break;case 1:const a=t[1],n=t[2];e.removeEventListener(a.type,e._readium_eventBlocker,!0);const s=new Event(a.type,{bubbles:a.bubbles,cancelable:a.cancelable});n?n.dispatchEvent(s):e.dispatchEvent(s);break}}}onMediaPlayEvent(){this.mediaPlayingCount++,this.comms?.send("media_play",this.mediaPlayingCount)}onMediaPauseEvent(){this.mediaPlayingCount>0&&this.mediaPlayingCount--,this.comms?.send("media_pause",this.mediaPlayingCount)}pauseAllMedia(e){const t=e.document.querySelectorAll("audio,video");for(let a=0;a<t.length;a++)t[a].pause()}mount(e,t){this.comms=t,e.addEventListener("error",this.wndOnErr,!1),Reflect.defineProperty(e.navigator,"epubReadingSystem",{value:{name:"readium-ts-toolkit",version:"2.7.0",hasFeature:(n,s="")=>{switch(n){case"dom-manipulation":return!0;case"layout-changes":return!0;case"touch-events":return!0;case"mouse-events":return!0;case"keyboard-events":return!0;case"spine-scripting":return!0;case"embedded-web-content":return!0;default:return!1}}},writable:!1}),"getAnimations"in e.document&&e.document.getAnimations().forEach(n=>{n.cancel(),this.allAnimations.add(n)}),t.register("activate",i.moduleName,(n,s)=>{this.allAnimations.forEach(r=>{r.cancel(),r.play()}),s(!0)}),t.register("unfocus",i.moduleName,(n,s)=>{this.pauseAllMedia(e),this.allAnimations.forEach(r=>r.pause()),s(!0)});const a=e.document.querySelectorAll("audio,video");for(let n=0;n<a.length;n++){const s=a[n];s.addEventListener("play",this.onMediaPlayEvent,{passive:!0}),s.addEventListener("pause",this.onMediaPauseEvent,{passive:!0})}return t.log("Setup Mounted"),!0}unmount(e,t){return e.removeEventListener("error",this.wndOnErr),e.removeEventListener("play",this.onMediaPlayEvent),e.removeEventListener("pause",this.onMediaPauseEvent),this.allAnimations.forEach(a=>a.cancel()),this.allAnimations.clear(),t.log("Setup Unmounted"),!0}};i.moduleName="setup";let o=i;export{o as Setup};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator-html-injectables",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "type": "module",
   "description": "An embeddable solution for connecting frames of HTML publications with a Readium Navigator",
   "author": "readium",
@@ -44,8 +44,8 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@readium/helpers": "1.0.0",
-    "@readium/shared": "2.4.0"
+    "@readium/helpers": "1.1.0",
+    "@readium/shared": "2.5.0"
   },
   "devDependencies": {
     "css-selector-generator": "^3.8.0",

package/src/helpers/locator.ts

@@ -1,4 +1,5 @@
-import { getCssSelector, Locator } from "@readium/shared";
+import { DomRangePoint, getCssSelector, getDomRange, getTextFragment, Locator, LocatorLocations } from "@readium/shared";
+import { processTextFragmentDirective } from "@readium/helpers";
 import { TextQuoteAnchor } from "../vendor/hypothesis/anchoring/types.ts";
 
 function isReplacedLikeElement(element: Element): boolean {
@@ -6,19 +7,104 @@ function isReplacedLikeElement(element: Element): boolean {
     return tagName === "IMG" || tagName === "VIDEO" || tagName === "AUDIO" || tagName === "IFRAME" || tagName === "OBJECT" || tagName === "EMBED" || tagName === "CANVAS";
 }
 
+// Root used for text-based searches: the cssSelector-referenced element when
+// present and resolvable, otherwise the whole document body.
+function resolveTextSearchRoot(doc: Document, locations: LocatorLocations | undefined): Element {
+    const cssSelector = locations && getCssSelector(locations);
+    let root: Element | null = null;
+    if (cssSelector) {
+        try {
+            root = doc.querySelector(cssSelector);
+        } catch (error) {
+            console.warn(`Invalid cssSelector: ${cssSelector}`, error);
+        }
+    }
+    return root ?? doc.body ?? doc.documentElement;
+}
+
+function resolveDomRangePoint(doc: Document, point: DomRangePoint): { node: Text; offset?: number } | null {
+    let container: Element | null;
+    try {
+        container = doc.querySelector(point.cssSelector);
+    } catch (error) {
+        console.error(`Invalid domRange cssSelector: ${point.cssSelector}`, error);
+        return null;
+    }
+    if (!container) {
+        console.error(`Can't resolve domRange cssSelector: ${point.cssSelector}`);
+        return null;
+    }
+
+    const walker = doc.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+    let index = 0;
+    let node: Node | null;
+    while ((node = walker.nextNode())) {
+        if (index === point.textNodeIndex) {
+            return { node: node as Text, offset: point.charOffset };
+        }
+        index++;
+    }
+
+    console.error(`Can't resolve domRange textNodeIndex ${point.textNodeIndex} for selector: ${point.cssSelector}`);
+    return null;
+}
+
 // Based on the kotlin-toolkit code
 export function rangeFromLocator(doc: Document, locator: Locator) {
     try {
         const locations = locator.locations;
         const text = locator.text;
-        if (text && text.highlight) {
-            let root;
-            if (locations && getCssSelector(locations)) {
-                root = doc.querySelector(getCssSelector(locations)!);
+
+        // Tried before text.highlight: a domRange pinpoints an exact node/offset,
+        // which disambiguates between multiple occurrences of the same quote that
+        // a text-based search alone cannot tell apart.
+        if (locations) {
+            const domRange = getDomRange(locations);
+            if (domRange) {
+                const start = resolveDomRangePoint(doc, domRange.start);
+                const end = domRange.end ? resolveDomRangePoint(doc, domRange.end) : start;
+                if (start && end) {
+                    try {
+                        const range = doc.createRange();
+
+                        if (start.offset !== undefined) {
+                            range.setStart(start.node, start.offset);
+                        } else {
+                            range.setStartBefore(start.node);
+                        }
+
+                        if (end.offset !== undefined) {
+                            range.setEnd(end.node, end.offset);
+                        } else {
+                            range.setEndBefore(end.node);
+                        }
+
+                        return range;
+                    } catch (error) {
+                        console.warn("Invalid domRange, falling back:", error);
+                    }
+                }
             }
-            if (!root) {
-                root = doc.body;
+        }
+
+        // Tried before text.highlight for the same reason as domRange: a
+        // ":~:text=" fragment is a strict superset of what text.highlight can
+        // express (it also supports a textStart...textEnd range), so checking
+        // text.highlight first would mean this branch is rarely reached.
+        if (locations) {
+            const fragmentDirective = getTextFragment(locations);
+
+            if (fragmentDirective) {
+                const root = resolveTextSearchRoot(doc, locations);
+                const results = processTextFragmentDirective(fragmentDirective, doc, root);
+                if (results.length > 0) {
+                    return results[0]!;
+                }
             }
+        }
+
+        if (text && text.highlight) {
+            const root = resolveTextSearchRoot(doc, locations);
 
             const anchor = new TextQuoteAnchor(root, text.highlight, {
                 prefix: text.before,