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

additional reader features

injectables/glossary/glossary.ts

@@ -12,11 +12,9 @@ async function markCuedWords(glossary: Array<GlossaryItem>) {
             separateWordSearch: false,
             acrossElements: true,
             exclude: ["h1", "h2", "h3", "h4", "h5", "h6", "figure"],
-            // filter: onlyFirstMatch,
             element: "a",
             className: "gloss",
             each: function (node) {
-                // alert(node);
                 node.addEventListener("click", async (event) => {
                     var htmlElement = node as HTMLElement
                     console.log("Mark Node Click Handler");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A viewer application for EPUB files.",
   "repository": "https://github.com/d-i-t-a/R2D2BC",
   "main": "src/index.js",

src/index.ts

@@ -37,6 +37,18 @@ export async function deleteBookmark(bookmark) {
     if (IS_DEV) { console.log("deleteBookmark") }
     BookmarkModuleInstance.deleteBookmark(bookmark)
 }
+export async function bookmarks() {
+    if (IS_DEV) { console.log("bookmarks") }
+    return await BookmarkModuleInstance.getBookmarks()    
+}
+export async function tableOfContents() {
+    if (IS_DEV) { console.log("bookmarks") }
+    return await R2Navigator.tableOfContents()    
+}
+export async function resetUserSettings() {
+    if (IS_DEV) { console.log("resetSettings") }
+    R2Settings.resetUserSettings()
+}
 export async function applyUserSettings(userSettings) {
     if (IS_DEV) { console.log("applyUserSettings") }
     R2Settings.applyUserSettings(userSettings)
@@ -148,6 +160,10 @@ exports.unload = async function () {
     unload()
 }
 
+exports.resetUserSettings = function () {
+    resetUserSettings()
+}
+
 // - apply user setting(s)
 exports.applyUserSettings = function (userSettings) {
     applyUserSettings(userSettings)
@@ -197,3 +213,10 @@ exports.previousPage = function () {
 exports.scroll = function (scroll) {
     scroll(scroll)
 }
+
+exports.bookmarks = function () {
+    return bookmarks()
+}
+exports.tableOfContents = function () {
+    return tableOfContents()
+}

src/model/Locator.ts

@@ -35,7 +35,7 @@ export interface ReadingPosition extends Locator {
 }
 
 export interface Bookmark extends Locator {
-    id?: number; 
+    id?: any; 
     created: Date;
 }
 

src/model/user-settings/UserSettings.ts

@@ -74,7 +74,7 @@ export class UserSettings implements UserSettings {
     verticalScroll = false
 
     //Advanced settings
-    publisherDefaults = false
+    publisherDefaults = true
     textAlignment = 0
     columnCount = 0
     wordSpacing = 0.0
@@ -151,6 +151,26 @@ export class UserSettings implements UserSettings {
         this.lineHeight = (await this.getProperty(ReadiumCSS.LINE_HEIGHT_KEY) != null) ? (await this.getProperty(ReadiumCSS.LINE_HEIGHT_KEY) as Incremental).value : this.lineHeight
         this.userProperties = this.getUserSettings()
     }
+
+    private async reset() {
+
+        this.appearance = 0
+        this.verticalScroll = false
+        this.fontSize = 100.0
+        this.fontOverride = false
+        this.fontFamily = 0
+
+        //Advanced settings
+        this.publisherDefaults = true
+        this.textAlignment = 0
+        this.columnCount = 0
+        this.wordSpacing = 0.0
+        this.letterSpacing = 0.0
+        this.pageMargins = 2.0
+        this.lineHeight = 1.0
+
+        this.userProperties = this.getUserSettings()
+    }
 
     private async initializeSelections(): Promise<void> {
 
@@ -477,7 +497,7 @@ export class UserSettings implements UserSettings {
         // Font size
         userProperties.addIncremental(this.fontSize, 100, 300, 25, "%", ReadiumCSS.FONT_SIZE_REF, ReadiumCSS.FONT_SIZE_KEY)
         // Line height
-        userProperties.addIncremental(this.lineHeight, 1, 2, 0.25, "", ReadiumCSS.LINE_HEIGHT_REF, ReadiumCSS.LINE_HEIGHT_KEY)
+        userProperties.addIncremental(this.lineHeight, 1, 2, 0.25, "em", ReadiumCSS.LINE_HEIGHT_REF, ReadiumCSS.LINE_HEIGHT_KEY)
         // Word spacing
         userProperties.addIncremental(this.wordSpacing, 0, 0., 0.25, "rem", ReadiumCSS.WORD_SPACING_REF, ReadiumCSS.WORD_SPACING_KEY)
         // Letter spacing
@@ -542,6 +562,13 @@ export class UserSettings implements UserSettings {
         return null;
     }
 
+    async resetUserSettings(): Promise<void> {
+        await this.store.remove(this.USERSETTINGS)
+        await this.reset()
+        this.applyProperties()
+        this.settingsChangeCallback();
+    }
+
     async applyUserSettings(userSettings: UserSettings): Promise<void> {
 
         if (userSettings.appearance) {
@@ -676,6 +703,9 @@ export class UserSettings implements UserSettings {
         } else if (incremental == 'wordSpacing') {
             (this.userProperties.getByRef(ReadiumCSS.WORD_SPACING_REF) as Incremental).increment()
             this.storeProperty(this.userProperties.getByRef(ReadiumCSS.WORD_SPACING_REF))
+        } else if (incremental == 'lineHeight') {
+            (this.userProperties.getByRef(ReadiumCSS.LINE_HEIGHT_REF) as Incremental).increment()
+            this.storeProperty(this.userProperties.getByRef(ReadiumCSS.LINE_HEIGHT_REF))
         }
         this.userProperties.getByRef(ReadiumCSS.PUBLISHER_DEFAULT_REF).value = false
         this.storeProperty(this.userProperties.getByRef(ReadiumCSS.PUBLISHER_DEFAULT_REF))
@@ -693,6 +723,9 @@ export class UserSettings implements UserSettings {
         } else if (incremental == 'wordSpacing') {
             (this.userProperties.getByRef(ReadiumCSS.WORD_SPACING_REF) as Incremental).decrement()
             this.storeProperty(this.userProperties.getByRef(ReadiumCSS.WORD_SPACING_REF))
+        } else if (incremental == 'lineHeight') {
+            (this.userProperties.getByRef(ReadiumCSS.LINE_HEIGHT_REF) as Incremental).decrement()
+            this.storeProperty(this.userProperties.getByRef(ReadiumCSS.LINE_HEIGHT_REF))
         }
         this.userProperties.getByRef(ReadiumCSS.PUBLISHER_DEFAULT_REF).value = false
         this.storeProperty(this.userProperties.getByRef(ReadiumCSS.PUBLISHER_DEFAULT_REF))

src/modules/BookmarkModule.ts

@@ -18,13 +18,15 @@ import { Bookmark, Locator } from "../model/Locator";
 import { IS_DEV } from "..";
 import { toast } from "materialize-css";
 import { UserSettings } from "../model/user-settings/UserSettings";
+import { v4 as uuid } from 'uuid';
 
 export type AddBookmark = (bookmark: Bookmark) => Promise<Bookmark>
 export type DeleteBookmark = (bookmark: Bookmark) => Promise<Bookmark>
 
 export interface BookmarkModuleAPI {
     addBookmark: AddBookmark;
     deleteBookmark: DeleteBookmark;
+    getBookmarks: Array<any>;
 }
 
 export interface BookmarkModuleConfig {
@@ -101,11 +103,11 @@ export default class BookmarkModule implements ReaderModule {
         if (this.headerMenu) {
             var menuBookmark = HTMLUtilities.findElement(this.headerMenu, "#menu-button-bookmark") as HTMLLinkElement;
             if (this.rights.enableBookmarks) {
-                menuBookmark.parentElement.style.display = "unset";
-                addEventListenerOptional(menuBookmark, 'click', this.saveBookmark.bind(this));
+                if (menuBookmark) menuBookmark.parentElement.style.display = "unset";
+                if (menuBookmark) addEventListenerOptional(menuBookmark, 'click', this.saveBookmark.bind(this));
             } else {
-                menuBookmark.parentElement.style.display = "none";
-                this.sideNavSectionBookmarks.style.display = "none";
+                if (menuBookmark) menuBookmark.parentElement.style.display = "none";
+                if (this.sideNavSectionBookmarks) this.sideNavSectionBookmarks.style.display = "none";
             }
         }
 
@@ -161,13 +163,14 @@ export default class BookmarkModule implements ReaderModule {
                 tocItem = this.publication.getTOCItemAbsolute(this.delegate.currentChapterLink.href);
             }
 
-            const url = this.publication.getAbsoluteHref(tocItem.href);
 
             const bookmarkPosition = this.settings.getSelectedView().getCurrentPosition();
 
+            const id: string = uuid();
 
             const bookmark: Bookmark = {
-                href: url,
+                id: id,
+                href: tocItem.href,
                 locations: {
                     progression: bookmarkPosition
                 },
@@ -211,6 +214,13 @@ export default class BookmarkModule implements ReaderModule {
         }
     }
 
+    async getBookmarks() : Promise<any>{
+        let bookmarks: Array<any> = [];
+        if (this.annotator) {
+            bookmarks = await this.annotator.getBookmarks() as Array<any>;
+        }
+        return bookmarks
+    }
     public async showBookmarks(): Promise<void> {
         let bookmarks: Array<any> = [];
         if (this.annotator) {
@@ -332,13 +342,16 @@ export default class BookmarkModule implements ReaderModule {
 
     private handleAnnotationLinkClick(event: MouseEvent, locator: Bookmark): void {
         if (locator) {
+            const linkHref = this.publication.getAbsoluteHref(locator.href);
+            locator.href = linkHref    
             this.delegate.navigate(locator);
         } else {
             if (IS_DEV) { console.log('bookmark data missing: ', event); }
         }
     }
 
     private handleAnnotationLinkDeleteClick(type: AnnotationType, event: MouseEvent, locator: any): void {
+        if (IS_DEV) { console.log('bookmark data locator: ', locator); }
         if (locator) {
             if (type == AnnotationType.Bookmark) {
                 this.deleteBookmark(locator);

src/navigator/IFrameNavigator.ts

@@ -976,6 +976,9 @@ export default class IFrameNavigator implements Navigator {
         event.stopPropagation();
     }
 
+    tableOfContents() : any{
+        return this.publication.tableOfContents
+    }
     previousPage(): any {
         this.handlePreviousPageClick(null)
     }
@@ -1262,6 +1265,11 @@ export default class IFrameNavigator implements Navigator {
     navigate(locator: Locator): void {
         this.hideIframeContents();
         this.showLoadingMessageAfterDelay();
+        if (locator.locations === undefined) {
+            locator.locations = {
+                progression: 0
+            } 
+        }
         this.newPosition = locator;
 
         if (locator.href.indexOf("#") !== -1) {

src/store/LocalStorageStore.ts

@@ -76,4 +76,18 @@ export default class LocalStorageStore implements Store {
         }
         return new Promise<void>(resolve => resolve());
     }
+
+    public async remove(key: string): Promise<void> {
+        if (!this.fallbackStore) {
+            if(this.useLocalStorage) {
+                window.localStorage.removeItem(this.getLocalStorageKey(key));
+            } else {
+                window.sessionStorage.removeItem(this.getLocalStorageKey(key));
+            }
+        } else {
+            await this.fallbackStore.remove(key);
+        }
+        return new Promise<void>(resolve => resolve());
+    }
+
 }

src/store/MemoryStore.ts

@@ -26,4 +26,10 @@ export default class MemoryStore implements Store {
         this.store[key] = value;
         return new Promise<void>(resolve => resolve());
     }
+
+    public remove(key: string): Promise<void> {
+        this.store[key] = null;
+        return new Promise<void>(resolve => resolve());
+    }
+
 }

src/store/Store.ts

@@ -10,6 +10,7 @@
 interface Store {
     get(key: string): Promise<any | null>;
     set(key: string, value: any): Promise<void>;
+    remove(key: string): Promise<void>;
 }
 
 export default Store;

viewer/index_api.html

@@ -26,14 +26,21 @@
 </head>
 
 <body>
+    <header id="headerMenu" style="position:fixed;top:0;right:0;z-index: 2;">
+        <div id="container-toc"></div>
+        <div id="container-bookmarks"></div>
+    </header>
 
     <div style="position:fixed;top:0;left:0;z-index: 2;">
+        <button onclick="javascript:D2Reader.resetUserSettings()">reset user setting</button><br>
         <button onclick="javascript:D2Reader.publisher(true)">publisher default</button><br>
         <button onclick="javascript:D2Reader.publisher(false)">publisher default off</button><br>
         <button onclick="javascript:D2Reader.increase('wordSpacing')">word spacing increase</button><br>
         <button onclick="javascript:D2Reader.decrease('wordSpacing')">word spacing decrease</button><br>
         <button onclick="javascript:D2Reader.increase('letterSpacing')">letter spacing increase</button><br>
         <button onclick="javascript:D2Reader.decrease('letterSpacing')">letter spacing decrease</button><br>
+        <button onclick="javascript:D2Reader.increase('lineHeight')">line height increase</button><br>
+        <button onclick="javascript:D2Reader.decrease('lineHeight')">line height decrease</button><br>
         <button onclick="javascript:D2Reader.increase('fontSize')">font increase</button><br>
         <button onclick="javascript:D2Reader.decrease('fontSize')">font decrease</button><br>
 
@@ -50,6 +57,7 @@
         <button onclick="javascript:D2Reader.applyUserSettings({wordSpacing:0.25})">word spacing 0.25</button><br>
         <button onclick="javascript:D2Reader.applyUserSettings({letterSpacing:0.25})">letter spacing 0.25</button><br>
         <button onclick="javascript:D2Reader.applyUserSettings({columnCount:'1'})">column 1</button><br>
+        <button onclick="javascript:D2Reader.applyUserSettings({columnCount:'2'})">column 2</button><br>
         <button onclick="javascript:D2Reader.applyUserSettings({columnCount:'auto'})">column auto</button><br>
         <button onclick="javascript:D2Reader.applyUserSettings({textAlignment:'justify'})">align justify</button><br>
         <button onclick="javascript:D2Reader.applyUserSettings({textAlignment:'start'})">align start</button><br>
@@ -66,6 +74,55 @@
             to chapter 1</button><br>
         <button onclick="javascript:D2Reader.saveBookmark()">add bookmark</button><br>
         <button onclick="javascript:D2Reader.deleteBookmark({id:0.32616493991327755})">delete bookmark</button><br>
+
+        <button onclick="javascript:D2Reader.bookmarks().then(
+            result => { 
+                console.log(result)
+                console.log(result.length)
+                var container = document.getElementById('container-bookmarks');
+                var tocString = ''
+                result.forEach(function (item, index) {
+                    if (index == 0) {
+                        console.log('first')
+                        console.log(index)
+                        tocString += '<ul><li onclick=\'javascript:D2Reader.goTo(' + JSON.stringify(item) + ')\'>' + item.title + ' - ' + item.locations.progression + '</li>'
+                    } else if (index == result.length - 1) {
+                        console.log('last')
+                        console.log(index)
+                        tocString += '<li onclick=\'javascript:D2Reader.goTo(' + JSON.stringify(item) + ')\'>' + item.title + ' - ' + item.locations.progression + '</li></ul>'
+                    } else {
+                        console.log('middle')
+                        console.log(index)
+                        tocString += '<li onclick=\'javascript:D2Reader.goTo(' + JSON.stringify(item) + ')\'>' + item.title + ' - ' + item.locations.progression + '</li>'
+                    }
+                });
+                container.innerHTML = tocString
+            })">show bookmarks</button><br>
+
+        <button onclick="javascript:D2Reader.tableOfContents().then(
+            result => { 
+                console.log(result)
+                console.log(result.length)
+                var container = document.getElementById('container-toc');
+                var tocString = ''
+                result.forEach(function (item, index) {
+                    if (index == 0) {
+                        console.log('first')
+                        console.log(index)
+                        tocString += '<ul><li onclick=\'javascript:D2Reader.goTo(' + JSON.stringify(item) + ')\'>' + item.title + '</li>'
+                    } else if (index == result.length - 1) {
+                        console.log('last')
+                        console.log(index)
+                        tocString += '<li onclick=\'javascript:D2Reader.goTo(' + JSON.stringify(item) + ')\'>' + item.title + '</li></ul>'
+                    } else {
+                        console.log('middle')
+                        console.log(index)
+                        tocString += '<li onclick=\'javascript:D2Reader.goTo(' + JSON.stringify(item) + ')\'>' + item.title + '</li>'
+                    }
+                });
+                container.innerHTML = tocString
+            })">show TOC</button><br>
+
     </div>
 
     <div class="content" id="root">

viewer/readium-css/ReadiumCSS-after.css

@@ -747,7 +747,7 @@ body {
    Repo: https://github.com/readium/readium-css */
 
 :root[style*="readium-advanced-on"][style*="--USER__lineHeight"] {
-  line-height: var(--USER__lineHeight) !important;
+  line-height: calc((var(--USER__lineHeight) + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation)) !important;
 }
 
 :root[style*="readium-advanced-on"][style*="--USER__lineHeight"] body,