diff --git a/src/model/user-settings/UserSettings.ts b/src/model/user-settings/UserSettings.ts index 2a763605..87ca37ff 100644 --- a/src/model/user-settings/UserSettings.ts +++ b/src/model/user-settings/UserSettings.ts @@ -381,7 +381,9 @@ export class UserSettings implements UserSettings { for (let index = 0; index < UserSettings.fontFamilyValues.length; index++) { this.fontButtons[index].className = this.fontButtons[0].className.replace(" active", "") } - if (this.fontButtons[await this.userProperties.getByRef(ReadiumCSS.FONT_FAMILY_REF).value]) this.fontButtons[await this.userProperties.getByRef(ReadiumCSS.FONT_FAMILY_REF).value].className += " active" + if (this.userProperties) { + if (this.fontButtons[await this.userProperties.getByRef(ReadiumCSS.FONT_FAMILY_REF).value]) this.fontButtons[await this.userProperties.getByRef(ReadiumCSS.FONT_FAMILY_REF).value].className += " active" + } } private updateViewButtons(): void { @@ -448,9 +450,11 @@ export class UserSettings implements UserSettings { letterSpacing: this.userProperties.getByRef(ReadiumCSS.LETTER_SPACING_REF).value, publisherDefault: this.userProperties.getByRef(ReadiumCSS.PUBLISHER_DEFAULT_REF).value } - this.api.updateUserSettings(userSettings).then(_ => { - if (IS_DEV) { console.log("api updated user settings", userSettings) } - }) + if (this.api) { + this.api.updateUserSettings(userSettings).then(_ => { + if (IS_DEV) { console.log("api updated user settings", userSettings) } + }) + } } private getUserSettings(): UserProperties { diff --git a/src/modules/BookmarkModule.ts b/src/modules/BookmarkModule.ts index 3482f969..f058d602 100644 --- a/src/modules/BookmarkModule.ts +++ b/src/modules/BookmarkModule.ts @@ -123,7 +123,7 @@ export default class BookmarkModule implements ReaderModule { async deleteBookmark(bookmark: Bookmark): Promise { if (this.annotator) { - if (this.api.deleteBookmark) { + if (this.api && this.api.deleteBookmark) { this.api.deleteBookmark(bookmark).then(async _result => { var deleted = await this.annotator.deleteBookmark(bookmark); @@ -177,7 +177,7 @@ export default class BookmarkModule implements ReaderModule { } if (!await this.annotator.locatorExists(bookmark, AnnotationType.Bookmark)) { - if (this.api.addBookmark) { + if (this.api && this.api.addBookmark) { this.api.addBookmark(bookmark).then(async bookmark => { console.log(bookmark) var saved = await this.annotator.saveBookmark(bookmark); @@ -287,8 +287,6 @@ export default class BookmarkModule implements ReaderModule { let timestamp: HTMLSpanElement = document.createElement("span"); timestamp.className = "timestamp" timestamp.innerHTML = self.readableTimestamp(locator.created); - - bookmarkLink.appendChild(document.createElement("br")) bookmarkLink.appendChild(timestamp) addEventListenerOptional(bookmarkLink, 'click', (event: MouseEvent) => { diff --git a/src/navigator/IFrameNavigator.ts b/src/navigator/IFrameNavigator.ts index 710c5e39..765738d4 100644 --- a/src/navigator/IFrameNavigator.ts +++ b/src/navigator/IFrameNavigator.ts @@ -1362,7 +1362,7 @@ export default class IFrameNavigator implements Navigator { type: this.currentChapterLink.type, title: this.currentChapterLink.title } - if (this.api.updateCurrentlocation) { + if (this.api && this.api.updateCurrentlocation) { this.api.updateCurrentlocation(position).then(async _ => { if (IS_DEV) { console.log("api updated current location", position) } return this.annotator.saveLastReadingPosition(position); diff --git a/src/styles/sass/reader.scss b/src/styles/sass/reader.scss index c125eb71..88842420 100644 --- a/src/styles/sass/reader.scss +++ b/src/styles/sass/reader.scss @@ -28,3 +28,4 @@ @import "reader/settings"; // Bookmarks @import "reader/bookmarks"; +@import "reader/annotations"; diff --git a/src/styles/sass/reader/_annotations.scss b/src/styles/sass/reader/_annotations.scss new file mode 100644 index 00000000..5eee809b --- /dev/null +++ b/src/styles/sass/reader/_annotations.scss @@ -0,0 +1,60 @@ +/* + * Project: R2D2BC - Web Reader + * Developers: Aferdita Muriqi + * Copyright (c) 2019. DITA. All rights reserved. + * Developed on behalf of: Bokbasen AS (https://www.bokbasen.no) + * 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. + */ + + .sidenav-annotations { + .chapter-link { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .chapter-title { + padding: 0 16px; + font-size: 14px; + color: lightgray; + } + ol { + padding-left: 24px; + } + li { + position: relative; + .delete { + position: absolute; + right: 10px; + top: 50%; + transform: translate(0,-50%); + } + .bookmark-link { + display: block; + position: relative; + padding-top: 8px !important; + padding-bottom: 8px !important; + padding-left: 34px !important; + line-height: 1.25; + svg, i { + left: 4px; + top: 8px; + position: absolute; + } + .title { + display: block; + } + .subtitle { + display: block; + line-height: 20px; + font-size: 10px; + } + .timestamp { + display: block; + line-height: 20px; + font-size: 8px; + } + } + } +} \ No newline at end of file diff --git a/src/styles/sass/reader/_settings.scss b/src/styles/sass/reader/_settings.scss index 8409896b..75a288fa 100644 --- a/src/styles/sass/reader/_settings.scss +++ b/src/styles/sass/reader/_settings.scss @@ -25,11 +25,30 @@ margin: 0; position: relative; + svg.checkedIcon { + // styles the icon that appears next to paginate/scrolling buttons + // set a default color of $ui-white, since this should always + // show up on a dark color background. + color: $ui-white; + display: none; + fill: $ui-white; + height: 0.9rem; + width: 0.9rem; + } // reverse the active state &.active { color: $ui-white; background-color: $ui-default; + svg.checkedIcon { + display: inline-block; + margin: 0; + position: absolute; + top: 50%; + transform: translateY(-55%); + right: 0.35rem; + vertical-align: text-bottom; + } } } @@ -100,6 +119,9 @@ &.active { color: $ui-black; + svg.checkedIcon { + fill: $ui-black; + } } } @@ -109,6 +131,9 @@ &.active { color: $ui-black; + svg.checkedIcon { + fill: $ui-black; + } } } @@ -122,6 +147,9 @@ &.active { color: $ui-white; + svg.checkedIcon { + fill: $ui-white; + } } } @@ -160,6 +188,10 @@ button { color: $ui-dark-gray; + svg.checkedIcon { + color: $night-bg; + fill: $night-bg; + } // reverse the active state &.active { @@ -198,6 +230,10 @@ button { color: $ui-dark-gray; + svg.checkedIcon { + color: $sepia-bg; + fill: $sepia-bg; + } // reverse the active state &.active { diff --git a/viewer/index_api.html b/viewer/index_api.html index b93c258c..3fe96eb6 100644 --- a/viewer/index_api.html +++ b/viewer/index_api.html @@ -23,13 +23,6 @@ - - - - - - - @@ -47,7 +40,6 @@


-



@@ -67,8 +59,10 @@


-
-
+
+


@@ -78,8 +72,9 @@
- -
+ + @@ -102,72 +97,44 @@ var injectables = [ - {type:'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-before.css', r2before: true}, - {type:'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-default.css', r2default: true}, - {type:'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-after.css', r2after: true}, - {type:'style', url: 'http://localhost:4444/viewer/readium-css/neon-after.css', r2after: true, appearance: 'neon'}, - {type:'script', url: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-MML-AM_CHTML&latest'}, - {type:'style', url: 'http://localhost:4444/viewer/fonts/opendyslexic/opendyslexic.css', fontFamily: 'opendyslexic', systemFont: false}, - {type:'style', fontFamily: 'Courier', systemFont: true}, - {type:'script', url: 'http://localhost:4444/viewer/injectables/footnotes/footnotes.js'}, - {type:'style', url: 'http://localhost:4444/viewer/injectables/footnotes/footnotes.css'}, + { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-before.css', r2before: true }, + { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-default.css', r2default: true }, + { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-after.css', r2after: true }, + // { type: 'style', url: 'http://localhost:4444/viewer/readium-css/neon-after.css', r2after: true, appearance: 'neon' }, + { type: 'script', url: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-MML-AM_CHTML&latest' }, + { type: 'style', url: 'http://localhost:4444/viewer/fonts/opendyslexic/opendyslexic.css', fontFamily: 'opendyslexic', systemFont: false }, + { type: 'style', fontFamily: 'Courier', systemFont: true }, + { type: 'script', url: 'http://localhost:4444/viewer/injectables/footnotes/footnotes.js' }, + { type: 'style', url: 'http://localhost:4444/viewer/injectables/footnotes/footnotes.css' }, ] - var lastReadingPosition, annotations, userSettings, baseUrl = null; var urlParams = getURLQueryParams(); var upLink = { url: new URL("/", window.location.href), label: "Back", ariaLabel: "Go back" }; - D2Reader.load({ - url: new URL(urlParams['url']), - upLinkUrl: upLink, - ui: { - settings: { - fontFamily: true, - fontSize: true, - appearance: true, - scroll: true - }, - }, - rights: { - enableBookmarks: true + D2Reader.load({ + url: new URL(urlParams['url']), + upLinkUrl: upLink, + ui: { + settings: { + fontFamily: true, + fontSize: true, + appearance: true, + scroll: true }, - material: false, - userSettings: userSettings, - annotations: annotations, - lastReadingPosition: lastReadingPosition, - injectables: injectables, - api: { - addBookmark: function (bookmark) { - bookmark.id = Math.random() - return Promise.resolve(bookmark); - }, - deleteBookmark: function (bookmark) { - return Promise.resolve(); - }, - updateCurrentlocation: function (location) { - return Promise.resolve(); - }, - updateUserSettings: function (userSettings) { - return Promise.resolve(); - }, - } - }).then(instance => { - console.log("D2Reader loaded ", instance); - console.log("instance.bookmarkModule ", instance.bookmarkModule) - }).catch(error => { - console.error("error.message ", error.message); - }); - // })(); + }, + rights: { + enableBookmarks: true + }, + injectables: injectables + }).then(instance => { + console.log("D2Reader loaded ", instance); + console.log("instance.bookmarkModule ", instance.bookmarkModule) + }).catch(error => { + console.error("error.message ", error.message); + }); - - - - - - -