css and html optimization

d-i-t-a · Oct 19, 2019 · 602b14b · 602b14b
1 parent a224969
commit 602b14b
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 143 deletions.
diff --git 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
@@ -123,7 +123,7 @@ export default class BookmarkModule implements ReaderModule {
 
  async deleteBookmark(bookmark: Bookmark): Promise<any> {
  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
@@ -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
@@ -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
@@ -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;
+ }
+ }
+ }
+}
diff --git 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
@@ -23,13 +23,6 @@
  <script> var exports = {}; </script>
  <script src="reader.js"></script>
 
- <!-- Material Icons-->
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
- <!-- START Material CSS -->
- <!-- Material header and footer CSS - uncomment if custom header an d footer is provided-->
- <link rel="stylesheet" href="material.css" />
- <!-- END Material CSS -->
 </head>
 
 <body>
@@ -47,7 +40,6 @@
  <button onclick="javascript:D2Reader.applyUserSettings({appearance:'day'})">day</button><br>
  <button onclick="javascript:D2Reader.applyUserSettings({appearance:'sepia'})">sepia</button><br>
  <button onclick="javascript:D2Reader.applyUserSettings({appearance:'night'})">night</button><br>
- <button onclick="javascript:D2Reader.applyUserSettings({appearance:'neon'})">neon</button><br>
  <button onclick="javascript:D2Reader.applyUserSettings({fontSize:100})">font size 100</button><br>
  <button onclick="javascript:D2Reader.applyUserSettings({fontSize:150})">font size 150</button><br>
  <button onclick="javascript:D2Reader.applyUserSettings({fontSize:200})">font size 200</button><br>
@@ -67,8 +59,10 @@
  <button onclick="javascript:D2Reader.nextPage()">next page</button><br>
  <button onclick="javascript:D2Reader.scroll(true)">scroll</button><br>
  <button onclick="javascript:D2Reader.scroll(false)">paginated</button><br>
- <button onclick="javascript:D2Reader.goTo({href:'OEBPS/Text/front.xhtml', title:'frontpage', locations:{progression:0}})">got to frontpage</button><br>
- <button onclick="javascript:D2Reader.goTo({href:'OEBPS/Text/chapter_01.xhtml', title:'chapter 1', locations:{progression:0}})">got to chapter 1</button><br>
+ <button onclick="javascript:D2Reader.goTo({href:'OEBPS/Text/front.xhtml', title:'frontpage', locations:{progression:0}})">go
+ to frontpage</button><br>
+ <button onclick="javascript:D2Reader.goTo({href:'OEBPS/Text/chapter_01.xhtml', title:'chapter 1', locations:{progression:0}})">go
+ 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>
  </div>
@@ -78,8 +72,9 @@
  <main style="overflow: hidden" tabindex=-1 id="iframe-wrapper">
  <div id="reader-loading" class="loading"></div>
  <div id="reader-error" class="error"></div>
- <iframe allowtransparency="true" title="ePub Reader" SCROLLING="no" style="border: 0px; display: block;" width="100%" height="100%"></iframe>
- </main> 
+ <iframe allowtransparency="true" title="ePub Reader" SCROLLING="no" style="border: 0px; display: block;"
+ width="100%" height="100%"></iframe>
+ </main>
  </div>
  </div>
 
@@ -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);
+ });
 
  </script>
 
-
- <!-- START Material Scripts -->
- <!-- the following are not needed for the default reader css, only if material (custom) header and footer are used -->
- <!-- Compiled and minified Materialize JavaScript -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
-
-
  <noscript>
  <style>
  noscript {