yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-03 14:59:18 +02:00
Code Issues Releases Wiki Activity

Updated hypothes.is examples

Browse source
This commit is contained in:
Fred Chasen 2017-08-30 08:47:20 -04:00
parent e9d7e79158
commit f3a2f21fb3
2 changed files with 34 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

42
examples/hypothesis-spreads.html
View file

@ -31,6 +31,7 @@
}; };
}; };
</script> </script>
<script src="https://cdn.hypothes.is/hypothesis"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="examples.css"> <link rel="stylesheet" type="text/css" href="examples.css">
@ -193,6 +194,22 @@
cursor: pointer; cursor: pointer;
} }
#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;
}
#hiddenTitle {
display: none;
}
</style> </style>
</head> </head>
<body> <body>
@ -201,6 +218,7 @@
<i class="material-icons">menu</i> <i class="material-icons">menu</i>
</a> </a>
<div id="viewer" class="spreads"></div> <div id="viewer" class="spreads"></div>
<span id="hiddenTitle"></span>
<a id="prev" href="#prev" class="arrow"> <a id="prev" href="#prev" class="arrow">
<i class="material-icons">chevron_left</i> <i class="material-icons">chevron_left</i>
</a> </a>
@ -223,11 +241,11 @@
var url = params && params.get("url") && decodeURIComponent(params.get("url")); var url = params && params.get("url") && decodeURIComponent(params.get("url"));
// Load the opf // Load the opf
var book = ePub(url || window.location.protocol + "//s3.amazonaws.com/epubjs/books/alice/OPS/package.opf"); var book = ePub(url || window.location.protocol + "//s3.amazonaws.com/epubjs.org/books/moby-dick-hypothesis-demo.epub");
var rendition = book.renderTo("viewer", { var rendition = book.renderTo("viewer", {
ignoreClass: "annotator-hl", ignoreClass: "annotator-hl",
width: "100%", width: "100%",
height: 600 height: "100%"
}); });
// var hash = window.location.hash.slice(2); // var hash = window.location.hash.slice(2);
@ -237,13 +255,7 @@
var hash = decodeURIComponent(href); var hash = decodeURIComponent(href);
} }
rendition.display(hash || undefined) rendition.display(hash || undefined);
.then(function() {
var H_EMBED_URL = 'https://hypothes.is/embed.js';
var script = document.createElement('script');
script.setAttribute('src', H_EMBED_URL);
document.head.appendChild(script);
});
var next = document.getElementById("next"); var next = document.getElementById("next");
@ -269,8 +281,20 @@
nav.classList.remove("open"); nav.classList.remove("open");
}, false); }, false);
// Hidden
var hiddenTitle = document.getElementById("hiddenTitle");
rendition.on("rendered", function(section){ 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
hiddenTitle.textContent = current.label;
}
var old = document.querySelectorAll('.active'); var old = document.querySelectorAll('.active');
Array.prototype.slice.call(old, 0).forEach(function (link) { Array.prototype.slice.call(old, 0).forEach(function (link) {
link.classList.remove("active"); link.classList.remove("active");

2
examples/hypothesis.html
View file

@ -196,7 +196,7 @@
var url = params && params.get("url") && decodeURIComponent(params.get("url")); var url = params && params.get("url") && decodeURIComponent(params.get("url"));
// Load the opf // Load the opf
var book = ePub(url || window.location.protocol + "//s3.amazonaws.com/epubjs/books/alice/OPS/package.opf"); var book = ePub(url || window.location.protocol + "//s3.amazonaws.com/epubjs.org/books/moby-dick-hypothesis-demo.epub");
var rendition = book.renderTo("viewer", { var rendition = book.renderTo("viewer", {
flow: "scrolled-doc", flow: "scrolled-doc",
ignoreClass: "annotator-hl" ignoreClass: "annotator-hl"