@readium/navigator-html-injectables 1.2.0

package/src/helpers/document.ts

@@ -0,0 +1,43 @@
+import { ReadiumWindow } from "./dom";
+
+export function isRTL(wnd: ReadiumWindow): boolean {
+    return wnd.document.body.dir.toLowerCase() === "rtl";
+}
+
+export function getColumnCountPerScreen(wnd: ReadiumWindow) {
+    return parseInt(
+        wnd.getComputedStyle(
+            wnd.document.documentElement
+        ).getPropertyValue("column-count")
+    );
+}
+
+/**
+ * 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.
+ */
+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";
+                virtualCol.style.breakBefore = "column";
+                virtualCol.innerHTML = "​"; // zero-width space
+                wnd.document.body.appendChild(virtualCol);
+            }
+        }
+    }
+}

package/src/helpers/dom.ts

@@ -0,0 +1,126 @@
+// (From swift-toolkit @ https://github.com/hypothesis/client/blob/main/src/annotator/highlighter.ts)
+
+import { Locator, LocatorLocations, LocatorText } from "@readium/shared";
+import type { getCssSelector } from "css-selector-generator";
+
+type BlockedEventData = [0, Function, any[], any[]] | [1, Event, EventTarget];
+
+// This is what is injected into the HTML documents
+export interface ReadiumWindow extends Window {
+    _readium_blockEvents: boolean;
+    _readium_blockedEvents: BlockedEventData[];
+    _readium_eventBlocker: EventListenerOrEventListenerObject;
+    _readium_cssSelectorGenerator: {
+        getCssSelector: typeof getCssSelector;
+    };
+}
+
+export function deselect(wnd: ReadiumWindow) {
+    const currentSelection = wnd.getSelection();
+    if(currentSelection) currentSelection.removeAllRanges();
+}
+
+const interactiveTags = [
+    "a",
+    "audio",
+    "button",
+    "canvas",
+    "details",
+    "input",
+    "label",
+    "option",
+    "select",
+    "submit",
+    "textarea",
+    "video",
+];
+
+// See https://github.com/JayPanoz/architecture/tree/touch-handling/misc/touch-handling
+export function nearestInteractiveElement(element: Element): Element | null {
+    if (interactiveTags.indexOf(element.nodeName.toLowerCase()) !== -1) {
+        return element;
+    }
+
+    // Checks whether the element is editable by the user.
+    if (
+        element.hasAttribute("contenteditable") &&
+        element.getAttribute("contenteditable")?.toLowerCase() !== "false"
+    ) {
+        return element;
+    }
+
+    // Checks parents recursively because the touch might be for example on an <em> inside a <a>.
+    if (element.parentElement) {
+        return nearestInteractiveElement(element.parentElement);
+    }
+
+    return 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);
+    return new Locator({
+        href: "#",
+        type: "application/xhtml+xml",
+        locations: new LocatorLocations({
+            otherLocations: new Map([
+                ["cssSelector", wnd._readium_cssSelectorGenerator.getCssSelector(element)]
+            ])
+        }),
+        text: new LocatorText({
+            highlight: element.textContent || undefined
+        }),
+    });
+}
+
+function findElement(wnd: ReadiumWindow, rootElement: Element, scrolling: boolean): Element {
+    for (var i = 0; i < rootElement.children.length; i++) {
+        const child = rootElement.children[i];
+        if (!shouldIgnoreElement(child) && isElementVisible(wnd, child, scrolling)) {
+            return findElement(wnd, child, scrolling);
+        }
+    }
+    return rootElement;
+}
+
+function isElementVisible(wnd: ReadiumWindow, element: Element, scrolling: boolean) {
+    // if (readium.isFixedLayout) return true;
+
+    if (element === document.body || element === document.documentElement) {
+        return true;
+    }
+    if (!document || !document.documentElement || !document.body) {
+        return false;
+    }
+
+    const rect = element.getBoundingClientRect();
+    if (scrolling) {
+        return rect.bottom > 0 && rect.top < wnd.innerHeight;
+    } else {
+        return rect.right > 0 && rect.left < wnd.innerWidth;
+    }
+}
+
+function shouldIgnoreElement(element: Element) {
+    const elStyle = getComputedStyle(element);
+    if (elStyle) {
+        const display = elStyle.getPropertyValue("display");
+        if (display != "block") {
+            return true;
+        }
+        // Cannot be relied upon, because web browser engine reports invisible when out of view in
+        // scrolled columns!
+        // const visibility = elStyle.getPropertyValue("visibility");
+        // if (visibility === "hidden") {
+        //     return false;
+        // }
+        const opacity = elStyle.getPropertyValue("opacity");
+        if (opacity === "0") {
+            return true;
+        }
+    }
+
+    return false;
+}

package/src/helpers/locator.ts

@@ -0,0 +1,67 @@
+import { Locator } from "@readium/shared";
+import { TextQuoteAnchor } from "../vendor/hypothesis/anchoring/types";
+
+// Based on the kotlin-toolkit code
+export function rangeFromLocator(doc: Document, locator: Locator) {
+    try {
+      let locations = locator.locations;
+      let text = locator.text;
+      if (text && text.highlight) {
+        let root;
+        if (locations && locations.getCssSelector()) {
+          root = doc.querySelector(locations.getCssSelector()!);
+        }
+        if (!root) {
+          root = doc.body;
+        }
+  
+        let anchor = new TextQuoteAnchor(root, text.highlight, {
+          prefix: text.before,
+          suffix: text.after,
+        });
+        try {
+          return anchor.toRange();
+        } catch (error) {
+          // We don't watch to "crash" when the quote is not found
+          console.warn("Quote not found:", anchor);
+          return null;
+        }
+      }
+  
+      if (locations) {
+        var element = null;
+  
+        if (!element && locations.getCssSelector()) {
+          element = doc.querySelector(locations.getCssSelector()!);
+        }
+  
+        if (!element && locations.fragments) {
+          for (const htmlId of locations.fragments) {
+            element = doc.getElementById(htmlId);
+            if (element) {
+              break;
+            }
+          }
+        }
+  
+        if (element) {
+          let range = doc.createRange();
+
+          // This is a special case where the node is
+          // a single element with no children. Not sure
+          // yet how effective this is yet, may remove in future.
+          if(element.childNodes.length === 0) {
+            range.selectNodeContents(element);
+            return range;
+          }
+
+          range.setStartBefore(element);
+          range.setEndAfter(element);
+          return range;
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return null;
+  }

package/src/helpers/rect.ts

@@ -0,0 +1,301 @@
+// Mostly copied from the mobile toolkit and adjusted for typescript
+// https://github.com/readium/swift-toolkit/blob/develop/Sources/Navigator/EPUB/Scripts/src/rect.js
+
+export interface Rect {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+}
+
+export function getClientRectsNoOverlap(
+    range: Range,
+    doNotMergeHorizontallyAlignedRects: boolean
+) {
+    let clientRects = range.getClientRects();
+
+    // Try falling back to the client rects of the common ancestor of the range if it's an HTML Element
+    if(!clientRects.length)
+        if(range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE)
+            clientRects = (range.commonAncestorContainer as HTMLElement).getClientRects();
+
+    const tolerance = 1;
+    const originalRects: Rect[] = [];
+    for (const rangeClientRect of clientRects) {
+        originalRects.push({
+            bottom: rangeClientRect.bottom,
+            height: rangeClientRect.height,
+            left: rangeClientRect.left,
+            right: rangeClientRect.right,
+            top: rangeClientRect.top,
+            width: rangeClientRect.width,
+        });
+    }
+    const mergedRects = mergeTouchingRects(
+        originalRects,
+        tolerance,
+        doNotMergeHorizontallyAlignedRects
+    );
+    const noContainedRects = removeContainedRects(mergedRects, tolerance);
+    const newRects = replaceOverlapingRects(noContainedRects);
+    const minArea = 2 * 2;
+    for (let j = newRects.length - 1; j >= 0; j--) {
+        const rect = newRects[j];
+        const bigEnough = rect.width * rect.height > minArea;
+        if (!bigEnough) {
+            if (newRects.length > 1) {
+                // log("CLIENT RECT: remove small");
+                newRects.splice(j, 1);
+            } else {
+                // log("CLIENT RECT: remove small, but keep otherwise empty!");
+                break;
+            }
+        }
+    }
+    // log(`CLIENT RECT: reduced ${originalRects.length} --> ${newRects.length}`);
+    return newRects;
+}
+
+function mergeTouchingRects(
+    rects: Rect[],
+    tolerance: number,
+    doNotMergeHorizontallyAlignedRects: boolean
+): Rect[] {
+    for (let i = 0; i < rects.length; i++) {
+        for (let j = i + 1; j < rects.length; j++) {
+            const rect1 = rects[i];
+            const rect2 = rects[j];
+            if (rect1 === rect2) {
+                // log("mergeTouchingRects rect1 === rect2 ??!");
+                continue;
+            }
+            const rectsLineUpVertically =
+                almostEqual(rect1.top, rect2.top, tolerance) &&
+                almostEqual(rect1.bottom, rect2.bottom, tolerance);
+            const rectsLineUpHorizontally =
+                almostEqual(rect1.left, rect2.left, tolerance) &&
+                almostEqual(rect1.right, rect2.right, tolerance);
+            const horizontalAllowed = !doNotMergeHorizontallyAlignedRects;
+            const aligned =
+                (rectsLineUpHorizontally && horizontalAllowed) ||
+                (rectsLineUpVertically && !rectsLineUpHorizontally);
+            const canMerge = aligned && rectsTouchOrOverlap(rect1, rect2, tolerance);
+            if (canMerge) {
+                /*log(
+                  `CLIENT RECT: merging two into one, VERTICAL: ${rectsLineUpVertically} HORIZONTAL: ${rectsLineUpHorizontally} (${doNotMergeHorizontallyAlignedRects})`
+                );*/
+                const newRects = rects.filter((rect) => {
+                    return rect !== rect1 && rect !== rect2;
+                });
+                const replacementClientRect = getBoundingRect(rect1, rect2);
+                newRects.push(replacementClientRect);
+                return mergeTouchingRects(
+                    newRects,
+                    tolerance,
+                    doNotMergeHorizontallyAlignedRects
+                );
+            }
+        }
+    }
+    return rects;
+}
+
+function getBoundingRect(rect1: Rect, rect2: Rect) {
+    const left = Math.min(rect1.left, rect2.left);
+    const right = Math.max(rect1.right, rect2.right);
+    const top = Math.min(rect1.top, rect2.top);
+    const bottom = Math.max(rect1.bottom, rect2.bottom);
+    return {
+        bottom,
+        height: bottom - top,
+        left,
+        right,
+        top,
+        width: right - left,
+    };
+}
+
+function removeContainedRects(rects: Rect[], tolerance: number) {
+    const rectsToKeep = new Set(rects);
+    for (const rect of rects) {
+        const bigEnough = rect.width > 1 && rect.height > 1;
+        if (!bigEnough) {
+            // log("CLIENT RECT: remove tiny");
+            rectsToKeep.delete(rect);
+            continue;
+        }
+        for (const possiblyContainingRect of rects) {
+            if (rect === possiblyContainingRect) {
+                continue;
+            }
+            if (!rectsToKeep.has(possiblyContainingRect)) {
+                continue;
+            }
+            if (rectContains(possiblyContainingRect, rect, tolerance)) {
+                // log("CLIENT RECT: remove contained");
+                rectsToKeep.delete(rect);
+                break;
+            }
+        }
+    }
+    return Array.from(rectsToKeep);
+}
+
+function rectContains(rect1: Rect, rect2: Rect, tolerance: number) {
+    return (
+        rectContainsPoint(rect1, rect2.left, rect2.top, tolerance) &&
+        rectContainsPoint(rect1, rect2.right, rect2.top, tolerance) &&
+        rectContainsPoint(rect1, rect2.left, rect2.bottom, tolerance) &&
+        rectContainsPoint(rect1, rect2.right, rect2.bottom, tolerance)
+    );
+}
+
+export function rectContainsPoint(rect: Rect, x: number, y: number, tolerance: number) {
+    return (
+        (rect.left < x || almostEqual(rect.left, x, tolerance)) &&
+        (rect.right > x || almostEqual(rect.right, x, tolerance)) &&
+        (rect.top < y || almostEqual(rect.top, y, tolerance)) &&
+        (rect.bottom > y || almostEqual(rect.bottom, y, tolerance))
+    );
+}
+
+function replaceOverlapingRects(rects: Rect[]): Rect[] {
+    for (let i = 0; i < rects.length; i++) {
+        for (let j = i + 1; j < rects.length; j++) {
+            const rect1 = rects[i];
+            const rect2 = rects[j];
+            if (rect1 === rect2) {
+                // log("replaceOverlapingRects rect1 === rect2 ??!");
+                continue;
+            }
+            if (rectsTouchOrOverlap(rect1, rect2, -1)) {
+                let toAdd = [];
+                let toRemove: Rect;
+                const subtractRects1 = rectSubtract(rect1, rect2);
+                if (subtractRects1.length === 1) {
+                    toAdd = subtractRects1;
+                    toRemove = rect1;
+                } else {
+                    const subtractRects2 = rectSubtract(rect2, rect1);
+                    if (subtractRects1.length < subtractRects2.length) {
+                        toAdd = subtractRects1;
+                        toRemove = rect1;
+                    } else {
+                        toAdd = subtractRects2;
+                        toRemove = rect2;
+                    }
+                }
+                // log(`CLIENT RECT: overlap, cut one rect into ${toAdd.length}`);
+                const newRects = rects.filter((rect) => {
+                    return rect !== toRemove;
+                });
+                Array.prototype.push.apply(newRects, toAdd);
+                return replaceOverlapingRects(newRects);
+            }
+        }
+    }
+    return rects;
+}
+
+function rectSubtract(rect1: Rect, rect2: Rect) {
+    const rectIntersected = rectIntersect(rect2, rect1);
+    if (rectIntersected.height === 0 || rectIntersected.width === 0) {
+        return [rect1];
+    }
+    const rects = [];
+    {
+        const rectA = {
+            bottom: rect1.bottom,
+            height: 0,
+            left: rect1.left,
+            right: rectIntersected.left,
+            top: rect1.top,
+            width: 0,
+        };
+        rectA.width = rectA.right - rectA.left;
+        rectA.height = rectA.bottom - rectA.top;
+        if (rectA.height !== 0 && rectA.width !== 0) {
+            rects.push(rectA);
+        }
+    }
+    {
+        const rectB = {
+            bottom: rectIntersected.top,
+            height: 0,
+            left: rectIntersected.left,
+            right: rectIntersected.right,
+            top: rect1.top,
+            width: 0,
+        };
+        rectB.width = rectB.right - rectB.left;
+        rectB.height = rectB.bottom - rectB.top;
+        if (rectB.height !== 0 && rectB.width !== 0) {
+            rects.push(rectB);
+        }
+    }
+    {
+        const rectC = {
+            bottom: rect1.bottom,
+            height: 0,
+            left: rectIntersected.left,
+            right: rectIntersected.right,
+            top: rectIntersected.bottom,
+            width: 0,
+        };
+        rectC.width = rectC.right - rectC.left;
+        rectC.height = rectC.bottom - rectC.top;
+        if (rectC.height !== 0 && rectC.width !== 0) {
+            rects.push(rectC);
+        }
+    }
+    {
+        const rectD = {
+            bottom: rect1.bottom,
+            height: 0,
+            left: rectIntersected.right,
+            right: rect1.right,
+            top: rect1.top,
+            width: 0,
+        };
+        rectD.width = rectD.right - rectD.left;
+        rectD.height = rectD.bottom - rectD.top;
+        if (rectD.height !== 0 && rectD.width !== 0) {
+            rects.push(rectD);
+        }
+    }
+    return rects;
+}
+
+function rectIntersect(rect1: Rect, rect2: Rect) {
+    const maxLeft = Math.max(rect1.left, rect2.left);
+    const minRight = Math.min(rect1.right, rect2.right);
+    const maxTop = Math.max(rect1.top, rect2.top);
+    const minBottom = Math.min(rect1.bottom, rect2.bottom);
+    return {
+        bottom: minBottom,
+        height: Math.max(0, minBottom - maxTop),
+        left: maxLeft,
+        right: minRight,
+        top: maxTop,
+        width: Math.max(0, minRight - maxLeft),
+    };
+}
+
+function rectsTouchOrOverlap(rect1: Rect, rect2: Rect, tolerance: number) {
+    return (
+        (rect1.left < rect2.right ||
+            (tolerance >= 0 && almostEqual(rect1.left, rect2.right, tolerance))) &&
+        (rect2.left < rect1.right ||
+            (tolerance >= 0 && almostEqual(rect2.left, rect1.right, tolerance))) &&
+        (rect1.top < rect2.bottom ||
+            (tolerance >= 0 && almostEqual(rect1.top, rect2.bottom, tolerance))) &&
+        (rect2.top < rect1.bottom ||
+            (tolerance >= 0 && almostEqual(rect2.top, rect1.bottom, tolerance)))
+    );
+}
+
+function almostEqual(a: number, b: number, tolerance: number) {
+    return Math.abs(a - b) <= tolerance;
+}

package/src/helpers/scrollSnapperHelper.ts

@@ -0,0 +1,43 @@
+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);
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './comms';
+export * from './modules';
+export * from './Loader';