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

2.4.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "A viewer application for EPUB files.",
   "repository": "https://github.com/d-i-t-a/R2D2BC",
   "license": "Apache-2.0",
@@ -36,7 +36,7 @@
     "lodash.clonedeep": "^4.5.0",
     "loglevel": "^1.8.0",
     "mark.js": "^8.11.1",
-    "pdfjs-dist": "3.11.174",
+    "pdfjs-dist": "2.14.305",
     "promise-polyfill": "^8.2.0",
     "r2-shared-js": "^1.0.51",
     "recursive-readdir": "^2.2.2",

src/model/Publication.ts

@@ -60,7 +60,7 @@ export class Publication extends R2Publication {
     if (this.sample?.isSampleRead && this.positions?.length > 0) {
       return this.limitedTOC();
     }
-    return this.TOC;
+    return this.TOC || [];
   }
 
   private limitedTOC() {
@@ -74,7 +74,7 @@ export class Publication extends R2Publication {
       }
     }
 
-    let toc = this.TOC.map((item) => {
+    let toc = this.TOC?.map((item) => {
       if (item.Href) {
         const positions = this.positionsByHref(this.getRelativeHref(item.Href));
         if (positions?.length > 0) {
@@ -98,7 +98,7 @@ export class Publication extends R2Publication {
       }
       return item;
     });
-    return toc;
+    return toc || [];
   }
 
   get landmarks() {

src/model/user-settings/UserSettings.ts

@@ -188,9 +188,7 @@ export class UserSettings implements IUserSettings {
         log.log(settings.verticalScroll);
       }
       if (initialUserSettings.appearance) {
-        settings.appearance = UserSettings.appearanceValues.findIndex(
-          (el: any) => el === initialUserSettings.appearance
-        );
+        settings.appearance = UserSettings.parseAppearanceSetting(initialUserSettings.appearance)
         let prop = settings.userProperties.getByRef(ReadiumCSS.APPEARANCE_REF);
         if (prop) {
           prop.value = settings.appearance;
@@ -989,28 +987,7 @@ export class UserSettings implements IUserSettings {
 
   async applyUserSettings(userSettings: Partial<UserSettings>): Promise<void> {
     if (userSettings.appearance) {
-      let a: string;
-      if (
-        userSettings.appearance === "day" ||
-        userSettings.appearance === "readium-default-on"
-      ) {
-        a = UserSettings.appearanceValues[0];
-      } else if (
-        userSettings.appearance === "sepia" ||
-        userSettings.appearance === "readium-sepia-on"
-      ) {
-        a = UserSettings.appearanceValues[1];
-      } else if (
-        userSettings.appearance === "night" ||
-        userSettings.appearance === "readium-night-on"
-      ) {
-        a = UserSettings.appearanceValues[2];
-      } else {
-        a = userSettings.appearance;
-      }
-      this.appearance = UserSettings.appearanceValues.findIndex(
-        (el: any) => el === a
-      );
+      this.appearance = UserSettings.parseAppearanceSetting(userSettings.appearance)
       let prop = this.userProperties?.getByRef(ReadiumCSS.APPEARANCE_REF);
       if (prop) {
         prop.value = this.appearance;
@@ -1138,6 +1115,33 @@ export class UserSettings implements IUserSettings {
     }
   }
 
+  private static parseAppearanceSetting(
+    inputSetting: InitialUserSettings["appearance"]
+  ): number {
+    let a: string;
+    if (
+      inputSetting === "day" ||
+      inputSetting === "readium-default-on"
+    ) {
+      a = UserSettings.appearanceValues[0];
+    } else if (
+      inputSetting === "sepia" ||
+      inputSetting === "readium-sepia-on"
+    ) {
+      a = UserSettings.appearanceValues[1];
+    } else if (
+      inputSetting === "night" ||
+      inputSetting === "readium-night-on"
+    ) {
+      a = UserSettings.appearanceValues[2];
+    } else {
+      a = inputSetting;
+    }
+    return UserSettings.appearanceValues.findIndex(
+      (el: any) => el === a
+    );
+  }
+
   async scroll(scroll: boolean): Promise<void> {
     const position = this.view?.getCurrentPosition();
     this.verticalScroll = scroll;

src/modules/pagebreak/PageBreakModule.ts

@@ -170,6 +170,9 @@ export class PageBreakModule implements ReaderModule {
       if (pageBreaks?.length === 0) {
         pageBreaks = body?.querySelectorAll("[epub\\:type='pagebreak']");
       }
+      if (pageBreaks?.length === 0) {
+        pageBreaks = body?.querySelectorAll("[role='doc-pagebreak']");
+      }
       let self = this;
 
       function getCssSelector(element: Element): string {

src/modules/protection/ContentProtectionModule.ts

@@ -937,7 +937,7 @@ export class ContentProtectionModule implements ReaderModule {
       this.toggleRect(rect, this.securityContainer, this.isHacked)
     );
   }
-  handleResize() {
+  async handleResize() {
     if (this.properties?.enableObfuscation) {
       const onDoResize = debounce(() => {
         this.calcRects(this.rects);
@@ -946,7 +946,7 @@ export class ContentProtectionModule implements ReaderModule {
             this.toggleRect(rect, this.securityContainer, this.isHacked)
           );
         }
-      }, 10);
+      }, 50);
       if (this.rects) {
         this.observe();
         onDoResize();
@@ -1126,8 +1126,8 @@ export class ContentProtectionModule implements ReaderModule {
     }
     return true;
   }
-  copyToClipboard(textToClipboard) {
-    textToClipboard = textToClipboard.substring(
+  copyToClipboard(textToClipboard: string | undefined) {
+    textToClipboard = textToClipboard?.substring(
       0,
       this.properties?.charactersToCopy ?? 0
     );

src/navigator/IFrameNavigator.ts

@@ -523,6 +523,9 @@ export class IFrameNavigator extends EventEmitter implements Navigator {
     this.iframes.forEach((iframe) => {
       removeEventListenerOptional(iframe, "resize", this.onResize);
     });
+
+    if (this.didInitKeyboardEventHandler)
+      this.keyboardEventHandler.removeEvents(document);
   }
   spreads: HTMLDivElement;
   firstSpread: HTMLDivElement;
@@ -2257,6 +2260,12 @@ export class IFrameNavigator extends EventEmitter implements Navigator {
   tableOfContents(): any {
     return this.publication.tableOfContents;
   }
+  landmarks(): any {
+    return this.publication.landmarks;
+  }
+  pageList(): any {
+    return this.publication.pageList;
+  }
   readingOrder(): any {
     return this.publication.readingOrder;
   }
@@ -2567,8 +2576,12 @@ export class IFrameNavigator extends EventEmitter implements Navigator {
               return obj;
             }, {});
             if (parseInt(obj["height"]) !== 0 || parseInt(obj["width"]) !== 0) {
-              height = obj["height"] + "px";
-              width = obj["width"] + "px";
+              height = obj["height"].endsWith("px")
+                ? obj["height"]
+                : obj["height"] + "px";
+              width = obj["width"].endsWith("px")
+                ? obj["width"]
+                : obj["width"] + "px";
             }
           }
         }
@@ -2633,7 +2646,11 @@ export class IFrameNavigator extends EventEmitter implements Navigator {
       if (oldPosition) {
         this.view?.goToProgression(oldPosition);
       }
-      await this.updatePositionInfo(false);
+      this.updatePositionInfo(false);
+
+      if (this.contentProtectionModule !== undefined) {
+        await this.contentProtectionModule.handleResize();
+      }
 
       if (this.annotationModule !== undefined) {
         await this.annotationModule.handleResize();
@@ -2650,14 +2667,11 @@ export class IFrameNavigator extends EventEmitter implements Navigator {
       if (this.pageBreakModule !== undefined) {
         await this.pageBreakModule.handleResize();
       }
-      if (this.contentProtectionModule !== undefined) {
-        this.contentProtectionModule.handleResize();
-      }
       if (this.lineFocusModule !== undefined) {
         this.lineFocusModule.handleResize();
       }
       if (this.historyModule !== undefined) {
-        this.historyModule.handleResize();
+        await this.historyModule.handleResize();
       }
     }, 150);
   }

src/navigator/Navigator.ts

@@ -52,6 +52,8 @@ interface Navigator {
   deactivateMarker?(): any;
 
   tableOfContents(): any;
+  landmarks(): any;
+  pageList(): any;
 
   readingOrder(): any;
 

src/navigator/PDFNavigator.ts

@@ -220,6 +220,8 @@ export class PDFNavigator extends EventEmitter implements Navigator {
   tableOfContents(): any {
     return this.publication.tableOfContents;
   }
+  landmarks(): any {};
+  pageList(): any {};
 
   //TODO:
   currentResource(): any {}

src/reader.ts

@@ -573,6 +573,14 @@ export default class D2Reader {
   get tableOfContents() {
     return convertAndCamel(this.navigator.tableOfContents()) ?? [];
   }
+  /** Landmarks */
+  get landmarks() {
+    return convertAndCamel(this.navigator.landmarks()) ?? [];
+  }
+  /** Page List */
+  get pageList() {
+    return convertAndCamel(this.navigator.pageList()) ?? [];
+  }
   /** Reading Order or Spine */
   get readingOrder() {
     return convertAndCamel(this.navigator.readingOrder()) ?? [];
@@ -586,6 +594,10 @@ export default class D2Reader {
     return this.annotationModule?.getAnnotations();
   }
 
+  get publicationLayout() {
+    return this.navigator.publication.layout;
+  }
+
   /** History */
   get history() {
     return this.historyModule?.history;

src/utils/KeyboardEventHandler.ts

@@ -35,59 +35,77 @@ export default class KeyboardEventHandler {
     }
   };
 
+  public removeEvents = (element: HTMLElement | Document | null): void => {
+    if (element) {
+      const self = this;
+      element.removeEventListener("focusin", this.onFocusIn(self), true);
+      element.removeEventListener("keydown", this.onKeyDown(self), false);
+    }
+  };
+
   public focusin = (element: HTMLElement | Document): void => {
     const self = this;
-    element.addEventListener(
-      "focusin",
-      function (event: KeyboardEvent) {
-        self.navigator.view?.snap(event.target as HTMLElement);
-      },
-      true
-    );
+    element.addEventListener("focusin", this.onFocusIn(self), true);
   };
 
   public keydown = (element: HTMLElement | Document): void => {
     const self = this;
     if (!this.navigator.rights.customKeyboardEvents) {
-      element.addEventListener(
-        "keydown",
-        function (event: KeyboardEvent) {
-          // Ignore input elements
-          const eventTarget = event.target as HTMLElement;
-          if (/input|select|option|textarea/i.test(eventTarget.tagName)) {
-            return;
-          }
+      element.addEventListener("keydown", this.onKeyDown(self), false);
+    }
+  };
 
-          // Ignore when active text selection
-          const ownerDocument = (eventTarget.ownerDocument ||
-            eventTarget) as HTMLDocument;
-          const ownerWindow = ownerDocument.defaultView as Window;
-          const selection = ownerWindow.getSelection() as Selection;
-          if (!selection.isCollapsed) {
-            return;
-          }
+  // store the generated event handlers, so they can be returned
+  // when removing the event listeners
+  private handlers = {};
 
-          const key = event.key;
-          switch (key) {
-            case "ArrowRight":
-              self.onForwardSwipe(event);
-              break;
-            case "ArrowLeft":
+  private onFocusIn(self: this) {
+    return (
+      this.handlers["onFocusIn"] ||
+      (this.handlers["onFocusIn"] = function (event: KeyboardEvent) {
+        self.navigator.view?.snap(event.target as HTMLElement);
+      })
+    );
+  }
+
+  private onKeyDown(self: this) {
+    return (
+      this.handlers["onKeyDown"] ||
+      (this.handlers["onKeyDown"] = function(event: KeyboardEvent) {
+        // Ignore input elements
+        const eventTarget = event.target as HTMLElement;
+        if (/input|select|option|textarea/i.test(eventTarget.tagName)) {
+          return;
+        }
+
+        // Ignore when active text selection
+        const ownerDocument = (eventTarget.ownerDocument ||
+          eventTarget) as HTMLDocument;
+        const ownerWindow = ownerDocument.defaultView as Window;
+        const selection = ownerWindow.getSelection() as Selection;
+        if (!selection.isCollapsed) {
+          return;
+        }
+
+        const key = event.key;
+        switch (key) {
+          case "ArrowRight":
+            self.onForwardSwipe(event);
+            break;
+          case "ArrowLeft":
+            self.onBackwardSwipe(event);
+            break;
+        }
+        switch (event.code) {
+          case "Space":
+            if (event.ctrlKey) {
               self.onBackwardSwipe(event);
-              break;
-          }
-          switch (event.code) {
-            case "Space":
-              if (event.ctrlKey) {
-                self.onBackwardSwipe(event);
-              } else {
-                self.onForwardSwipe(event);
-              }
-              break;
-          }
-        },
-        false
-      );
-    }
-  };
+            } else {
+              self.onForwardSwipe(event);
+            }
+            break;
+        }
+      })
+    );
+  }
 }