update epub.js, inital annotations
This commit is contained in:
parent
5c879be91b
commit
df15abeee3
3 changed files with 146 additions and 89 deletions
12
static/css/epub.css
Normal file
12
static/css/epub.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
<script src="/static/epub.js/js/reader.min.js"></script>
|
||||
|
||||
<!-- Plugins -->
|
||||
<!--
|
||||
<script src="/static/epub.js/plugins/search.js"></script>
|
||||
-->
|
||||
|
||||
<!-- <script src="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> -->
|
||||
|
||||
<!-- Full Screen -->
|
||||
<!--
|
||||
<script src="/static/epub.js/libs/screenfull.min.js"></script>
|
||||
-->
|
||||
<!-- <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>
|
||||
|
|
|
|||
77
static/reader/epub.js
Normal file
77
static/reader/epub.js
Normal file
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
};
|
||||
Loading…
Reference in a new issue