@readium/navigator 1.2.0

package/src/epub/frame/index.ts

@@ -0,0 +1,3 @@
+export * from "./FrameComms";
+export * from "./FrameManager";
+export * from "./FramePoolManager";

package/src/epub/fxl/FXLCoordinator.ts

@@ -0,0 +1,152 @@
+import sML from "../../helpers/sML";
+
+export interface Point {
+    X: number;
+    Y: number;
+}
+
+export enum HorizontalThird {
+    Left,
+    Center,
+    Right
+}
+
+export enum VerticalThird {
+    Top,
+    Middle,
+    Bottom
+}
+
+export interface NinthPoint {
+    X: HorizontalThird | null;
+    Y: VerticalThird | null;
+}
+
+export interface BibiEvent {
+    Target: EventTarget | null;
+    Coord: Point | null;
+    Ratio: Point | null;
+    Division: NinthPoint | null;
+}
+
+export class FXLCoordinator {
+    HTML: HTMLElement;
+    Head: HTMLHeadElement;
+    Body: HTMLElement;
+
+    constructor() {
+        this.HTML  = document.documentElement;
+        this.Head  = document.head;
+        this.Body  = document.body;
+    }
+
+    /*
+    getElementCoord(El: any) {
+        var Coord = { X: El["offsetLeft"], Y: El["offsetTop"] };
+        while(El.offsetParent) El = El.offsetParent, Coord.X += El["offsetLeft"], Coord.Y += El["offsetTop"];
+        return Coord;
+    }
+    */
+
+    private outerWidth = 0;
+    private outerHeight = 0;
+    refreshOuterPixels(_: DOMRect) {
+        if(sML.OS.iOS) return; // No need on iOS
+        this.outerHeight = window.outerHeight - window.innerHeight;
+        if(sML.OS.Android && sML.UA.Chrome) {
+            if(window.screen.height > window.innerHeight)
+                // This is a hack: since outer/inner are zero, we assume there's a
+                // top (chrome url bar) and bottom (android controls) bar and divide
+                // by 1.5 because the top bar is roughtly 2x height of the bottom one
+                this.outerHeight = (window.screen.height - window.innerHeight) / 1.5;
+        }
+        this.outerWidth = window.outerWidth - window.innerWidth;
+    }
+
+    getBibiEventCoord(Eve: TouchEvent | MouseEvent, touch=0): Point {
+        const Coord: Point = { X:0, Y:0 };
+        if(/^touch/.test(Eve.type)) {
+            Coord.X = (Eve as TouchEvent).touches[touch].screenX;
+            Coord.Y = (Eve as TouchEvent).touches[touch].screenY;
+        } else {
+            Coord.X = (Eve as MouseEvent).screenX;
+            Coord.Y = (Eve as MouseEvent).screenY;
+        }
+        if(((Eve.target as HTMLElement).ownerDocument?.documentElement || (Eve.target as HTMLDocument).documentElement) === this.HTML) {
+            Coord.X -= (this.HTML.scrollLeft + this.Body.scrollLeft);
+            Coord.Y -= (this.HTML.scrollTop + this.Body.scrollTop);
+        } else {
+            /*
+            var Item = Eve.target.ownerDocument.documentElement.Item;
+            ItemCoord = this.getElementCoord(Item);
+            if(!Item.PrePaginated && !Item.Outsourcing) ItemCoord.X += settings.S["item-padding-left"], ItemCoord.Y += settings.S["item-padding-top"];
+            Coord.X = (Coord.X + ItemCoord.X - R.Main.scrollLeft) * R.Main.Transformation.Scale + R.Main.Transformation.Translation.X;
+            Coord.Y = (Coord.Y + ItemCoord.Y - R.Main.scrollTop ) * R.Main.Transformation.Scale + R.Main.Transformation.Translation.Y;
+            */
+        }
+        Coord.X -= this.outerWidth;
+        Coord.Y -= this.outerHeight;
+        return Coord;
+    }
+
+    getTouchDistance(Eve: TouchEvent) {
+        if (Eve.touches.length !== 2) return 0;
+        const x1 = Eve.touches[0].screenX - this.outerWidth;
+        const y1 = Eve.touches[0].screenY - this.outerHeight;
+        const x2 = Eve.touches[1].screenX - this.outerWidth;
+        const y2 = Eve.touches[1].screenY - this.outerHeight;
+        return Math.sqrt((Math.pow((x2 - x1), 2)) + (Math.pow((y2 - y1), 2)));
+    }
+
+    getTouchCenter(Eve: TouchEvent): Point | null {
+        if (Eve.touches.length !== 2) return null;
+        const subL = (this.HTML.scrollLeft + this.Body.scrollLeft);
+        const subT = (this.HTML.scrollTop + this.Body.scrollTop);
+        const x1 = Eve.touches[0].screenX - this.outerWidth - subL;
+        const y1 = Eve.touches[0].screenY - this.outerHeight - subT;
+        const x2 = Eve.touches[1].screenX - this.outerWidth - subL;
+        const y2 = Eve.touches[1].screenY - this.outerHeight - subT;
+        return { X: (x1 + x2) / 2, Y: (y1 + y2) / 2 };
+    }
+    
+    getBibiEvent(Eve: Event): BibiEvent {
+        if(!Eve) return {
+            Coord: null,
+            Division: null,
+            Ratio: null,
+            Target: null
+        };
+        const Coord = this.getBibiEventCoord(Eve as TouchEvent | MouseEvent);
+        let FlipperWidth = 0.3; // TODO flipper-width
+        const Ratio = {
+            X: Coord.X / window.innerWidth,
+            Y: Coord.Y / window.innerHeight
+        };
+        let BorderT, BorderB, BorderL, BorderR;
+        if(FlipperWidth < 1) { // Ratio
+            BorderL = BorderT =     FlipperWidth;
+            BorderR = BorderB = 1 - FlipperWidth;
+        } else { // Pixel to Ratio
+            BorderL = FlipperWidth / window.innerWidth;
+            BorderT = FlipperWidth / window.innerHeight;
+            BorderR = 1 - BorderL;
+            BorderB = 1 - BorderT;
+        }
+        const Division: NinthPoint = {
+            X: null,
+            Y: null
+        };
+        if(Ratio.X < BorderL) Division.X = HorizontalThird.Left;
+        else if(BorderR < Ratio.X) Division.X = HorizontalThird.Right;
+        else                       Division.X = HorizontalThird.Center;
+        if(Ratio.Y < BorderT) Division.Y = VerticalThird.Top;
+        else if(BorderB < Ratio.Y) Division.Y = VerticalThird.Bottom;
+        else                       Division.Y = VerticalThird.Middle;
+        return {
+            Target: Eve.target,
+            Coord: Coord,
+            Ratio: Ratio,
+            Division: Division
+        };
+    }
+}

package/src/epub/fxl/FXLFrameManager.ts

@@ -0,0 +1,286 @@
+import { Loader, ModuleName } from "@readium/navigator-html-injectables";
+import { Page, ReadingProgression } from "@readium/shared";
+import { FrameComms } from "../frame/FrameComms";
+import { FXLPeripherals } from "./FXLPeripherals";
+import { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
+
+export class FXLFrameManager {
+    private frame: HTMLIFrameElement;
+    private loader: Loader | undefined;
+    public source: string;
+    private comms: FrameComms | undefined;
+    private readonly peripherals: FXLPeripherals;
+
+    private currModules: ModuleName[] = [];
+
+    // NEW
+    public wrapper: HTMLDivElement;
+    public debugHref: string;
+    private loadPromise: Promise<Window> | undefined;
+    private showPromise: Promise<void> | undefined;
+
+    constructor(peripherals: FXLPeripherals, direction: ReadingProgression, debugHref: string) {
+        this.peripherals = peripherals;
+        this.debugHref = debugHref;
+        this.frame = document.createElement("iframe");
+        this.frame.classList.add("readium-navigator-iframe");
+        this.frame.classList.add("blank");
+        this.frame.scrolling = "no";
+        this.frame.style.visibility = "hidden";
+        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.style.display = "none";
+        this.frame.style.position = "absolute";
+        this.frame.style.pointerEvents = "none";
+        this.frame.style.transformOrigin = "0 0";
+        this.frame.style.transform = "scale(1)";
+        this.frame.style.background = "#fff";
+        this.frame.style.touchAction = "none";
+        this.frame.dataset.originalHref = debugHref;
+        this.source = "about:blank";
+
+        // NEW
+        this.wrapper = document.createElement("div");
+        this.wrapper.style.position = "relative";
+        this.wrapper.style.float = this.wrapper.style.cssFloat = direction === ReadingProgression.rtl ? "right" : "left";
+
+        this.wrapper.appendChild(this.frame);
+    }
+
+    async load(modules: ModuleName[], source: string): Promise<Window> {
+        if(this.source === source && this.loadPromise/* && this.loaded*/) {
+            if([...this.currModules].sort().join("|") === [...modules].sort().join("|")) {
+                return this.loadPromise;
+            }
+        }
+        if(this.loaded && this.source !== source) {
+            this.window.stop();
+        }
+        this.source = source;
+        this.loadPromise = new Promise((res, rej) => {
+            if(this.loader && this.loaded) {
+                const wnd = this.frame.contentWindow!;
+                // Check if currently loaded modules are equal
+                if([...this.currModules].sort().join("|") === [...modules].sort().join("|")) {
+                    try { res(wnd); this.loadPromise = undefined; } catch (error) { };
+                    return;
+                }
+                // TODO
+                this.comms?.halt();
+                this.loader.destroy();
+                this.loader = new Loader(wnd as ReadiumWindow, modules);
+                this.currModules = modules;
+                this.comms = undefined;
+                try { res(wnd); this.loadPromise = undefined; } catch (error) {}
+                return;
+            }
+            this.frame.addEventListener("load", () => {
+                const wnd = this.frame.contentWindow!;
+                this.loader = new Loader(wnd as ReadiumWindow, modules);
+                this.currModules = modules;
+                this.peripherals.observe(this.wrapper);
+                this.peripherals.observe(wnd);
+                try { res(wnd); } catch (error) {};
+            }, { once: true });
+            this.frame.addEventListener("error", (e) => {
+                try { rej(e.error); this.loadPromise = undefined; } catch (error) {};
+            }, { once: true });
+            this.frame.style.removeProperty("display");
+            this.frame.contentWindow!.location.replace(this.source);
+        });
+        return this.loadPromise;
+    }
+
+    // Parses the page size from the viewport meta tag of the loaded resource.
+    loadPageSize(): { width: number, height: number } {
+        const wnd = this.frame.contentWindow!;
+
+        // Try to get the page size from the viewport meta tag
+        const viewport = wnd.document.head.querySelector(
+            "meta[name=viewport]"
+        ) as HTMLMetaElement;
+        if (viewport) {
+            const regex = /(\w+) *= *([^\s,]+)/g;
+            let match;
+            let width = 0, height = 0;
+            while ((match = regex.exec(viewport.content))) {
+                if(match[1] === "width")
+                    width = Number.parseFloat(match[2]);
+                else if(match[1] === "height")
+                    height = Number.parseFloat(match[2]);
+            }
+            if(width > 0 && height > 0)
+                return { width, height };
+        }
+
+        // Otherwise get it from the size of the loaded content
+        return {
+            width: wnd.document.body.scrollWidth,
+            height: wnd.document.body.scrollHeight
+        }
+    }
+
+    update(page?: Page) {
+        if(!this.loaded) return;
+        const dimensions = this.loadPageSize();
+        this.frame.style.height = `${dimensions.height}px`;
+        this.frame.style.width = `${dimensions.width}px`;
+        const ratio = Math.min(this.wrapper.clientWidth / dimensions.width, this.wrapper.clientHeight / dimensions.height);
+        this.frame.style.transform = `scale(${ratio})`;
+        const bcr = this.frame.getBoundingClientRect();
+        const hdiff = this.wrapper.clientHeight - bcr.height;
+        this.frame.style.top = `${hdiff / 2}px`;
+        if(page === Page.left) {
+            const wdiff = this.wrapper.clientWidth - bcr.width;
+            this.frame.style.left = `${wdiff}px`;
+        } else if(page === Page.center) {
+            const wdiff = this.wrapper.clientWidth - bcr.width;
+            this.frame.style.left = `${wdiff / 2}px`;
+        } else {
+            this.frame.style.left = "0px";
+        }
+
+        this.frame.style.removeProperty("visibility");
+        this.frame.style.removeProperty("aria-hidden");
+        this.frame.style.removeProperty("pointer-events");
+        this.frame.classList.remove("blank");
+        this.frame.classList.add("loaded");
+    }
+
+    async destroy() {
+        await this.unfocus();
+        this.loader?.destroy();
+        this.wrapper.remove();
+    }
+
+    async unload() {
+        if(!this.loaded) return;
+        this.deselect();
+        this.frame.style.visibility = "hidden";
+        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.style.pointerEvents = "none";
+        this.frame.classList.add("blank");
+        this.frame.classList.remove("loaded");
+        this.comms?.halt();
+        this.loader?.destroy();
+        this.comms = undefined;
+        this.frame.blur();
+        return new Promise<void>((res, rej) => {
+            this.frame.addEventListener("load", () => {
+                try { this.showPromise = undefined; res(); } catch (error) {};
+            }, { once: true });
+            this.frame.addEventListener("error", (e) => {
+                try { this.showPromise = undefined; rej(e.error); } catch (error) {};
+            }, { once: true });
+            this.source = "about:blank";
+            this.frame.contentWindow!.location.replace("about:blank");
+            this.frame.style.display = "none";
+        });
+    }
+
+    deselect() {
+        this.frame.contentWindow?.getSelection()?.removeAllRanges();
+    }
+
+    async unfocus(): Promise<void> {
+        if(this.frame.parentElement) {
+            if(this.comms === undefined) return;
+            return new Promise((res, _) => {
+                this.comms?.send("unfocus", undefined, (_: boolean) => {
+                    this.comms?.halt();
+                    this.showPromise = undefined;
+                    res();
+                });
+            });
+        } else
+            this.comms?.halt();
+    }
+
+    private cachedPage: Page | undefined = undefined;
+    async show(page: Page): Promise<void> {
+        if(!this.frame.parentElement) {
+            console.warn("Trying to show frame that is not attached to the DOM");
+            return;
+        }
+        if(!this.loaded) {
+            this.showPromise = undefined;
+            return;
+        }
+        if(this.showPromise) {
+            if(this.cachedPage !== page) {
+                this.update(page); // TODO fix that this can theoretically happen before the page is fully loaded
+                this.cachedPage = page;
+            }
+            return this.showPromise;
+        };
+        // this.update(page);
+        this.cachedPage = page;
+        if(this.comms) this.comms.resume();
+        else this.comms = new FrameComms(this.frame.contentWindow!, this.source);
+        this.showPromise = new Promise<void>((res, _) => {
+            this.comms!.send("focus", undefined, (_: boolean) => {
+                // this.showPromise = undefined; Don't do this
+                this.update(this.cachedPage);
+                res();
+            });
+        });
+        return this.showPromise;
+    }
+
+    async activate(): Promise<void> {
+        return new Promise<void>((res, _) => {
+            if(!this.comms) return res(); // TODO: investigate when this is the case
+            this.comms?.send("activate", undefined, () => {
+                res();
+            });
+        });
+    }
+
+    get element() {
+        return this.wrapper;
+    }
+
+    get iframe() {
+        return this.frame;
+    }
+
+    get realSize() {
+        return this.frame.getBoundingClientRect();
+    }
+
+    get loaded() {
+        return this.frame.contentWindow && this.frame.contentWindow.location.href !== "about:blank";
+    }
+
+    set width(width: number) {
+        const newWidth = `${width}%`;
+        if(this.wrapper.style.width === newWidth) return;
+        this.wrapper.style.width = newWidth;
+    }
+
+    set height(height: number) {
+        const newHeight = `${height}px`;
+        if(this.wrapper.style.height === newHeight) return;
+        this.wrapper.style.height = newHeight;
+    }
+
+    get window() {
+        if(!this.frame.contentWindow) throw Error("Trying to use frame window when it doesn't exist");
+        return this.frame.contentWindow;
+    }
+
+    get atLeft() {
+        return this.window.scrollX < 5;
+    }
+
+    get atRight() {
+        return this.window.scrollX > this.window.document.scrollingElement!.scrollWidth - this.window.innerWidth - 5
+    }
+
+    get msg() {
+        return this.comms;
+    }
+
+    get ldr() {
+        return this.loader;
+    }
+}