up

Author: arthur-lemeur

src/renderer/assets/styles/components/modals.scss

@@ -55,6 +55,7 @@
       height: calc(100vh - 100px);
     }
   }
+
   background-color: var(--color-neutral-base);
   color: var(--color-text-primary);
 

src/renderer/reader/redux/sagas/img.ts

@@ -9,9 +9,11 @@ import debug_ from "debug";
 import { setImageClickHandler } from "@r2-navigator-js/electron/renderer";
 import { takeSpawnEveryChannel } from "readium-desktop/common/redux/sagas/takeSpawnEvery";
 import { eventChannel, buffers } from "redux-saga";
-import { put as putTyped } from "typed-redux-saga";
+import { put as putTyped, call as callTyped } from "typed-redux-saga";
 import { readerLocalActionSetImageClick } from "../actions";
 import { IEventPayload_R2_EVENT_IMAGE_CLICK } from "@r2-navigator-js/electron/common/events";
+import { cleanupStr } from "./search/transliteration";
+import { getResourceCache } from "readium-desktop/common/redux/sagas/resourceCache";
 
 // Logger
 const filename_ = "readium-desktop:renderer:reader:saga:img";
@@ -44,6 +46,143 @@ function* webviewImageClick(payload: IEventPayload_R2_EVENT_IMAGE_CLICK) {
 
     debug("IMAGE_CLICK received :", payload);
     yield* putTyped(readerLocalActionSetImageClick.build(payload));
+
+    const { hostDocumentURL: source, cssSelectorOf_HTMLImg_SVGImage_SVGFragment } = payload;
+
+    const cacheDoc = yield* callTyped(getResourceCache, source);
+    const xmlDom = cacheDoc?.xmlDom;
+
+    const rootElem = xmlDom.body;
+    const imgElem = xmlDom.querySelector(cssSelectorOf_HTMLImg_SVGImage_SVGFragment);
+    console.log("IMGElem", imgElem);
+    console.log("ImgElem Attributes", imgElem.attributes);
+    // const altAttributes = imgElem.getAttribute("alt");
+    // const titleAttributes = imgElem.getAttribute("title");
+    // const ariaLabelAttributes = imgElem.getAttribute("aria-label");
+    const ariaDetailsAttributes = imgElem.getAttribute("aria-details");
+    console.log("ariaDetailsAttributes", ariaDetailsAttributes);
+    const ariaDescribedbyAttributes = imgElem.getAttribute("aria-describedby");
+    console.log("ariaDescribedbyAttributes", ariaDescribedbyAttributes);
+
+
+    // https://kb.daisy.org/publishing/docs/html/images-desc.html
+
+    // is Surrounded by a Figure tag ?
+    let figureElem = undefined;
+    {
+        let currElem = imgElem;
+        while (rootElem !== currElem.parentElement) {
+            if (currElem.nodeName === "FIGURE" || currElem.nodeName === "figure") {
+                figureElem = currElem;
+                console.log("FIGURE ELEM", figureElem);
+                break;
+            }
+            currElem = currElem.parentElement;
+        }
+    }
+
+    let detailsText = "";
+    if (ariaDetailsAttributes) {
+        const elem = xmlDom.getElementById(ariaDetailsAttributes);
+        if (elem) {
+            detailsText = cleanupStr(elem.textContent || "");
+            console.log(detailsText);
+        }
+    }
+
+    let describedbyText = "";
+    if (ariaDescribedbyAttributes) {
+        const elem = xmlDom.getElementById(ariaDescribedbyAttributes);
+        if (elem) {
+            describedbyText = cleanupStr(elem.textContent || "");
+        }
+    }
+
+    let labelledByText = "";
+    let figcaptionText = "";
+    if (figureElem) {
+        console.log("FigureElement attributes", figureElem.attributes);
+        const ariaLabelledByAttributes = figureElem.getAttribute("aria-labelledby");
+        if (ariaLabelledByAttributes) {
+            const elem = xmlDom.getElementById(ariaLabelledByAttributes);
+            if (elem) {
+                labelledByText = cleanupStr(elem.textContent || "");
+            }
+        }
+        {
+            const elem = figureElem.getElementsByTagName("figcaption");
+            if (elem) {
+                figcaptionText = cleanupStr(elem[0]?.textContent || "");
+            }
+        }
+    }
+
+    const N_CHAR_SIZE = 200;
+    const CUT = N_CHAR_SIZE + 50;
+
+    let beforeText = "";
+    let afterText = "";
+    // if (!detailsText && !describedbyText && (!(labelledByText && figcaptionText) || !figcaptionText)) {
+
+    // TODO: start iterator at imgElem and go forward / backward, instead of rootElem and search down
+    const iter = xmlDom.createNodeIterator(rootElem, NodeFilter.SHOW_ALL, { acceptNode: () => NodeFilter.FILTER_ACCEPT });
+
+    const resetImgIterator = () => {
+        let curEl;
+        do {
+            curEl = iter.nextNode();
+        } while (curEl && imgElem !== curEl);
+        // if (curEl != imgElem) {
+        //     return;
+        // }
+    };
+
+    resetImgIterator();
+    while (beforeText.length < N_CHAR_SIZE) {
+
+        const node = iter.previousNode();
+        if (!node) {
+            break;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            beforeText = cleanupStr(node.nodeValue) + " " + beforeText;
+        }
+        if (node.nodeName === "IMG" || node.nodeName === "img") {
+            break;
+        }
+    }
+    resetImgIterator();
+    while (afterText.length < N_CHAR_SIZE) {
+        const node = iter.nextNode();
+        if (!node) {
+            break;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            afterText += cleanupStr(node.nodeValue) + " ";
+        }
+    }
+
+    const abs = (v: number) => v < 0 ? 0 : -1 * v;
+
+    beforeText = beforeText.slice(abs(beforeText.length - CUT), beforeText.length);
+    afterText = afterText.slice(0, CUT);
+
+    beforeText = cleanupStr(beforeText);
+    afterText = cleanupStr(afterText);
+
+    const DomParsingTexts = {
+        dom_beforeText: beforeText,
+        dom_afterText: afterText,
+        dom_detailsText: detailsText,
+        dom_describedbyText: describedbyText,
+        dom_labelledByText: labelledByText,
+        dom_figcaptionText: figcaptionText,
+    };
+    debug("IMG_CLICK ImgDomParsed injected to img payload:", DomParsingTexts);
+
+    yield* putTyped(readerLocalActionSetImageClick.build({ ...payload, ...DomParsingTexts }));
+
+    return;
 }
 
 export function saga() {

src/renderer/reader/redux/sagas/search/transliteration.ts

@@ -1040,3 +1040,11 @@ export const equivalents = () => {
     }
     return _equivalentsList;
 };
+
+export const collapseWhitespaces = (str: string) => {
+    return str.replace(/[\r\n]/g, " ").replace(/\s\s+/g, " ");
+};
+
+export const cleanupStr = (str: string) => {
+    return collapseWhitespaces(str).trim();
+};