diff --git a/reader/static/css/reader_epub.css b/reader/static/css/reader_epub.css new file mode 100644 index 0000000000000000000000000000000000000000..84262d4e403efb1851315fc71f6b3dd7d97fd13f --- /dev/null +++ b/reader/static/css/reader_epub.css @@ -0,0 +1,72 @@ +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; +} diff --git a/reader/templates/reader/book_read/epub_viewer.html b/reader/templates/reader/book_read/epub_viewer.html new file mode 100644 index 0000000000000000000000000000000000000000..34fc51aad8877f8cf8a4611ec6a41bf96a93e097 --- /dev/null +++ b/reader/templates/reader/book_read/epub_viewer.html @@ -0,0 +1,84 @@ +{% 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