@readium/navigator-html-injectables 1.2.0

package/src/modules/setup/FixedSetup.ts

@@ -0,0 +1,73 @@
+import { Comms } from "../../comms/comms";
+import { Setup } from "./Setup";
+import { removeProperty, setProperty } from "../../helpers/css";
+import { ModuleName } from "../ModuleLibrary";
+import { ReadiumWindow, deselect } from "../../helpers/dom";
+
+const FIXED_STYLE_ID = "readium-fixed-style";
+
+export class FixedSetup extends Setup {
+    static readonly moduleName: ModuleName = "fixed_setup";
+
+    mount(wnd: ReadiumWindow, comms: Comms): boolean {
+        if(!super.mount(wnd, comms)) return false;
+
+        const style = wnd.document.createElement("style");
+        style.id = FIXED_STYLE_ID;
+        style.dataset.readium = "true";
+        style.textContent = `
+        html, body {
+            text-size-adjust: none;
+            -ms-text-size-adjust: none;
+            -webkit-text-size-adjust: none;
+            -moz-text-size-adjust: none;
+
+            /* Fight Safari pinches */
+            touch-action: none !important;
+            min-height: 100%;
+
+            /*cursor: var() TODO*/
+        }`;
+        wnd.document.head.appendChild(style);
+
+        comms.register("set_property", FixedSetup.moduleName, (data, ack) => {
+            const kv = data as string[];
+            setProperty(wnd, kv[0], kv[1]);
+            ack(true);
+        })
+        comms.register("remove_property", FixedSetup.moduleName, (data, ack) => {
+            removeProperty(wnd, data as string);
+            ack(true);
+        })
+
+        comms.register("first_visible_locator", FixedSetup.moduleName, (_, ack) => ack(false))
+
+        comms.register("unfocus", FixedSetup.moduleName, (_, ack) => {
+            deselect(wnd);
+            ack(true);
+        });
+
+        comms.register([
+            "focus", "go_next", "go_prev",
+            "go_id", "go_end", "go_start", "go_text",
+            "go_progression"
+        ], FixedSetup.moduleName, (_, ack) => ack(true));
+
+        comms.register("activate", FixedSetup.moduleName, (_, ack) => {
+            this.unblock(wnd as ReadiumWindow);
+            ack(true);
+        });
+
+        comms.log("FixedSetup Mounted");
+        return true;
+    }
+
+    unmount(wnd: ReadiumWindow, comms: Comms): boolean {
+        comms.unregisterAll(FixedSetup.moduleName);
+
+        wnd.document.getElementById(FIXED_STYLE_ID)?.remove();
+
+        comms.log("FixedSetup Unmounted");
+        return super.unmount(wnd, comms);
+    }
+}

package/src/modules/setup/ReflowableSetup.ts

@@ -0,0 +1,65 @@
+import { Comms } from "../../comms/comms";
+import { Setup } from "./Setup";
+import { removeProperty, setProperty } from "../../helpers/css";
+import { ReadiumWindow } from "../../helpers/dom";
+
+const VIEWPORT_META_TAG_ID = "readium-viewport";
+
+export class ReflowableSetup extends Setup {
+    static readonly moduleName = "reflowable_setup";
+
+    onViewportWidthChanged(event: Event) {
+        const wnd = event.target as ReadiumWindow;
+        // const pageWidth = wnd.innerWidth / wnd.devicePixelRatio;
+        setProperty(wnd, "--RS__viewportWidth", `${wnd.innerWidth}px`);
+    }
+
+    mount(wnd: ReadiumWindow, comms: Comms): boolean {
+        if(!super.mount(wnd, comms)) return false;
+
+        // Add viewport tag
+        const meta = wnd.document.createElement("meta");
+        meta.dataset.readium = "true";
+        meta.setAttribute("name", "viewport");
+        meta.setAttribute("id", VIEWPORT_META_TAG_ID);
+        meta.setAttribute(
+            "content",
+            "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"
+        );
+        wnd.document.head.appendChild(meta);
+
+        // Listen for resize/orientationchange to update viewport width
+        wnd.addEventListener("orientationchange", this.onViewportWidthChanged);
+        wnd.addEventListener("resize", this.onViewportWidthChanged);
+        this.onViewportWidthChanged({
+            target: wnd
+        } as any); // Cheat!
+
+        comms.register("set_property", ReflowableSetup.moduleName, (data, ack) => {
+            const kv = data as string[];
+            setProperty(wnd, kv[0], kv[1]);
+            ack(true);
+        });
+        comms.register("remove_property", ReflowableSetup.moduleName, (data, ack) => {
+            removeProperty(wnd, data as string);
+            ack(true);
+        });
+
+        comms.register("activate", ReflowableSetup.moduleName, (_, ack) => {
+            this.unblock(wnd as ReadiumWindow);
+            ack(true);
+        });
+
+        comms.log("ReflowableSetup Mounted");
+        return true;
+    }
+
+    unmount(wnd: ReadiumWindow, comms: Comms): boolean {
+        comms.unregisterAll(ReflowableSetup.moduleName);
+        wnd.document.head.querySelector(`#${VIEWPORT_META_TAG_ID}`)?.remove();
+        wnd.removeEventListener("orientationchange", this.onViewportWidthChanged);
+
+        comms.log("ReflowableSetup Unmounted");
+        return super.unmount(wnd, comms);
+    }
+}

package/src/modules/setup/Setup.ts

@@ -0,0 +1,131 @@
+import { Comms } from "../../comms/comms";
+import { ReadiumWindow } from "../../helpers/dom";
+import { Module } from "../Module";
+import { ModuleName } from "../ModuleLibrary";
+
+export abstract class Setup extends Module {
+    static readonly moduleName: ModuleName = "setup";
+
+    private comms!: Comms;
+
+    wndOnErr(event: ErrorEvent) {
+        this.comms?.send("error", {
+            message: event.message,
+            filename: event.filename,
+            lineno: event.lineno,
+            colno: event.colno
+        });
+    }
+
+    protected unblock(wnd: ReadiumWindow) {
+        wnd._readium_blockEvents = false;
+        while(wnd._readium_blockedEvents?.length > 0) {
+            const x = wnd._readium_blockedEvents.shift()!;
+            switch(x[0]) {
+                case 0:
+                    Reflect.apply(x[1], x[2], x[3]);
+                    break;
+                case 1:
+                    const ev = x[1];
+                    const evTarget = x[2];
+                    wnd.removeEventListener(ev.type, wnd._readium_eventBlocker, true);
+                    const evt = new Event(ev.type, {
+                        bubbles: ev.bubbles,
+                        cancelable: ev.cancelable
+                    });
+                    if(evTarget) evTarget.dispatchEvent(evt);
+                    else wnd.dispatchEvent(evt);
+                    break;
+            }
+        }
+    }
+
+    // <audio> & <video> playback handling
+    private mediaPlayingCount = 0;
+
+    private onMediaPlayEvent() {
+        this.mediaPlayingCount++;
+        this.comms?.send("media_play", this.mediaPlayingCount);
+    }
+
+    private onMediaPauseEvent() {
+        if(this.mediaPlayingCount > 0) this.mediaPlayingCount--;
+        this.comms?.send("media_pause", this.mediaPlayingCount);
+    }
+
+    private pauseAllMedia(wnd: ReadiumWindow) {
+        const avEls = wnd.document.querySelectorAll("audio,video");
+        for (let i = 0; i < avEls.length; i++) {
+            (avEls[i] as HTMLMediaElement).pause();
+        }
+    }
+
+    private allAnimations = new Set<Animation>();
+
+    mount(wnd: ReadiumWindow, comms: Comms): boolean {
+        this.comms = comms;
+
+        // Track all window errors
+        wnd.addEventListener(
+            "error",
+            this.wndOnErr,
+            false
+        );
+
+        // Add all currently active animations and cancel them
+        if("getAnimations" in wnd.document) {
+            wnd.document.getAnimations().forEach((a) => {
+                a.cancel();
+                this.allAnimations.add(a);
+            });
+        }
+
+        comms.register("activate", Setup.moduleName, (_, ack) => {
+            // Restart all animations
+            this.allAnimations.forEach(a => {
+                a.cancel();
+                a.play();
+            });
+
+            ack(true);
+        });
+
+        comms.register("unfocus", Setup.moduleName, (_, ack) => {
+            // When a document is unfocused, all media is paused
+            this.pauseAllMedia(wnd);
+
+            // ... and all animations are paused
+            // They *not* cancelled because the user can see the sudden jump back to start
+            this.allAnimations.forEach(a => a.pause());
+
+            ack(true);
+        });
+
+        // Track play/pause of all <audio> and <video> elements
+        const avEls = wnd.document.querySelectorAll("audio,video");
+        for (let i = 0; i < avEls.length; i++) {
+            const e = avEls[i] as HTMLAudioElement | HTMLVideoElement;
+            e.addEventListener("play", this.onMediaPlayEvent, {
+                passive: true
+            });
+            e.addEventListener("pause", this.onMediaPauseEvent, {
+                passive: true
+            });
+        }
+
+        comms.log("Setup Mounted");
+        return true;
+    }
+
+    unmount(wnd: ReadiumWindow, comms: Comms): boolean {
+        wnd.removeEventListener("error", this.wndOnErr);
+        wnd.removeEventListener("play", this.onMediaPlayEvent);
+        wnd.removeEventListener("pause", this.onMediaPauseEvent);
+
+        this.allAnimations.forEach(a => a.cancel());
+        this.allAnimations.clear();
+
+        comms.log("Setup Unmounted");
+        return true;
+    }
+}