Skip to content
Snippets Groups Projects
Verified Commit 5ace318a authored by TheJoeCoder's avatar TheJoeCoder
Browse files

Epub reader

parent 104bad65
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
reader/static/css/reader_epub.css 0 → 100644
+ 72
− 0
View file @ 5ace318a
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
position: absolute;
height: 100%;
width: 100%;
}
#outerContainer {
height: 95%;
}
#viewer {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
@media (min-width: 1000px) {
#viewer.spreads:after {
position: absolute;
width: 1px;
border-right: 1px #000 solid;
height: 90%;
z-index: 1;
left: 50%;
margin-left: -1px;
top: 5%;
opacity: .15;
box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
content: "";
}
#viewer.spreads.single:after {
display: none;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
}
.epr-arrow {
position: fixed;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
text-decoration: none;
}
.epr-arrow:hover {
color: #777;
}
.epr-arrow:active {
color: #000;
}
reader/templates/reader/book_read/epub_viewer.html 0 → 100644
+ 84
− 0
View file @ 5ace318a
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Read Book: {{ book.title }}</title>
<link rel="stylesheet" href="{% static "css/reader_epub.css" %}">
<link rel="stylesheet" href="{% static "css/reader_toolbar.css" %}">
<script src="{% static "js/jquery-3.7.1.min.js" %}"></script>
<script src="{% static "js/jszip.min.js" %}"></script>
<script src="{% static "js/epub.min.js" %}"></script>
</head>
<body>
<div class="reading-toolbar-top">
<table>
<tbody>
<tr>
<td class="ta-left">
<span class="ta-text">Now reading: {{ book.title }}</span>
</td>
<td></td>
<td class="ta-right">
<span class="ta-text"><a href="{% url 'view_book' book.id %}" class="btn btn-primary">Back to book</a></span>
</td>
</tr>
</tbody>
</table>
</div>
<div id="outerContainer">
<div id="viewer"></div>
</div>
<div id="prev" class="epr-arrow">‹</div>
<div id="next" class="epr-arrow">›</div>
<script>
let book = ePub("{{ book.original_file.url }}");
let rendition = book.renderTo("viewer", {
manager: "continuous",
flow: "paginated",
width: "100%",
height: "100%",
snap: true
});
let displayed = rendition.display();
rendition.on("relocated", function(location){
console.log(location);
// TODO Save location here
});
displayed.then(function(renderer){
// -- do stuff
});
// Navigation loaded
book.loaded.navigation.then(function(toc){
// console.log(toc);
});
var next = document.getElementById("next");
next.addEventListener("click", function(){
rendition.next();
}, false);
var prev = document.getElementById("prev");
prev.addEventListener("click", function(){
rendition.prev();
}, false);
rendition.on("keyup", event => {
let kc = event.keyCode || event.which;
if (kc === 37) rendition.prev();
if (kc === 39) rendition.next();
});
$(window).on( "swipeleft", function( event ) {
rendition.next();
});
$(window).on( "swiperight", function( event ) {
rendition.prev();
});
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment