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/spreads.html | |
parent | d0cd10f08286be33306336fe8c4cac26ea7ce637 (diff) |
add in master snapshot of epubjs
Diffstat (limited to 'lib/epub.js/examples/spreads.html')
-rw-r--r-- | lib/epub.js/examples/spreads.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/lib/epub.js/examples/spreads.html b/lib/epub.js/examples/spreads.html new file mode 100644 index 0000000..8d66bce --- /dev/null +++ b/lib/epub.js/examples/spreads.html @@ -0,0 +1,157 @@ +<!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> --> + <select id="toc"></select> + <div id="viewer" class="spreads"></div> + <a id="prev" href="#prev" class="arrow">‹</a> + <a id="next" href="#next" class="arrow">›</a> + + <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 + var book = ePub(url || "https://s3.amazonaws.com/moby-dick/moby-dick.epub"); + var rendition = book.renderTo("viewer", { + width: "100%", + height: 600, + spread: "always" + }); + + rendition.display(currentSectionIndex); + + book.ready.then(function() { + + 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); + + }) + + var title = document.getElementById("title"); + + rendition.on("rendered", function(section){ + var current = book.navigation && book.navigation.get(section.href); + + if (current) { + var $select = document.getElementById("toc"); + var $selected = $select.querySelector("option[selected]"); + if ($selected) { + $selected.removeAttribute("selected"); + } + + var $options = $select.querySelectorAll("option"); + for (var i = 0; i < $options.length; ++i) { + let selected = $options[i].getAttribute("ref") === current.href; + if (selected) { + $options[i].setAttribute("selected", ""); + } + } + } + + }); + + 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"; + } + + }); + + rendition.on("layout", function(layout) { + let viewer = document.getElementById("viewer"); + + if (layout.spread) { + viewer.classList.remove('single'); + } else { + viewer.classList.add('single'); + } + }); + + window.addEventListener("unload", function () { + console.log("unloading"); + this.book.destroy(); + }); + + 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.setAttribute("ref", chapter.href); + + docfrag.appendChild(option); + }); + + $select.appendChild(docfrag); + + $select.onchange = function(){ + var index = $select.selectedIndex, + url = $select.options[index].getAttribute("ref"); + rendition.display(url); + return false; + }; + + }); + + + + + </script> + +</body> +</html> |