Merge pull request #785 from d-i-t-a/develop

2.4.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "A viewer application for EPUB files.",
   "repository": "https://github.com/d-i-t-a/R2D2BC",
   "license": "Apache-2.0",
@@ -77,8 +77,8 @@
     "@types/rimraf": "^4.0.5",
     "@types/sanitize-html": "^2.9.0",
     "@types/uuid": "^9.0.4",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "ansi-regex": ">=5.0.1",
     "babel-eslint": "^10.1.0",
     "braces": ">=3.0.2",
@@ -141,5 +141,8 @@
     "semi": true,
     "singleQuote": false,
     "trailingComma": "es5"
+  },
+  "@parcel/resolver-default": {
+    "packageExports": true
   }
 }

src/model/user-settings/ReadiumCSS.ts

@@ -26,6 +26,7 @@ export class ReadiumCSS {
   // static readonly PUBLISHER_DEFAULT_REF = "advancedSettings";
   static readonly TEXT_ALIGNMENT_REF = "textAlign";
   static readonly COLUMN_COUNT_REF = "colCount";
+  static readonly DIRECTION_REF = "direction";
   static readonly WORD_SPACING_REF = "wordSpacing";
   static readonly LETTER_SPACING_REF = "letterSpacing";
   static readonly PAGE_MARGINS_REF = "pageMargins";
@@ -41,6 +42,7 @@ export class ReadiumCSS {
   static readonly TEXT_ALIGNMENT_KEY =
     "--USER__" + ReadiumCSS.TEXT_ALIGNMENT_REF;
   static readonly COLUMN_COUNT_KEY = "--USER__" + ReadiumCSS.COLUMN_COUNT_REF;
+  static readonly DIRECTION_KEY = "--USER__" + ReadiumCSS.DIRECTION_REF;
   static readonly WORD_SPACING_KEY = "--USER__" + ReadiumCSS.WORD_SPACING_REF;
   static readonly LETTER_SPACING_KEY =
     "--USER__" + ReadiumCSS.LETTER_SPACING_REF;

src/model/user-settings/UserSettings.ts

@@ -73,6 +73,7 @@ export interface IUserSettings {
   // publisherDefaults: boolean;
   textAlignment: number;
   columnCount: number;
+  direction: number;
   wordSpacing: number;
   letterSpacing: number;
   pageMargins: number;
@@ -100,6 +101,7 @@ export interface InitialUserSettings {
   // publisherDefaults?: boolean | "readium-advanced-on" | "readium-advanced-off";
   textAlignment: number;
   columnCount: number;
+  direction: string;
   wordSpacing: number;
   letterSpacing: number;
   pageMargins: number;
@@ -130,6 +132,7 @@ export class UserSettings implements IUserSettings {
   private static fontFamilyValues = ["Original", "serif", "sans-serif"];
   private static readonly textAlignmentValues = ["auto", "justify", "start"];
   private static readonly columnCountValues = ["auto", "1", "2"];
+  private static readonly directionValues = ["auto", "ltr", "rtl"];
 
   fontSize = 100.0;
   fontOverride = false;
@@ -141,6 +144,7 @@ export class UserSettings implements IUserSettings {
   // publisherDefaults = true;
   textAlignment = 0;
   columnCount = 0;
+  direction = 0;
   wordSpacing = 0.0;
   letterSpacing = 0.0;
   pageMargins = 2.0;
@@ -248,6 +252,17 @@ export class UserSettings implements IUserSettings {
         }
         log.log(settings.columnCount);
       }
+      if (initialUserSettings.direction) {
+        settings.direction = UserSettings.directionValues.findIndex(
+          (el: any) => el === initialUserSettings.direction
+        );
+        let prop = settings.userProperties.getByRef(ReadiumCSS.DIRECTION_REF);
+        if (prop) {
+          prop.value = settings.direction;
+          await settings.saveProperty(prop);
+        }
+        log.log(settings.direction);
+      }
       if (initialUserSettings.wordSpacing) {
         settings.wordSpacing = initialUserSettings.wordSpacing;
         let prop = settings.userProperties.getByRef(
@@ -363,6 +378,10 @@ export class UserSettings implements IUserSettings {
       "columnCount",
       ReadiumCSS.COLUMN_COUNT_KEY
     );
+    this.direction = await this.getPropertyAndFallback<Enumerable>(
+      "direction",
+      ReadiumCSS.DIRECTION_KEY
+    );
 
     this.fontSize = await this.getPropertyAndFallback<Incremental>(
       "fontSize",
@@ -399,6 +418,7 @@ export class UserSettings implements IUserSettings {
     // this.publisherDefaults = true;
     this.textAlignment = 0;
     this.columnCount = 0;
+    this.direction = 0;
     this.wordSpacing = 0.0;
     this.letterSpacing = 0.0;
     this.pageMargins = 2.0;
@@ -413,8 +433,10 @@ export class UserSettings implements IUserSettings {
         "html"
       ) as HTMLHtmlElement;
       if (html) {
-        const rootElement = document.documentElement;
-        const body = HTMLUtilities.findRequiredElement(rootElement, "body");
+        const rootElement =
+          HTMLUtilities.findElement(document, "#root") ||
+          document.documentElement;
+        const body = HTMLUtilities.findElement(html, "body");
 
         // // Apply publishers default
         // html.style.removeProperty(ReadiumCSS.PUBLISHER_DEFAULT_KEY);
@@ -426,6 +448,8 @@ export class UserSettings implements IUserSettings {
         html.style.removeProperty(ReadiumCSS.LETTER_SPACING_KEY);
         // Apply column count
         html.style.removeProperty(ReadiumCSS.COLUMN_COUNT_KEY);
+        // Apply direction
+        html.style.removeProperty(ReadiumCSS.DIRECTION_KEY);
         // Apply text alignment
         html.style.removeProperty(ReadiumCSS.TEXT_ALIGNMENT_KEY);
         // Apply line height
@@ -435,8 +459,9 @@ export class UserSettings implements IUserSettings {
 
         // Apply appearance
         html.style.removeProperty(ReadiumCSS.APPEARANCE_KEY);
-        HTMLUtilities.setAttr(rootElement, "data-viewer-theme", "day");
-        HTMLUtilities.setAttr(body, "data-viewer-theme", "day");
+        if (rootElement)
+          HTMLUtilities.setAttr(rootElement, "data-viewer-theme", "day");
+        if (body) HTMLUtilities.setAttr(body, "data-viewer-theme", "day");
 
         // Apply font family
         html.style.removeProperty(ReadiumCSS.FONT_FAMILY_KEY);
@@ -468,8 +493,10 @@ export class UserSettings implements IUserSettings {
       ) as HTMLHtmlElement;
 
       if (html) {
-        const rootElement = document.documentElement;
-        const body = HTMLUtilities.findRequiredElement(rootElement, "body");
+        const rootElement =
+          HTMLUtilities.findElement(document, "#root") ||
+          document.documentElement;
+        const body = HTMLUtilities.findElement(html, "body");
         if (this.view?.navigator.publication.isReflowable) {
           // Apply font size
           if (await this.getProperty(ReadiumCSS.FONT_SIZE_KEY)) {
@@ -578,18 +605,21 @@ export class UserSettings implements IUserSettings {
           if (
             this.userProperties.getByRef(ReadiumCSS.APPEARANCE_REF)?.value === 0
           ) {
-            HTMLUtilities.setAttr(rootElement, "data-viewer-theme", "day");
-            HTMLUtilities.setAttr(body, "data-viewer-theme", "day");
+            if (rootElement)
+              HTMLUtilities.setAttr(rootElement, "data-viewer-theme", "day");
+            if (body) HTMLUtilities.setAttr(body, "data-viewer-theme", "day");
           } else if (
             this.userProperties.getByRef(ReadiumCSS.APPEARANCE_REF)?.value === 1
           ) {
-            HTMLUtilities.setAttr(rootElement, "data-viewer-theme", "sepia");
-            HTMLUtilities.setAttr(body, "data-viewer-theme", "sepia");
+            if (rootElement)
+              HTMLUtilities.setAttr(rootElement, "data-viewer-theme", "sepia");
+            if (body) HTMLUtilities.setAttr(body, "data-viewer-theme", "sepia");
           } else if (
             this.userProperties.getByRef(ReadiumCSS.APPEARANCE_REF)?.value === 2
           ) {
-            HTMLUtilities.setAttr(rootElement, "data-viewer-theme", "night");
-            HTMLUtilities.setAttr(body, "data-viewer-theme", "night");
+            if (rootElement)
+              HTMLUtilities.setAttr(rootElement, "data-viewer-theme", "night");
+            if (body) HTMLUtilities.setAttr(body, "data-viewer-theme", "night");
           }
         } else {
           html.style.setProperty(
@@ -598,9 +628,22 @@ export class UserSettings implements IUserSettings {
               .getByRef(ReadiumCSS.APPEARANCE_REF)
               ?.toString() ?? null
           );
-          HTMLUtilities.setAttr(rootElement, "data-viewer-theme", "day");
-          HTMLUtilities.setAttr(body, "data-viewer-theme", "day");
+          if (rootElement)
+            HTMLUtilities.setAttr(rootElement, "data-viewer-theme", "day");
+          if (body) HTMLUtilities.setAttr(body, "data-viewer-theme", "day");
+        }
+
+        if (this.view?.navigator.publication.isFixedLayout) {
+          if (await this.getProperty(ReadiumCSS.DIRECTION_KEY)) {
+            let value =
+              this.userProperties
+                .getByRef(ReadiumCSS.DIRECTION_REF)
+                ?.toString() ?? null;
+            html.style.setProperty(ReadiumCSS.DIRECTION_KEY, value);
+            this.view.navigator.setDirection(value);
+          }
         }
+
         if (this.view?.navigator.publication.isReflowable) {
           // Apply font family
           if (await this.getProperty(ReadiumCSS.FONT_FAMILY_KEY)) {
@@ -786,6 +829,10 @@ export class UserSettings implements IUserSettings {
           await this.userProperties?.getByRef(ReadiumCSS.COLUMN_COUNT_REF)
             ?.value
         ],
+      direction:
+        UserSettings.directionValues[
+          await this.userProperties?.getByRef(ReadiumCSS.DIRECTION_REF)?.value
+        ],
       wordSpacing: this.userProperties?.getByRef(ReadiumCSS.WORD_SPACING_REF)
         ?.value,
       letterSpacing: this.userProperties?.getByRef(
@@ -829,6 +876,13 @@ export class UserSettings implements IUserSettings {
       ReadiumCSS.COLUMN_COUNT_REF,
       ReadiumCSS.COLUMN_COUNT_KEY
     );
+    // Direction
+    userProperties.addEnumerable(
+      this.direction,
+      UserSettings.directionValues,
+      ReadiumCSS.DIRECTION_REF,
+      ReadiumCSS.DIRECTION_KEY
+    );
     // Appearance
     userProperties.addEnumerable(
       this.appearance,
@@ -979,6 +1033,10 @@ export class UserSettings implements IUserSettings {
         UserSettings.columnCountValues[
           this.userProperties?.getByRef(ReadiumCSS.COLUMN_COUNT_REF)?.value
         ], // "auto", "1", "2"
+      direction:
+        UserSettings.directionValues[
+          this.userProperties?.getByRef(ReadiumCSS.DIRECTION_REF)?.value
+        ], // "auto", "ltr", "rtl"
       verticalScroll: this.verticalScroll,
       fontSize: this.fontSize,
       wordSpacing: this.wordSpacing,
@@ -1050,6 +1108,17 @@ export class UserSettings implements IUserSettings {
       this.settingsColumnsChangeCallback();
     }
 
+    if (userSettings.direction) {
+      this.direction = UserSettings.directionValues.findIndex(
+        (el: any) => el === userSettings.direction
+      );
+      let prop = this.userProperties?.getByRef(ReadiumCSS.DIRECTION_REF);
+      if (prop) {
+        prop.value = this.direction;
+        await this.storeProperty(prop);
+      }
+    }
+
     if (userSettings.textAlignment) {
       this.textAlignment = UserSettings.textAlignmentValues.findIndex(
         (el: any) => el === userSettings.textAlignment

src/modules/AnnotationModule.ts

@@ -197,15 +197,15 @@ export class AnnotationModule implements ReaderModule {
     }, 200);
   }
 
-  initialize() {
+  initialize(iframe: HTMLIFrameElement) {
     return new Promise(async (resolve) => {
       await (document as any).fonts.ready;
       if (this.rights.enableAnnotations) {
         setTimeout(() => {
           this.drawHighlights();
           this.showHighlights();
           addEventListenerOptional(
-            this.navigator.iframes[0].contentDocument?.body,
+            iframe.contentDocument?.body,
             "click",
             this.click.bind(this)
           );

src/modules/consumption/ConsumptionModule.ts

@@ -84,8 +84,9 @@ export class ConsumptionModule implements ReaderModule {
     log.log("Consumption module stop");
     this.endResearchSession();
   }
-  initialize() {
-    let win = this.navigator.iframes[0].contentWindow;
+
+  initialize(iframe: HTMLIFrameElement) {
+    let win = iframe.contentWindow;
     if (win) {
       const self = this;
       win.onload = function () {

src/modules/highlight/TextHighlighter.ts

@@ -191,16 +191,12 @@ export class TextHighlighter {
       onAfterHighlight: function () {},
     });
   }
-  async initialize() {
-    let doc = this.navigator.iframes[0].contentDocument;
+  async initialize(iframe: HTMLIFrameElement) {
+    let doc = iframe.contentDocument;
     if (doc) {
       this.dom(doc.body).addClass(this.options.contextClass);
     }
-    this.bindEvents(
-      this.navigator.iframes[0].contentDocument?.body,
-      this,
-      this.hasEventListener
-    );
+    this.bindEvents(iframe.contentDocument?.body, this, this.hasEventListener);
 
     this.initializeToolbox();
 
@@ -218,7 +214,7 @@ export class TextHighlighter {
       }
     }
     setTimeout(async () => {
-      let doc = this.navigator.iframes[0].contentDocument;
+      let doc = iframe.contentDocument;
       if (doc) {
         await doc.body?.addEventListener("click", unselect);
       }

src/modules/highlight/renderer/iframe/selection.ts

@@ -148,9 +148,9 @@ export function convertRange(
   const startContainerElement = startIsElement
     ? (range.startContainer as Element)
     : range.startContainer.parentNode &&
-      range.startContainer.parentNode.nodeType === Node.ELEMENT_NODE
-    ? (range.startContainer.parentNode as Element)
-    : undefined;
+        range.startContainer.parentNode.nodeType === Node.ELEMENT_NODE
+      ? (range.startContainer.parentNode as Element)
+      : undefined;
   if (!startContainerElement) {
     return undefined;
   }
@@ -170,9 +170,9 @@ export function convertRange(
   const endContainerElement = endIsElement
     ? (range.endContainer as Element)
     : range.endContainer.parentNode &&
-      range.endContainer.parentNode.nodeType === Node.ELEMENT_NODE
-    ? (range.endContainer.parentNode as Element)
-    : undefined;
+        range.endContainer.parentNode.nodeType === Node.ELEMENT_NODE
+      ? (range.endContainer.parentNode as Element)
+      : undefined;
   if (!endContainerElement) {
     return undefined;
   }

src/modules/history/HistoryModule.ts

@@ -119,7 +119,6 @@ export class HistoryModule implements ReaderModule {
   }
 
   async push(locator: Locator, history: boolean) {
-    let lastInHistory;
     if (history && this.annotator) {
       let lastReadingPosition =
         (await this.annotator.getLastReadingPosition()) as
@@ -141,13 +140,24 @@ export class HistoryModule implements ReaderModule {
         ) {
           this.history.push(lastReadingPosition);
           this.historyCurrentIndex = this.history.length - 1;
+        } else {
+          const lastInHistory = this.history[this.history.length - 1];
+          if (
+            (lastInHistory &&
+              lastInHistory.href !== locator.href &&
+              lastInHistory.locations !== locator.locations) ||
+            lastInHistory === undefined
+          ) {
+            this.history.push(lastReadingPosition);
+            this.historyCurrentIndex = this.history.length - 1;
+          }
         }
       }
 
       if (this.historyCurrentIndex < this.history.length - 1) {
         this.history = this.history.slice(0, this.historyCurrentIndex);
       }
-      lastInHistory = this.history[this.history.length - 1];
+      const lastInHistory = this.history[this.history.length - 1];
       if (
         (lastInHistory && lastInHistory.href !== locator.href) ||
         lastInHistory === undefined