update epub.js, inital annotations

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;
+}

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,7 +38,7 @@
             #sidebar {
               background: #fff;
             }
-#panels a {
+            #panels a {
               visibility: hidden;
               width: 18px;
               height: 20px;
@@ -45,39 +46,39 @@
               display: inline-block;
               color: #444;
               margin-left: 6px;
-}
+            }
 
-#panels a::before {
+            #panels a::before {
               visibility: visible;
-}
+            }
 
-#panels a:hover {
+            #panels a:hover {
               color: #999;
-}
+            }
 
-#panels a:active {
+            #panels a:active {
               color: #999;
               margin: 1px 0 -1px 6px;
-}
+            }
 
-#panels a.active,
+            #panels a.active,
-#panels a.active:hover {
+            #panels a.active:hover {
               color: #999;
-}
+            }
-.list_item a {
+            .list_item a {
               color: #999;
-}
+            }
 
-.list_item.currentChapter > a,
+            .list_item.currentChapter > a,
-.list_item a:hover {
+            .list_item a:hover {
               color: #333;
-}
+            }
 
-/* #tocView li.openChapter > a, */
+            /* #tocView li.openChapter > a, */
-.list_item a:hover {
+            .list_item a:hover {
               color: #333;
-}
+            }
-#panels {
+            #panels {
               padding-left: 14px;
               background: #eee;
               -moz-box-shadow: none;
@@ -85,56 +86,24 @@
               -ms-box-shadow: none;
               box-shadow: none; //0px 1px 3px rgba(0,0,0,.3);
 
-}
+            }
-#divider.show {
+            #divider.show {
                 display: none;
-}
+            }
         </style>
 
-        <script src="/static/epub.js/libs/jquery-2.1.0.min.js"></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/epub.js/libs/zip.min.js"></script>
+        <script src="/static/reader/epub.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>
-                
         <!-- Render -->
-        <script src="/static/epub.js/epub.js"></script>
+        <script src="/static/epub.js/js/epub.js"></script>
-        
-        <!-- Hooks -->
-        <script src="/static/epub.js/hooks.js"></script> 
-        
         <!-- Reader -->
-        <script src="/static/epub.js/reader.js"></script>
+        <script src="/static/epub.js/js/reader.min.js"></script>
 
         <!-- Plugins -->
-        <!--
+        <!-- <script src="js/plugins/search.js"></script> -->
-        <script src="/static/epub.js/plugins/search.js"></script>
-        -->
-        
         <!-- Highlights -->
-        <!-- 
+        <!-- <script src="/static/epub.js/js/hooks/extensions/highlight.js"></script> -->
-        <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> -->
-
-        <!-- Full Screen -->
-        <!-- 
-        <script src="/static/epub.js/libs/screenfull.min.js"></script>
-        -->
     </head>
     <body>
       <div id="sidebar">
@@ -149,7 +118,6 @@
           <!--
           <a id="show-Notes" class="show_view icon-edit" data-view="Notes">Notes</a>
           -->
-         
         </div>
         <div id="tocView" class="view">
         </div>

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();
+        });
+    }
+};