diff options
Diffstat (limited to 'lib/epub.js/examples')
31 files changed, 4069 insertions, 0 deletions
diff --git a/lib/epub.js/examples/ajax-loader.gif b/lib/epub.js/examples/ajax-loader.gif Binary files differnew file mode 100644 index 0000000..1c72ebb --- /dev/null +++ b/lib/epub.js/examples/ajax-loader.gif diff --git a/lib/epub.js/examples/annotator.html b/lib/epub.js/examples/annotator.html new file mode 100644 index 0000000..aa88478 --- /dev/null +++ b/lib/epub.js/examples/annotator.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Annotator Example</title> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script> + <script src="../dist/epub.js"></script> + + <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/annotator/1.2.9/annotator.min.js"></script> --> + + <link rel="stylesheet" type="text/css" href="examples.css"> + +</head> +<body> + <div id="viewer" class="spreads"></div> + <div id="prev" class="arrow">‹</div> + <div id="next" class="arrow">›</div> + <script> + // Load the opf + var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf"); + var rendition = book.renderTo("viewer", { + width: "100%", + height: 600, + ignoreClass: 'annotator-hl' + }); + + var displayed = rendition.display(3); + + // 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); + + 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); + + rendition.on("relocated", function(location){ + // console.log(location); + }); + + rendition.hooks.render.register(function (view) { + + var adder = [ + ['.annotator-adder, .annotator-outer', ['position', 'fixed']] + ]; + + view.addScript('https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.min.js'). + then(function () { + return view.addScript('https://cdn.jsdelivr.net/annotator/1.2.9/annotator-full.min.js'); + }). + then(function () { + return view.addCss('https://cdn.jsdelivr.net/annotator/1.2.9/annotator.min.css'); + }). + then(function () { + + view.addStylesheetRules(adder); + + view.window.Annotator.Util.mousePosition = function(event) { + var body = view.document.body; + // var offset = view.position(); + + return { + top: event.pageY, + left: event.pageX + }; + }; + var ann = new view.window.Annotator(view.document.body); + }); + + + }) + + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/archived.html b/lib/epub.js/examples/archived.html new file mode 100644 index 0000000..fc45b8c --- /dev/null +++ b/lib/epub.js/examples/archived.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Archived 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="viewer" class="spreads"></div> + <div id="prev" class="arrow">‹</div> + <div id="next" class="arrow">›</div> + <script> + 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(); + + + 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); + + 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); + + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/contents.html b/lib/epub.js/examples/contents.html new file mode 100644 index 0000000..67031ce --- /dev/null +++ b/lib/epub.js/examples/contents.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>EPUB.js Basic Example</title> + + <script src="../dist/epub.js"></script> + + <link rel="stylesheet" type="text/css" href="examples.css"> + +</head> +<body> + <div id="viewer" class="scrolled"></div> + + <script> + var $viewer = document.getElementById("viewer"); + + var book = ePub("https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"); + book.ready.then(function(){ + book.getRange("epubcfi(/6/14[xchapter_001]!/4/2,/2/2/2[c001s0000]/1:0,/8/2[c001p0003]/1:663)").then(function(range) { + let text = range.toString() + console.log(text); + $viewer.textContent = text; + }); + }); + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/continuous-scrolled.html b/lib/epub.js/examples/continuous-scrolled.html new file mode 100644 index 0000000..3d8a63c --- /dev/null +++ b/lib/epub.js/examples/continuous-scrolled.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Continuous Example</title> + + <script src="../dist/epub.js"></script> + + <link rel="stylesheet" type="text/css" href="examples.css"> + + <style type="text/css"> + + .epub-container { + /* min-width: 320px; */ + /* margin: 0 auto; */ + /* position: relative; */ + } + + .epub-container .epub-view > iframe { + background: white; + box-shadow: 0 0 4px #ccc; + /*margin: 10px; + padding: 20px;*/ + } + + #viewer { + width: 600px; + height: 100vh; + /* overflow: auto; */ + margin: 0 auto; + } + + </style> +</head> +<body> + <div id="viewer"></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 + var book = ePub(url || "https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"); + var rendition = book.renderTo("viewer", { + manager: "continuous", + flow: "scrolled", + width: "100%", + height: "100%" + }); + var displayed = rendition.display(currentSectionIndex); + + + displayed.then(function(renderer){ + // -- do stuff + }); + + // Navigation loaded + book.loaded.navigation.then(function(toc){ + // console.log(toc); + }); + + + </script> + +</body> +</html> 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> diff --git a/lib/epub.js/examples/embedded.html b/lib/epub.js/examples/embedded.html new file mode 100644 index 0000000..e9946f8 --- /dev/null +++ b/lib/epub.js/examples/embedded.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> + <title></title> + + <script src="../dist/epub.js"></script> + + <style> + + body { + margin: 0; + } + + </style> +</head> +<body> + + <script> + var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1)); + var url = params && params.get("url") && decodeURIComponent(params.get("url")); + var currentCfi = (params && params.get("cfi")) ? params.get("cfi") : undefined; + var currentSectionIndex = (params && params.get("loc")) ? parseInt(params.get("loc")) : undefined; + + // Load the opf + var book = ePub(url || "https://s3.amazonaws.com/moby-dick/"); + var rendition = book.renderTo(document.body, { + manager: "continuous", + snap: true + }); + + rendition.display(currentCfi || currentSectionIndex); + + + rendition.on("rendered", function(section){ + // console.log("rendered", section); + var nextSection = section.next(); + var prevSection = section.prev(); + + var current = book.navigation && book.navigation.get(section.href); + + if (current) { + document.title = current.label; + } + }); + + rendition.on("relocated", function(location){ + // console.log("locationChanged", location) + console.log("locationChanged start", location.start.cfi) + // console.log("locationChanged end", location.end.cfi) + }); + + window.addEventListener("unload", function () { + console.log("unloading"); + this.book.destroy(); + }); + + </script> +</body> +</html> diff --git a/lib/epub.js/examples/examples.css b/lib/epub.js/examples/examples.css new file mode 100644 index 0000000..a259072 --- /dev/null +++ b/lib/epub.js/examples/examples.css @@ -0,0 +1,282 @@ +body { + margin: 0; + background: #fafafa; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #333; + + position: absolute; + height: 100%; + width: 100%; + min-height: 800px; +} + +#title { + width: 900px; + min-height: 18px; + margin: 10px auto; + text-align: center; + font-size: 16px; + color: #E2E2E2; + font-weight: 400; +} + +#title:hover { + color: #777; +} + +#viewer.spreads { + width: 900px; + height: 600px; + box-shadow: 0 0 4px #ccc; + border-radius: 5px; + padding: 0; + position: relative; + margin: 10px auto; + background: white url('ajax-loader.gif') center center no-repeat; + top: calc(50vh - 400px); +} + +#viewer.spreads .epub-view > iframe { + background: white; +} + +#viewer.scrolled { + overflow: hidden; + width: 800px; + margin: 0 auto; + position: relative; + background: url('ajax-loader.gif') center center no-repeat; + box-shadow: 0 0 4px #ccc; + padding: 20px; + background: white; +} + +#viewer.scrolled .epub-view > iframe { + background: white; +} + +#prev { + left: 0; +} + +#next { + right: 0; +} + +#toc { + display: block; + margin: 10px auto; +} + +@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; + } +} + +.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; +} + +.navlink { + margin: 14px; + display: block; + text-align: center; + text-decoration: none; + color: #ccc; +} + +.arrow:hover, .navlink:hover { + color: #777; +} + +.arrow:active, .navlink:hover { + color: #000; +} + +#book-wrapper { + width: 480px; + height: 640px; + overflow: hidden; + border: 1px solid #ccc; + margin: 28px auto; + background: #fff; + border-radius: 0 5px 5px 0; + position: absolute; +} + +#book-viewer { + width: 480px; + height: 660px; + margin: -30px auto; + -moz-box-shadow: inset 10px 0 20px rgba(0,0,0,.1); + -webkit-box-shadow: inset 10px 0 20px rgba(0,0,0,.1); + box-shadow: inset 10px 0 20px rgba(0,0,0,.1); +} + +#book-viewer iframe { + padding: 40px 40px; +} + +#controls { + position: absolute; + bottom: 16px; + left: 50%; + width: 400px; + margin-left: -200px; + text-align: center; + display: none; +} + +#controls > input[type=range] { + width: 400px; +} + +#navigation { + width: 400px; + height: 100vh; + position: absolute; + overflow: auto; + top: 0; + left: 0; + background: #777; + -webkit-transition: -webkit-transform .25s ease-out; + -moz-transition: -moz-transform .25s ease-out; + -ms-transition: -moz-transform .25s ease-out; + transition: transform .25s ease-out; + +} + +#navigation.fixed { + position: fixed; +} + +#navigation h1 { + width: 200px; + font-size: 16px; + font-weight: normal; + color: #fff; + margin-bottom: 10px; +} + +#navigation h2 { + font-size: 14px; + font-weight: normal; + color: #B0B0B0; + margin-bottom: 20px; +} + +#navigation ul { + padding-left: 36px; + margin-left: 0; + margin-top: 12px; + margin-bottom: 12px; + width: 340px; +} + +#navigation ul li { + list-style: decimal; + margin-bottom: 10px; + color: #cccddd; + font-size: 12px; + padding-left: 0; + margin-left: 0; +} + +#navigation ul li a { + color: #ccc; + text-decoration: none; +} + +#navigation ul li a:hover { + color: #fff; + text-decoration: underline; +} + +#navigation ul li a.active { + color: #fff; +} + +#navigation #cover { + display: block; + margin: 24px auto; +} + +#navigation #closer { + position: absolute; + top: 0; + right: 0; + padding: 12px; + color: #cccddd; + width: 24px; +} + +#navigation.closed { + -webkit-transform: translate(-400px, 0); + -moz-transform: translate(-400px, 0); + -ms-transform: translate(-400px, 0); + transform: translate(-400px, 0); +} + +svg { + display: block; +} + +.close-x { + stroke: #cccddd; + fill: transparent; + stroke-linecap: round; + stroke-width: 5; +} + +.close-x:hover { + stroke: #fff; +} + +#opener { + position: absolute; + top: 0; + left: 0; + padding: 10px; + stroke: #E2E2E2; + fill: #E2E2E2; + +} + +#opener:hover { + stroke: #777; + fill: #777; +} diff --git a/lib/epub.js/examples/highlights.html b/lib/epub.js/examples/highlights.html new file mode 100644 index 0000000..665c2de --- /dev/null +++ b/lib/epub.js/examples/highlights.html @@ -0,0 +1,176 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Highlights Example</title> + + <script src="../dist/epub.js"></script> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script> + + <link rel="stylesheet" type="text/css" href="examples.css"> + + <style type="text/css"> + ::selection { + background: yellow; + } + + #extras { + width: 600px; + margin: 40px auto; + } + + #highlights { + list-style: none; + margin-left: 0; + padding: 0; + } + + #highlights li { + list-style: none; + margin-bottom: 20px; + border-top: 1px solid #E2E2E2; + padding: 10px; + } + + #highlights a { + display: block; + } + + #viewer.spreads { + top: 0; + margin-top: 50px; + } + + [ref="epubjs-mk"] { + background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHg9JzBweCcgeT0nMHB4JyB2aWV3Qm94PScwIDAgNzUgNzUnPjxnIGZpbGw9JyNCREJEQkQnIGlkPSdidWJibGUnPjxwYXRoIGNsYXNzPSdzdDAnIGQ9J00zNy41LDkuNEMxOS42LDkuNCw1LDIwLjUsNSwzNC4zYzAsNS45LDIuNywxMS4zLDcuMSwxNS42TDkuNiw2NS42bDE5LTcuM2MyLjgsMC42LDUuOCwwLjksOC45LDAuOSBDNTUuNSw1OS4yLDcwLDQ4LjEsNzAsMzQuM0M3MCwyMC41LDU1LjQsOS40LDM3LjUsOS40eicvPjwvZz48L3N2Zz4=") no-repeat; + width: 20px; + height: 20px; + cursor: pointer; + margin-left: 0; + } + + </style> +</head> +<body> + <div id="frame"> + <div id="viewer" class="spreads"></div> + <a id="prev" href="#prev" class="arrow">‹</a> + <a id="next" href="#next" class="arrow">›</a> + </div> + <div id="extras"> + <ul id="highlights"></ul> + </div> + + <script> + // Load the opf + var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf"); + + var rendition = book.renderTo("viewer", { + width: "100%", + height: 600, + ignoreClass: 'annotator-hl', + manager: "continuous" + }); + + var displayed = rendition.display(6); + + // 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); + + 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); + + rendition.on("relocated", function(location){ + // console.log(location); + }); + + + // Apply a class to selected text + rendition.on("selected", function(cfiRange, contents) { + rendition.annotations.highlight(cfiRange, {}, (e) => { + console.log("highlight clicked", e.target); + }); + contents.window.getSelection().removeAllRanges(); + + }); + + this.rendition.themes.default({ + '::selection': { + 'background': 'rgba(255,255,0, 0.3)' + }, + '.epubjs-hl' : { + 'fill': 'yellow', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply' + } + }); + + // Illustration of how to get text from a saved cfiRange + var highlights = document.getElementById('highlights'); + + rendition.on("selected", function(cfiRange) { + + book.getRange(cfiRange).then(function (range) { + var text; + var li = document.createElement('li'); + var a = document.createElement('a'); + var remove = document.createElement('a'); + var textNode; + + if (range) { + text = range.toString(); + textNode = document.createTextNode(text); + + a.textContent = cfiRange; + a.href = "#" + cfiRange; + a.onclick = function () { + rendition.display(cfiRange); + }; + + remove.textContent = "remove"; + remove.href = "#" + cfiRange; + remove.onclick = function () { + rendition.annotations.remove(cfiRange); + return false; + }; + + li.appendChild(a); + li.appendChild(textNode); + li.appendChild(remove); + highlights.appendChild(li); + } + + }) + + }); + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/hooks.html b/lib/epub.js/examples/hooks.html new file mode 100644 index 0000000..c5841b8 --- /dev/null +++ b/lib/epub.js/examples/hooks.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Single Example</title> + + <script src="../dist/epub.js"></script> + + <link rel="stylesheet" type="text/css" href="examples.css"> + +</head> +<body> + <a id="prev" href="#prev" class="navlink">...</a> + <div id="viewer" class="scrolled"></div> + <a id="next" href="#next" class="navlink">...</a> + + <script> + var currentSectionIndex = 8; + // Load the opf + var book = ePub("https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"); + var rendition = book.renderTo("viewer", { flow: "scrolled-doc" }); + + rendition.display("chapter_001.xhtml"); + + + 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); + + + + rendition.on("rendered", function(section){ + var nextSection = section.next(); + var prevSection = section.prev(); + + if(nextSection) { + nextNav = book.navigation.get(nextSection.href); + + if(nextNav) { + nextLabel = nextNav.label; + } else { + nextLabel = "next"; + } + + next.textContent = nextLabel + " »"; + } else { + next.textContent = ""; + } + + if(prevSection) { + prevNav = book.navigation.get(prevSection.href); + + if(prevNav) { + prevLabel = prevNav.label; + } else { + prevLabel = "previous"; + } + + prev.textContent = "« " + prevLabel; + } else { + prev.textContent = ""; + } + + }); + + // Hooks + + // Add a single script + rendition.hooks.content.register(function(contents){ + return contents.addScript("https://code.jquery.com/jquery-2.1.4.min.js") + .then(function(){ + // init code + }); + }); + + // Add several scripts / css + rendition.hooks.content.register(function(contents){ + + var loaded = Promise.all([ + contents.addScript("https://code.jquery.com/jquery-2.1.4.min.js"), + contents.addStylesheet("http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css") + ]); + + // return loaded promise + return loaded; + }); + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/hypothesis-continuous.html b/lib/epub.js/examples/hypothesis-continuous.html new file mode 100644 index 0000000..8ed8f75 --- /dev/null +++ b/lib/epub.js/examples/hypothesis-continuous.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Continuous Example</title> + + <script src="../dist/epub.js"></script> + <!-- <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> --> + <script src="//hypothes.is/embed.js"></script> + + <style type="text/css"> + body { + margin: 0 auto; + background: #fafafa; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #333; + height: 100%; + width: 100%; + max-width: 1200px; + } + + .epub-container { + min-width: 320px; + margin: 0 auto; + } + + /*.epub-container > div { + padding: 0 20% 0 20%; + }*/ + + .epub-container .epub-view > iframe { + background: white; + box-shadow: 0 0 4px #ccc; + margin: 10px; + padding: 20px; + } + + + #prev { + left: 40px; + } + + #next { + right: 40px; + } + + .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; + } + + .arrow:hover { + color: #777; + } + + .arrow:active { + color: #000; + } + + #toc { + display: block; + margin: 10px auto; + } + + </style> +</head> +<body> + <div id="viewer"></div> + + <script> + // var currentSectionIndex = 8; + // Load the opf + var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf"); + var rendition = book.renderTo(document.body, { method: "continuous", flow: "scrolled-continuous", width: "60%" }); + var displayed = rendition.display(); + + + displayed.then(function(renderer){ + // -- do stuff + }); + + // Navigation loaded + book.loaded.navigation.then(function(toc){ + // console.log(toc); + }); + + book.rendition.hooks.content.register(function(view) { + return view.addScript("//hypothes.is/embed.js").then(function() { + view.window.hypothesisConfig = function () { + + return { + constructor: this.Annotator.Guest, + app: 'https://hypothes.is/app.html' + }; + }; + + // view.window.hypothesisInstall(); + }); + }); + + book.rendition.hooks.render.register(function(view) { + var getVisibleAnnotations = function ($) { + var height = document.documentElement.clientHeight; + return $('.annotator-hl').map(function() { + var $this = $(this), + pos = view.position().top, + top = pos + this.getBoundingClientRect().top; + if (top >= 0 && top <= height) { + return $this.data('annotation'); + } + }).get(); + }; + book.rendition.on("scroll", function() { + var annotator = view.window.annotator; + var annotations; + if(annotator && annotator.constructor.$) { + annotations = getVisibleAnnotations(annotator.constructor.$); + annotator.showAnnotations(annotations); + } + }); + }); + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/hypothesis-spreads.html b/lib/epub.js/examples/hypothesis-spreads.html new file mode 100644 index 0000000..acd259f --- /dev/null +++ b/lib/epub.js/examples/hypothesis-spreads.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js + Hypothes.is Example</title> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script> + <script src="../dist/epub.js"></script> + + <script type="text/javascript"> + window.hypothesisConfig = function () { + return { + openSidebar: false, + enableMultiFrameSupport: true, + onLayoutChange: function(state) { + var nav = document.getElementById("navigation"); + if (state.expanded === true) { + nav.classList.remove("open"); + } + } + }; + }; + </script> + <script src="https://cdn.hypothes.is/hypothesis"></script> + + <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> + <link rel="stylesheet" type="text/css" href="hypothesis.css"> + + <script src="hypothesis.js"></script> + +</head> +<body> + <div id="main"> + <a id="opener"> + <i class="material-icons">menu</i> + </a> + <div id="viewer" class="spreads"></div> + <span id="hiddenTitle"></span> + <a id="prev" href="#prev" class="arrow"> + <i class="material-icons">chevron_left</i> + </a> + <a id="next" href="#next" class="arrow"> + <i class="material-icons">chevron_right</i> + </a> + </div> + <div id="navigation"> + <a id="closer"> + <i class="material-icons">close</i> + </a> + <h1 id="title">...</h1> + <image id="cover" width="150px"/> + <h2 id="author">...</h2> + <ul id="toc"></ul> + </div> + +</body> +</html> diff --git a/lib/epub.js/examples/hypothesis.css b/lib/epub.js/examples/hypothesis.css new file mode 100644 index 0000000..4a53bed --- /dev/null +++ b/lib/epub.js/examples/hypothesis.css @@ -0,0 +1,329 @@ +body { + margin: 0; + background: #fafafa; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #333; +} + +svg { + display: block; +} + +.close-x { + stroke: #cccddd; + fill: transparent; + stroke-linecap: round; + stroke-width: 5; +} + +.close-x:hover { + stroke: #fff; +} + +#opener { + position: absolute; + top: 0; + left: 0; + padding: 10px; + stroke: #E2E2E2; + fill: #E2E2E2; + +} + +#opener:hover { + stroke: #777; + fill: #777; +} + +#navigation { + width: 400px; + position: fixed; + overflow: auto; + top: 0; + left: -425px; + + background: #ECECEC; + min-height: 100%; + height: 100%; + height: 100vh; + + overflow: scroll; + -webkit-overflow-scrolling: touch; + padding: 9px; + padding-top: 10px; + + transition: left .2s ease-out; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); +} + +#navigation.open { + left: 0; +} + +#navigation.fixed { + position: fixed; +} + +#navigation h1 { + width: 200px; + font-size: 16px; + font-weight: normal; + color: #777; + margin-bottom: 10px; +} + +#navigation h2 { + font-size: 14px; + font-weight: normal; + color: #B0B0B0; + margin-bottom: 20px; +} + +#navigation ul { + padding-left: 28px; + margin-left: 0; +} + +#navigation ul li { + list-style: decimal; + margin-bottom: 10px; + color: #585858; + font-size: 12px; + padding-left: 0; + margin-left: 0; +} + +#navigation ul li a { + color: #585858; + text-decoration: none; +} + +#navigation ul li a:hover { + color: #585858; + text-decoration: underline; +} + +#navigation ul li a.active { + color: #000; + font-weight: 400; +} + +#navigation #author { + text-align: center; +} + +#cover { + display: inline; +} + +#main { + margin-top: 60px; +} + +#pagination { + text-align: center; + margin: 20px; + /*padding: 0 50px;*/ +} + +.arrow:hover { + color: #777; +} + +.arrow:active { + color: #000; +} + +.arrow .material-icons { + font-size: 64px; +} + +#prev { + float: left; +} + +#next { + float: right; +} + +#toc { + display: block; + margin: 10px auto; +} + +#hypothesis-custom { + overflow: hidden; + /*position: absolute;*/ + right: 0; + /*top: 0;*/ + height: 100%; + width: 200px; + /*z-index: -2;*/ +} + +#hypothesis-custom iframe { + position: absolute; + width: 100%; + height: 100%; +} + +#navigation #cover { + display: block; + margin: 24px auto; +} + +#closer { + position: absolute; + padding: 12px; + left: 0; + top: 0; + color: #333; + cursor: pointer; +} + +#closer .material-icons { + color: #333; +} + +#opener { + position: absolute; + left: 0; + top: 0; + cursor: pointer; +} + +#hiddenTitle { + display: none; +} + +#title { + width: 900px; + min-height: 18px; + margin: 10px auto; + text-align: center; + font-size: 16px; + color: #E2E2E2; + font-weight: 400; +} + +#title:hover { + color: #777; +} + +#prev { + left: 0; +} + +#next { + right: 0; +} + +#toc { + display: block; + margin: 10px auto; +} + +@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: ""; + } + + #prev { + left: 40px; + } + + #next { + right: 40px; + } +} + +#viewer.spreads { + width: 84vw; + height: 80vh; + box-shadow: 0 0 4px #ccc; + border-radius: 5px; + padding: 0; + position: relative; + margin: 10vh auto; + background: white; + top: 0; +} + +.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; +} + +.navlink { + margin: 14px; + display: block; + text-align: center; + text-decoration: none; + color: #ccc; +} + +.arrow:hover, .navlink:hover { + color: #777; +} + +.arrow:active, .navlink:hover { + color: #000; +} + +#book-wrapper { + width: 480px; + height: 640px; + overflow: hidden; + border: 1px solid #ccc; + margin: 28px auto; + background: #fff; + border-radius: 0 5px 5px 0; + position: absolute; +} + +#book-viewer { + width: 480px; + height: 660px; + margin: -30px auto; + -moz-box-shadow: inset 10px 0 20px rgba(0,0,0,.1); + -webkit-box-shadow: inset 10px 0 20px rgba(0,0,0,.1); + box-shadow: inset 10px 0 20px rgba(0,0,0,.1); +} + +#book-viewer iframe { + padding: 40px 40px; +} + +#controls { + position: absolute; + bottom: 16px; + left: 50%; + width: 400px; + margin-left: -200px; + text-align: center; + display: none; +} + +#controls > input[type=range] { + width: 400px; +} diff --git a/lib/epub.js/examples/hypothesis.html b/lib/epub.js/examples/hypothesis.html new file mode 100644 index 0000000..7cb5c45 --- /dev/null +++ b/lib/epub.js/examples/hypothesis.html @@ -0,0 +1,369 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js + Hypothes.is Example</title> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script> + <script src="../dist/epub.js"></script> + + <!-- <script> + window.hypothesisConfig = function () { + return { + // constructor: this.Annotator.Sidebar, + app: 'https://hypothes.is/app.html', + }; + }; + </script> --> + + <script type="text/javascript"> + window.hypothesisConfig = function () { + return { + openSidebar: false, + enableMultiFrameSupport: true, + onLayoutChange: function(state) { + var main = document.querySelector('#main'); + if (state.expanded === true) { + main.classList.add("open"); + } else { + main.classList.remove("open"); + } + } + }; + }; + </script> + <script src="https://cdn.hypothes.is/hypothesis"></script> + + <style type="text/css"> + body { + margin: 0; + background: #fafafa; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #333; + } + + #navigation { + width: 300px; + position: absolute; + overflow: auto; + top: 60px; + left: 1000px + } + + #navigation.fixed { + position: fixed; + } + + #navigation h1 { + width: 200px; + font-size: 16px; + font-weight: normal; + color: #777; + margin-bottom: 10px; + } + + #navigation h2 { + font-size: 14px; + font-weight: normal; + color: #B0B0B0; + margin-bottom: 20px; + } + + #navigation ul { + padding-left: 18px; + margin-left: 0; + } + + #navigation ul li { + list-style: decimal; + margin-bottom: 10px; + color: #cccddd; + font-size: 12px; + padding-left: 0; + margin-left: 0; + } + + #navigation ul li a { + color: #ccc; + text-decoration: none; + } + + #navigation ul li a:hover { + color: #777; + text-decoration: underline; + } + + #navigation ul li a.active { + color: #000; + } + + #viewer { + overflow: hidden; + width: 620px; + margin: 0 50px; + /*background: url('ajax-loader.gif') center center no-repeat;*/ + background-color: white; + box-shadow: 0 0 4px #ccc; + margin: 20px; + padding: 40px 80px; + } + + #main { + position: absolute; + top: 50px; + left: 100px; + width: 800px; + z-index: 2; + transition: left .15s cubic-bezier(.55, 0, .2, .8) .08s; + } + + #main.open { + left: 0; + } + + #pagination { + text-align: center; + margin: 20px; + /*padding: 0 50px;*/ + } + + .arrow { + margin: 14px; + display: inline-block; + text-align: center; + text-decoration: none; + color: #ccc; + } + + .arrow:hover { + color: #777; + } + + .arrow:active { + color: #000; + } + + #prev { + float: left; + } + + #next { + float: right; + } + + #toc { + display: block; + margin: 10px auto; + } + + #hypothesis-custom { + overflow: hidden; + /*position: absolute;*/ + right: 0; + /*top: 0;*/ + height: 100%; + width: 200px; + /*z-index: -2;*/ + } + + #hypothesis-custom iframe { + position: absolute; + width: 100%; + height: 100%; + } + + </style> +</head> +<body> + <div id="navigation"> + <h1 id="title">...</h1> + <image id="cover" width="150px"/> + <h2 id="author">...</h2> + <ul id="toc"></ul> + </div> + <div id="main"> + <div id="viewer"></div> + <div id="pagination"> + <a id="prev" href="#prev" class="arrow">...</a> + <a id="next" href="#next" class="arrow">...</a> + </div> + </div> + + <script> + // Load the opf + var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1)); + var url = params && params.get("url") && decodeURIComponent(params.get("url")); + + // Load the opf + var book = ePub(url || window.location.protocol + "//s3.amazonaws.com/epubjs.org/books/moby-dick-hypothesis-demo.epub"); + var rendition = book.renderTo("viewer", { + flow: "scrolled-doc", + ignoreClass: "annotator-hl" + }); + + // var hash = window.location.hash.slice(2); + var loc = window.location.href.indexOf("?loc="); + if (loc > -1) { + var href = window.location.href.slice(loc + 5); + var hash = decodeURIComponent(href); + } + rendition.display(hash || undefined); + + + var next = document.getElementById("next"); + next.addEventListener("click", function(e){ + window.scrollTo(0,0); + rendition.next(); + e.preventDefault(); + }, false); + + var prev = document.getElementById("prev"); + prev.addEventListener("click", function(e){ + window.scrollTo(0,0); + rendition.prev(); + e.preventDefault(); + }, false); + + rendition.on("rendered", function(section){ + var nextSection = section.next(); + var prevSection = section.prev(); + + if(nextSection) { + nextNav = book.navigation.get(nextSection.href); + + if(nextNav) { + nextLabel = nextNav.label; + } else { + nextLabel = "next"; + } + + next.textContent = nextLabel + " »"; + } else { + next.textContent = ""; + } + + if(prevSection) { + prevNav = book.navigation.get(prevSection.href); + + if(prevNav) { + prevLabel = prevNav.label; + } else { + prevLabel = "previous"; + } + + prev.textContent = "« " + prevLabel; + } else { + prev.textContent = ""; + } + + var old = document.querySelectorAll('.active'); + Array.prototype.slice.call(old, 0).forEach(function (link) { + link.classList.remove("active"); + }) + + var active = document.querySelector('a[href="'+section.href+'"]'); + if (active) { + active.classList.add("active"); + } + // Add CFI fragment to the history + history.pushState({}, '', "?loc=" + encodeURIComponent(section.href)); + // window.location.hash = "#/"+section.href + }); + + book.loaded.navigation.then(function(toc){ + var $nav = document.getElementById("toc"), + docfrag = document.createDocumentFragment(); + + toc.forEach(function(chapter, index) { + var item = document.createElement("li"); + var link = document.createElement("a"); + link.id = "chap-" + chapter.id; + link.textContent = chapter.label; + link.href = chapter.href; + item.appendChild(link); + docfrag.appendChild(item); + + link.onclick = function(){ + var url = link.getAttribute("href"); + console.log(url) + rendition.display(url); + return false; + }; + + }); + + $nav.appendChild(docfrag); + + + }); + + book.loaded.metadata.then(function(meta){ + var $title = document.getElementById("title"); + var $author = document.getElementById("author"); + var $cover = document.getElementById("cover"); + var $nav = document.getElementById('navigation'); + + $title.textContent = meta.title; + $author.textContent = meta.creator; + if (book.archive) { + book.archive.createUrl(book.cover) + .then(function (url) { + $cover.src = url; + }) + } else { + $cover.src = book.cover; + } + + if ($nav.offsetHeight + 60 < window.innerHeight) { + $nav.classList.add("fixed"); + } + + }); + + function checkForAnnotator(cb, w) { + if (!w) { + w = window; + } + setTimeout(function () { + if (w && w.annotator) { + cb(); + } else { + checkForAnnotator(cb, w); + } + }, 100); + } + + book.rendition.hooks.content.register(function(contents, view) { + + checkForAnnotator(function () { + + var annotator = contents.window.annotator; + + contents.window.addEventListener('scrolltorange', function (e) { + var range = e.detail; + var cfi = new ePub.CFI(range, contents.cfiBase).toString(); + if (cfi) { + book.rendition.display(cfi); + } + e.preventDefault(); + }); + + + annotator.on("highlightClick", function (annotation) { + console.log(annotation); + window.annotator.show(); + }) + + annotator.on("beforeAnnotationCreated", function (annotation) { + console.log(annotation); + window.annotator.show(); + }) + + }, contents.window); + + }); + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/hypothesis.js b/lib/epub.js/examples/hypothesis.js new file mode 100644 index 0000000..1a0e8e0 --- /dev/null +++ b/lib/epub.js/examples/hypothesis.js @@ -0,0 +1,214 @@ +(function() { + + function start() { + var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1)); + var url = params && params.get("url") && decodeURIComponent(params.get("url")); + var defaultUrl = window.location.protocol + "//s3.amazonaws.com/epubjs.org/books/moby-dick-hypothesis-demo.epub"; + // Load the opf + var book = ePub(url || defaultUrl, { + canonical: function(path) { + var url = window.location.href.replace(/loc=([^&]*)/, "loc="+path); + return url; + } + }); + var rendition = book.renderTo("viewer", { + ignoreClass: "annotator-hl", + width: "100%", + height: "100%" + }); + + // var hash = window.location.hash.slice(2); + var loc = window.location.href.indexOf("?loc="); + if (loc > -1) { + var href = window.location.href.slice(loc + 5); + var hash = decodeURIComponent(href); + } + + rendition.display(hash || undefined); + + + 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 nav = document.getElementById("navigation"); + var opener = document.getElementById("opener"); + opener.addEventListener("click", function(e){ + nav.classList.add("open"); + }, false); + + var closer = document.getElementById("closer"); + closer.addEventListener("click", function(e){ + nav.classList.remove("open"); + }, false); + + // Hidden + var hiddenTitle = document.getElementById("hiddenTitle"); + + rendition.on("rendered", function(section){ + var current = book.navigation && book.navigation.get(section.href); + + if (current) { + document.title = current.label; + } + + // TODO: this is needed to trigger the hypothesis client + // to inject into the iframe + requestAnimationFrame(function () { + hiddenTitle.textContent = section.href; + }) + + var old = document.querySelectorAll('.active'); + Array.prototype.slice.call(old, 0).forEach(function (link) { + link.classList.remove("active"); + }) + + var active = document.querySelector('a[href="'+section.href+'"]'); + if (active) { + active.classList.add("active"); + } + + let urlParam = params && params.get("url"); + let url = ''; + if (urlParam) { + url = "url=" + urlParam + "&"; + } + // Add CFI fragment to the history + history.pushState({}, '', "?" + url + "loc=" + encodeURIComponent(section.href)); + // window.location.hash = "#/"+section.href + }); + + 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.loaded.navigation.then(function(toc){ + var $nav = document.getElementById("toc"), + docfrag = document.createDocumentFragment(); + + var processTocItem = function(chapter, parent) { + var item = document.createElement("li"); + var link = document.createElement("a"); + link.id = "chap-" + chapter.id; + link.textContent = chapter.label; + link.href = chapter.href; + item.appendChild(link); + parent.appendChild(item); + + if (chapter.subitems.length) { + var ul = document.createElement("ul"); + item.appendChild(ul); + chapter.subitems.forEach(function(subchapter) { + processTocItem(subchapter, ul); + }); + } + + link.onclick = function(){ + var url = link.getAttribute("href"); + console.log(url) + rendition.display(url); + return false; + }; + + } + + toc.forEach(function(chapter) { + processTocItem(chapter, docfrag); + }); + + $nav.appendChild(docfrag); + + + }); + + book.loaded.metadata.then(function(meta){ + var $title = document.getElementById("title"); + var $author = document.getElementById("author"); + var $cover = document.getElementById("cover"); + var $nav = document.getElementById('navigation'); + + $title.textContent = meta.title; + $author.textContent = meta.creator; + if (book.archive) { + book.archive.createUrl(book.cover) + .then(function (url) { + $cover.src = url; + }) + } else { + $cover.src = book.cover; + } + + // if ($nav.offsetHeight + 60 < window.innerHeight) { + // $nav.classList.add("fixed"); + // } + + }); + + var tm; + function checkForAnnotator(cb, w) { + if (!w) { + w = window; + } + tm = setTimeout(function () { + if (w && w.annotator) { + clearTimeout(tm); + cb(); + } else { + checkForAnnotator(cb, w); + } + }, 100); + } + + book.rendition.hooks.content.register(function(contents, view) { + checkForAnnotator(function () { + + var annotator = contents.window.annotator; + + contents.window.addEventListener('scrolltorange', function (e) { + var range = e.detail; + var cfi = new ePub.CFI(range, contents.cfiBase).toString(); + if (cfi) { + book.rendition.display(cfi); + } + e.preventDefault(); + }); + + + annotator.on("highlightClick", function (annotation) { + console.log(annotation); + window.annotator.show(); + }) + + annotator.on("beforeAnnotationCreated", function (annotation) { + console.log(annotation); + window.annotator.show(); + }) + + }, contents.window); + + }); + } + + document.addEventListener('DOMContentLoaded', start, false); +})(); diff --git a/lib/epub.js/examples/index.html b/lib/epub.js/examples/index.html new file mode 100644 index 0000000..707b1d8 --- /dev/null +++ b/lib/epub.js/examples/index.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<html class="no-js"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <title>ePubJS Examples</title> + <meta name="description" content=""> + <meta name="viewport" content="width=device-width"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <style type="text/css"> + + body { + margin: 0; + background: #fafafa; + font-family: serif; + color: #333; + position: absolute; + height: 100%; + width: 100%; + min-height: 800px; + } + + h1 { + text-align: center; + font-size: 1.5em; + line-height: 1.33em; + text-align: center; + padding-bottom: 0em; + text-align: center; + text-transform: uppercase; + font-weight: normal; + letter-spacing: 4px; + padding-top: 60px; + } + + ol { + margin: 28px auto; + } + + a { + font-size: 1.2em; + line-height: 1.33em; + color: #000; + } + + #main { + width: 100% + } + + #example-wrapper { + width: 695px; + overflow: hidden; + border: 1px solid #ccc; + margin: 28px auto; + background: #fff; + border-radius: 5px; + } + + #example-viewer { + width: 680px; + height: 100%; + margin: -30px 10px 0 0; + -moz-box-shadow: inset 10px 0 20px rgba(0,0,0,.1); + -webkit-box-shadow: inset 10px 0 20px rgba(0,0,0,.1); + box-shadow: inset 10px 0 20px rgba(0,0,0,.1); + } + </style> + + + </head> + <body> + <div id="main"> + <div id="example-wrapper"> + <div id="example-viewer"> + + <h1>Examples</h1> + <ol> + <li><a href="spreads.html">Spreads</a><p> + Display an ebook two pages at a time. Also includes code to provide table-of-contents in a select object above the rendered ebook. Sections of the ebook are displayed separately so if a section has a single page or an odd number of pages it will display with a blank page on the right.</p></li> + <li><a href="archived.html">Archived</a><p> + Display ebook from an XXXX.epub file rather than an unzipped folder. This may be substantially slower for large ebooks.</p></li> + <li><a href="scrolled.html">Scrolled Doc</a><p> + Displays each "section" or "chapter" of the ebook in its entirety as a single page of variable height that you can scroll up and down. Includes code to provide navigation links above and below the rendered section to go to the previous or next section.</p></li> + <li><a href="continuous-spreads.html">Spreads Continuous</a><p> + The view is the same as 1) above except that the entire document is rendered at once without breaks so if a section has one page, the next section is shown beginning on the right-hand-page rather than a blank page. </p></li> + <li><a href="continuous-scrolled.html">Scrolled Continuous</a><p> + The view is the same as 3) except the entire ebook is rendered in the browser at once so there are no navigation links above and below each chapter. This version may take longer to render and uses more memory since the whole ebook is loaded into memory. This version has no links to navigate or jump between chapters.</p></li> + <li><a href="swipe.html">Swipe</a><p> + This example includes a function in the script to link "swipe" events on touchscreens, particularly mobile devices, to navigate forward and back. Note that swipes do not work in Chrome Desktop even if you turn on device emulation in the "inspect" toolbar. </p></li> + <li><a href="input.html">Open from File</a><p> + Allows you to select an epub file from your local computer that gets rendered in the browser. As of 5/14/2019 only the cover renders.</p></li> + <li><a href="renderless.html">Renderless</a><p> + The name for this example is misleading since the book certainly does render. What's unique in this example is that the book's table of contents is read in and a list of sections in developed, then each section is rendered as it is called for by a section.render() call, but there's no master book.renderTo() call. Functionlly this seems exactly the same as 1) and 3).</p></li> + <li><a href="hooks.html">Hooks</a><p> + This example shows how to insert external javascript and external css files into a book after the book has been loaded into memory. This might, for example, allow you to override internal css from the ebook to change fonts and text-size by either replacing a css file from the ebook or calling a javascript that gets added to the inside of the ebook such as adding jQuery inside the ebook. For example: this could be used to have + and - buttons that increase or decrease the font-size in the ebook. When the + or - button is pressed it could call to insert and execute a script to replace the font-size of paragraph elements with one slightly larger or smaller. This example doesn't actually implement any such thing, it just shows how to insert the code, or insert a css file.</p><p> + You can't just run a script on the outer page to change things inside the rendered ebook because the ebook is rendered inside an iframe. This mechanism lets you inject things into the iframe and run them after the book is rendered.</p></li> + <li><a href="highlights.html">Highlights</a><p> + Adds the ability to highlight text in the ebook. This version provides no mechanism for saving highlights after the browser is closed. It is an example of capability rather than a working implementation. It works as follows: When a section of text is selected a rendition.on("selected"...) function notes the location of the beginning and ending of the selected text. Two things happen. The code adds a new element to the outer page in a list at the bottom describing the selection and providing a "remove" link. The code also paints a yellow block in an SVG overlay to highlight the selected text. Unfortunately as of 5/14/2019 the remove link does remove the yellow overlay from the highlighted text but, does not remove the annotation from the list at the bottom of the page.</p></li> + <li><a href="hypothesis.html">Hypothes.is</a><p> + Visit their site for an explanation at <a href="https://web.hypothes.is/demos/epubjs/">https://web.hypothes.is/demos/epubjs/</a>.</p></li> + </ol> + + </div> + </div> + </div> + </body> +</html> diff --git a/lib/epub.js/examples/input.html b/lib/epub.js/examples/input.html new file mode 100644 index 0000000..375b4ef --- /dev/null +++ b/lib/epub.js/examples/input.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Input 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"><input type="file" id="input"></div> + <div id="viewer" class="spreads"></div> + <a id="prev" href="#prev" class="arrow">‹</a> + <a id="next" href="#next" class="arrow">›</a> + + <script> + + var book = ePub(); + var rendition; + + var inputElement = document.getElementById("input"); + + inputElement.addEventListener('change', function (e) { + var file = e.target.files[0]; + if (window.FileReader) { + var reader = new FileReader(); + reader.onload = openBook; + reader.readAsArrayBuffer(file); + } + }); + + function openBook(e){ + var bookData = e.target.result; + var title = document.getElementById("title"); + var next = document.getElementById("next"); + var prev = document.getElementById("prev"); + + book.open(bookData, "binary"); + + rendition = book.renderTo("viewer", { + width: "100%", + height: 600 + }); + + rendition.display(); + + 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); + rendition.on("relocated", function(location){ + console.log(location); + }); + + next.addEventListener("click", function(e){ + rendition.next(); + e.preventDefault(); + }, false); + + prev.addEventListener("click", function(e){ + rendition.prev(); + e.preventDefault(); + }, false); + + + + + document.addEventListener("keyup", keyListener, false); + } + + + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/legacy.html b/lib/epub.js/examples/legacy.html new file mode 100644 index 0000000..e6fda7e --- /dev/null +++ b/lib/epub.js/examples/legacy.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.legacy.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> 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> diff --git a/lib/epub.js/examples/manifest.html b/lib/epub.js/examples/manifest.html new file mode 100644 index 0000000..3f7b869 --- /dev/null +++ b/lib/epub.js/examples/manifest.html @@ -0,0 +1,180 @@ +<!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="../dist/epub.js"></script> + + <link rel="stylesheet" type="text/css" href="examples.css"> + +</head> +<body> + <h1 id="title">...</h1> + <div id="opener"> + <svg height="24px" id="hamburger" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/> + </svg> + </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="navigation" class="closed"> + <div id="closer"> + <svg viewbox="0 0 40 40"> + <path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" /> + </svg> + </div> + <image id="cover" width="150px"/> + <h2 id="author">...</h2> + <div id="toc"></div> + </div> + + <script> + var src = window.location.search ? + window.location.search.replace("?href=", '') : + "https://readium2.now.sh/pub/L2hvbWUvbm93dXNlci9zcmMvbWlzYy9lcHVicy9jaGlsZHJlbnMtbGl0ZXJhdHVyZS5lcHVi/manifest.json" ; + var book = ePub(src); + var rendition = book.renderTo("viewer", { + width: "100%", + height: 600 + }); + + 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); + + var navigation = document.getElementById("navigation"); + var opener = document.getElementById("opener"); + opener.addEventListener("click", function(e){ + navigation.classList.remove("closed"); + e.preventDefault(); + }, false); + + var closer = document.getElementById("closer"); + closer.addEventListener("click", function(e){ + navigation.classList.add("closed"); + e.preventDefault(); + }, false); + + book.loaded.navigation.then(function(toc){ + var $nav = document.getElementById("toc"), + docfrag = document.createDocumentFragment(); + var addTocItems = function (parent, tocItems) { + var $ul = document.createElement("ul"); + tocItems.forEach(function(chapter) { + var item = document.createElement("li"); + var link = document.createElement("a"); + link.textContent = chapter.label; + link.href = chapter.href; + item.appendChild(link); + + if (chapter.subitems) { + addTocItems(item, chapter.subitems) + } + + link.onclick = function(){ + var url = link.getAttribute("href"); + rendition.display(url); + navigation.classList.add("closed"); + return false; + }; + + $ul.appendChild(item); + }); + parent.appendChild($ul); + }; + + addTocItems(docfrag, toc); + + $nav.appendChild(docfrag); + + if ($nav.offsetHeight + 60 < window.innerHeight) { + $nav.classList.add("fixed"); + } + + }); + + book.loaded.metadata.then(function(meta){ + var $title = document.getElementById("title"); + var $author = document.getElementById("author"); + var $cover = document.getElementById("cover"); + + $title.textContent = meta.title; + $author.textContent = meta.creator; + if (book.archive) { + book.archive.createUrl(book.cover) + .then(function (url) { + $cover.src = url; + }) + } else { + $cover.src = book.cover; + } + }); + + rendition.on("rendered", function(section){ + var nextSection = section.next(); + var prevSection = section.prev(); + + if(nextSection) { + next.textContent = "›"; + } else { + next.textContent = ""; + } + + if(prevSection) { + prev.textContent = "‹"; + } else { + prev.textContent = ""; + } + + }); + + rendition.on("relocated", function(location){ + var current = book.navigation.get(location.href); + + if (current) { + title.textContent = current.label; + } + + console.log(location); + }); + + window.addEventListener("unload", function () { + this.book.destroy(); + }); + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/marks.html b/lib/epub.js/examples/marks.html new file mode 100644 index 0000000..bbcb29a --- /dev/null +++ b/lib/epub.js/examples/marks.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Pagination Example</title> + + <script src="../dist/epub.js"></script> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.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> + + <script> + // Load the opf + var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf"); + + var rendition = book.renderTo("viewer", { + width: "100%", + height: 600 + }); + + var displayed = rendition.display(6); + + // 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); + + 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); + + rendition.on("relocated", function(location){ + // console.log(location); + }); + + + // Apply a class to selected text + rendition.on("selected", function(cfiRange, contents) { + + var m = contents.mark(cfiRange, {'something' : true}, (e) => { + var bounds = e.target.getBoundingClientRect(); + var clientX = e.clientX; + + if (clientX > bounds.right) { + console.log("mark clicked", e.target); + } + }); + + contents.window.getSelection().removeAllRanges(); + + }); + + this.rendition.themes.default({ + 'p': { + 'padding': '0 20px 0 0', + 'text-align': 'left', + 'position': 'relative' + }, + '[ref="epubjs-mk"]::before' : { + 'content': '""', + 'background': 'url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHg9JzBweCcgeT0nMHB4JyB2aWV3Qm94PScwIDAgNzUgNzUnPjxnIGZpbGw9JyNCREJEQkQnIGlkPSdidWJibGUnPjxwYXRoIGNsYXNzPSdzdDAnIGQ9J00zNy41LDkuNEMxOS42LDkuNCw1LDIwLjUsNSwzNC4zYzAsNS45LDIuNywxMS4zLDcuMSwxNS42TDkuNiw2NS42bDE5LTcuM2MyLjgsMC42LDUuOCwwLjksOC45LDAuOSBDNTUuNSw1OS4yLDcwLDQ4LjEsNzAsMzQuM0M3MCwyMC41LDU1LjQsOS40LDM3LjUsOS40eicvPjwvZz48L3N2Zz4=") no-repeat', + 'display': 'block', + 'right' : '0', + 'position' : 'absolute', + 'width': '20px', + 'height': '20px', + 'margin': '0', + 'cursor': 'pointer' + } + }); + + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/mathml.html b/lib/epub.js/examples/mathml.html new file mode 100644 index 0000000..0daaa2f --- /dev/null +++ b/lib/epub.js/examples/mathml.html @@ -0,0 +1,163 @@ +<!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 || "http://epubjs.org/books/linear-algebra.epub"); + var rendition = book.renderTo("viewer", { + width: "100%", + height: 600, + spread: "always" + }); + + rendition.display(currentSectionIndex); + + 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); + + }) + + 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; + }; + + }); + + rendition.hooks.content.register(function (content) { + let section = book.section(content.sectionIndex); + let mathml = section.properties.includes("mathml"); + + if (mathml) { + return content.addScript('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML'); + } + }); + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/offline.html b/lib/epub.js/examples/offline.html new file mode 100644 index 0000000..ae5043b --- /dev/null +++ b/lib/epub.js/examples/offline.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Storage Example</title> + + <script src="../node_modules/jszip/dist/jszip.min.js"></script> + <script src="../node_modules/localforage/dist/localforage.min.js"></script> + <script src="../dist/epub.js"></script> + + <link rel="stylesheet" type="text/css" href="examples.css"> + + <style type="text/css"> + + #offline { + position: fixed; + top: -40px; + left: 0; + background-color: yellow; + width: 100%; + text-align: center; + padding: 10px 0; + transition: top .5s; + z-index: 99; + } + </style> + +</head> +<body> + <div id="offline">You are offline. Loading from Storage.</div> + <div id="viewer" class="spreads"></div> + <div id="prev" class="arrow">‹</div> + <div id="next" class="arrow">›</div> + <script> + var book = ePub("https://s3.amazonaws.com/moby-dick/", { + store: "epubjs-test" + }); + + var rendition = book.renderTo("viewer", { + width: "100%", + height: 600 + }); + + var displayed = rendition.display(); + + displayed.then(function(renderer){ + // Add all resources to the store + // Add `true` to force re-saving resources + book.storage.add(book.resources, true).then(() => { + console.log("stored"); + }) + }); + + var next = document.getElementById("next"); + next.addEventListener("click", function(){ + rendition.next(); + }, false); + + var prev = document.getElementById("prev"); + prev.addEventListener("click", function(){ + rendition.prev(); + }, 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); + + var msg = document.getElementById('offline'); + book.storage.on("online", function () { + console.log("online"); + msg.style.top = "-40px"; + }); + + book.storage.on("offline", function () { + console.log("offline"); + msg.style.top = "0px"; + }); + + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/renderless.html b/lib/epub.js/examples/renderless.html new file mode 100644 index 0000000..d5bb106 --- /dev/null +++ b/lib/epub.js/examples/renderless.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>EPUB.js Basic Example</title> + + <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="scrolled"></div> + <div id="prev" class="arrow">‹</div> + <div id="next" class="arrow">›</div> + + <script> + var $viewer = document.getElementById("viewer"); + var $next = document.getElementById("next"); + var $prev = document.getElementById("prev"); + var currentSection; + var currentSectionIndex = 6; + + var book = ePub("https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"); + 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; + display(url); + return false; + }; + + book.opened.then(function(){ + display(currentSectionIndex); + }); + + $next.addEventListener("click", function(){ + var displayed = display(currentSectionIndex+1); + if(displayed) currentSectionIndex++; + }, false); + + $prev.addEventListener("click", function(){ + var displayed = display(currentSectionIndex-1); + if(displayed) currentSectionIndex--; + }, false); + + function display(item){ + var section = book.spine.get(item); + if(section) { + currentSection = section; + section.render().then(function(html){ + // $viewer.srcdoc = html; + $viewer.innerHTML = html; + }); + } + return section; + } + + }); + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/scrolled.html b/lib/epub.js/examples/scrolled.html new file mode 100644 index 0000000..bbc0923 --- /dev/null +++ b/lib/epub.js/examples/scrolled.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Scrolled Example</title> + + <script src="../dist/epub.js"></script> + + <link rel="stylesheet" type="text/css" href="examples.css"> + +</head> +<body> + <a id="prev" href="#prev" class="navlink">...</a> + <div id="viewer" class="scrolled"></div> + <a id="next" href="#next" class="navlink">...</a> + + <script> + // Load the opf + 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; + + var book = ePub(url || "https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf"); + var rendition = book.renderTo("viewer", { + flow: "scrolled-doc", + width: "100%", + fullsize: true + }); + + rendition.display(currentSectionIndex); + + + 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); + + rendition.on("relocated", function(location){ + console.log(location); + }); + + rendition.on("rendered", function(section){ + var nextSection = section.next(); + var prevSection = section.prev(); + + if(nextSection) { + nextNav = book.navigation.get(nextSection.href); + + if(nextNav) { + nextLabel = nextNav.label; + } else { + nextLabel = "next"; + } + + next.textContent = nextLabel + " »"; + } else { + next.textContent = ""; + } + + if(prevSection) { + prevNav = book.navigation.get(prevSection.href); + + if(prevNav) { + prevLabel = prevNav.label; + } else { + prevLabel = "previous"; + } + + prev.textContent = "« " + prevLabel; + } else { + prev.textContent = ""; + } + + }); + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/single-full.html b/lib/epub.js/examples/single-full.html new file mode 100644 index 0000000..cf96238 --- /dev/null +++ b/lib/epub.js/examples/single-full.html @@ -0,0 +1,280 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Scrolled Full Example</title> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script> + <script src="../dist/epub.js"></script> + + + <style type="text/css"> + body { + margin: 0; + background: #fafafa; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #333; + } + + #navigation { + width: 300px; + position: absolute; + overflow: auto; + top: 60px; + left: 1000px + } + + #navigation.fixed { + position: fixed; + } + + #navigation h1 { + width: 200px; + font-size: 16px; + font-weight: normal; + color: #777; + margin-bottom: 10px; + } + + #navigation h2 { + font-size: 14px; + font-weight: normal; + color: #B0B0B0; + margin-bottom: 20px; + } + + #navigation ul { + padding-left: 18px; + margin-left: 0; + margin-top: 12px; + margin-bottom: 12px; + } + + #navigation ul li { + list-style: decimal; + margin-bottom: 10px; + color: #cccddd; + font-size: 12px; + padding-left: 0; + margin-left: 0; + } + + #navigation ul li a { + color: #ccc; + text-decoration: none; + } + + #navigation ul li a:hover { + color: #777; + text-decoration: underline; + } + + #navigation ul li a.active { + color: #000; + } + + #viewer { + + overflow: hidden; + width: 800px; + margin: 0 50px; + background: url('ajax-loader.gif') center center no-repeat; + + } + + #viewer .epub-view { + background: white; + box-shadow: 0 0 4px #ccc; + /*margin: 10px;*/ + /*padding: 40px 80px;*/ + } + + #main { + position: absolute; + top: 50px; + left: 50px; + width: 800px; + z-index: 2; + transition: left .15s cubic-bezier(.55, 0, .2, .8) .08s; + } + + #main.open { + left: 0; + } + + #pagination { + text-align: center; + margin-left: 80px; + /*padding: 0 50px;*/ + } + + .arrow { + margin: 14px; + display: inline-block; + text-align: center; + text-decoration: none; + color: #ccc; + } + + .arrow:hover { + color: #777; + } + + .arrow:active { + color: #000; + } + + #prev { + float: left; + } + + #next { + float: right; + } + + #toc { + display: block; + margin: 10px auto; + } + </style> +</head> +<body> + <div id="navigation"> + <h1 id="title">...</h1> + <image id="cover" width="150px"/> + <h2 id="author">...</h2> + <div id="toc"></div> + </div> + <div id="main"> + <div id="viewer"></div> + <div id="pagination"> + <a id="prev" href="#prev" class="arrow">...</a> + <a id="next" href="#next" class="arrow">...</a> + </div> + </div> + + <script> + // Load the opf + var book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub"); + var rendition = book.renderTo("viewer", { + flow: "scrolled-doc" + }); + var hash = window.location.hash.slice(2); + console.log(hash); + rendition.display(hash || undefined); + + + 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); + + + + rendition.on("rendered", function(section){ + var nextSection = section.next(); + var prevSection = section.prev(); + + if(nextSection) { + nextNav = book.navigation.get(nextSection.href); + + if(nextNav) { + nextLabel = nextNav.label; + } else { + nextLabel = "next"; + } + + next.textContent = nextLabel + " »"; + } else { + next.textContent = ""; + } + + if(prevSection) { + prevNav = book.navigation.get(prevSection.href); + + if(prevNav) { + prevLabel = prevNav.label; + } else { + prevLabel = "previous"; + } + + prev.textContent = "« " + prevLabel; + } else { + prev.textContent = ""; + } + + // Add CFI fragment to the history + //history.pushState({}, '', section.href); + window.location.hash = "#/"+section.href + }); + + rendition.on("relocated", function(location){ + console.log(location); + }); + + book.loaded.navigation.then(function(toc){ + var $nav = document.getElementById("toc"), + docfrag = document.createDocumentFragment(); + var addTocItems = function (parent, tocItems) { + var $ul = document.createElement("ul"); + tocItems.forEach(function(chapter) { + var item = document.createElement("li"); + var link = document.createElement("a"); + link.textContent = chapter.label; + link.href = chapter.href; + item.appendChild(link); + + if (chapter.subitems) { + addTocItems(item, chapter.subitems) + } + + link.onclick = function(){ + var url = link.getAttribute("href"); + rendition.display(url); + return false; + }; + + $ul.appendChild(item); + }); + parent.appendChild($ul); + }; + + addTocItems(docfrag, toc); + + $nav.appendChild(docfrag); + + if ($nav.offsetHeight + 60 < window.innerHeight) { + $nav.classList.add("fixed"); + } + + }); + + book.loaded.metadata.then(function(meta){ + var $title = document.getElementById("title"); + var $author = document.getElementById("author"); + var $cover = document.getElementById("cover"); + + $title.textContent = meta.title; + $author.textContent = meta.creator; + if (book.archive) { + book.archive.createUrl(book.cover) + .then(function (url) { + $cover.src = url; + }) + } else { + $cover.src = book.cover; + } + + }); + </script> + +</body> +</html> 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> diff --git a/lib/epub.js/examples/swipe.html b/lib/epub.js/examples/swipe.html new file mode 100644 index 0000000..6154be4 --- /dev/null +++ b/lib/epub.js/examples/swipe.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="apple-mobile-web-app-capable" content="yes" /> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>EPUB.js Pagination Example</title> + <!-- <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> --> + <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script> --> + <script src="../dist/epub.js"></script> + + <link rel="stylesheet" type="text/css" href="examples.css"> + + <style type="text/css"> + body { + display: flex; + -webkit-align-items: center; + -webkit-justify-content: center; + } + + #viewer { + width: 290px; + height: 580px; + box-shadow: 0 0 4px #ccc; + padding: 10px 10px 0px 10px; + margin: 5px auto; + background: white; + } + + + @media only screen + and (min-device-width : 320px) + and (max-device-width : 667px) { + #viewer { + height: 96.5%; + } + #viewer iframe { + /* pointer-events: none; */ + } + .arrow { + position: inherit; + display: none; + } + } + + </style> +</head> +<body> + <div id="viewer"></div> + <div id="prev" class="arrow">‹</div> + <div id="next" class="arrow">›</div> + <script> + // Load the opf + var book = ePub("https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"); + var rendition = book.renderTo("viewer", { + manager: "continuous", + flow: "paginated", + width: "100%", + height: "100%", + snap: true + }); + + var displayed = rendition.display("chapter_001.xhtml"); + + 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); + + document.addEventListener("keyup", function(e){ + + // Left Key + if ((e.keyCode || e.which) == 37) { + rendition.prev(); + } + + // Right Key + if ((e.keyCode || e.which) == 39) { + rendition.next(); + } + + }, false); + + // $(window).on( "swipeleft", function( event ) { + // rendition.next(); + // }); + // + // $(window).on( "swiperight", function( event ) { + // rendition.prev(); + // }); + + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/themes.css b/lib/epub.js/examples/themes.css new file mode 100644 index 0000000..0bb5eef --- /dev/null +++ b/lib/epub.js/examples/themes.css @@ -0,0 +1,14 @@ +.dark { + background: #000; + color: #fff +} + +.light { + background: #fff; + color: #000; +} + +.tan { + background: tan; + color: #ccc; +} diff --git a/lib/epub.js/examples/themes.html b/lib/epub.js/examples/themes.html new file mode 100644 index 0000000..4b7d204 --- /dev/null +++ b/lib/epub.js/examples/themes.html @@ -0,0 +1,117 @@ +<!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> + + <script> + var currentSectionIndex = 8; + // Load the opf + var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf"); + var rendition = book.renderTo("viewer", { + width: "100%", + height: 600, + manager: "continuous" + }); + + rendition.display("chapter_007.xhtml"); + + 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); + + + + rendition.on("rendered", function(section){ + var nextSection = section.next(); + var prevSection = section.prev(); + var current = book.navigation.get(section.href); + + if (current) { + title.textContent = current.label; + } + + if(nextSection) { + next.textContent = "›"; + } else { + next.textContent = ""; + } + + if(prevSection) { + prev.textContent = "‹"; + } else { + prev.textContent = ""; + } + + + + }); + + rendition.on("relocated", function(location){ + console.log(location); + }); + + + rendition.themes.register("dark", "themes.css"); + rendition.themes.register("light", "themes.css"); + rendition.themes.register("tan", "themes.css"); + + + + rendition.themes.default({ + h2: { + 'font-size': '32px', + color: 'purple' + }, + p: { + "margin": '10px' + } + }); + + rendition.themes.select("tan"); + rendition.themes.fontSize("140%"); + + </script> + +</body> +</html> diff --git a/lib/epub.js/examples/toc.html b/lib/epub.js/examples/toc.html new file mode 100644 index 0000000..b5de364 --- /dev/null +++ b/lib/epub.js/examples/toc.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>EPUB.js Basic Example</title> + + <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="scrolled"></div> + + <script> + var $viewer = document.getElementById("viewer"); + var $next = document.getElementById("next"); + var $prev = document.getElementById("prev"); + var currentSectionIndex = 9; + // Load the opf + var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf"); + var rendition = book.renderTo("viewer", { flow: "scrolled-doc", width: 600, height: 400}); + var displayed = rendition.display(currentSectionIndex); + + 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> |
