From df15abeee33aaeb4a00ff3b2f303e1676e322fe7 Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Mon, 21 Jan 2019 17:10:45 +0530
Subject: [PATCH] update epub.js, inital annotations

---
 static/css/epub.css   |  12 ++++
 static/html/epub.html | 146 +++++++++++++++++-------------------------
 static/reader/epub.js |  77 ++++++++++++++++++++++
 3 files changed, 146 insertions(+), 89 deletions(-)
 create mode 100644 static/css/epub.css
 create mode 100644 static/reader/epub.js

diff --git a/static/css/epub.css b/static/css/epub.css
new file mode 100644
index 0000000..fc7dbab
--- /dev/null
+++ b/static/css/epub.css
@@ -0,0 +1,12 @@
+
+::selection {
+    background: rgba(255,255,0, 0.3)
+}
+.epubjs-hl {
+    fill: yellow;
+    fill-opacity: 0.;3
+    mix-blend-mode: multiply;
+}
+.epubjs-hl.selected {
+    fill: blue;
+}
diff --git a/static/html/epub.html b/static/html/epub.html
index 560320f..fc96f8b 100644
--- a/static/html/epub.html
+++ b/static/html/epub.html
@@ -11,6 +11,7 @@
         <link rel="stylesheet" href="/static/epub.js/css/normalize.css?2">
         <link rel="stylesheet" href="/static/epub.js/css/main.css?2">
         <link rel="stylesheet" href="/static/epub.js/css/popup.css?2">
+        <link rel="stylesheet" href="/static/epub.js/css/annotations.css?2">
         <style>
             .arrow {
                 -webkit-user-select: none;
@@ -37,104 +38,72 @@
             #sidebar {
               background: #fff;
             }
-#panels a {
-  visibility: hidden;
-  width: 18px;
-  height: 20px;
-  overflow: hidden;
-  display: inline-block;
-  color: #444;
-  margin-left: 6px;
-}
+            #panels a {
+              visibility: hidden;
+              width: 18px;
+              height: 20px;
+              overflow: hidden;
+              display: inline-block;
+              color: #444;
+              margin-left: 6px;
+            }
 
-#panels a::before {
-  visibility: visible;
-}
+            #panels a::before {
+              visibility: visible;
+            }
 
-#panels a:hover {
-  color: #999;
-}
+            #panels a:hover {
+              color: #999;
+            }
 
-#panels a:active {
-  color: #999;
-  margin: 1px 0 -1px 6px;
-}
+            #panels a:active {
+              color: #999;
+              margin: 1px 0 -1px 6px;
+            }
 
-#panels a.active,
-#panels a.active:hover {
-  color: #999;
-}
-.list_item a {
-  color: #999;
-}
+            #panels a.active,
+            #panels a.active:hover {
+              color: #999;
+            }
+            .list_item a {
+              color: #999;
+            }
 
-.list_item.currentChapter > a,
-.list_item a:hover {
-  color: #333;
-}
+            .list_item.currentChapter > a,
+            .list_item a:hover {
+              color: #333;
+            }
 
-/* #tocView li.openChapter > a, */
-.list_item a:hover {
-  color: #333;
-}
-#panels {
-  padding-left: 14px;
-  background: #eee;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  -ms-box-shadow: none;
-  box-shadow: none; //0px 1px 3px rgba(0,0,0,.3);
+            /* #tocView li.openChapter > a, */
+            .list_item a:hover {
+              color: #333;
+            }
+            #panels {
+              padding-left: 14px;
+              background: #eee;
+              -moz-box-shadow: none;
+              -webkit-box-shadow: none;
+              -ms-box-shadow: none;
+              box-shadow: none; //0px 1px 3px rgba(0,0,0,.3);
 
-}
-#divider.show {
-    display: none;
-}
+            }
+            #divider.show {
+                display: none;
+            }
         </style>
 
-        <script src="/static/epub.js/libs/jquery-2.1.0.min.js"></script>
-
-        <script src="/static/epub.js/libs/zip.min.js"></script>
-
-        <script>
-            "use strict";
-            var reader;
-            document.onreadystatechange = function () {
-              if (document.readyState == "complete") {
-                EPUBJS.filePath = "/static/epub.js/libs/";
-                EPUBJS.cssPath = "/static/epub.js/css/";
-                // fileStorage.filePath = EPUBJS.filePath;
-                reader = ePubReader(document.location.pathname.replace(/\/reader\//, '/epub/'));
-              }
-            };
-        </script>
-                
+        <script src="/static/epub.js/js/libs/jquery.min.js"></script>
+        <script src="/static/epub.js/js/libs/zip.min.js"></script>
+        <script src="/static/reader/epub.js"></script>
         <!-- Render -->
-        <script src="/static/epub.js/epub.js"></script>
-        
-        <!-- Hooks -->
-        <script src="/static/epub.js/hooks.js"></script> 
-        
+        <script src="/static/epub.js/js/epub.js"></script>
         <!-- Reader -->
-        <script src="/static/epub.js/reader.js"></script>
-        
-        <!-- Plugins -->
-        <!--
-        <script src="/static/epub.js/plugins/search.js"></script>
-        -->
-        
-        <!-- Highlights -->
-        <!-- 
-        <script src="/static/epub.js/libs/jquery.highlight.js"></script>
-        <script src="/static/epub.js/hooks/extensions/highlight.js"></script>
-        -->
-        
-        <!-- File Storage -->
-        <!-- <script src="/static/epub.js/libs/fileStorage.min.js"></script> -->
+        <script src="/static/epub.js/js/reader.min.js"></script>
 
-        <!-- Full Screen -->
-        <!-- 
-        <script src="/static/epub.js/libs/screenfull.min.js"></script>
-        -->
+        <!-- Plugins -->
+        <!-- <script src="js/plugins/search.js"></script> -->
+        <!-- Highlights -->
+        <!-- <script src="/static/epub.js/js/hooks/extensions/highlight.js"></script> -->
     </head>
     <body>
       <div id="sidebar">
@@ -146,10 +115,9 @@
             -->
           <a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a>
           <a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a>
-            <!--
+          <!--
           <a id="show-Notes" class="show_view icon-edit" data-view="Notes">Notes</a>
-            -->
-         
+          -->
         </div>
         <div id="tocView" class="view">
         </div>
diff --git a/static/reader/epub.js b/static/reader/epub.js
new file mode 100644
index 0000000..c065bed
--- /dev/null
+++ b/static/reader/epub.js
@@ -0,0 +1,77 @@
+"use strict";
+var reader;
+var id = document.location.pathname.split('/')[1];
+var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
+
+function saveAnnotations() {
+    localStorage[id + '.annotations'] = JSON.stringify(annotations)
+}
+
+function getText(book, cfiRange, cb) {
+    book.getRange(cfiRange).then(function (range) {
+        var text;
+        if (range) {
+            text = range.toString();
+        }
+        cb(text)
+    })
+}
+
+function onHighlightClicked(e) {
+    console.log("highlight clicked", e.target.dataset.epubcfi);
+    if(e.target.classList.contains('selected')) {
+        e.target.classList.remove('selected')
+    } else {
+        document.querySelectorAll('.epubjs-hl.selected').forEach(function(other) {
+            other.classList.remove('selected')
+        })
+        e.target.classList.add('selected')
+    }
+}
+
+document.onreadystatechange = function () {
+    if (document.readyState == "complete") {
+        EPUBJS.filePath = "/static/epub.js/js/libs/";
+        EPUBJS.cssPath = "/static/epub.js/css/";
+        EPUBJS.core.addCss('/static/css/epub.css')
+        // fileStorage.filePath = EPUBJS.filePath;
+        reader = ePubReader(document.location.pathname.replace(/\/reader\//, '/epub/'), {
+            restore: true
+        });
+        var rendition = reader.rendition,
+            book = reader.book;
+
+        annotations.forEach(function(a) {
+            rendition.annotations.highlight(a.cfiRange, a.data || {}, onHighlightClicked);
+        })
+
+        reader.rendition.on('keydown', function(event) {
+            if (event.key == 'Delete') {
+                document.querySelectorAll('.epubjs-hl.selected').forEach(function(a) {
+                    annotations = annotations.filter(function(annotation) {
+                        return annotation.cfiRange != a.dataset.epubcfi
+                    })
+                    rendition.annotations.remove(a.dataset.epubcfi)
+                    saveAnnotations()
+                })
+            }
+        })
+        rendition.on("selected", function(cfiRange, contents) {
+            getText(book, cfiRange, function(quote) {
+                var data = {
+                        quote: quote
+                }
+                rendition.annotations.highlight(cfiRange, data, onHighlightClicked);
+                annotations.push({
+                    cfiRange: cfiRange,
+                    data: data
+                })
+                saveAnnotations()
+                document.querySelectorAll('.epubjs-hl.selected').forEach(function(other) {
+                    other.classList.remove('selected')
+                })
+            })
+            contents.window.getSelection().removeAllRanges();
+        });
+    }
+};