New package versions (#104)

Co-authored-by: Jiminy Panoz <[email protected]>
Co-authored-by: Oscar Rivera <[email protected]>

navigator-html-injectables/CHANGELOG.MD

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.3] - 2025-01-31
+
+### Fixed
+
+- Impose limitations on CSS selectors generated by the  `findFirstVisibleLocator` function to avoid issues/crashes
+
 ## [1.3.2] - 2024-11-22
 
 ### Fixed

navigator-html-injectables/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator-html-injectables",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "type": "module",
   "description": "An embeddable solution for connecting frames of HTML publications with a Readium Navigator",
   "author": "readium",
@@ -49,8 +49,8 @@
   },
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
-    "@readium/shared": "workspace:1.2.0",
-    "css-selector-generator": "^3.6.4",
+    "@readium/shared": "workspace:*",
+    "css-selector-generator": "^3.6.9",
     "tslib": "^2.6.1",
     "typescript": "^5.4.5",
     "vite": "^4.5.5"

navigator-html-injectables/src/helpers/dom.ts

@@ -68,13 +68,19 @@ export function nearestInteractiveElement(element: Element): Element | null {
 /// Returns the `Locator` object to the first block element that is visible on
 /// the screen.
 export function findFirstVisibleLocator(wnd: ReadiumWindow, scrolling: boolean) {
-    const element = findElement(wnd, wnd.document.body, scrolling);
+    const element = findElement(wnd, wnd.document.body, scrolling) as HTMLElement;
+
+    // Use only the allowed selectors to generate the cssSelector and avoid a crash
+    const cssSelector = wnd._readium_cssSelectorGenerator.getCssSelector(element, { 
+        selectors: ["tag", "id", "class", "nthchild", "nthoftype", "attribute"] 
+    });
+
     return new Locator({
         href: "#",
         type: "application/xhtml+xml",
         locations: new LocatorLocations({
             otherLocations: new Map([
-                ["cssSelector", wnd._readium_cssSelectorGenerator.getCssSelector(element)]
+                ["cssSelector", cssSelector]
             ])
         }),
         text: new LocatorText({
@@ -87,6 +93,9 @@ function findElement(wnd: ReadiumWindow, rootElement: Element, scrolling: boolea
     for (var i = 0; i < rootElement.children.length; i++) {
         const child = rootElement.children[i];
         if (!shouldIgnoreElement(child) && isElementVisible(wnd, child, scrolling)) {
+            // Once we get a fully visible element, return it
+            if (isElementFullyVisible(wnd, child)) return child;
+            // if the parent is not fully visible, search in the childs
             return findElement(wnd, child, scrolling);
         }
     }
@@ -111,11 +120,29 @@ function isElementVisible(wnd: ReadiumWindow, element: Element, scrolling: boole
     }
 }
 
+/** 
+* Check if an element is fully visible in the current viewport.
+* @param wnd Window instance to operate on
+* @param element Element to check visibility of
+* @returns True if the element is fully visible, false otherwise
+*/
+function isElementFullyVisible(wnd: ReadiumWindow, element: Element): boolean {
+    const rect = element.getBoundingClientRect();
+    const isFullyVisible =
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= wnd.innerHeight &&
+        rect.right <= wnd.innerWidth;
+    return isFullyVisible;
+}
+
 function shouldIgnoreElement(element: Element) {
     const elStyle = getComputedStyle(element);
     if (elStyle) {
         const display = elStyle.getPropertyValue("display");
-        if (display != "block") {
+        // Added list-item as it is a common display property for list items
+        // TODO: Check if there are other display properties that should be ignored/considered
+        if (display != "block" && display != "list-item") {
             return true;
         }
         // Cannot be relied upon, because web browser engine reports invisible when out of view in

navigator-html-injectables/src/modules/Peripherals.ts

@@ -71,7 +71,7 @@ export class Peripherals extends Module {
             targetFrameSrc: this.wnd.location.href,
             targetElement: (event.target as Element).outerHTML,
             interactiveElement: nearestInteractiveElement(event.target as Element)?.outerHTML,
-            cssSelector: this.wnd._readium_cssSelectorGenerator.getCssSelector(event.target),
+            cssSelector: this.wnd._readium_cssSelectorGenerator.getCssSelector(event.target as Element),
         } as FrameClickEvent);
 
         this.pointerMoved = false;

navigator/CHANGELOG.MD

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.4] - 2025-01-15
+
+## Fixed
+
+- Fix bug preventing iFrame from being properly hidden, add more safeguards to iFrame management
+
 ## [1.3.3] - 2024-11-22
 
 ### Added