diff options
author | Andrew Dolgov <[email protected]> | 2021-09-17 21:53:37 +0300 |
---|---|---|
committer | Andrew Dolgov <[email protected]> | 2021-09-17 21:53:37 +0300 |
commit | 4fd9b8f2b5a98bfcde57970b48fed2488a80f356 (patch) | |
tree | 51e0ce9cd61c24916b7d5820ee69e74bd3e76aac /lib/epub.js/examples/locations.html | |
parent | d0cd10f08286be33306336fe8c4cac26ea7ce637 (diff) |
add in master snapshot of epubjs
Diffstat (limited to 'lib/epub.js/examples/locations.html')
-rw-r--r-- | lib/epub.js/examples/locations.html | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/lib/epub.js/examples/locations.html b/lib/epub.js/examples/locations.html new file mode 100644 index 0000000..c572e7d --- /dev/null +++ b/lib/epub.js/examples/locations.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js 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> + <div id="title"></div> + <div id="viewer" class="spreads"></div> + <a id="prev" href="#prev" class="arrow">‹</a> + <a id="next" href="#next" class="arrow">›</a> + <div id="controls"> + <input id="current-percent" size="3" value="0" /> % + </div> + <script> + + var controls = document.getElementById("controls"); + var currentPage = document.getElementById("current-percent"); + var slider = document.createElement("input"); + var slide = function(){ + var cfi = book.locations.cfiFromPercentage(slider.value / 100); + rendition.display(cfi); + }; + var mouseDown = false; + + // Load the opf + var book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub"); + var rendition = book.renderTo("viewer", { + width: "100%", + height: 600 + }); + + var displayed = rendition.display(); + + var title = document.getElementById("title"); + + var next = document.getElementById("next"); + next.addEventListener("click", function(e){ + rendition.next(); + e.preventDefault(); + }, false); + + var prev = document.getElementById("prev"); + prev.addEventListener("click", function(e){ + rendition.prev(); + e.preventDefault(); + }, false); + + var keyListener = function(e){ + + // Left Key + if ((e.keyCode || e.which) == 37) { + rendition.prev(); + } + + // Right Key + if ((e.keyCode || e.which) == 39) { + rendition.next(); + } + + }; + + rendition.on("keyup", keyListener); + document.addEventListener("keyup", keyListener, false); + + book.ready.then(function(){ + // Load in stored locations from json or local storage + var key = book.key()+'-locations'; + var stored = localStorage.getItem(key); + if (stored) { + return book.locations.load(stored); + } else { + // Or generate the locations on the fly + // Can pass an option number of chars to break sections by + // default is 150 chars + return book.locations.generate(1600); + } + }) + .then(function(locations){ + controls.style.display = "block"; + slider.setAttribute("type", "range"); + slider.setAttribute("min", 0); + slider.setAttribute("max", 100); + // slider.setAttribute("max", book.locations.total+1); + slider.setAttribute("step", 1); + slider.setAttribute("value", 0); + + slider.addEventListener("change", slide, false); + slider.addEventListener("mousedown", function(){ + mouseDown = true; + }, false); + slider.addEventListener("mouseup", function(){ + mouseDown = false; + }, false); + + // Wait for book to be rendered to get current page + displayed.then(function(){ + // Get the current CFI + var currentLocation = rendition.currentLocation(); + // Get the Percentage (or location) from that CFI + var currentPage = book.locations.percentageFromCfi(currentLocation.start.cfi); + slider.value = currentPage; + currentPage.value = currentPage; + }); + + controls.appendChild(slider); + + currentPage.addEventListener("change", function(){ + var cfi = book.locations.cfiFromPercentage(currentPage.value/100); + rendition.display(cfi); + }, false); + + // Listen for location changed event, get percentage from CFI + rendition.on('relocated', function(location){ + var percent = book.locations.percentageFromCfi(location.start.cfi); + var percentage = Math.floor(percent * 100); + if(!mouseDown) { + slider.value = percentage; + } + currentPage.value = percentage; + console.log(location); + }); + + // Save out the generated locations to JSON + localStorage.setItem(book.key()+'-locations', book.locations.save()); + + }); + + </script> + +</body> +</html> |