From 6c4bae7d84180af558ab6872a40f59ad72d7cd0d Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 15:39:16 -0500
Subject: [PATCH 01/17] Cleanup HTML and CSS

---
 src/styles/sass/reader/_toolbox.scss |  13 --
 viewer/index.html                    | 253 +++++++++------------------
 viewer/index_api.html                |  50 +++---
 viewer/index_material.html           | 159 +++++++++--------
 4 files changed, 194 insertions(+), 281 deletions(-)

diff --git a/src/styles/sass/reader/_toolbox.scss b/src/styles/sass/reader/_toolbox.scss
index bd4a0261..e8f303ed 100644
--- a/src/styles/sass/reader/_toolbox.scss
+++ b/src/styles/sass/reader/_toolbox.scss
@@ -53,19 +53,6 @@
   background: grey;
 }
 
-.toolbox-backdrop {
-  display: none;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 998; // navbar-fixed is set to 997
-  background: rgba(255,255,255,0);
-}
-
-
 @keyframes toolsAnimateIn {
   from {
     opacity: 0;
diff --git a/viewer/index.html b/viewer/index.html
index 6b0a25db..f47eeb68 100644
--- a/viewer/index.html
+++ b/viewer/index.html
@@ -25,8 +25,7 @@
     <meta charset="utf-8" />
     <meta name="author" content="Aferdita Muriqi" />
     <meta name="description" content="A viewer application for EPUB files." />
-    <meta name="viewport"
-        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
 
     <!-- R2 Reader CSS -->
     <link rel="stylesheet" href="reader.css" />
@@ -52,71 +51,48 @@
                 <nav class="navbar">
                     <div class="nav-wrapper"><span class="brand-logo  hide-on-med-and-down " id="book-title"></span>
                         <ul id="nav-mobile-right" class="right">
-                            <li style="display:none"><a data-target="container-view-note-input"
-                                    class="dropdown-trigger " id="menu-button-note"><i
-                                        class="material-icons">speaker_notes</i></a></li>
-                            <li><a class="saveBookmark" id="menu-button-bookmark"><i
-                                        class="material-icons">bookmark</i></a></li>
-                            <li><a data-target="container-view-tts-settings" class="dropdown-trigger "
-                                    id="menu-button-tts"><i class="material-icons ">volume_up</i></a></li>
-                            <li><a data-target="container-view-settings" class="dropdown-trigger "
-                                    id="menu-button-settings"><i class="material-icons">settings</i></a></li>
-                            <li style="display:none"><a data-target="container-view-search" class="dropdown-trigger "
-                                    id="menu-button-search"><i class="material-icons">search</i></a></li>
+                            <li style="display:none"><a data-target="container-view-note-input" class="dropdown-trigger " id="menu-button-note"><i class="material-icons">speaker_notes</i></a></li>
+                            <li><a class="saveBookmark" id="menu-button-bookmark"><i class="material-icons">bookmark</i></a></li>
+                            <li><a data-target="container-view-tts-settings" class="dropdown-trigger " id="menu-button-tts"><i class="material-icons ">volume_up</i></a></li>
+                            <li><a data-target="container-view-settings" class="dropdown-trigger " id="menu-button-settings"><i class="material-icons">settings</i></a></li>
+                            <li style="display:none"><a data-target="container-view-search" class="dropdown-trigger " id="menu-button-search"><i class="material-icons">search</i></a></li>
                         </ul>
                         <ul id="nav-mobile-left" class="left">
-                            <li><a href="#!" data-target="sidenav-left" class="sidenav-trigger left"><i
-                                        class="material-icons  show-on-large">menu</i></a></li>
-                            <li><a rel="prev" style="padding-left: 7px; padding-right: 7px;"><i
-                                        class="material-icons ">arrow_back_ios</i></a></li>
-                            <li><a rel="next" style="padding-left: 7px; padding-right: 7px;"><i
-                                        class="material-icons ">arrow_forward_ios</i></a></li>
+                            <li><a href="#!" data-target="sidenav-left" class="sidenav-trigger left"><i class="material-icons  show-on-large">menu</i></a></li>
+                            <li><a rel="prev" style="padding-left: 7px; padding-right: 7px;"><i class="material-icons ">arrow_back_ios</i></a></li>
+                            <li><a rel="next" style="padding-left: 7px; padding-right: 7px;"><i class="material-icons ">arrow_forward_ios</i></a></li>
                         </ul>
                     </div>
                 </nav>
             </div>
             <ul id="sidenav-left" class="sidenav">
-                <li><a href="#" class="logo-container ">D2 Reader<i class="material-icons  left"
-                            style="margin-right: 15px">
+                <li><a href="#" class="logo-container ">D2 Reader<i class="material-icons  left" style="margin-right: 15px">
                             import_contacts
                         </i><i class="material-icons right  editAnnotations" id="expand-menu">unfold_more</i></a></li>
                 <li class="no-padding ">
                     <ul class="collapsible collapsible-accordion">
                         <li style="padding-left: 16px" id="sidenav-section-gotopage">
-                            Go To Page: <input type="text" style="width:100px;" id="goToPageNumberInput" /><button
-                                id="goToPageNumberButton">Go</button>
+                            Go To Page: <input type="text" style="width:100px;" id="goToPageNumberInput" /><button id="goToPageNumberButton">Go</button>
                         </li>
-                        <li class="bold" id="sidenav-section-toc"><a class="collapsible-header ">Table of Contents<i
-                                    class="material-icons chevron purple-yellow-text">chevron_left</i></a>
-                            <div id="container-view-toc" class="contents-view collapsible-body active"
-                                style="background-color : #ffffff">
+                        <li class="bold" id="sidenav-section-toc"><a class="collapsible-header ">Table of Contents<i class="material-icons chevron purple-yellow-text">chevron_left</i></a>
+                            <div id="container-view-toc" class="contents-view collapsible-body active" style="background-color : #ffffff">
                             </div>
                         </li>
-                        <li class="bold " id="sidenav-section-bookmarks"><a class="collapsible-header ">Bookmarks <i
-                                    class="material-icons chevron ">chevron_left</i></a>
-                            <div id="container-view-bookmarks" class="bookmarks-view collapsible-body active"
-                                style="background-color : #ffffff">
+                        <li class="bold " id="sidenav-section-bookmarks"><a class="collapsible-header ">Bookmarks <i class="material-icons chevron ">chevron_left</i></a>
+                            <div id="container-view-bookmarks" class="bookmarks-view collapsible-body active" style="background-color : #ffffff">
                             </div>
                         </li>
-                        <li class="bold " id="sidenav-section-highlights"><a
-                                class="collapsible-header allvit-purple-text">Highlights<i
-                                    class="material-icons chevron allvit-purple-text">chevron_left</i></a>
-                            <div id="container-view-highlights" class="highlights-view collapsible-body active"
-                                style="background-color : #ffffff">
+                        <li class="bold " id="sidenav-section-highlights"><a class="collapsible-header allvit-purple-text">Highlights<i class="material-icons chevron allvit-purple-text">chevron_left</i></a>
+                            <div id="container-view-highlights" class="highlights-view collapsible-body active" style="background-color : #ffffff">
                             </div>
                         </li>
-                        <li class="bold" id="sidenav-section-landmarks"><a
-                                class="collapsible-header allvit-purple-text">Landmarks<i
-                                    class="material-icons chevron allvit-purple-text">chevron_left</i></a>
-                            <div id="container-view-landmarks" class="landmarks-view collapsible-body active"
-                                style="background-color : #ffffff">
+                        <li class="bold" id="sidenav-section-landmarks"><a class="collapsible-header allvit-purple-text">Landmarks<i class="material-icons chevron allvit-purple-text">chevron_left</i></a>
+                            <div id="container-view-landmarks" class="landmarks-view collapsible-body active" style="background-color : #ffffff">
                             </div>
                         </li>
-                        <li class="bold" id="sidenav-section-pagelist"><a
-                                class="collapsible-header allvit-purple-text">Page
+                        <li class="bold" id="sidenav-section-pagelist"><a class="collapsible-header allvit-purple-text">Page
                                 List<i class="material-icons chevron allvit-purple-text">chevron_left</i></a>
-                            <div id="container-view-pagelist" class="pageList-view collapsible-body active"
-                                style="background-color : #ffffff">
+                            <div id="container-view-pagelist" class="pageList-view collapsible-body active" style="background-color : #ffffff">
                             </div>
                         </li>
                     </ul>
@@ -127,57 +103,40 @@
 
 
                 <center>
-                    <button style="width:24%" onclick="javascript:D2Reader.startReadAloud()"><i
-                            class="material-icons">play_arrow</i>PLAY</button>
-                    <button style="width:24%" onclick="javascript:D2Reader.stopReadAloud()"><i
-                            class="material-icons">stop</i>STOP</button>
-                    <button style="width:24%" onclick="javascript:D2Reader.pauseReadAloud()"><i
-                            class="material-icons">pause</i>PAUSE</button>
-                    <button style="width:24%" onclick="javascript:D2Reader.resumeReadAloud()"><i
-                            class="material-icons">play_arrow</i>RESUME</button>
+                    <button style="width:24%" onclick="javascript:D2Reader.startReadAloud()"><i class="material-icons">play_arrow</i>PLAY</button>
+                    <button style="width:24%" onclick="javascript:D2Reader.stopReadAloud()"><i class="material-icons">stop</i>STOP</button>
+                    <button style="width:24%" onclick="javascript:D2Reader.pauseReadAloud()"><i class="material-icons">pause</i>PAUSE</button>
+                    <button style="width:24%" onclick="javascript:D2Reader.resumeReadAloud()"><i class="material-icons">play_arrow</i>RESUME</button>
                 </center>
                 <center>
-                    <button onclick="javascript:D2Reader.applyTTSSettings({ color: 'orange' })"><i
-                            class="material-icons" style="color: rgba(250, 96, 0, 0.5);">lense</i></button>
-                    <button onclick="javascript:D2Reader.applyTTSSettings({ color: 'red' })"><i class="material-icons"
-                            style="color: indianred;">lense</i></button>
-                    <button onclick="javascript:D2Reader.applyTTSSettings({ color: 'gray' })"><i class="material-icons"
-                            style="color: lightslategrey;">lense</i></button>
-                    <button onclick="javascript:D2Reader.applyTTSSettings({ color: 'purple' })"><i
-                            class="material-icons" style="color: mediumpurple;">lense</i></button>
-                    <button onclick="javascript:D2Reader.applyTTSSettings({ color: 'green' })"><i class="material-icons"
-                            style="color: lightgreen;">lense</i></button>
+                    <button onclick="javascript:D2Reader.applyTTSSettings({ color: 'orange' })"><i class="material-icons" style="color: rgba(250, 96, 0, 0.5);">lense</i></button>
+                    <button onclick="javascript:D2Reader.applyTTSSettings({ color: 'red' })"><i class="material-icons" style="color: indianred;">lense</i></button>
+                    <button onclick="javascript:D2Reader.applyTTSSettings({ color: 'gray' })"><i class="material-icons" style="color: lightslategrey;">lense</i></button>
+                    <button onclick="javascript:D2Reader.applyTTSSettings({ color: 'purple' })"><i class="material-icons" style="color: mediumpurple;">lense</i></button>
+                    <button onclick="javascript:D2Reader.applyTTSSettings({ color: 'green' })"><i class="material-icons" style="color: lightgreen;">lense</i></button>
                 </center>
 
                 <div>
                     <span style="width: 30%; display: inline-block;">Auto Scroll</span>
-                    <input type="checkbox" class="filled" id="autoScroll" name="autoScroll"
-                        onchange="javascript:D2Reader.applyTTSSettings({ autoScroll: this.checked })">
+                    <input type="checkbox" class="filled" id="autoScroll" name="autoScroll" onchange="javascript:D2Reader.applyTTSSettings({ autoScroll: this.checked })">
                 </div>
                 <div>
                     <label style="margin-right: 20px;">Language</label>
-                    <select style="width: 70%;" onchange="javascript:D2Reader.preferredVoice(value)"
-                        id="preferred-languages">
+                    <select style="width: 70%;" onchange="javascript:D2Reader.preferredVoice(value)" id="preferred-languages">
                         <option value="" disabled selected>Choose language</option>
                     </select>
                 </div>
                 <div class="range-slider">
                     <span style="width: 20%; display: inline-block;">Rate</span>
-                    <input class="range-slider__range" style="width:70%" type="range" min="0.1" max="10" step="0.1"
-                        value="1" id="speechRate" name="speechRate"
-                        onchange="javascript:D2Reader.applyTTSSettings({ rate: this.value })" />
+                    <input class="range-slider__range" style="width:70%" type="range" min="0.1" max="10" step="0.1" value="1" id="speechRate" name="speechRate" onchange="javascript:D2Reader.applyTTSSettings({ rate: this.value })" />
                 </div>
                 <div class="range-slider">
                     <label style="width: 20%; display: inline-block;">Pitch</label>
-                    <input class="range-slider__range" style="width:70%" type="range" min="0.1" max="2" step="0.1"
-                        value="1" id="speechPitch" name="speechPitch"
-                        onchange="javascript:D2Reader.applyTTSSettings({ pitch: this.value })" />
+                    <input class="range-slider__range" style="width:70%" type="range" min="0.1" max="2" step="0.1" value="1" id="speechPitch" name="speechPitch" onchange="javascript:D2Reader.applyTTSSettings({ pitch: this.value })" />
                 </div>
                 <div class="range-slider">
                     <label style="width: 20%; display: inline-block;">Volume</label>
-                    <input class="range-slider__range" style="width:70%" type="range" min="0.1" max="1" step="0.1"
-                        value="1" id="speechVolume" name="speechVolume"
-                        onchange="javascript:D2Reader.applyTTSSettings({ volume: this.value })" />
+                    <input class="range-slider__range" style="width:70%" type="range" min="0.1" max="1" step="0.1" value="1" id="speechVolume" name="speechVolume" onchange="javascript:D2Reader.applyTTSSettings({ volume: this.value })" />
                 </div>
 
                 <!-- userProperties.addIncremental(this.rate, 0.1, 10, 0.1, "", TTSREFS.RATE_REF, TTSREFS.RATE_KEY)
@@ -229,11 +188,9 @@
                     <li id="container-view-fontsize">
                         <ul class="settings-options">
 
-                            <li class="font-setting"><button id="decrease-font" class="decrease" role="menuitem"
-                                    tabindex="-1">A-</button></li>
+                            <li class="font-setting"><button id="decrease-font" class="decrease" role="menuitem" tabindex="-1">A-</button></li>
 
-                            <li class="font-setting"><button id="increase-font" class="increase" role="menuitem"
-                                    tabindex="-1">A+</button></li>
+                            <li class="font-setting"><button id="increase-font" class="increase" role="menuitem" tabindex="-1">A+</button></li>
 
                         </ul>
                     </li>
@@ -241,24 +198,20 @@
                     <li id="container-view-appearance">
                         <ul class="settings-options">
 
-                            <li class="reading-theme"><button id="day-theme" class="day-theme" role="menuitem"
-                                    tabindex="-1" aria-label="Day mode enabled">Day<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                            <li class="reading-theme"><button id="day-theme" class="day-theme" role="menuitem" tabindex="-1" aria-label="Day mode enabled">Day<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
+                                         class="checkedIcon" role="img" aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
-                            <li class="reading-theme"><button id="sepia-theme" class="sepia-theme" role="menuitem"
-                                    tabindex="-1" aria-label="Sepia mode disabled">Sepia<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                            <li class="reading-theme"><button id="sepia-theme" class="sepia-theme" role="menuitem" tabindex="-1" aria-label="Sepia mode disabled">Sepia<svg xmlns="http://www.w3.org/2000/svg"
+                                         preserveAspectRatio="xMidYMid meet" class="checkedIcon" role="img"
+                                         aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
-                            <li class="reading-theme"><button id="night-theme" class="night-theme" role="menuitem"
-                                    tabindex="-1" aria-label="Night mode disabled">Night<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                            <li class="reading-theme"><button id="night-theme" class="night-theme" role="menuitem" tabindex="-1" aria-label="Night mode disabled">Night<svg xmlns="http://www.w3.org/2000/svg"
+                                         preserveAspectRatio="xMidYMid meet" class="checkedIcon" role="img"
+                                         aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
@@ -268,17 +221,15 @@
                     <li id="container-view-scroll">
                         <ul class="settings-options">
 
-                            <li class="reading-view"><button id="view-scroll" class="view-scroll" role="menuitem"
-                                    tabindex="-1" aria-label="Scroll view enabled">Scroll<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                            <li class="reading-view"><button id="view-scroll" class="view-scroll" role="menuitem" tabindex="-1" aria-label="Scroll view enabled">Scroll<svg xmlns="http://www.w3.org/2000/svg"
+                                         preserveAspectRatio="xMidYMid meet" class="checkedIcon" role="img"
+                                         aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
-                            <li class="reading-view"><button id="view-paginated" class="view-paginated" role="menuitem"
-                                    tabindex="-1" aria-label="Paginated view disabled">Paginated<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                            <li class="reading-view"><button id="view-paginated" class="view-paginated" role="menuitem" tabindex="-1" aria-label="Paginated view disabled">Paginated<svg xmlns="http://www.w3.org/2000/svg"
+                                         preserveAspectRatio="xMidYMid meet" class="checkedIcon" role="img"
+                                         aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
@@ -288,31 +239,26 @@
                     <li id="container-view-fontfamily">
                         <ul class="settings-options">
 
-                            <li class="reading-style"><button id="publisher-font" class="publisher-font" role="menuitem"
-                                    tabindex="-1" aria-label="Publisher font enabled">Publisher<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                            <li class="reading-style"><button id="publisher-font" class="publisher-font" role="menuitem" tabindex="-1" aria-label="Publisher font enabled">Publisher<svg xmlns="http://www.w3.org/2000/svg"
+                                         preserveAspectRatio="xMidYMid meet" class="checkedIcon" role="img"
+                                         aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
-                            <li class="reading-style"><button id="serif-font" class="serif-font" role="menuitem"
-                                    tabindex="-1" aria-label="Serif font disabled">Serif<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                            <li class="reading-style"><button id="serif-font" class="serif-font" role="menuitem" tabindex="-1" aria-label="Serif font disabled">Serif<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
+                                         class="checkedIcon" role="img"
+                                         aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
-                            <li class="reading-style"><button id="sans-font" class="sans-font" role="menuitem"
-                                    tabindex="-1" aria-label="Sans-serif font disabled">Sans-serif<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                            <li class="reading-style"><button id="sans-font" class="sans-font" role="menuitem" tabindex="-1" aria-label="Sans-serif font disabled">Sans-serif<svg xmlns="http://www.w3.org/2000/svg"
+                                         preserveAspectRatio="xMidYMid meet" class="checkedIcon" role="img"
+                                         aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
-                            <li class="reading-style"><button id="opendyslexic-font" class="opendyslexic-font"
-                                    role="menuitem" tabindex="-1" aria-label="Open Dyslexic font disabled">Open
-                                    Dyslexic<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                            <li class="reading-style"><button id="opendyslexic-font" class="opendyslexic-font" role="menuitem" tabindex="-1" aria-label="Open Dyslexic font disabled">Open
+                                    Dyslexic<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" class="checkedIcon" role="img" aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
@@ -324,8 +270,7 @@
             <div id="container-view-note-input" class="dropdown-content notifications">
                 <ul class="note-menu" role="menu">
                     <li>
-                        <textarea id="note-input" name="text" wrap="soft" class="note-input" name="note-input"
-                            placeholder="type your note here"></textarea><br>
+                        <textarea id="note-input" name="text" wrap="soft" class="note-input" name="note-input" placeholder="type your note here"></textarea><br>
                         <button id="save-note-button" class="saveNote btn right">
                             <span>save note</span>
                         </button>
@@ -335,9 +280,7 @@
             </div>
             <div id="container-view-search" class="dropdown-content dropdown-tabbed notifications">
                 <div class="search-wrapper" tabindex="-1">
-                    <i class="material-icons left" style="margin-right: -25px;position: relative;">search</i><input
-                        id="searchInput" placeholder="Search" style="padding-left: 25px; width: 100%;height: 40px;"
-                        type="text" />
+                    <i class="material-icons left" style="margin-right: -25px;position: relative;">search</i><input id="searchInput" placeholder="Search" style="padding-left: 25px; width: 100%;height: 40px;" type="text" />
                     <ul class="tabs tabs-fixed-width">
                         <li class="tab"><a href="#test1">Current Chapter</a></li>
                         <li class="tab"><a href="#test2">Entire Book</a></li>
@@ -363,17 +306,14 @@
                 <div id="reader-info-top" class="info top">
                     <span class="book-title"></span>
                 </div>
-                <iframe allowtransparency="true" title="ePub Reader" SCROLLING="no" style="border: 0px; display: block;"
-                    width="100%" height="100%"></iframe>
+                <iframe allowtransparency="true" title="ePub Reader" SCROLLING="no" style="border: 0px; display: block;" width="100%" height="100%"></iframe>
                 <div id="reader-info-bottom" class="info bottom">
                     <div style="width:20%;float: left;">
                         <span class="chapter-position"></span>
                         <span class="chapter-title"></span>
                     </div>
                     <div style="width:60%;float: left;">
-                        <input class="range-slider__range" style="width:100%" type="range" min="1" step="1"
-                            id="positionSlider" name="positionSlider"
-                            onchange="javascript:D2Reader.goToPosition( this.value )" />
+                        <input class="range-slider__range" style="width:100%" type="range" min="1" step="1" id="positionSlider" name="positionSlider" onchange="javascript:D2Reader.goToPosition( this.value )" />
                     </div>
                     <div style="width:20%;float: right;">
                         <span class="remaining-positions"></span>
@@ -384,12 +324,11 @@
             <div id="container-view-timeline" class="timeline" style="top: 5rem;bottom: 2.5rem;"></div>
 
             <a id="previous-chapter" rel="prev" role="button" aria-labelledby="previous-label"
-                style="top: 65px;left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: none">
+               style="top: 65px;left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: none">
                 <i class="material-icons black-text" style="left: calc(50% - 12px);
                 position: relative;">keyboard_arrow_up</i>
             </a>
-            <a id="next-chapter" rel="next" role="button" aria-labelledby="next-label"
-                style="bottom: 0;left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: none">
+            <a id="next-chapter" rel="next" role="button" aria-labelledby="next-label" style="bottom: 0;left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: none">
                 <i class="material-icons black-text" style="left: calc(50% - 12px);
                 position: relative;">keyboard_arrow_down</i>
             </a>
@@ -397,60 +336,46 @@
             <div class="left-gutter" id="left-gutter">
             </div>
 
-            <div id="toolbox-backdrop" class="toolbox-backdrop"></div>
-
         </div>
 
         <span id="highlight-toolbox" class="highlight-toolbox">
             <div id="highlight-toolbox-mode-colors">
-                <button style="background-color: gainsboro;" id="dismissIcon"><i class="material-icons"
-                        style="color:gray">close</i></button>
+                <button style="background-color: gainsboro;" id="dismissIcon"><i class="material-icons" style="color:gray">close</i></button>
             </div>
             <div id="highlight-toolbox-mode-add">
                 <button style="display: unset;" id="colorIcon" class="color-option"><span></span></button>
-                <button style="background-color: gainsboro;" id="highlightIcon"><span
-                        style="background: yellow;display: inline-block;width: 24px;height: 24px;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                            preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
-                            aria-labelledby="text-icon">
+                <button style="background-color: gainsboro;" id="highlightIcon"><span style="background: yellow;display: inline-block;width: 24px;height: 24px;">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" role="img" class="icon open" aria-labelledby="text-icon">
                             <title id="text-icon">Text</title>
                             <path d="M5 4v3h5.5v12h3V7H19V4z"></path>
                         </svg>
                     </span></button>
-                <button style="background-color: gainsboro;" id="underlineIcon"><span
-                        style="display: inline-block;width: 24px;height: 24px;border-bottom: yellow solid 4px;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                            preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
-                            aria-labelledby="text-icon">
+                <button style="background-color: gainsboro;" id="underlineIcon"><span style="display: inline-block;width: 24px;height: 24px;border-bottom: yellow solid 4px;">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" role="img" class="icon open" aria-labelledby="text-icon">
                             <title id="text-icon">Text</title>
                             <path d="M5 4v3h5.5v12h3V7H19V4z"></path>
                         </svg>
                     </span></button>
-                <button style="background-color: gainsboro;" id="speakIcon"><span
-                        style="display: inline-block;width: 24px;height: 24px;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                            preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
-                            aria-labelledby="speak-icon">
+                <button style="background-color: gainsboro;" id="speakIcon"><span style="display: inline-block;width: 24px;height: 24px;">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" role="img" class="icon open" aria-labelledby="speak-icon">
                             <title id="speak-icon">Speak</title>
                             <circle cx="9" cy="9" r="4"></circle>
                             <path
-                                d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z">
+                                  d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z">
                             </path>
                             <path d="M0 0h24v24H0z" fill="none"></path>
                         </svg>
                     </span></button>
-                <button style="background-color: gainsboro;" id="anIcon"><span
-                        style="display: inline-block;width: 24px;height: 24px;">
+                <button style="background-color: gainsboro;" id="anIcon"><span style="display: inline-block;width: 24px;height: 24px;">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24" height="24">
                             <path d="M0 0h24v24H0z" fill="none" />
                             <path
-                                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" />
-                            </svg>
+                                  d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" />
+                        </svg>
                     </span></button>
             </div>
             <div id="highlight-toolbox-mode-edit">
-                <button style="background-color: gainsboro;display: none" id="deleteIcon"><i class="material-icons"
-                        style="color:gray">delete</i></button>
+                <button style="background-color: gainsboro;display: none" id="deleteIcon"><i class="material-icons" style="color:gray">delete</i></button>
             </div>
         </span>
 
@@ -532,7 +457,6 @@
                 enableAnnotations: true,
                 enableTTS: true,
                 enableSearch: true,
-                enableContentProtection: true,
                 enableTimeline: true
             },
             material: {
@@ -596,7 +520,6 @@
                     //         )
                     //     })
                     // }
-
                 }
             },
             search: {
@@ -606,19 +529,9 @@
             highlighter: {
                 selectionMenuItems: selectionMenuItems,
             },
-            // annotations: {
-            //     initialAnnotationColor: "var(--RS__highlightColor)",
-            //     // initialAnnotationColor: "#ff8500",
-            // },
-            protection: {
-                enforceSupportedBrowsers: true,
-                enableEncryption: true,
-                enableObfuscation: true,
-                disablePrint: true,
-                disbaleCopy: true,
-                disableInspect: false,
-                disableKeys: true,
-                disableContextMenu: true
+            annotations: {
+                initialAnnotationColor: "var(--RS__highlightColor)",
+                // initialAnnotationColor: "#ff8500",
             },
             api: {
             },
diff --git a/viewer/index_api.html b/viewer/index_api.html
index 5d2320f6..8ad74fe5 100644
--- a/viewer/index_api.html
+++ b/viewer/index_api.html
@@ -26,7 +26,7 @@
     <meta name="author" content="Aferdita Muriqi" />
     <meta name="description" content="A viewer application for EPUB files." />
     <meta name="viewport"
-        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
 
     <!-- R2 Reader CSS -->
     <link rel="stylesheet" href="reader.css" />
@@ -77,7 +77,7 @@
         <button onclick="javascript:alert(D2Reader.totalResources())">totalResources</button><br>
         <button onclick="javascript:alert(D2Reader.currentResource())">currentResource</button><br>
         <button
-            onclick="javascript:alert(D2Reader.mostRecentNavigatedTocItem())">mostRecentNavigatedTocItem</button><br>
+                onclick="javascript:alert(D2Reader.mostRecentNavigatedTocItem())">mostRecentNavigatedTocItem</button><br>
         <button onclick="javascript:D2Reader.currentLocator().then(
             result => { 
                 alert(JSON.stringify(result))
@@ -101,7 +101,7 @@
 
         <button onclick="javascript:D2Reader.applyUserSettings({appearance:'day'})">day</button><br>
         <button
-            onclick="javascript:D2Reader.applyUserSettings({appearance:'day',fontSize:100, fontFamily:'opendyslexic', letterSpacing:0.25, textAlignment:'justify'})">apply
+                onclick="javascript:D2Reader.applyUserSettings({appearance:'day',fontSize:100, fontFamily:'opendyslexic', letterSpacing:0.25, textAlignment:'justify'})">apply
             multiple settings</button><br>
         <button onclick="javascript:D2Reader.applyUserSettings({appearance:'sepia'})">sepia</button><br>
         <button onclick="javascript:D2Reader.applyUserSettings({appearance:'night'})">night</button><br>
@@ -131,10 +131,10 @@
         <button onclick="javascript:D2Reader.increase('volume')">volume increase</button><br>
         <button onclick="javascript:D2Reader.ttsSet('color', '#ff66c4')">change tts color</button><br>
         <button
-            onclick="javascript:D2Reader.ttsSet('voice', {usePublication: true,  name : 'Karen', lang : 'en-AU' })">change
+                onclick="javascript:D2Reader.ttsSet('voice', {usePublication: true,  name : 'Karen', lang : 'en-AU' })">change
             voice to Karen AU</button><br>
         <button
-            onclick="javascript:D2Reader.applyTTSSettings({ pitch:1.2, rate: 1.5, volume: 0.6, color: '#eb344c', voice: {usePublication: false}})">apply
+                onclick="javascript:D2Reader.applyTTSSettings({ pitch:1.2, rate: 1.5, volume: 0.6, color: '#eb344c', voice: {usePublication: false}})">apply
             multiple tts settings</button><br>
         <button onclick="javascript:D2Reader.resetTTSSettings()">reset TTS setting</button><br>
 
@@ -146,10 +146,10 @@
         <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}})">go
+                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
+                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>
@@ -244,58 +244,58 @@
                 <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>
+                        width="100%" height="100%"></iframe>
             </main>
+
             <div id="container-view-timeline" class="timeline" style="left: unset; right: 1.25rem;margin-bottom: 5rem;">
             </div>
-            <div id="toolbox-backdrop" class="toolbox-backdrop"></div>
 
             <span id="highlight-toolbox" class="highlight-toolbox">
                 <div id="highlight-toolbox-mode-add">
                     <button style="background-color: gainsboro;" id="highlightIcon"><span
-                            style="background: yellow;display: inline-block;width: 24px;height: 24px;">
+                              style="background: yellow;display: inline-block;width: 24px;height: 24px;">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
-                                aria-labelledby="text-icon">
+                                 preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
+                                 aria-labelledby="text-icon">
                                 <title id="text-icon">Text</title>
                                 <path d="M5 4v3h5.5v12h3V7H19V4z"></path>
                             </svg>
                         </span></button>
                     <button style="background-color: gainsboro;" id="underlineIcon"><span
-                            style="display: inline-block;width: 24px;height: 24px;border-bottom: yellow solid 4px;">
+                              style="display: inline-block;width: 24px;height: 24px;border-bottom: yellow solid 4px;">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
-                                aria-labelledby="text-icon">
+                                 preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
+                                 aria-labelledby="text-icon">
                                 <title id="text-icon">Text</title>
                                 <path d="M5 4v3h5.5v12h3V7H19V4z"></path>
                             </svg>
                         </span></button>
                     <button style="background-color: gainsboro;" id="speakIcon"><span
-                            style="display: inline-block;width: 24px;height: 24px;">
+                              style="display: inline-block;width: 24px;height: 24px;">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
-                                aria-labelledby="speak-icon">
+                                 preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
+                                 aria-labelledby="speak-icon">
                                 <title id="speak-icon">Speak</title>
                                 <circle cx="9" cy="9" r="4"></circle>
                                 <path
-                                    d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z">
+                                      d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z">
                                 </path>
                                 <path d="M0 0h24v24H0z" fill="none"></path>
                             </svg>
                         </span></button>
                     <button style="background-color: gainsboro;" id="anIcon"><span
-                            style="display: inline-block;width: 24px;height: 24px;">
+                              style="display: inline-block;width: 24px;height: 24px;">
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24"
-                                height="24">
+                                 height="24">
                                 <path d="M0 0h24v24H0z" fill="none" />
                                 <path
-                                    d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" />
-                                </svg>
+                                      d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" />
+                            </svg>
                         </span></button>
                 </div>
                 <div id="highlight-toolbox-mode-edit">
                     <button style="background-color: gainsboro;display: none" id="deleteIcon"><i class="material-icons"
-                            style="color:gray">delete</i></button>
+                           style="color:gray">delete</i></button>
                 </div>
             </span>
 
@@ -408,6 +408,8 @@
                 initialAnnotationColor: "var(--RS__highlightColor)",
                 // initialAnnotationColor: "#ff8500",
             },
+            api: {
+            },
             // lastReadingPosition: lastReadingPosition,
             injectables: injectables,
             userSettings: userSettings,
diff --git a/viewer/index_material.html b/viewer/index_material.html
index 8f4588a6..85829e5c 100644
--- a/viewer/index_material.html
+++ b/viewer/index_material.html
@@ -26,7 +26,7 @@
     <meta name="author" content="Aferdita Muriqi" />
     <meta name="description" content="A viewer application for EPUB files." />
     <meta name="viewport"
-        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
 
     <!-- R2 Reader CSS -->
     <link rel="stylesheet" href="reader.css" />
@@ -52,40 +52,40 @@
                     <div class="nav-wrapper"><span class="brand-logo  hide-on-med-and-down " id="book-title"></span>
                         <ul id="nav-mobile-right" class="right">
                             <li style="display:none"><a class="saveBookmark" id="menu-button-bookmark"><i
-                                        class="material-icons ">bookmark</i></a></li>
+                                       class="material-icons ">bookmark</i></a></li>
                             <li><a data-target="container-view-tts-settings" class="dropdown-trigger "
-                                    id="menu-button-tts"><i class="material-icons ">volume_up</i></a></li>
+                                   id="menu-button-tts"><i class="material-icons ">volume_up</i></a></li>
                             <li><a data-target="container-view-settings" class="dropdown-trigger "
-                                    id="menu-button-settings"><i class="material-icons ">settings</i></a></li>
+                                   id="menu-button-settings"><i class="material-icons ">settings</i></a></li>
                         </ul>
                         <ul id="nav-mobile-left" class="left">
                             <li><a href="#!" data-target="sidenav-left" class="sidenav-trigger left"><i
-                                        class="material-icons  show-on-large">menu</i></a></li>
+                                       class="material-icons  show-on-large">menu</i></a></li>
                             <li><a rel="prev" style="padding-left: 7px; padding-right: 7px;"><i
-                                        class="material-icons ">arrow_back_ios</i></a></li>
+                                       class="material-icons ">arrow_back_ios</i></a></li>
                             <li><a rel="next" style="padding-left: 7px; padding-right: 7px;"><i
-                                        class="material-icons ">arrow_forward_ios</i></a></li>
+                                       class="material-icons ">arrow_forward_ios</i></a></li>
                         </ul>
                     </div>
                 </nav>
             </div>
             <ul id="sidenav-left" class="sidenav">
                 <li><a href="#" class="logo-container ">D2 Reader<i class="material-icons  left"
-                            style="margin-right: 15px">
+                           style="margin-right: 15px">
                             import_contacts
                         </i><i class="material-icons right  editAnnotations" id="expand-menu">unfold_more</i></a></li>
                 <li class="no-padding ">
                     <ul class="collapsible collapsible-accordion">
                         <li class="bold" id="sidenav-section-toc"><a class="collapsible-header ">Table of Contents<i
-                                    class="material-icons chevron purple-yellow-text">chevron_left</i></a>
+                                   class="material-icons chevron purple-yellow-text">chevron_left</i></a>
                             <div id="container-view-toc" class="contents-view collapsible-body active"
-                                style="background-color : #ffffff">
+                                 style="background-color : #ffffff">
                             </div>
                         </li>
                         <li class="bold " id="sidenav-section-bookmarks"><a class="collapsible-header ">Bookmarks <i
-                                    class="material-icons chevron ">chevron_left</i></a>
+                                   class="material-icons chevron ">chevron_left</i></a>
                             <div id="container-view-bookmarks" class="bookmarks-view collapsible-body active"
-                                style="background-color : #ffffff">
+                                 style="background-color : #ffffff">
                             </div>
                         </li>
                     </ul>
@@ -98,10 +98,10 @@
                         <ul class="settings-options">
 
                             <li class="rate-setting"><button id="decrease-rate" class="decrease" role="menuitem"
-                                    tabindex="-1">Rate decrease</button></li>
+                                        tabindex="-1">Rate decrease</button></li>
 
                             <li class="rate-setting"><button id="increase-rate" class="increase" role="menuitem"
-                                    tabindex="-1">Rate increase</button></li>
+                                        tabindex="-1">Rate increase</button></li>
 
                         </ul>
                     </li>
@@ -109,10 +109,10 @@
                         <ul class="settings-options">
 
                             <li class="pitch-setting"><button id="decrease-pitch" class="decrease" role="menuitem"
-                                    tabindex="-1">Pitch decrease</button></li>
+                                        tabindex="-1">Pitch decrease</button></li>
 
                             <li class="pitch-setting"><button id="increase-pitch" class="increase" role="menuitem"
-                                    tabindex="-1">Pitch increase</button></li>
+                                        tabindex="-1">Pitch increase</button></li>
 
                         </ul>
                     </li>
@@ -120,10 +120,10 @@
                         <ul class="settings-options">
 
                             <li class="volume-setting"><button id="decrease-volume" class="decrease" role="menuitem"
-                                    tabindex="-1">Volume decrease</button></li>
+                                        tabindex="-1">Volume decrease</button></li>
 
                             <li class="volume-setting"><button id="increase-volume" class="increase" role="menuitem"
-                                    tabindex="-1">Volume increase</button></li>
+                                        tabindex="-1">Volume increase</button></li>
 
                         </ul>
                     </li>
@@ -136,10 +136,10 @@
                         <ul class="settings-options">
 
                             <li class="font-setting"><button id="decrease-font" class="decrease" role="menuitem"
-                                    tabindex="-1">A-</button></li>
+                                        tabindex="-1">A-</button></li>
 
                             <li class="font-setting"><button id="increase-font" class="increase" role="menuitem"
-                                    tabindex="-1">A+</button></li>
+                                        tabindex="-1">A+</button></li>
 
                         </ul>
                     </li>
@@ -148,23 +148,23 @@
                         <ul class="settings-options">
 
                             <li class="reading-theme"><button id="day-theme" class="day-theme" role="menuitem"
-                                    tabindex="-1" aria-label="Day mode enabled">Day<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                                        tabindex="-1" aria-label="Day mode enabled">Day<svg
+                                         xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
+                                         class="checkedIcon" role="img" aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
                             <li class="reading-theme"><button id="sepia-theme" class="sepia-theme" role="menuitem"
-                                    tabindex="-1" aria-label="Sepia mode disabled">Sepia<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                                        tabindex="-1" aria-label="Sepia mode disabled">Sepia<svg
+                                         xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
+                                         class="checkedIcon" role="img" aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
                             <li class="reading-theme"><button id="night-theme" class="night-theme" role="menuitem"
-                                    tabindex="-1" aria-label="Night mode disabled">Night<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                                        tabindex="-1" aria-label="Night mode disabled">Night<svg
+                                         xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
+                                         class="checkedIcon" role="img" aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
@@ -175,16 +175,16 @@
                         <ul class="settings-options">
 
                             <li class="reading-view"><button id="view-scroll" class="view-scroll" role="menuitem"
-                                    tabindex="-1" aria-label="Scroll view enabled">Scroll<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                                        tabindex="-1" aria-label="Scroll view enabled">Scroll<svg
+                                         xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
+                                         class="checkedIcon" role="img" aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
                             <li class="reading-view"><button id="view-paginated" class="view-paginated" role="menuitem"
-                                    tabindex="-1" aria-label="Paginated view disabled">Paginated<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                                        tabindex="-1" aria-label="Paginated view disabled">Paginated<svg
+                                         xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
+                                         class="checkedIcon" role="img" aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
@@ -219,30 +219,30 @@
                         <ul class="settings-options">
 
                             <li class="reading-style"><button id="publisher-font" class="publisher-font" role="menuitem"
-                                    tabindex="-1" aria-label="Publisher font enabled">Publisher<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                                        tabindex="-1" aria-label="Publisher font enabled">Publisher<svg
+                                         xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
+                                         class="checkedIcon" role="img" aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
                             <li class="reading-style"><button id="serif-font" class="serif-font" role="menuitem"
-                                    tabindex="-1" aria-label="Serif font disabled">Serif<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                                        tabindex="-1" aria-label="Serif font disabled">Serif<svg
+                                         xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
+                                         class="checkedIcon" role="img" aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
                             <li class="reading-style"><button id="sans-font" class="sans-font" role="menuitem"
-                                    tabindex="-1" aria-label="Sans-serif font disabled">Sans-serif<svg
-                                        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                                        tabindex="-1" aria-label="Sans-serif font disabled">Sans-serif<svg
+                                         xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
+                                         class="checkedIcon" role="img" aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
                             <li class="reading-style"><button id="opendyslexic-font" class="opendyslexic-font"
-                                    role="menuitem" tabindex="-1" aria-label="Open Dyslexic font disabled">Open
+                                        role="menuitem" tabindex="-1" aria-label="Open Dyslexic font disabled">Open
                                     Dyslexic<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
-                                        class="checkedIcon" role="img" aria-labelledby="check-icon">
+                                         class="checkedIcon" role="img" aria-labelledby="check-icon">
                                         <use xlink:href="#check-icon"></use>
                                     </svg></button></li>
 
@@ -261,7 +261,7 @@
                     <span class="book-title"></span>
                 </div>
                 <iframe allowtransparency="true" title="ePub Reader" SCROLLING="no" style="border: 0px; display: block;"
-                    width="100%" height="100%"></iframe>
+                        width="100%" height="100%"></iframe>
                 <div id="reader-info-bottom" class="info bottom">
                     <span class="chapter-position"></span>
                     <span class="chapter-title"></span>
@@ -269,52 +269,50 @@
             </main>
 
             <a id="previous-chapter" rel="prev" role="button" aria-labelledby="previous-label"
-                style="top: 65px;left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: none">
+               style="top: 65px;left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: none">
                 <i class="material-icons black-text" style="left: calc(50% - 12px);
                 position: relative;">keyboard_arrow_up</i>
             </a>
             <a id="next-chapter" rel="next" role="button" aria-labelledby="next-label"
-                style="bottom: 0;left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: none">
+               style="bottom: 0;left: 50%;position: fixed;color: #000;height: 24px;background: #d3d3d33b; width: 150px;transform: translate(-50%, 0); display: none">
                 <i class="material-icons black-text" style="left: calc(50% - 12px);
                 position: relative;">keyboard_arrow_down</i>
             </a>
 
-            <div id="toolbox-backdrop" class="toolbox-backdrop"></div>
-
             <span id="highlight-toolbox" class="highlight-toolbox">
                 <div id="highlight-toolbox-mode-colors">
                     <button style="background-color: gainsboro;" id="dismissIcon"><i class="material-icons"
-                            style="color:gray">close</i></button>
+                           style="color:gray">close</i></button>
                 </div>
                 <div id="highlight-toolbox-mode-add">
                     <button style="display: unset;" id="colorIcon" class="color-option"><span></span></button>
                     <button style="background-color: gainsboro;" id="highlightIcon"><span
-                            style="background: yellow;display: inline-block;width: 24px;height: 24px;">
+                              style="background: yellow;display: inline-block;width: 24px;height: 24px;">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
-                                aria-labelledby="text-icon">
+                                 preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
+                                 aria-labelledby="text-icon">
                                 <title id="text-icon">Text</title>
                                 <path d="M5 4v3h5.5v12h3V7H19V4z"></path>
                             </svg>
                         </span></button>
                     <button style="background-color: gainsboro;" id="underlineIcon"><span
-                            style="display: inline-block;width: 24px;height: 24px;border-bottom: yellow solid 4px;">
+                              style="display: inline-block;width: 24px;height: 24px;border-bottom: yellow solid 4px;">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
-                                aria-labelledby="text-icon">
+                                 preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
+                                 aria-labelledby="text-icon">
                                 <title id="text-icon">Text</title>
                                 <path d="M5 4v3h5.5v12h3V7H19V4z"></path>
                             </svg>
                         </span></button>
                     <button style="background-color: gainsboro;" id="speakIcon"><span
-                            style="display: inline-block;width: 24px;height: 24px;">
+                              style="display: inline-block;width: 24px;height: 24px;">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
-                                aria-labelledby="speak-icon">
+                                 preserveAspectRatio="xMidYMid meet" role="img" class="icon open"
+                                 aria-labelledby="speak-icon">
                                 <title id="speak-icon">Speak</title>
                                 <circle cx="9" cy="9" r="4"></circle>
                                 <path
-                                    d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z">
+                                      d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z">
                                 </path>
                                 <path d="M0 0h24v24H0z" fill="none"></path>
                             </svg>
@@ -322,7 +320,7 @@
                 </div>
                 <div id="highlight-toolbox-mode-edit">
                     <button style="background-color: gainsboro;display: none" id="deleteIcon"><i class="material-icons"
-                            style="color:gray">delete</i></button>
+                           style="color:gray">delete</i></button>
                 </div>
             </span>
 
@@ -375,13 +373,19 @@
 
         D2Reader.load({
             url: new URL(urlParams['url']),
+            rights: {
+                enableMaterial: true,
+                enableBookmarks: true,
+                enableAnnotations: true,
+                enableTTS: true
+            },
             attributes: {
                 margin: 120,
             },
-            ui: {
+            material: {
                 settings: {
-                    fontFamily: true,
                     fontSize: true,
+                    fontFamily: true,
                     appearance: true,
                     scroll: true,
                     // textAlign: true,
@@ -392,18 +396,25 @@
                     // lineHeight: true
                 },
             },
-            rights: {
-                enableBookmarks: true,
-                enableAnnotations: true,
-                enableTTS: true
-            },
             tts: {
-                enableSplitter: true,
-                highlight: "lines",
+                enableSplitter: false,
                 color: "orange",
-                autoScroll: true
+                autoScroll: true,
+                voice: {
+                    usePublication: false//, // true = will be used no matter if an initial language is set, false = ignore publicaiton language
+                    // lang: "de_DE" // initial language, default system language will be used it this language can't be found
+                    // name: "Karen" // will be only used together with the lang, if lang is not given, name will be ignored 
+                },
+            },
+            highlighter: {
+                // selectionMenuItems: selectionMenuItems,
+            },
+            annotations: {
+                initialAnnotationColor: "var(--RS__highlightColor)",
+                // initialAnnotationColor: "#ff8500",
+            },
+            api: {
             },
-            material: true,
             injectables: injectables
         }).then(instance => {
             console.log("D2Reader loaded ", instance);

From ece971d21c0d2044f2cd9d991696caee64f4735e Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 15:40:02 -0500
Subject: [PATCH 02/17] version bump to 1.5.1-beta.1

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 src/index.ts      | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5087dfc3..39b9ed83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "1.5.0",
+  "version": "1.5.1-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3782,7 +3782,7 @@
     },
     "materialize-css": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/materialize-css/-/materialize-css-1.0.0.tgz",
+      "resolved": "http://ci2.bokskya.webbe.no/nexus/repository/npm-group/materialize-css/-/materialize-css-1.0.0.tgz",
       "integrity": "sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw==",
       "dev": true
     },
diff --git a/package.json b/package.json
index e936328a..aafff366 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "1.5.0",
+  "version": "1.5.1-beta.1",
   "description": "A viewer application for EPUB files.",
   "repository": "https://github.com/d-i-t-a/R2D2BC",
   "license": "Apache-2.0",
diff --git a/src/index.ts b/src/index.ts
index 170dfcc2..aeb9c8f8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -367,6 +367,7 @@ export async function load(config: ReaderConfig): Promise<any> {
         attributes: config.attributes
     })
 
+    // Highlighter
     D2Highlighter = await TextHighlighter.create({ 
         delegate: R2Navigator,
         config: config.highlighter

From 13c6175fb3dd7864948da4d3c18d4ee418e6b101 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 16:15:42 -0500
Subject: [PATCH 03/17] added applyattributes api

---
 src/index.ts                     | 7 +++++++
 src/navigator/IFrameNavigator.ts | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index aeb9c8f8..c649e517 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -269,6 +269,10 @@ export async function goToPosition(value) {
     if (IS_DEV) { console.log("goToPosition") }
     return R2Navigator.goToPosition(value)
 }
+export async function applyAtributes(value) {
+    if (IS_DEV) { console.log("applyAtributes") }
+    R2Navigator.applyAtributes(value)
+}
 
 export async function load(config: ReaderConfig): Promise<any> {
     var mainElement = document.getElementById("D2Reader-Container");
@@ -583,4 +587,7 @@ exports.positions = function () {
 }
 exports.goToPosition = function (value) {
     goToPosition(value)
+}
+exports.applyAtributes = function (value) {
+    applyAtributes(value)
 }
\ No newline at end of file
diff --git a/src/navigator/IFrameNavigator.ts b/src/navigator/IFrameNavigator.ts
index d2400c3e..7fc7a29c 100644
--- a/src/navigator/IFrameNavigator.ts
+++ b/src/navigator/IFrameNavigator.ts
@@ -1307,6 +1307,13 @@ export default class IFrameNavigator implements Navigator {
         let locator = this.publication.positions.filter((el: Locator) => el.locations.position == position)[0]
         goTo(locator)
     }
+
+    applyAtributes(attributes:IFrameAttributes) {
+        this.attributes = attributes
+        this.reflowable.attributes = attributes
+        this.handleResize()
+    }
+
     private handlePreviousPageClick(event: MouseEvent | TouchEvent | KeyboardEvent): void {
         this.stopReadAloud();
         if(this.reflowable.isPaginated()) {

From 8260b5e12b9e555c662783c4b3adb7fdb0dcd656 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 16:17:50 -0500
Subject: [PATCH 04/17] added callbacks for: resourceReady, selectionMenuOpen,
 selectionMenuClose

---
 src/modules/highlight/TextHighlighter.ts | 25 +++++++++++++++++++++++-
 src/navigator/IFrameNavigator.ts         |  3 +++
 viewer/index.html                        | 11 +++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/modules/highlight/TextHighlighter.ts b/src/modules/highlight/TextHighlighter.ts
index 5f9fd467..cbc1aac4 100644
--- a/src/modules/highlight/TextHighlighter.ts
+++ b/src/modules/highlight/TextHighlighter.ts
@@ -102,7 +102,7 @@ export default class TextHighlighter {
     private options: any;
     private delegate: IFrameNavigator;
     private lastSelectedHighlight: number = undefined;
-    private config: { selectionMenuItems: Array<SelectionMenuItem>; };
+    private config: { selectionMenuItems: Array<SelectionMenuItem>; api: any; };
     private hasEventListener: boolean
 
 
@@ -681,6 +681,7 @@ export default class TextHighlighter {
     toolboxHide() {
         var toolbox = document.getElementById("highlight-toolbox");
         toolbox.style.display = "none";
+        this.selectionMenuClosed()
     }
 
     // Use short timeout to let the selection updated to 'finish', otherwise some
@@ -762,6 +763,24 @@ export default class TextHighlighter {
         this.toolboxHandler();
     }
 
+    isSelectionMenuOpen = false
+    selectionMenuOpened = debounce(() => {
+        if (!this.isSelectionMenuOpen) {
+            this.isSelectionMenuOpen = true
+            if (oc(this.config).api(false) && oc(this.config).api.selectionMenuOpen(false)) {
+                this.config.api.selectionMenuOpen()
+            }
+        }
+    }, 100);
+    selectionMenuClosed = debounce(() => {
+        if (this.isSelectionMenuOpen) {
+            this.isSelectionMenuOpen = false
+            if (oc(this.config).api(false) && oc(this.config).api.selectionMenuClose(false)) {
+                this.config.api.selectionMenuClose()
+            }
+        }
+    }, 100);
+
     toolboxPlacement() {
         var range = this.dom(this.delegate.iframe.contentDocument.body).getRange();
         if (!range || range.collapsed) {
@@ -781,6 +800,7 @@ export default class TextHighlighter {
 
         if (getComputedStyle(toolbox).display === "none") {
             toolbox.style.display = "block";
+            this.selectionMenuOpened()
 
             var self = this;
 
@@ -955,6 +975,7 @@ export default class TextHighlighter {
                 selection.removeAllRanges();
                 var toolbox = document.getElementById("highlight-toolbox");
                 toolbox.style.display = "none";
+                this.selectionMenuClosed()
             }
         }
     };
@@ -1633,6 +1654,7 @@ export default class TextHighlighter {
                         self.delegate.annotationModule.deleteSelectedHighlight(anno).then(async () => {
                             if (IS_DEV) { console.log("delete highlight " + anno.id) }
                             toolbox.style.display = "none";
+                            self.selectionMenuClosed()
                         })
                         deleteIcon.removeEventListener("click", deleteH);
                     };
@@ -1646,6 +1668,7 @@ export default class TextHighlighter {
 
                 } else {
                     toolbox.style.display = "none";
+                    this.selectionMenuClosed()
                     void toolbox.offsetWidth;
                     toolbox.style.display = "block";
                 }
diff --git a/src/navigator/IFrameNavigator.ts b/src/navigator/IFrameNavigator.ts
index 7fc7a29c..97f968b5 100644
--- a/src/navigator/IFrameNavigator.ts
+++ b/src/navigator/IFrameNavigator.ts
@@ -1669,6 +1669,9 @@ export default class IFrameNavigator implements Navigator {
                         if (this.previousChapterTopAnchorElement) this.previousChapterTopAnchorElement.style.display = "none"
                     }
                 }
+                if (this.api && this.api.resourceReady) {
+                    this.api.resourceReady()
+                }
             }, 300);
         } else {
             const startLink = this.publication.getStartLink();
diff --git a/viewer/index.html b/viewer/index.html
index f47eeb68..8b557a68 100644
--- a/viewer/index.html
+++ b/viewer/index.html
@@ -528,12 +528,23 @@
             },
             highlighter: {
                 selectionMenuItems: selectionMenuItems,
+                api: {
+                    selectionMenuOpen: function () {
+                        console.log("selectionMenuOpen")
+                    }, 
+                    selectionMenuClose: function () {
+                        console.log("selectionMenuClose")
+                    }, 
+                }
             },
             annotations: {
                 initialAnnotationColor: "var(--RS__highlightColor)",
                 // initialAnnotationColor: "#ff8500",
             },
             api: {
+                resourceReady: function () {
+                    console.log("resourceReady")
+                },
             },
             injectables: injectables,
             userSettings: userSettings,

From 839c9476cede69c68f38469887be15add9c0364c Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 16:18:09 -0500
Subject: [PATCH 05/17] added example for applyAttributes

---
 viewer/index_api.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/viewer/index_api.html b/viewer/index_api.html
index 8ad74fe5..c4365fd7 100644
--- a/viewer/index_api.html
+++ b/viewer/index_api.html
@@ -69,6 +69,8 @@
             OEBPS/Text/intro.xhtml</button><br>
         <button onclick="javascript:D2Reader.clearSearch()">clear search</button><br>
 
+        <button onclick="javascript:D2Reader.applyAtributes({margin:200})">applyAtributes</button><br>
+
         <button onclick="javascript:D2Reader.startReadAloud()">read aloud from top</button><br>
         <button onclick="javascript:D2Reader.stopReadAloud()">stop read aloud from top</button><br>
         <button onclick="javascript:D2Reader.pauseReadAloud()">pause read aloud from top</button><br>

From 43ba1e52cb4590ca32004fb9f3909a6d38a7d2f0 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 16:18:33 -0500
Subject: [PATCH 06/17] removed unnecessary onscroll

---
 src/navigator/IFrameNavigator.ts | 35 --------------------------------
 1 file changed, 35 deletions(-)

diff --git a/src/navigator/IFrameNavigator.ts b/src/navigator/IFrameNavigator.ts
index 97f968b5..374ace31 100644
--- a/src/navigator/IFrameNavigator.ts
+++ b/src/navigator/IFrameNavigator.ts
@@ -664,41 +664,6 @@ export default class IFrameNavigator implements Navigator {
 
     }
 
-    onScroll(): void {
-        this.saveCurrentReadingPosition();
-        if (this.reflowable && this.reflowable.atEnd()) {
-            // Bring up the bottom nav when you get to the bottom,
-            // if it wasn't already displayed.
-            if (!this.isDisplayed(this.linksBottom)) {
-                this.toggleDisplay(this.linksBottom);
-            }
-            if (!this.isDisplayed(this.linksMiddle)) {
-                this.toggleDisplay(this.linksMiddle);
-            }
-        } else {
-            // Remove the bottom nav when you scroll back up,
-            // if it was displayed because you were at the bottom.
-            if (this.isDisplayed(this.linksBottom) && !this.isDisplayed(this.links)) {
-                this.toggleDisplay(this.linksBottom);
-            }
-        }
-        if(this.reflowable.isScrollmode()) {
-            if (this.reflowable.atStart() && this.reflowable.atEnd()) {
-                this.nextChapterBottomAnchorElement.style.display = "unset"
-                this.previousChapterTopAnchorElement.style.display = "unset"
-            } else if (this.reflowable.atEnd()) {
-                this.previousChapterTopAnchorElement.style.display = "none"
-                this.nextChapterBottomAnchorElement.style.display = "unset"
-            } else if (this.reflowable.atStart()) {
-                this.nextChapterBottomAnchorElement.style.display = "none"
-                this.previousChapterTopAnchorElement.style.display = "unset"
-            } else {
-                this.nextChapterBottomAnchorElement.style.display = "none"
-                this.previousChapterTopAnchorElement.style.display = "none"
-            }
-        }
-
-    }
 
     private async loadManifest(): Promise<void> {
         try {

From 417334473724de1d807717087cb6e85777b47169 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 16:18:45 -0500
Subject: [PATCH 07/17] fixes typos

---
 src/navigator/IFrameNavigator.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/navigator/IFrameNavigator.ts b/src/navigator/IFrameNavigator.ts
index 374ace31..eac29eb2 100644
--- a/src/navigator/IFrameNavigator.ts
+++ b/src/navigator/IFrameNavigator.ts
@@ -1711,8 +1711,8 @@ export default class IFrameNavigator implements Navigator {
                 type: this.currentChapterLink.type,
                 title: this.currentChapterLink.title
             }
-            if (this.api && this.api.updateCurrentlocation) {
-                this.api.updateCurrentlocation(position).then(async _ => {
+            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);
                 })

From 10c3864cbc53bee8e559fab7edfe77c5f6e1c0d1 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 16:19:05 -0500
Subject: [PATCH 08/17] handle console.log

---
 src/modules/positions/TimelineModule.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/positions/TimelineModule.ts b/src/modules/positions/TimelineModule.ts
index b42af879..5607935e 100644
--- a/src/modules/positions/TimelineModule.ts
+++ b/src/modules/positions/TimelineModule.ts
@@ -80,7 +80,7 @@ export default class TimelineModule implements ReaderModule {
             this.timelineContainer.innerHTML = ""
             this.publication.readingOrder.forEach(link => {
 
-                console.log(link.contentWeight)
+                if (IS_DEV) console.log(link.contentWeight)
                 const linkHref = this.publication.getAbsoluteHref(link.href);
                 const tocItemAbs = this.publication.getTOCItemAbsolute(linkHref);
                 const tocHref = (tocItemAbs.href.indexOf("#") !== -1) ? tocItemAbs.href.slice(0, tocItemAbs.href.indexOf("#")) : tocItemAbs.href
@@ -116,7 +116,7 @@ export default class TimelineModule implements ReaderModule {
 
                     const position1 = this.publication.positions.filter((el: Locator) => el.href === link.href)[0]
                     position1.href = this.publication.getAbsoluteHref(position1.href)
-                    console.log(position1)
+                    if (IS_DEV) console.log(position1)
                     this.delegate.navigate(position1)
                 });
 

From 0491632fd762c01e3b66a97e231358848209f6a7 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 17:03:57 -0500
Subject: [PATCH 09/17] Prevent resize trigger when scrolling is in process

---
 src/navigator/IFrameNavigator.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/navigator/IFrameNavigator.ts b/src/navigator/IFrameNavigator.ts
index eac29eb2..2ac85911 100644
--- a/src/navigator/IFrameNavigator.ts
+++ b/src/navigator/IFrameNavigator.ts
@@ -37,6 +37,7 @@ import ReflowableBookView from "../views/ReflowableBookView";
 import SearchModule from "../modules/search/SearchModule";
 import TextHighlighter from "../modules/highlight/TextHighlighter";
 import TimelineModule from "../modules/positions/TimelineModule";
+import { debounce } from "debounce";
 
 export interface UpLinkConfig {
     url?: URL;
@@ -555,6 +556,7 @@ export default class IFrameNavigator implements Navigator {
             }
         }
     }
+    isScrolling: boolean
 
     private updateBookView(): void {
         this.settings.isPaginated().then(paginated => {
@@ -597,8 +599,13 @@ export default class IFrameNavigator implements Navigator {
                     if (this.nextChapterBottomAnchorElement) this.nextChapterBottomAnchorElement.style.display = "none"
                     if (this.previousChapterTopAnchorElement) this.previousChapterTopAnchorElement.style.display = "none"
                 }
+                const onDoScrolling = debounce(() => {
+                    this.isScrolling = false;
+                }, 200);
+
                 // document.body.style.overflow = "auto";
                 document.body.onscroll = () => {
+                    this.isScrolling = true
                     this.saveCurrentReadingPosition();
                     if (this.reflowable.atEnd()) {
                         // Bring up the bottom nav when you get to the bottom,
@@ -631,7 +638,7 @@ export default class IFrameNavigator implements Navigator {
                             if (this.previousChapterTopAnchorElement) this.previousChapterTopAnchorElement.style.display = "none"
                         }
                     }
-
+                    onDoScrolling()
                 }
 
                 if (this.chapterTitle) this.chapterTitle.style.display = "none";
@@ -1429,6 +1436,9 @@ export default class IFrameNavigator implements Navigator {
     }
 
     private handleResize(): void {
+        if (this.isScrolling) {
+            return;
+        }
         const selectedView = this.reflowable;
         const oldPosition = selectedView.getCurrentPosition();
 

From b77ca9161804c3ed320c4f3cfded8208dd40f662 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 17:04:18 -0500
Subject: [PATCH 10/17] find default language on safari ios

---
 src/modules/TTS/TTSModule.ts | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/modules/TTS/TTSModule.ts b/src/modules/TTS/TTSModule.ts
index c95dd8cd..89fdf176 100644
--- a/src/modules/TTS/TTSModule.ts
+++ b/src/modules/TTS/TTSModule.ts
@@ -77,7 +77,7 @@ export default class TTSModule implements ReaderModule {
             whitespace.forEach(splittingWord => {
                 splittingWord.dataset.ttsColor = this.tts.color
             });
-
+            window.speechSynthesis.getVoices()
             this.initVoices(true);
 
             if (!this.hasEventListener) {
@@ -259,13 +259,20 @@ export default class TTSModule implements ReaderModule {
         if (IS_DEV) console.log("defaultVoiceHasHyphen", defaultVoiceHasHyphen)
         var defaultVoice = undefined
         if (defaultVoiceHasHyphen == true) {
-            defaultVoice = this.voices.filter((v: any) => {
-                var lang = v.lang.replace("_", "-")
-                return lang == navigator.language && v.localService == true
+            defaultVoice = this.voices.filter((voice: SpeechSynthesisVoice) => {
+                var lang = voice.lang.replace("_", "-")
+                return lang == navigator.language && voice.localService == true
             })[0]
         } else {
-            defaultVoice = this.voices.filter((v: any) => {
-                return v.lang == navigator.language && v.localService == true
+            defaultVoice = this.voices.filter((voice: SpeechSynthesisVoice) => {
+                var lang = voice.lang
+                return lang == navigator.language && voice.localService == true
+            })[0]
+        }
+        if (defaultVoice == undefined) {
+            defaultVoice = this.voices.filter((voice: SpeechSynthesisVoice) => {
+                var lang = voice.lang
+                return lang.includes(navigator.language) && voice.localService == true
             })[0]
         }
         if (IS_DEV) console.log("defaultVoice", defaultVoice)
@@ -280,9 +287,11 @@ export default class TTSModule implements ReaderModule {
             if (IS_DEV) console.log("defaultVoice")
             utterance.voice = defaultVoice
         }
-        utterance.lang = utterance.voice.lang
-        if (IS_DEV) console.log("utterance.voice.lang", utterance.voice.lang)
-        if (IS_DEV) console.log("utterance.lang", utterance.lang)
+        if (utterance.voice != undefined) {
+            utterance.lang = utterance.voice.lang
+            if (IS_DEV) console.log("utterance.voice.lang", utterance.voice.lang)
+            if (IS_DEV) console.log("utterance.lang", utterance.lang)
+        }
         if (IS_DEV) console.log("navigator.language", navigator.language)
 
         window.speechSynthesis.speak(utterance);

From 9a552f21526398770cb84944a111425634c714c9 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 17:08:05 -0500
Subject: [PATCH 11/17] fixes package.lock

---
 package-lock.json | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 39b9ed83..db20b53b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3780,12 +3780,6 @@
       "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
       "integrity": "sha1-GA8fnr74sOY45BZq1S24eb6y/8U="
     },
-    "materialize-css": {
-      "version": "1.0.0",
-      "resolved": "http://ci2.bokskya.webbe.no/nexus/repository/npm-group/materialize-css/-/materialize-css-1.0.0.tgz",
-      "integrity": "sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw==",
-      "dev": true
-    },
     "math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",

From b7ef009a4ad47c163f547237a07975f42e72e473 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Tue, 24 Nov 2020 17:08:34 -0500
Subject: [PATCH 12/17] fixes package.lock

---
 package-lock.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index db20b53b..ab879a1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3780,6 +3780,12 @@
       "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
       "integrity": "sha1-GA8fnr74sOY45BZq1S24eb6y/8U="
     },
+    "materialize-css": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/materialize-css/-/materialize-css-1.0.0.tgz",
+      "integrity": "sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw==",
+      "dev": true
+    },
     "math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",

From c7758004a29046133a5ea4508582fcba5295bcd6 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Wed, 2 Dec 2020 20:59:21 -0500
Subject: [PATCH 13/17] minor type fixes

---
 src/modules/TTS/TTSModule.ts     |  2 +-
 src/navigator/IFrameNavigator.ts | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/modules/TTS/TTSModule.ts b/src/modules/TTS/TTSModule.ts
index 89fdf176..993c6595 100644
--- a/src/modules/TTS/TTSModule.ts
+++ b/src/modules/TTS/TTSModule.ts
@@ -383,7 +383,7 @@ export default class TTSModule implements ReaderModule {
 
                             }
                             splittingWord.dataset.ttsCurrentWord = "true"
-                            if (self.delegate.reflowable.isScrollmode() && self.tts.autoScroll && !self.userScrolled) {
+                            if (self.delegate.reflowable.isScrollMode() && self.tts.autoScroll && !self.userScrolled) {
                                 splittingWord.scrollIntoView({
                                     block: "center",
                                     behavior: "smooth",
diff --git a/src/navigator/IFrameNavigator.ts b/src/navigator/IFrameNavigator.ts
index 2ac85911..134ba113 100644
--- a/src/navigator/IFrameNavigator.ts
+++ b/src/navigator/IFrameNavigator.ts
@@ -623,7 +623,7 @@ export default class IFrameNavigator implements Navigator {
                             this.toggleDisplay(this.linksBottom);
                         }
                     }
-                    if(this.reflowable.isScrollmode()) {
+                    if(this.reflowable.isScrollMode()) {
                         if (this.reflowable.atStart() && this.reflowable.atEnd()) {
                             if (this.nextChapterBottomAnchorElement) this.nextChapterBottomAnchorElement.style.display = "unset"
                             if (this.previousChapterTopAnchorElement) this.previousChapterTopAnchorElement.style.display = "unset"
@@ -1007,8 +1007,8 @@ export default class IFrameNavigator implements Navigator {
                 if (this.eventHandler) {
                     this.eventHandler.setupEvents(this.iframe.contentDocument);
                 }
-    
-                if(this.reflowable.isScrollmode()) {
+
+                if(this.reflowable.isScrollMode()) {
                     this.reflowable.setIframeHeight(this.iframe)
                 }
 
@@ -1161,7 +1161,7 @@ export default class IFrameNavigator implements Navigator {
             this.hideElement(element, control);
         }
         if (element === this.linksMiddle) {
-            if(this.reflowable.isScrollmode()) {
+            if(this.reflowable.isScrollMode()) {
                 this.showElement(element, control);
             } else {
                 this.hideElement(element, control);
@@ -1483,7 +1483,7 @@ export default class IFrameNavigator implements Navigator {
 
 
         setTimeout(() => {
-            if(this.reflowable.isScrollmode()) {
+            if(this.reflowable.isScrollMode()) {
                 this.reflowable.setIframeHeight(this.iframe)
             }
         }, 100);
@@ -1563,7 +1563,7 @@ export default class IFrameNavigator implements Navigator {
     }
 
     private hideView(_view: HTMLDivElement, _control: HTMLButtonElement): void {
-        if(this.reflowable.isScrollmode()) {
+        if(this.reflowable.isScrollMode()) {
             document.body.style.overflow = "auto";
         }
     }
@@ -1629,7 +1629,7 @@ export default class IFrameNavigator implements Navigator {
                     }
                 }
 
-                if(this.reflowable.isScrollmode()) {
+                if(this.reflowable.isScrollMode()) {
                     if (this.reflowable.atStart() && this.reflowable.atEnd()) {
                         if (this.nextChapterBottomAnchorElement) this.nextChapterBottomAnchorElement.style.display = "unset"
                         if (this.previousChapterTopAnchorElement) this.previousChapterTopAnchorElement.style.display = "unset"

From 12f774ae2c40107e670f9b6979b9ff4cbdf0d511 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Wed, 2 Dec 2020 21:21:06 -0500
Subject: [PATCH 14/17] optimized iframe content document usage and it's
 properties

---
 src/navigator/IFrameNavigator.ts |  25 ++--
 src/views/ReflowableBookView.ts  | 229 +++++++++++++++----------------
 2 files changed, 126 insertions(+), 128 deletions(-)

diff --git a/src/navigator/IFrameNavigator.ts b/src/navigator/IFrameNavigator.ts
index 134ba113..9ad1eac3 100644
--- a/src/navigator/IFrameNavigator.ts
+++ b/src/navigator/IFrameNavigator.ts
@@ -955,7 +955,7 @@ export default class IFrameNavigator implements Navigator {
 
 
             // Inject Readium CSS into Iframe Head
-            const head = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "head") as HTMLHeadElement;
+            const head = this.iframe.contentDocument.head
             if (head) {
 
                 head.insertBefore(this.createBase(this.currentChapterLink.href), head.firstChild)
@@ -992,8 +992,7 @@ export default class IFrameNavigator implements Navigator {
             }
             setTimeout(() => {
 
-                const body = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "body") as HTMLBodyElement;
-
+                const body = this.iframe.contentDocument.body
                 if (oc(this.rights).enableTTS(false) && oc(this.tts).enableSplitter(false)) {
                     Splitting({
                         target: body,
@@ -1017,13 +1016,13 @@ export default class IFrameNavigator implements Navigator {
                 }
                 if (oc(this.rights).enableTTS(false)) {
                     setTimeout(() => {
-                        const body = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "body") as HTMLBodyElement;
+                        const body = this.iframe.contentDocument.body
                         if (this.ttsModule !== undefined) {
                             this.ttsModule.initialize(body)
                         }
                     }, 200);
                 }
-                const body = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "body") as HTMLBodyElement;
+                const body = this.iframe.contentDocument.body
                 var pagebreaks = body.querySelectorAll('[*|type="pagebreak"]');
                 for (var i = 0; i < pagebreaks.length; i++) {
                     var img = pagebreaks[i];
@@ -1216,7 +1215,7 @@ export default class IFrameNavigator implements Navigator {
         return this.publication.readingOrder.length
     }
     mostRecentNavigatedTocItem(): string {
-        return this.publication.getRelativeHref(this.currentTOCRawLink) 
+        return this.publication.getRelativeHref(this.currentTOCRawLink)
     }
     currentResource(): number {
         let currentLocation = this.currentChapterLink.href
@@ -1269,7 +1268,7 @@ export default class IFrameNavigator implements Navigator {
             resourceScreenIndex : Math.round(this.reflowable.getCurrentPage()),
             resourceScreenCount : Math.round(this.reflowable.getPageCount())
         }
-        return position 
+        return position
     }
 
     positions():any {
@@ -1507,7 +1506,7 @@ export default class IFrameNavigator implements Navigator {
             const pageCount = locator.displayInfo.resourceScreenCount
             const remaining = locator.locations.remainingPositions;
             if (this.chapterPosition) this.chapterPosition.innerHTML = "Page " + currentPage + " of " + pageCount;
-            if (this.remainingPositions) this.remainingPositions.innerHTML = remaining + " left in chapter";            
+            if (this.remainingPositions) this.remainingPositions.innerHTML = remaining + " left in chapter";
         } else {
             if (this.chapterPosition) this.chapterPosition.innerHTML = "";
             if (this.remainingPositions) this.remainingPositions.innerHTML = "";
@@ -1594,7 +1593,7 @@ export default class IFrameNavigator implements Navigator {
             if (locator.locations === undefined) {
                 locator.locations = {
                     progression: 0
-                } 
+                }
             }
             this.newPosition = locator;
             this.currentTOCRawLink = locator.href
@@ -1750,23 +1749,23 @@ export default class IFrameNavigator implements Navigator {
         return cssLink;
     }
     private createJavascriptLink(href: string, isAsync: boolean): HTMLScriptElement {
-        
+
         const jsLink = document.createElement('script');
         jsLink.type = 'text/javascript';
         jsLink.src = href;
 
         // Enforce synchronous behaviour of injected scripts
-        // unless specifically marked async, as though they 
+        // unless specifically marked async, as though they
         // were inserted using <script> tags
         //
-        // See comment on differing default behaviour of 
+        // See comment on differing default behaviour of
         // dynamically inserted script loading at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Attributes
         if(isAsync) {
             jsLink.async = true
         } else {
             jsLink.async = false
         }
-        
+
         return jsLink;
     }
 
diff --git a/src/views/ReflowableBookView.ts b/src/views/ReflowableBookView.ts
index 6eb654a7..e0e68197 100644
--- a/src/views/ReflowableBookView.ts
+++ b/src/views/ReflowableBookView.ts
@@ -18,14 +18,14 @@
  */
 
 
-import { UserProperty } from "../model/user-settings/UserProperties";
+import {UserProperty} from "../model/user-settings/UserProperties";
 import * as HTMLUtilities from "../utils/HTMLUtilities";
 import * as BrowserUtilities from "../utils/BrowserUtilities";
 import Store from "../store/Store";
 import BookView from "./BookView";
-import { UserSettings } from "../model/user-settings/UserSettings";
-import { IFrameAttributes } from "../navigator/IFrameNavigator";
-import { debounce } from "debounce";
+import {UserSettings} from "../model/user-settings/UserSettings";
+import {IFrameAttributes} from "../navigator/IFrameNavigator";
+import {debounce} from "debounce";
 
 
 export default class ReflowableBookView implements BookView {
@@ -33,20 +33,21 @@ export default class ReflowableBookView implements BookView {
     private readonly USERSETTINGS = "userSetting";
     private readonly store: Store;
     private scrollMode: boolean
+
     constructor(store: Store) {
         this.store = store;
 
-        if (this.isScrollmode()) {
+        if (this.isScrollMode()) {
             this.name = "readium-scroll-on";
-            this.label = "Scrolling";        
+            this.label = "Scrolling";
         } else {
             this.name = "readium-scroll-off";
-            this.label = "Paginated";        
+            this.label = "Paginated";
         }
     }
 
 
-    setMode(scroll:boolean) {
+    setMode(scroll: boolean) {
         // this.iframe.height = "0";
         // this.iframe.width = "0";
 
@@ -55,28 +56,28 @@ export default class ReflowableBookView implements BookView {
         // const images = Array.prototype.slice.call(body.querySelectorAll("img"));
         // for (const image of images) {
         //     image.style.maxWidth = "";
-        // }    
+        // }
         this.scrollMode = scroll
 
         if (scroll) {
             this.name = "readium-scroll-on";
-            this.label = "Scrolling";        
+            this.label = "Scrolling";
             const head = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "head") as HTMLHeadElement;
 
             if (head) {
                 const viewport = HTMLUtilities.findElement(head, 'meta[name=viewport]') as HTMLMetaElement;
-                if(viewport) {
+                if (viewport) {
                     viewport.remove();
                 }
             }
-    
+
             const html = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "html") as any;
             html.style.setProperty("--USER__scroll", "readium-scroll-on");
-            this.setSize();  
+            this.setSize();
             this.setIframeHeight(this.iframe)
         } else {
             this.name = "readium-scroll-off";
-            this.label = "Paginated";        
+            this.label = "Paginated";
             // any is necessary because CSSStyleDeclaration type does not include
             // all the vendor-prefixed attributes.
             this.setSize();
@@ -92,34 +93,34 @@ export default class ReflowableBookView implements BookView {
 
 
     }
-    
+
     name: string;
     label: string;
     iframe: HTMLIFrameElement;
     sideMargin: number = 20;
     height: number = 0;
-    attributes: IFrameAttributes = {margin:0}
-    
+    attributes: IFrameAttributes = {margin: 0}
+
     start(): void {
-        if (this.isScrollmode()) {
+        if (this.isScrollMode()) {
             const head = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "head") as HTMLHeadElement;
             if (head) {
                 const viewport = HTMLUtilities.findElement(head, 'meta[name=viewport]') as HTMLMetaElement;
-                if(viewport) {
+                if (viewport) {
                     viewport.remove();
                 }
             }
-            this.setSize();    
+            this.setSize();
         } else {
             this.iframe.height = "0";
             this.iframe.width = "0";
-    
+
             const body = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "body") as HTMLBodyElement;
-    
+
             const images = Array.prototype.slice.call(body.querySelectorAll("img"));
             for (const image of images) {
                 image.style.maxWidth = "";
-            }    
+            }
 
             // any is necessary because CSSStyleDeclaration type does not include
             // all the vendor-prefixed attributes.
@@ -131,56 +132,56 @@ export default class ReflowableBookView implements BookView {
             this.checkForFixedScrollWidth();
         }
     }
+
     stop(): void {
-        // if (this.isScrollmode()) {
-            this.iframe.height = "0";
-            this.iframe.width = "0";
-    
-            const body = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "body") as HTMLBodyElement;
-    
-            const images = Array.prototype.slice.call(body.querySelectorAll("img"));
-            for (const image of images) {
-                image.style.maxWidth = "";
-            }    
-        // } else {
-        // }
+        this.iframe.height = "0";
+        this.iframe.width = "0";
+
+        const body = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "body") as HTMLBodyElement;
+
+        const images = Array.prototype.slice.call(body.querySelectorAll("img"));
+        for (const image of images) {
+            image.style.maxWidth = "";
+        }
     }
+
     getCurrentPosition(): number {
-        if (this.isScrollmode()) {
-            const body = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "body") as HTMLBodyElement;
-            return document.scrollingElement.scrollTop / body.scrollHeight;    
+        if (this.isScrollMode()) {
+            return this.iframe.contentDocument.scrollingElement.scrollTop / this.iframe.contentDocument.body.scrollHeight;
         } else {
             const width = this.getColumnWidth();
             const leftWidth = this.getLeftColumnsWidth();
             const rightWidth = this.getRightColumnsWidth();
             const totalWidth = leftWidth + width + rightWidth;
-            return leftWidth / totalWidth;    
+            return leftWidth / totalWidth;
         }
     }
+
     goToPosition(position: number): void {
-        if (this.isScrollmode()) {
-            document.scrollingElement.scrollTop = document.scrollingElement.scrollHeight * position;    
+        if (this.isScrollMode()) {
+            this.iframe.contentDocument.scrollingElement.scrollTop = this.iframe.contentDocument.scrollingElement.scrollHeight * position;
         } else {
             // If the window has changed size since the columns were set up,
             // we need to reset position so we can determine the new total width.
-    
+
             const width = this.getColumnWidth();
             const rightWidth = this.getRightColumnsWidth();
             const totalWidth = width + rightWidth;
-    
+
             const newLeftWidth = position * totalWidth;
-    
+
             // Round the new left width so it's a multiple of the column width.
-    
+
             let roundedLeftWidth = Math.round(newLeftWidth / width) * width;
             if (roundedLeftWidth >= totalWidth) {
                 // We've gone too far and all the columns are off to the left.
                 // Move one column back into the viewport.
                 roundedLeftWidth = roundedLeftWidth - width;
             }
-            this.setLeftColumnsWidth(roundedLeftWidth);    
+            this.setLeftColumnsWidth(roundedLeftWidth);
         }
     }
+
     goToCssSelector(cssSelector: string, relative?: boolean): void {
         var element = (this.iframe.contentDocument as any).querySelector(cssSelector)
         this.goToElement(element, relative);
@@ -190,125 +191,127 @@ export default class ReflowableBookView implements BookView {
         const element = (this.iframe.contentDocument as any).getElementById(fragment);
         this.goToElement(element, relative);
     }
-    
+
     goToElement(element: HTMLElement | null, relative?: boolean): void {
-        if (this.isScrollmode()) {
+        if (this.isScrollMode()) {
             if (element) {
                 // Put the element as close to the top as possible.
-                document.scrollingElement.scrollTop = element.offsetTop;
-            }    
+                this.iframe.contentDocument.scrollingElement.scrollTop = element.offsetTop;
+            }
         } else {
             if (element) {
                 // Get the element's position in the iframe, and
                 // round that to figure out the column it's in.
-    
+
                 // There is a bug in Safari when using getBoundingClientRect
                 // on an element that spans multiple columns. Temporarily
                 // set the element's height to fit it on one column so we
                 // can determine the first column position.
                 const originalHeight = element.style.height;
                 element.style.height = "0";
-    
+
                 const left = element.getBoundingClientRect().left;
                 const width = this.getColumnWidth();
-                let roundedLeftWidth = Math.floor(left / width) * width;
+                const diff = this.iframe.contentDocument.scrollingElement.scrollLeft - width;
+                // let roundedLeftWidth = Math.ceil(left / width) * width;
+                let roundedLeftWidth = (Math.ceil(left / width) * width) + diff;
                 if (relative) {
                     const origin = this.getLeftColumnsWidth();
-                    roundedLeftWidth = (Math.floor(left / width) * width) + origin;
+                    roundedLeftWidth = (Math.ceil(left / width) * width) + origin;
                 }
-    
+
                 // Restore element's original height.
                 element.style.height = originalHeight;
-    
+                console.log(roundedLeftWidth)
                 this.setLeftColumnsWidth(roundedLeftWidth);
-            }    
+            }
         }
     }
+
     // at top in scrollmode
     atStart(): boolean {
-        if (this.isScrollmode()) {
-            return document.scrollingElement.scrollTop === 0;
+        if (this.isScrollMode()) {
+            return this.iframe.contentDocument.scrollingElement.scrollTop === 0;
         } else {
             const leftWidth = this.getLeftColumnsWidth();
             return (leftWidth <= 0);
         }
     }
+
     // at bottom in scrollmode
     atEnd(): boolean {
-        if (this.isScrollmode()) {
-            return (Math.ceil(document.scrollingElement.scrollHeight - document.scrollingElement.scrollTop) - 1) <= BrowserUtilities.getHeight();
+        if (this.isScrollMode()) {
+            return (Math.ceil(this.iframe.contentDocument.scrollingElement.scrollHeight - this.iframe.contentDocument.scrollingElement.scrollTop) - 1) <= BrowserUtilities.getHeight();
         } else {
             const rightWidth = this.getRightColumnsWidth();
-            return (rightWidth <= 0);    
+            return (rightWidth <= 0);
         }
     }
+
     goToPreviousPage(): void {
-        if (this.isScrollmode()) {
-            const leftHeight = document.scrollingElement.scrollTop;
+        if (this.isScrollMode()) {
+            const leftHeight = this.iframe.contentDocument.scrollingElement.scrollTop;
             const height = this.getScreenHeight();
-            var offset = leftHeight - height;
+            const offset = leftHeight - height;
             if (offset >= 0) {
-                document.scrollingElement.scrollTop = offset;
+                this.iframe.contentDocument.scrollingElement.scrollTop = offset;
             } else {
-                document.scrollingElement.scrollTop = 0;
-            }    
+                this.iframe.contentDocument.scrollingElement.scrollTop = 0;
+            }
         } else {
             const leftWidth = this.getLeftColumnsWidth();
             const width = this.getColumnWidth();
-    
-            var offset = leftWidth - width;
+            const offset = leftWidth - width;
             if (offset >= 0) {
                 this.setLeftColumnsWidth(offset);
             } else {
                 this.setLeftColumnsWidth(0);
             }
-    
+
         }
     }
 
     goToNextPage(): void {
-        if (this.isScrollmode()) {
-            const leftHeight = document.scrollingElement.scrollTop;
+        if (this.isScrollMode()) {
+            const leftHeight = this.iframe.contentDocument.scrollingElement.scrollTop;
             const height = this.getScreenHeight();
-            const html = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "html") as HTMLElement;
-            const scrollHeight = html.scrollHeight;    
-            var offset = leftHeight + height;
+            const scrollHeight = this.iframe.contentDocument.scrollingElement.scrollHeight;
+            const offset = leftHeight + height;
             if (offset < scrollHeight) {
-                document.scrollingElement.scrollTop = offset;
+                this.iframe.contentDocument.scrollingElement.scrollTop = offset;
             } else {
-                document.scrollingElement.scrollTop = scrollHeight;
+                this.iframe.contentDocument.scrollingElement.scrollTop = scrollHeight;
             }
         } else {
             const leftWidth = this.getLeftColumnsWidth();
             const width = this.getColumnWidth();
-            const html = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "html") as HTMLElement;
-            const scrollWidth = html.scrollWidth;
-            
-            var offset = leftWidth + width;
+            const scrollWidth = this.iframe.contentDocument.scrollingElement.scrollWidth;
+            const offset = leftWidth + width;
             if (offset < scrollWidth) {
                 this.setLeftColumnsWidth(offset);
             } else {
                 this.setLeftColumnsWidth(scrollWidth);
-            }    
+            }
         }
 
     }
+
     // doesn't exist in scrollmode
     getCurrentPage(): number {
-        if (this.isScrollmode()) {
+        if (this.isScrollMode()) {
             return 0
         } else {
             return this.getCurrentPosition() * this.getPageCount() + 1;
         }
     }
+
     // doesn't exist in scrollmode
     getPageCount(): number {
-        if (this.isScrollmode()) {
-            return 0 
+        if (this.isScrollMode()) {
+            return 0
         } else {
             const width = this.getColumnWidth();
-            const html = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "html") as HTMLElement;
-            return html.scrollWidth / width;    
+            return this.iframe.contentDocument.scrollingElement.scrollWidth / width;
         }
     }
 
@@ -321,7 +324,8 @@ export default class ReflowableBookView implements BookView {
         }
         return this.scrollMode === false
     }
-    isScrollmode() {
+
+    isScrollMode() {
         if (this.iframe) {
             const html = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "html") as any;
             const scroll = UserSettings.scrollValues.findIndex((el: any) => el === html.style.getPropertyValue("--USER__scroll"))
@@ -329,6 +333,7 @@ export default class ReflowableBookView implements BookView {
         }
         return this.scrollMode === true
     }
+
     async getProperty(name: string): Promise<UserProperty> {
         let array = await this.store.get(this.USERSETTINGS);
         if (array) {
@@ -344,19 +349,19 @@ export default class ReflowableBookView implements BookView {
 
 // scrolling functions
 
-
     private getScreenHeight(): number {
         const windowTop = window.scrollY;
         const windowBottom = windowTop + window.innerHeight;
         return windowBottom - windowTop - 40 - this.attributes.margin
     }
-    setIframeHeight(iframe:any) {
-        var d = debounce((iframe:any) => {
+
+    setIframeHeight(iframe: any) {
+        let d = debounce((iframe: any) => {
             if (iframe) {
-                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
+                let iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                 if (iframeWin.document.body) {
                     const minHeight = BrowserUtilities.getHeight() - 40 - this.attributes.margin;
-                    const bodyHeight = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;        
+                    const bodyHeight = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                     iframe.height = Math.max(minHeight, bodyHeight);
                 }
             }
@@ -365,7 +370,6 @@ export default class ReflowableBookView implements BookView {
     };
 
 
-
 // paginated functions
 
     protected hasFixedScrollWidth: boolean = false;
@@ -397,11 +401,11 @@ export default class ReflowableBookView implements BookView {
             // Remove previous iframe height so body scroll height will be accurate.
             this.iframe.height = "0";
             this.iframe.width = BrowserUtilities.getWidth() + "px";
-    
+
             const body = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "body") as HTMLBodyElement;
-    
+
             const width = (BrowserUtilities.getWidth() - this.sideMargin * 2) + "px";
-    
+
             const images = Array.prototype.slice.call(body.querySelectorAll("img"));
             for (const image of images) {
                 if (image.hasAttribute("width")) {
@@ -413,34 +417,31 @@ export default class ReflowableBookView implements BookView {
                 if (image.width > width) {
                     image.style.maxWidth = width;
                 }
-        
+
             }
         }
     }
 
 
-    // TODO: if we cahnged the following functions to handle screen size (height and wdith) we can use it for both paginated and reflowable. 
-    // For example: getColumnWidth would be renamed to something that gives us either the offsetWidth when in paginated mode and the offsetHeight when in scrollmode. etc. 
-    // Since theses are the only 4 functions right now that are specifically used for paginated mode buyt give us nothing for scrollmode, it would make sense to make them more universal
+    // TODO: if we changed the following functions to handle screen size (height and wdith) we can use it for both paginated and reflowable.
+    // For example: getColumnWidth would be renamed to something that gives us either the offsetWidth when in paginated mode and the offsetHeight when in scrollmode. etc.
+    // Since theses are the only 4 functions right now that are specifically used for paginated mode but gives us nothing for scrollmode, it would make sense to make them more universal
 
 
     /** Returns the total width of the columns that are currently
-    positioned to the left of the iframe viewport. */
+     positioned to the left of the iframe viewport. */
     private getLeftColumnsWidth(): number {
-        const html = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "html") as HTMLElement;
-        return html.scrollLeft;
+        return this.iframe.contentDocument.scrollingElement.scrollLeft;
     }
 
     /** Returns the total width of the columns that are currently
-        positioned to the right of the iframe viewport. */
+     positioned to the right of the iframe viewport. */
     private getRightColumnsWidth(): number {
-        const html = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "html") as HTMLElement;
-        const scrollWidth = html.scrollWidth;
-
+        const scrollWidth = this.iframe.contentDocument.scrollingElement.scrollWidth;
         const width = this.getColumnWidth();
         let rightWidth = scrollWidth - width;
         if (this.hasFixedScrollWidth) {
-            // In some browsers (IE and Firefox with certain books), 
+            // In some browsers (IE and Firefox with certain books),
             // scrollWidth doesn't change when some columns
             // are off to the left, so we need to subtract them.
             const leftWidth = this.getLeftColumnsWidth();
@@ -451,14 +452,12 @@ export default class ReflowableBookView implements BookView {
 
     /** Returns the width of one column. */
     private getColumnWidth(): number {
-        const html = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "html") as HTMLElement;
-        return html.offsetWidth;
+        return this.iframe.contentDocument.scrollingElement.clientWidth;
     }
 
     /** Shifts the columns so that the specified width is positioned
-        to the left of the iframe viewport. */
+     to the left of the iframe viewport. */
     private setLeftColumnsWidth(width: number) {
-        const html = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "html") as HTMLElement;
-        html.scrollLeft = width;
+        this.iframe.contentDocument.scrollingElement.scrollLeft = width;
     }
 }

From e42d4a77b5cc7fe31c3f081871ad6386a575bd72 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Wed, 2 Dec 2020 21:22:00 -0500
Subject: [PATCH 15/17] integrate get content api and handle same origin
 location

---
 src/navigator/IFrameNavigator.ts | 59 ++++++++++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/navigator/IFrameNavigator.ts b/src/navigator/IFrameNavigator.ts
index 9ad1eac3..50c15c1d 100644
--- a/src/navigator/IFrameNavigator.ts
+++ b/src/navigator/IFrameNavigator.ts
@@ -39,6 +39,11 @@ import TextHighlighter from "../modules/highlight/TextHighlighter";
 import TimelineModule from "../modules/positions/TimelineModule";
 import { debounce } from "debounce";
 
+export type GetContent = (href: string) => Promise<string>
+export interface ContentAPI {
+    getContent: GetContent;
+}
+
 export interface UpLinkConfig {
     url?: URL;
     label?: string;
@@ -1060,7 +1065,57 @@ export default class IFrameNavigator implements Navigator {
     }
 
     private tryAgain() {
-        this.iframe.src = this.currentChapterLink.href
+        this.precessContentForIframe();
+    }
+
+    private precessContentForIframe() {
+        const self = this
+        function writeIframeDoc(content: string) {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(content, "application/xhtml+xml");
+            if (doc.head) {
+                doc.head.insertBefore(self.createBase(self.currentChapterLink.href), doc.head.firstChild)
+            }
+            const newHTML = doc.documentElement.outerHTML;
+            const iframeDoc = self.iframe.contentDocument;
+            iframeDoc.open();
+            iframeDoc.write(newHTML);
+            iframeDoc.close();
+        }
+        const link = new URL(this.currentChapterLink.href)
+        const isSameOrigin = (
+            window.location.protocol === link.protocol &&
+            window.location.port === link.port &&
+            window.location.hostname === link.hostname
+        );
+
+        if (this.api && this.api.getContent) {
+            this.api.getContent(this.currentChapterLink.href).then(content => {
+                if (content === undefined) {
+                    if (isSameOrigin) {
+                        this.iframe.src = this.currentChapterLink.href
+                    } else {
+                        fetch(this.currentChapterLink.href)
+                            .then(r => r.text())
+                            .then(async content => {
+                                writeIframeDoc.call(this, content);
+                            })
+                    }
+                } else {
+                    writeIframeDoc.call(this, content);
+                }
+            })
+        } else {
+            if (isSameOrigin) {
+                this.iframe.src = this.currentChapterLink.href
+            } else {
+                fetch(this.currentChapterLink.href)
+                    .then(r => r.text())
+                    .then(async content => {
+                        writeIframeDoc.call(this, content);
+                    })
+            }
+        }
     }
 
     private goBack() {
@@ -1608,8 +1663,8 @@ export default class IFrameNavigator implements Navigator {
                 this.currentChapterLink.type = locator.type
                 this.currentChapterLink.title = locator.title
             }
-            this.iframe.src = this.currentChapterLink.href
 
+            this.precessContentForIframe();
 
             if (locator.locations.fragment === undefined) {
                 this.currentTocUrl = null;

From 077ca6d3d01bedc5aef8d9436f2733c9aeb3a8cf Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Wed, 2 Dec 2020 21:23:09 -0500
Subject: [PATCH 16/17] version bump to 1.5.1-beta.2

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ab879a1f..94fda960 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "1.5.1-beta.1",
+  "version": "1.5.1-beta.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index aafff366..4f180750 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "1.5.1-beta.1",
+  "version": "1.5.1-beta.2",
   "description": "A viewer application for EPUB files.",
   "repository": "https://github.com/d-i-t-a/R2D2BC",
   "license": "Apache-2.0",

From 5d898241481ce674b5eccce214f039a8dd13bab4 Mon Sep 17 00:00:00 2001
From: Aferdita Muriqi <aferdita.muriqi@gmail.com>
Date: Thu, 3 Dec 2020 12:34:49 -0500
Subject: [PATCH 17/17] version bump to 1.5.1

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 94fda960..7bb5c1b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "1.5.1-beta.2",
+  "version": "1.5.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 4f180750..94716c86 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "1.5.1-beta.2",
+  "version": "1.5.1",
   "description": "A viewer application for EPUB files.",
   "repository": "https://github.com/d-i-t-a/R2D2BC",
   "license": "Apache-2.0",