diff options
author | Andrew Dolgov <[email protected]> | 2021-09-17 21:53:37 +0300 |
---|---|---|
committer | Andrew Dolgov <[email protected]> | 2021-09-17 21:53:37 +0300 |
commit | 4fd9b8f2b5a98bfcde57970b48fed2488a80f356 (patch) | |
tree | 51e0ce9cd61c24916b7d5820ee69e74bd3e76aac /lib/epub.js/examples/hypothesis-continuous.html | |
parent | d0cd10f08286be33306336fe8c4cac26ea7ce637 (diff) |
add in master snapshot of epubjs
Diffstat (limited to 'lib/epub.js/examples/hypothesis-continuous.html')
-rw-r--r-- | lib/epub.js/examples/hypothesis-continuous.html | 136 |
1 files changed, 136 insertions, 0 deletions
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> |