Merge pull request #46 from d-i-t-a/fixes/settings-and-apis

Initial settings and several api updates

injectables/click/click.ts

@@ -6,11 +6,12 @@
  * Licensed to: Bokbasen AS and CAST under one or more contributor license agreements.
  * Use of this source code is governed by a BSD-style license that can be found in the LICENSE file.
  */
+export const IS_DEV = (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "dev");
 
 document.addEventListener("click", async (_event) => {
 
     // var htmlElement = event.target as HTMLElement
-    console.log("Emoty Click Handler")
+    if (IS_DEV) console.log("Empty Click Handler")
     // console.log(htmlElement.outerHTML)
 
 }, true);

injectables/footnotes/footnotes.ts

@@ -6,9 +6,10 @@
  * Licensed to: Bokbasen AS and CAST under one or more contributor license agreements.
  * Use of this source code is governed by a BSD-style license that can be found in the LICENSE file.
  */
+export const IS_DEV = (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "dev");
 
 document.addEventListener("click", async (event) => {
-    console.log("Footnote Click Handler");
+    if (IS_DEV) console.log("Footnote Click Handler");
     var htmlElement = event.target as HTMLElement
     if(htmlElement.tagName.toLowerCase() === 'a') {
     var element = document.createElement('div');

injectables/glossary/glossary.ts

@@ -1,11 +1,13 @@
 import * as Mark from "mark.js";
 
+export const IS_DEV = (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "dev");
+
 async function markCuedWords(glossary: Array<GlossaryItem>) {
-    console.log("glossary mark words " + glossary);
+    if (IS_DEV) console.log("glossary mark words " + glossary);
 
     glossary.forEach(async function (glossaryitem: GlossaryItem) {
 
-        console.log(glossaryitem);
+        if (IS_DEV) console.log(glossaryitem);
         var instance = new Mark(document.body);
         await instance.mark(glossaryitem.word, {
             accuracy: { value: "exactly", limiters: [".", ",", ";", ":", ")"] },
@@ -17,7 +19,7 @@ async function markCuedWords(glossary: Array<GlossaryItem>) {
             each: function (node) {
                 node.addEventListener("click", async (event) => {
                     var htmlElement = node as HTMLElement
-                    console.log("Mark Node Click Handler");
+                    if (IS_DEV) console.log("Mark Node Click Handler");
 
                     event.preventDefault()
                     event.stopPropagation()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A viewer application for EPUB files.",
   "repository": "https://github.com/d-i-t-a/R2D2BC",
   "main": "src/index.js",
@@ -23,10 +23,11 @@
   },
   "dependencies": {
     "cssesc": "^3.0.0",
-    "promise-polyfill": "^8.1.3",
+    "debounce": "^1.2.0",
     "mark.js": "^8.11.1",
-    "whatwg-fetch": "^2.0.4",
-    "debounce": "^1.2.0"
+    "promise-polyfill": "^8.1.3",
+    "ts-optchain": "^0.1.8",
+    "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
     "@types/chai": "^4.2.3",

src/index.ts

@@ -15,6 +15,7 @@ import BookmarkModule from "./modules/BookmarkModule";
 import { UserSettings } from "./model/user-settings/UserSettings";
 import AnnotationModule from "./modules/AnnotationModule";
 import TTSModule from "./modules/TTSModule";
+import {oc} from "ts-optchain"
 
 var R2Settings: UserSettings;
 var R2Navigator: IFrameNavigator;
@@ -138,11 +139,11 @@ export async function load(config: ReaderConfig): Promise<any> {
     var webpubManifestUrl = config.url;
     var store = new LocalStorageStore({
         prefix: webpubManifestUrl.href,
-        useLocalStorage: true
+        useLocalStorage: config.useLocalStorage
     });
     var settingsStore = new LocalStorageStore({
         prefix: "r2d2bc-reader",
-        useLocalStorage: true
+        useLocalStorage: config.useLocalStorage
     });
 
 
@@ -157,8 +158,9 @@ export async function load(config: ReaderConfig): Promise<any> {
 
     R2Settings = await UserSettings.create({
         store: settingsStore,
+        initialUserSettings: config.userSettings,
         headerMenu: headerMenu,
-        ui: config.ui.settings,
+        ui: config.ui,
         api: config.api
     })
 
@@ -180,28 +182,28 @@ export async function load(config: ReaderConfig): Promise<any> {
     })
     // add custom modules
     // Bookmark Module
-        if (config.rights.enableBookmarks) {
+        if (oc(config.rights).enableBookmarks) {
         BookmarkModuleInstance = await BookmarkModule.create({
             annotator: annotator,
             headerMenu: headerMenu,
             rights: config.rights,
             publication: publication,
             settings: R2Settings,
             delegate: R2Navigator,
-            initialAnnotations: config.annotations,
+            initialAnnotations: config.initialAnnotations,
         })
     }
 
     // Annotation Module
-    if (config.rights.enableAnnotations) {
+    if (oc(config.rights).enableAnnotations) {
         AnnotationModuleInstance = await AnnotationModule.create({
             annotator: annotator,
             headerMenu: headerMenu,
             rights: config.rights,
             publication: publication,
             settings: R2Settings,
             delegate: R2Navigator,
-            initialAnnotations: config.annotations
+            initialAnnotations: config.initialAnnotations
         })
         TTSModuleInstance = await TTSModule.create({
             annotationModule: AnnotationModuleInstance

src/model/user-settings/UserSettings.ts

@@ -16,12 +16,15 @@ import BookView from "../../views/BookView";
 import * as HTMLUtilities from "../../utils/HTMLUtilities";
 import { IS_DEV } from "../..";
 import { addEventListenerOptional } from "../../utils/EventHandler";
+import { ReaderUI}  from "../../navigator/IFrameNavigator"
+import {oc} from "ts-optchain"
 
 export interface UserSettingsConfig {
     /** Store to save the user's selections in. */
     store: Store,
+    initialUserSettings: UserSettings;
     headerMenu: HTMLElement;
-    ui: UserSettingsUIConfig;
+    ui: ReaderUI;
     api: any;
 }
 export interface UserSettingsUIConfig {
@@ -102,7 +105,7 @@ export class UserSettings implements UserSettings {
 
     private settingsView: HTMLDivElement;
     private headerMenu: HTMLElement;
-    private ui: UserSettingsUIConfig;
+    private ui: ReaderUI | null = null;
     api: any;
 
     private iframe: HTMLIFrameElement;
@@ -114,11 +117,59 @@ export class UserSettings implements UserSettings {
             config.ui,
             config.api
         );
+
+        if (config.initialUserSettings) {
+            var initialUserSettings:UserSettings= config.initialUserSettings
+            if(initialUserSettings.appearance) {
+                settings.appearance = UserSettings.appearanceValues.findIndex((el: any) => el === initialUserSettings.appearance);
+                if (IS_DEV) console.log(settings.appearance)
+            }
+            if(initialUserSettings.fontSize) {
+                settings.fontSize = initialUserSettings.fontSize
+                if (IS_DEV) console.log(settings.fontSize)
+            }
+            if(initialUserSettings.fontFamily) {
+                settings.fontFamily = UserSettings.fontFamilyValues.findIndex((el: any) => el === initialUserSettings.fontFamily);
+                if (IS_DEV) console.log(settings.fontFamily)
+                if (settings.fontFamily != 0) {
+                    settings.fontOverride = true
+                }
+            }
+            if(initialUserSettings.verticalScroll) {
+                settings.verticalScroll = initialUserSettings.verticalScroll;
+                if (IS_DEV) console.log(settings.verticalScroll)
+            }
+            if(initialUserSettings.textAlignment) {
+                settings.textAlignment = UserSettings.textAlignmentValues.findIndex((el: any) => el === initialUserSettings.textAlignment);
+                if (IS_DEV) console.log(settings.textAlignment)
+            }
+            if(initialUserSettings.columnCount) {
+                settings.columnCount = UserSettings.columnCountValues.findIndex((el: any) => el === initialUserSettings.columnCount);
+                if (IS_DEV) console.log(settings.columnCount)
+            }
+            if(initialUserSettings.wordSpacing) {
+                settings.wordSpacing = initialUserSettings.wordSpacing;
+                if (IS_DEV) console.log(settings.wordSpacing)
+            }
+            if(initialUserSettings.letterSpacing) {
+                settings.letterSpacing = initialUserSettings.letterSpacing;
+                if (IS_DEV) console.log(settings.letterSpacing)
+            }
+            if(initialUserSettings.pageMargins) {
+                settings.pageMargins = initialUserSettings.pageMargins;
+                if (IS_DEV) console.log(settings.pageMargins)
+            }
+            if(initialUserSettings.lineHeight) {
+                settings.lineHeight = initialUserSettings.lineHeight;
+                if (IS_DEV) console.log(settings.lineHeight)
+            }
+        }
+
         await settings.initializeSelections();
         return new Promise(resolve => resolve(settings));
     }
 
-    protected constructor(store: Store, headerMenu: HTMLElement, ui: UserSettingsUIConfig, api: any) {
+    protected constructor(store: Store, headerMenu: HTMLElement, ui: ReaderUI, api: any) {
         this.store = store;
 
         this.bookViews = [this.scroller, this.paginator];
@@ -176,7 +227,7 @@ export class UserSettings implements UserSettings {
 
         if (this.headerMenu) this.settingsView = HTMLUtilities.findElement(this.headerMenu, "#container-view-settings") as HTMLDivElement;
 
-        if (this.ui.scroll) {
+        if (oc(this.ui).settings.scroll) {
             if (this.bookViews.length >= 1) {
                 let selectedView = this.bookViews[0];
                 const selectedViewName = await this.store.get(ReadiumCSS.SCROLL_KEY);
@@ -263,13 +314,13 @@ export class UserSettings implements UserSettings {
 
 
     private renderControls(element: HTMLElement): void {
-        if (this.ui.fontSize) {
+        if (oc(this.ui).settings.fontSize) {
             this.fontSizeButtons = {};
             for (const fontSizeName of ["decrease", "increase"]) {
                 this.fontSizeButtons[fontSizeName] = HTMLUtilities.findElement(element, "#" + fontSizeName + "-font") as HTMLButtonElement;
             }
         }
-        if (this.ui.fontFamily) {
+        if (oc(this.ui).settings.fontFamily) {
             this.fontButtons = {};
             this.fontButtons[0] = HTMLUtilities.findElement(element, "#publisher-font") as HTMLButtonElement;
             this.fontButtons[1] = HTMLUtilities.findElement(element, "#serif-font") as HTMLButtonElement;
@@ -281,7 +332,7 @@ export class UserSettings implements UserSettings {
             }
             this.updateFontButtons();
         }
-        if (this.ui.appearance) {
+        if (oc(this.ui).settings.appearance) {
             this.themeButtons = {};
             this.themeButtons[0] = HTMLUtilities.findElement(element, "#day-theme") as HTMLButtonElement;
             this.themeButtons[1] = HTMLUtilities.findElement(element, "#sepia-theme") as HTMLButtonElement;
@@ -296,7 +347,7 @@ export class UserSettings implements UserSettings {
             HTMLUtilities.findRequiredElement(element, "#container-view-appearance").remove()
         }
 
-        if (this.ui.scroll) {
+        if (oc(this.ui).settings.scroll) {
             this.viewButtons = {};
             this.viewButtons[0] = HTMLUtilities.findElement(element, "#view-scroll") as HTMLButtonElement;
             this.viewButtons[1] = HTMLUtilities.findElement(element, "#view-paginated") as HTMLButtonElement;
@@ -324,7 +375,7 @@ export class UserSettings implements UserSettings {
 
     private async setupEvents(): Promise<void> {
 
-        if (this.ui.fontSize) {
+        if (oc(this.ui).settings.fontSize) {
             addEventListenerOptional(this.fontSizeButtons["decrease"], 'click', (event: MouseEvent) => {
                 (this.userProperties.getByRef(ReadiumCSS.FONT_SIZE_REF) as Incremental).decrement()
                 this.storeProperty(this.userProperties.getByRef(ReadiumCSS.FONT_SIZE_REF))
@@ -345,7 +396,7 @@ export class UserSettings implements UserSettings {
             });
         }
 
-        if (this.ui.fontFamily) {
+        if (oc(this.ui).settings.fontFamily) {
             for (let index = 0; index < UserSettings.fontFamilyValues.length; index++) {
                 const button = this.fontButtons[index];
                 if (button) {
@@ -361,7 +412,7 @@ export class UserSettings implements UserSettings {
             }
         }
 
-        if (this.ui.appearance) {
+        if (oc(this.ui).settings.appearance) {
             for (let index = 0; index < UserSettings.appearanceValues.length; index++) {
                 const button = this.themeButtons[index];
                 if (button) {
@@ -376,7 +427,7 @@ export class UserSettings implements UserSettings {
             }
         }
 
-        if (this.ui.scroll) {
+        if (oc(this.ui).settings.scroll) {
             for (let index = 0; index < this.bookViews.length; index++) {
                 const view = this.bookViews[index];
                 const button = this.viewButtons[index];

src/modules/AnnotationModule.ts

@@ -22,7 +22,12 @@ import { UserSettings } from "../model/user-settings/UserSettings";
 import { icons as IconLib } from "../utils/IconLib";
 import { v4 as uuid } from 'uuid';
 
+export type Highlight = (highlight: Annotation) => Promise<Annotation>
+
 export interface AnnotationModuleAPI {
+    addAnnotation: Highlight;
+    deleteAnnotation: Highlight;
+    selectedAnnotation: Highlight;
 }
 
 export interface AnnotationModuleConfig {
@@ -94,7 +99,10 @@ export default class AnnotationModule implements ReaderModule {
         this.highlightsView = HTMLUtilities.findElement(this.headerMenu, "#container-view-highlights") as HTMLDivElement;
 
         if (this.initialAnnotations) {
-
+            var highlights = this.initialAnnotations['highlights'] || null;
+            if (highlights) {
+                this.annotator.initAnnotations(highlights)
+            }
         }
     }
 
@@ -157,11 +165,23 @@ export default class AnnotationModule implements ReaderModule {
 
 
     private async deleteHighlight(highlight: Annotation): Promise<any> {
-        this.deleteLocalHighlight(highlight.id);
+        if (this.api) {
+            this.api.deleteAnnotation(highlight).then(async () => {
+                this.deleteLocalHighlight(highlight.id);
+            })
+        } else {
+            this.deleteLocalHighlight(highlight.id);
+        }
     }
 
     public async deleteSelectedHighlight(highlight: Annotation): Promise<any> {
-        this.deleteLocalHighlight(highlight.id); 
+        if (this.api) {
+            this.api.deleteAnnotation(highlight).then(async () => {
+                this.deleteLocalHighlight(highlight.id);
+            })
+        } else {
+            this.deleteLocalHighlight(highlight.id); 
+        }
     }
 
     public async saveAnnotation(highlight: IHighlight, marker: AnnotationMarker): Promise<any> {
@@ -201,9 +221,12 @@ export default class AnnotationModule implements ReaderModule {
                 }
             }
             if (this.api) {
+                this.api.addAnnotation(annotation).then(async result => {
+                    annotation.id = result.id
                     var saved = await this.annotator.saveAnnotation(annotation);
                     await this.drawHighlights();
                     return saved
+                }) 
             } else {
                 var saved = await this.annotator.saveAnnotation(annotation);
                 await this.drawHighlights();

src/modules/BookmarkModule.ts

@@ -182,7 +182,7 @@ export default class BookmarkModule implements ReaderModule {
             if (!await this.annotator.locatorExists(bookmark, AnnotationType.Bookmark)) {
                 if (this.api && this.api.addBookmark) {
                     this.api.addBookmark(bookmark).then(async bookmark => {
-                        console.log(bookmark)
+                        if (IS_DEV) console.log(bookmark)
                         var saved = await this.annotator.saveBookmark(bookmark);
 
                         if (IS_DEV) { console.log("Bookmark added " + JSON.stringify(saved)); }