Preferences API

navigator-html-injectables/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator-html-injectables",
-  "version": "1.3.3",
+  "version": "2.0.0-beta.1",
   "type": "module",
   "description": "An embeddable solution for connecting frames of HTML publications with a Readium Navigator",
   "author": "readium",
@@ -48,7 +48,6 @@
     "node": ">=18"
   },
   "devDependencies": {
-    "@juggle/resize-observer": "^3.4.0",
     "@readium/shared": "workspace:*",
     "css-selector-generator": "^3.6.9",
     "tslib": "^2.6.1",

navigator-html-injectables/src/comms/keys.ts

@@ -28,6 +28,8 @@ export type CommsCommandKey =
     "go_end" |
     "go_start" |
     "go_progression" |
+    "get_properties" | 
+    "update_properties" | 
     "set_property" |
     "remove_property" |
     // "exact_progress" |

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

@@ -0,0 +1,114 @@
+export const colorToRgba = (color: string): { r: number; g: number; b: number; a: number; } => {
+  if (color.startsWith("rgb")) {
+    const rgb = color.match(/rgb\((\d+),\s(\d+),\s(\d+)(?:,\s(\d+))?\)/);
+    if (rgb) {
+      return {
+        r: parseInt(rgb[1], 10),
+        g: parseInt(rgb[2], 10),
+        b: parseInt(rgb[3], 10),
+        a: rgb[4] ? parseInt(rgb[4], 10) / 255 : 1,
+      };
+    }
+  } else if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    if (hex.length === 3 || hex.length === 4) {
+      return {
+        r: parseInt(hex[0] + hex[0], 16) / 255,
+        g: parseInt(hex[1] + hex[1], 16) / 255,
+        b: parseInt(hex[2] + hex[2], 16) / 255,
+        a: hex.length === 4 ? parseInt(hex[3] + hex[3], 16) / 255 : 1,
+      };
+    } else if (hex.length === 6 || hex.length === 8) {
+      return {
+        r: parseInt(hex[0] + hex[1], 16) / 255,
+        g: parseInt(hex[2] + hex[3], 16) / 255,
+        b: parseInt(hex[4] + hex[5], 16) / 255,
+        a: hex.length === 8 ? parseInt(hex[6] + hex[7], 16) / 255 : 1,
+      };
+    }
+  }
+  return { r: 0, g: 0, b: 0, a: 1 };
+};
+
+export const getLuminance = (color: { r: number; g: number; b: number; a: number }): number => {
+  return 0.2126 * color.r * color.a + 0.7152 * color.g * color.a + 0.0722 * color.b * color.a;
+}
+
+export const isDarkColor = (color: string): boolean => {
+  const rgba = colorToRgba(color);
+  const luminance = getLuminance(rgba);
+  return luminance < 128;
+};
+
+export const isLightColor = (color: string): boolean => !isDarkColor(color);
+
+export const checkContrast = (color1: string, color2: string): number => {
+  const rgba1 = colorToRgba(color1);
+  const rgba2 = colorToRgba(color2);
+  const lum1 = getLuminance(rgba1);
+  const lum2 = getLuminance(rgba2);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+};
+
+export const ensureContrast = (color1: string, color2: string, contrast: number = 4.5): string[] => {
+  const c1 = colorToRgba(color1);
+  const c2 = colorToRgba(color2);
+
+  const lum1 = getLuminance(c1);
+  const lum2 = getLuminance(c2);
+  const [darkest, brightest] = lum1 < lum2 ? [lum1, lum2] : [lum2, lum1];
+
+  const contrastRatio = (brightest + 0.05) / (darkest + 0.05);
+  if (contrastRatio >= contrast) {
+    return [
+      `rgba(${c1.r}, ${c1.g}, ${c1.b}, ${c1.a})`, 
+      `rgba(${c2.r}, ${c2.g}, ${c2.b}, ${c2.a})`
+    ];
+  }
+
+  const adjustColor = (color: { r: number; g: number; b: number; a: number }, delta: number) => ({
+    r: Math.max(0, Math.min(255, color.r + delta)),
+    g: Math.max(0, Math.min(255, color.g + delta)),
+    b: Math.max(0, Math.min(255, color.b + delta)),
+    a: color.a
+  });
+
+  const delta = ((contrast - contrastRatio) * 255) / (contrastRatio + 0.05);
+  let correctedColor: { r: number; g: number; b: number; a: number };
+  let otherColor: { r: number; g: number; b: number; a: number };
+  if (lum1 < lum2) {
+    correctedColor = c1;
+    otherColor = c2;
+  } else {
+    correctedColor = c2;
+    otherColor = c1;
+  }
+
+  const correctedColorAdjusted = adjustColor(correctedColor, -delta);
+  const newLum = getLuminance(correctedColorAdjusted);
+  const newContrastRatio = (brightest + 0.05) / (newLum + 0.05);
+
+  if (newContrastRatio < contrast) {
+    const updatedDelta = ((contrast - newContrastRatio) * 255) / (newContrastRatio + 0.05);
+    const otherColorAdjusted = adjustColor(otherColor, updatedDelta);
+    return [
+      lum1 < lum2 
+        ? `rgba(${correctedColorAdjusted.r}, ${correctedColorAdjusted.g}, ${correctedColorAdjusted.b}, ${correctedColorAdjusted.a})` 
+        : `rgba(${otherColorAdjusted.r}, ${otherColorAdjusted.g}, ${otherColorAdjusted.b}, ${otherColorAdjusted.a})`,
+      lum1 < lum2 
+        ? `rgba(${otherColorAdjusted.r}, ${otherColorAdjusted.g}, ${otherColorAdjusted.b}, ${otherColorAdjusted.a})` 
+        : `rgba(${correctedColorAdjusted.r}, ${correctedColorAdjusted.g}, ${correctedColorAdjusted.b}, ${correctedColorAdjusted.a})`,
+    ];
+  }
+
+  return [
+    lum1 < lum2
+      ? `rgba(${correctedColorAdjusted.r}, ${correctedColorAdjusted.g}, ${correctedColorAdjusted.b}, ${correctedColorAdjusted.a})` 
+      : `rgba(${otherColor.r}, ${otherColor.g}, ${otherColor.b}, ${otherColor.a})`,
+    lum1 < lum2
+      ? `rgba(${otherColor.r}, ${otherColor.g}, ${otherColor.b}, ${otherColor.a})` 
+      : `rgba(${correctedColorAdjusted.r}, ${correctedColorAdjusted.g}, ${correctedColorAdjusted.b}, ${correctedColorAdjusted.a})`,
+  ];
+};

navigator-html-injectables/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);

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

@@ -13,31 +13,32 @@ export function getColumnCountPerScreen(wnd: ReadiumWindow) {
 }
 
 /**
- * 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";
-                virtualCol.style.breakBefore = "column";
-                virtualCol.innerHTML = "​"; // zero-width space
-                wnd.document.body.appendChild(virtualCol);
-            }
+    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";
+            virtualCol.style.breakBefore = "column";
+            virtualCol.innerHTML = "&#8203;"; // zero-width space
+            wnd.document.body.appendChild(virtualCol);
         }
     }
 }

navigator-html-injectables/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

navigator-html-injectables/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]);