diff options
Diffstat (limited to 'lib/epub.js/examples/continuous-spreads.html')
-rw-r--r-- | lib/epub.js/examples/continuous-spreads.html | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/lib/epub.js/examples/continuous-spreads.html b/lib/epub.js/examples/continuous-spreads.html new file mode 100644 index 0000000..b5a9116 --- /dev/null +++ b/lib/epub.js/examples/continuous-spreads.html @@ -0,0 +1,140 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Continuous Spreads Example</title> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script> + <script src="../dist/epub.js"></script> + + <link rel="stylesheet" type="text/css" href="examples.css"> + + +</head> +<body> + <select id="toc"></select> + <div id="viewer" class="spreads"></div> + <div id="prev" class="arrow">‹</div> + <div id="next" class="arrow">›</div> + <script> + var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1)); + var url = params && params.get("url") && decodeURIComponent(params.get("url")); + var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : undefined; + + // Load the opf + window.book = ePub(url || "https://s3.amazonaws.com/moby-dick/moby-dick.epub"); + var rendition = book.renderTo("viewer", { + manager: "continuous", + flow: "paginated", + width: "100%", + height: 600 + }); + + var displayed = rendition.display(currentSectionIndex); + + + displayed.then(function(renderer){ + // -- do stuff + }); + + // Navigation loaded + book.loaded.navigation.then(function(toc){ + // console.log(toc); + }); + + book.ready.then(() => { + + var next = document.getElementById("next"); + + next.addEventListener("click", function(e){ + book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next(); + e.preventDefault(); + }, false); + + var prev = document.getElementById("prev"); + prev.addEventListener("click", function(e){ + book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev(); + e.preventDefault(); + }, false); + + var keyListener = function(e){ + + // Left Key + if ((e.keyCode || e.which) == 37) { + book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev(); + } + + // Right Key + if ((e.keyCode || e.which) == 39) { + book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next(); + } + + }; + + rendition.on("keyup", keyListener); + document.addEventListener("keyup", keyListener, false); + + }); + + rendition.on("selected", function(range) { + console.log("selected", range); + }); + + rendition.on("layout", function(layout) { + let viewer = document.getElementById("viewer"); + + if (layout.spread) { + viewer.classList.remove('single'); + } else { + viewer.classList.add('single'); + } + }); + + rendition.on("relocated", function(location){ + console.log(location); + + var next = book.package.metadata.direction === "rtl" ? document.getElementById("prev") : document.getElementById("next"); + var prev = book.package.metadata.direction === "rtl" ? document.getElementById("next") : document.getElementById("prev"); + + if (location.atEnd) { + next.style.visibility = "hidden"; + } else { + next.style.visibility = "visible"; + } + + if (location.atStart) { + prev.style.visibility = "hidden"; + } else { + prev.style.visibility = "visible"; + } + + }); + + book.loaded.navigation.then(function(toc){ + var $select = document.getElementById("toc"), + docfrag = document.createDocumentFragment(); + + toc.forEach(function(chapter) { + var option = document.createElement("option"); + option.textContent = chapter.label; + option.ref = chapter.href; + + docfrag.appendChild(option); + }); + + $select.appendChild(docfrag); + + $select.onchange = function(){ + var index = $select.selectedIndex, + url = $select.options[index].ref; + rendition.display(url); + return false; + }; + + }); + + </script> + +</body> +</html> |