@readium/navigator-html-injectables 1.3.2 → 2.0.0-beta.1

package/src/helpers/css.ts

@@ -1,5 +1,42 @@
 import { ReadiumWindow } from "./dom";
 
+export function getProperties(wnd: ReadiumWindow) {
+    const cssProperties: { [key: string]: string } = {};
+
+    const rootStyle = wnd.document.documentElement.style;
+
+    for (const prop in wnd.document.documentElement.style) {
+        // We check if the property belongs to the CSSStyleDeclaration instance
+        // We also ensure that the property is a numeric index (indicating an inline style)
+        if (
+            Object.hasOwn(rootStyle, prop) &&
+            !Number.isNaN(Number.parseInt(prop))
+        ) {
+            cssProperties[rootStyle[prop]] = rootStyle.getPropertyValue(rootStyle[prop]);
+        }
+    }
+
+    return cssProperties;
+}
+
+export function updateProperties(wnd: ReadiumWindow, properties: { [key: string]: string }) {
+    const currentProperties = getProperties(wnd);
+
+    // Remove properties
+    Object.keys(currentProperties).forEach((key) => {
+        if (!properties.hasOwnProperty(key)) {
+            removeProperty(wnd, key);
+        }
+    });
+
+    // Update properties
+    Object.entries(properties).forEach(([key, value]) => {
+        if (currentProperties[key] !== value) {
+            setProperty(wnd, key, value);
+        }
+    });
+}
+
 // Easy way to get a CSS property
 export function getProperty(wnd: ReadiumWindow, key: string) {
     return wnd.document.documentElement.style.getPropertyValue(key);

package/src/helpers/document.ts

@@ -12,32 +12,53 @@ export function getColumnCountPerScreen(wnd: ReadiumWindow) {
     );
 }
 
+/** 
+* Returns the "content height" of an element, which is its clientHeight
+* minus any vertical padding.
+*
+* @param el - The element to measure.
+*/
+export function getContentHeight(el: Element) {
+ const cStyle = getComputedStyle(el);
+ const paddingTop = parseFloat(cStyle.paddingTop || "0");
+ const paddingBottom = parseFloat(cStyle.paddingBottom || "0");
+ return el.clientHeight - paddingTop - paddingBottom;
+}
+
 /**
- * Having an odd number of columns when displaying two columns per screen causes snapping and page
- * turning issues. To fix this, we insert a blank virtual column at the end of the resource.
+ * 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) {
-    const id = "readium-virtual-page";
-    let virtualCol = wnd.document.getElementById(id);
-    if (getColumnCountPerScreen(wnd) !== 2) {
-        if (virtualCol) {
-            virtualCol.remove();
-        }
-    } else {
-        const documentWidth = wnd.document.scrollingElement!.scrollWidth;
-        const colCount = documentWidth / wnd.innerWidth;
-        const hasOddColCount = (Math.round(colCount * 2) / 2) % 1 > 0.1;
-        if (hasOddColCount) {
-            if (virtualCol)
-                virtualCol.remove();
-            else {
-                virtualCol = wnd.document.createElement("div");
-                virtualCol.setAttribute("id", id);
-                virtualCol.dataset.readium = "true";
+    const virtualCols = wnd.document.querySelectorAll("div[id^='readium-virtual-page']");
+    // Remove first so that we don’t end up with an incorrect scrollWidth
+    // Even when removing their width we risk having an incorrect scrollWidth
+    // so removing them entirely is the most robust solution
+    for (const virtualCol of virtualCols) {
+        virtualCol.remove();
+    }
+    const colCount = getColumnCountPerScreen(wnd);
+    const documentWidth = wnd.document.scrollingElement!.scrollWidth;
+    const neededColCount = Math.ceil(documentWidth / wnd.innerWidth) * colCount;
+    const totalColCount = Math.round((documentWidth / wnd.innerWidth) * colCount);
+    const needed = colCount === 1 ? 0 : neededColCount - totalColCount;
+    if (needed > 0) {
+        for (let i = 0; i < needed; i++) {
+            const virtualCol = wnd.document.createElement("div");
+            virtualCol.setAttribute("id", `readium-virtual-page-${ i }`);
+            virtualCol.dataset.readium = "true";
+            if (CSS.supports("break-before", "column")) {
                 virtualCol.style.breakBefore = "column";
-                virtualCol.innerHTML = "&#8203;"; // zero-width space
-                wnd.document.body.appendChild(virtualCol);
+            } else if (CSS.supports("break-inside", "avoid-column")) {
+                virtualCol.style.breakInside = "avoid-column";
+                virtualCol.style.height = getContentHeight(wnd.document.documentElement) + "px";
+            } else {
+                virtualCol.style.height = getContentHeight(wnd.document.documentElement) + "px";
             }
+            virtualCol.innerHTML = "&#8203;"; // zero-width space
+            wnd.document.body.appendChild(virtualCol);
         }
     }
 }

package/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

package/src/modules/Decorator.ts

@@ -4,12 +4,9 @@ import { Module } from "./Module";
 import { rangeFromLocator } from "../helpers/locator";
 import { ModuleName } from "./ModuleLibrary";
 import { Rect, getClientRectsNoOverlap } from "../helpers/rect";
-import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
 import { getProperty } from "../helpers/css";
 import { ReadiumWindow } from "../helpers/dom";
-
-// Necessary for iOS 13 and below
-const ResizeObserver = window.ResizeObserver || Polyfill;
+import { isDarkColor } from "../helpers/color";
 
 export enum Width {
     Wrap = "wrap", // Smallest width fitting the CSS border box.
@@ -254,7 +251,8 @@ class DecorationGroup {
         // template.innerHTML = item.decoration.element.trim();
         // TODO more styles logic
 
-        const isDarkMode = getProperty(this.wnd, "--USER__appearance") === "readium-night-on";
+        const isDarkMode = getProperty(this.wnd, "--USER__appearance") === "readium-night-on" ||
+            isDarkColor(getProperty(this.wnd, "--USER__backgroundColor"));
 
         template.innerHTML = `
         <div

package/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;

package/src/modules/setup/ReflowableSetup.ts

@@ -1,6 +1,6 @@
 import { Comms } from "../../comms/comms";
 import { Setup } from "./Setup";
-import { removeProperty, setProperty } from "../../helpers/css";
+import { getProperties, removeProperty, setProperty, updateProperties } from "../../helpers/css";
 import { ReadiumWindow } from "../../helpers/dom";
 
 const VIEWPORT_META_TAG_ID = "readium-viewport";
@@ -35,6 +35,17 @@ export class ReflowableSetup extends Setup {
             target: wnd
         } as any); // Cheat!
 
+        comms.register("get_properties", ReflowableSetup.moduleName, (_, ack) => {
+            getProperties(wnd);
+            ack(true);
+        });
+        comms.register("update_properties", ReflowableSetup.moduleName, (data, ack) => {
+            // In order to keep the viewport width that is added in the setup itself, 
+            // and don’t have EpubNavigator concerned with this, we need to add it there
+            (data as { [key: string]: string })["--RS__viewportWidth"] = `${ wnd.innerWidth }px`;
+            updateProperties(wnd, data as { [key: string]: string });
+            ack(true);
+        })
         comms.register("set_property", ReflowableSetup.moduleName, (data, ack) => {
             const kv = data as string[];
             setProperty(wnd, kv[0], kv[1]);

package/src/modules/snapper/ColumnSnapper.ts

@@ -1,4 +1,3 @@
-import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
 import { Comms } from "../../comms";
 import { Snapper } from "./Snapper";
 import { getColumnCountPerScreen, isRTL, appendVirtualColumnIfNeeded } from "../../helpers/document";
@@ -272,18 +271,43 @@ export class ColumnSnapper extends Snapper {
         `;
         wnd.document.head.appendChild(d);
 
-        // Necessary for iOS 13 and below
-        const ResizeObserver = (wnd as ReadiumWindow & typeof globalThis).ResizeObserver || Polyfill;
-
-        this.resizeObserver = new ResizeObserver(() => wnd.requestAnimationFrame(() => {
-            wnd && appendVirtualColumnIfNeeded(wnd);
-        }));
+        this.resizeObserver = new ResizeObserver(() => {
+            wnd.requestAnimationFrame(() => {
+                wnd && appendVirtualColumnIfNeeded(wnd);
+            });
+            this.onWidthChange();
+        });
         this.resizeObserver.observe(wnd.document.body);
-        this.mutationObserver = new MutationObserver(() => {
-            this.wnd.requestAnimationFrame(() => this.cachedScrollWidth = this.doc().scrollWidth!);
+
+        this.mutationObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                // We have to check it’s not onTouchMove + snapOffset setting transforms
+                if (mutation.target === this.wnd.document.documentElement) {
+                    const oldValue = mutation.oldValue as string;
+                    const newValue = (mutation.target as HTMLElement).getAttribute("style") as string;
+                    const transformRegex = /transform\s*:\s*([^;]+)/;
+                    const oldValueTransform = oldValue?.match(transformRegex);
+                    const newValueTransform = newValue?.match(transformRegex);
+                    if (
+                        (!oldValueTransform && !newValueTransform) || 
+                        (oldValueTransform && !newValueTransform) ||
+                        (oldValueTransform && newValueTransform && oldValueTransform[1] !== newValueTransform[1])
+                    ) {
+                        wnd.requestAnimationFrame(() => {
+                            wnd && appendVirtualColumnIfNeeded(wnd);
+                        });
+                        this.onWidthChange();
+                    }
+                } else {
+                    wnd.requestAnimationFrame(() => this.cachedScrollWidth = this.doc().scrollWidth!);
+                }
+            }
         });
         wnd.frameElement && this.mutationObserver.observe(wnd.frameElement, {attributes: true, attributeFilter: ["style"]});
         this.mutationObserver.observe(wnd.document, {attributes: true, attributeFilter: ["style"]});
+        // For cases the resizeObserver is not able to detect cos body is not resizing despite colCount,
+        // we need to check the syle attribute on the documentElement (ReadiumCSS props)
+        this.mutationObserver.observe(wnd.document.documentElement, {attributes: true, attributeFilter: ["style"]});
 
         const scrollToOffset = (offset: number): boolean => {
             const oldScrollLeft = this.doc().scrollLeft;
@@ -387,6 +411,7 @@ export class ColumnSnapper extends Snapper {
 
         comms.register("go_prev", ColumnSnapper.moduleName, (_, ack) => {
             this.wnd.requestAnimationFrame(() => {
+                this.cachedScrollWidth = this.doc().scrollWidth!;
                 const offset = wnd.scrollX - wnd.innerWidth;
                 const minOffset = isRTL(wnd) ? - (this.cachedScrollWidth - wnd.innerWidth) : 0;
                 const change = scrollToOffset(Math.max(offset, minOffset));
@@ -400,6 +425,7 @@ export class ColumnSnapper extends Snapper {
 
         comms.register("go_next", ColumnSnapper.moduleName, (_, ack) => {
             this.wnd.requestAnimationFrame(() => {
+                this.cachedScrollWidth = this.doc().scrollWidth!;
                 const offset = wnd.scrollX + wnd.innerWidth;
                 const maxOffset = isRTL(wnd) ? 0 : this.cachedScrollWidth - wnd.innerWidth;
                 const change = scrollToOffset(Math.min(offset, maxOffset));

package/src/modules/snapper/ScrollSnapper.ts

@@ -1,7 +1,6 @@
 import { Locator, LocatorLocations, LocatorText } from "@readium/shared";
 import { Comms } from "../../comms";
 import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/dom";
-import { AnchorObserver, helperCreateAnchorElements, helperRemoveAnchorElements } from '../../helpers/scrollSnapperHelper';
 import { ModuleName } from "../ModuleLibrary";
 import { Snapper } from "./Snapper";
 import { rangeFromLocator } from "../../helpers/locator";
@@ -12,28 +11,28 @@ export class ScrollSnapper extends Snapper {
     static readonly moduleName: ModuleName = "scroll_snapper";
     private wnd!: ReadiumWindow;
     private comms!: Comms;
+    private resizeObserver!: ResizeObserver;
+    private isScrolling = false;
 
     private doc() {
         return this.wnd.document.scrollingElement as HTMLElement;
     }
 
-    private createAnchorElements = () => {
-        helperCreateAnchorElements(this.doc());
-    }
-
-    private removeAnchorElements = () => {
-        helperRemoveAnchorElements(this.doc());
-    }
-
-    private createCustomElement = () => {
-        customElements.get("anchor-observer") ||
-            customElements.define("anchor-observer", AnchorObserver);
-    }
-
     private reportProgress(data: { progress: number, reference: number }) {
         this.comms.send("progress", data);
     }
 
+    private handleScroll = () => {
+        if (!this.isScrolling) {
+            this.isScrolling = true;
+            this.wnd.requestAnimationFrame(() => {
+                const progress = this.doc().scrollTop / this.doc().offsetHeight;
+                this.reportProgress({ progress: progress, reference: this.wnd.innerHeight / this.doc().scrollHeight });
+                this.isScrolling = false;
+            });
+        }
+    };
+
     mount(wnd: ReadiumWindow, comms: Comms): boolean {
         this.wnd = wnd;
         this.comms = comms;
@@ -55,6 +54,15 @@ export class ScrollSnapper extends Snapper {
         `;
         wnd.document.head.appendChild(style);
 
+        this.resizeObserver = new ResizeObserver(() => {
+            this.comms.ready && this.handleScroll();
+        });
+        this.resizeObserver.observe(wnd.document.body);
+
+        wnd.addEventListener("scroll", this.handleScroll, {
+            passive: true
+        });
+
         comms.register("go_progression", ScrollSnapper.moduleName, (data, ack) => {
             const position = data as number;
 
@@ -158,14 +166,13 @@ export class ScrollSnapper extends Snapper {
         });
 
         comms.log("ScrollSnapper Mounted");
-        this.createCustomElement();
-        this.createAnchorElements();
         return true;
     }
 
     unmount(wnd: ReadiumWindow, comms: Comms): boolean {
         comms.unregisterAll(ScrollSnapper.moduleName);
-        this.removeAnchorElements();
+        this.resizeObserver.disconnect();
+        if (this.handleScroll) wnd.removeEventListener("scroll", this.handleScroll);
         wnd.document.getElementById(SCROLL_SNAPPER_STYLE_ID)?.remove();
         comms.log("ScrollSnapper Unmounted");
         return true;

package/types/src/comms/keys.d.ts

@@ -1,2 +1,2 @@
 export type CommsEventKey = "_pong" | "_unhandled" | "_ack" | "log" | "error" | "click" | "tap" | "tap_more" | "no_more" | "no_less" | "swipe" | "progress" | "first_visible_locator" | "text_selected" | "media_play" | "media_pause";
-export type CommsCommandKey = "_ping" | "go_prev" | "go_next" | "go_id" | "go_text" | "go_end" | "go_start" | "go_progression" | "set_property" | "remove_property" | "first_visible_locator" | "decorate" | "protect" | "unprotect" | "unfocus" | "focus" | "activate" | "shake";
+export type CommsCommandKey = "_ping" | "go_prev" | "go_next" | "go_id" | "go_text" | "go_end" | "go_start" | "go_progression" | "get_properties" | "update_properties" | "set_property" | "remove_property" | "first_visible_locator" | "decorate" | "protect" | "unprotect" | "unfocus" | "focus" | "activate" | "shake";

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

@@ -0,0 +1,16 @@
+export declare const colorToRgba: (color: string) => {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare const getLuminance: (color: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}) => number;
+export declare const isDarkColor: (color: string) => boolean;
+export declare const isLightColor: (color: string) => boolean;
+export declare const checkContrast: (color1: string, color2: string) => number;
+export declare const ensureContrast: (color1: string, color2: string, contrast?: number) => string[];

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

@@ -1,4 +1,10 @@
 import { ReadiumWindow } from "./dom";
+export declare function getProperties(wnd: ReadiumWindow): {
+    [key: string]: string;
+};
+export declare function updateProperties(wnd: ReadiumWindow, properties: {
+    [key: string]: string;
+}): void;
 export declare function getProperty(wnd: ReadiumWindow, key: string): string;
 export declare function setProperty(wnd: ReadiumWindow, key: string, value: string): void;
 export declare function removeProperty(wnd: ReadiumWindow, key: string): void;

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

@@ -2,7 +2,16 @@ import { ReadiumWindow } from "./dom";
 export declare function isRTL(wnd: ReadiumWindow): boolean;
 export declare function getColumnCountPerScreen(wnd: ReadiumWindow): number;
 /**
- * Having an odd number of columns when displaying two columns per screen causes snapping and page
- * turning issues. To fix this, we insert a blank virtual column at the end of the resource.
+* Returns the "content height" of an element, which is its clientHeight
+* minus any vertical padding.
+*
+* @param el - The element to measure.
+*/
+export declare 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.
+ * To fix this, we insert and remove blank virtual columns at the end of the resource.
  */
 export declare function appendVirtualColumnIfNeeded(wnd: ReadiumWindow): void;

package/types/src/modules/snapper/ScrollSnapper.d.ts

@@ -6,11 +6,11 @@ export declare class ScrollSnapper extends Snapper {
     static readonly moduleName: ModuleName;
     private wnd;
     private comms;
+    private resizeObserver;
+    private isScrolling;
     private doc;
-    private createAnchorElements;
-    private removeAnchorElements;
-    private createCustomElement;
     private reportProgress;
+    private handleScroll;
     mount(wnd: ReadiumWindow, comms: Comms): boolean;
     unmount(wnd: ReadiumWindow, comms: Comms): boolean;
 }

package/src/helpers/scrollSnapperHelper.ts

@@ -1,43 +0,0 @@
-const iframeAnchors = {
-  top: "js-iframe-reader-top-anchor",
-  bottom: "js-iframe-reader-bottom-anchor",
-};
-
-export class AnchorObserver extends HTMLElement {
-  connectedCallback() {
-    this.setAttribute("aria-hidden", "true");
-    this.style.setProperty("display", "block", "important");
-    this.style.setProperty("padding", "0", "important");
-    this.style.setProperty("margin", "0", "important");
-    this.style.setProperty("visibility", "hidden", "important");
-  }
-}
-
-export function helperCreateAnchorElements(iframeElement: HTMLElement) {
-  const body = iframeElement.getElementsByTagName("body")[0];
-  const anchorTop = document.createElement("anchor-observer");
-  const anchorBottom = document.createElement("anchor-observer");
-  anchorTop.dataset.readium = "true";
-  anchorBottom.dataset.readium = "true";
-
-  anchorTop?.setAttribute("id", iframeAnchors.top);
-  anchorTop?.style.setProperty("height", "115px", "important");
-
-  anchorBottom?.setAttribute("id", iframeAnchors.bottom);
-  anchorBottom?.style.setProperty("height", "80px", "important");
-
-  body?.insertBefore(anchorTop, body.firstChild);
-  body?.appendChild(anchorBottom);
-}
-
-export function helperRemoveAnchorElements(iframeElement: HTMLElement) {
-  const body = iframeElement.getElementsByTagName("body")[0];
-  const anchorTop = body?.querySelector(`#${iframeAnchors.top}`);
-  const anchorBottom = body?.querySelector(`#${iframeAnchors.bottom}`);
-  if (anchorTop) {
-    anchorTop.parentElement?.removeChild(anchorTop);
-  }
-  if (anchorBottom) {
-    anchorBottom.parentElement?.removeChild(anchorBottom);
-  }
-}