|
|
@ -1,5 +1,6 @@
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<meta name="viewport"
|
|
|
|
<meta name="viewport"
|
|
|
@ -20,6 +21,7 @@
|
|
|
|
padding: 0;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mask {
|
|
|
|
.mask {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
@ -28,19 +30,39 @@
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.meun {
|
|
|
|
.meun {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
height: 1rem;
|
|
|
|
height: 1rem;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
#toc,
|
|
|
|
|
|
|
|
#page {
|
|
|
|
#toc {
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
z-index: 100;
|
|
|
|
z-index: 100;
|
|
|
|
font-size: .3rem;
|
|
|
|
font-size: .3rem;
|
|
|
|
padding-left: .4rem;
|
|
|
|
padding-left: .4rem;
|
|
|
|
color: #333;
|
|
|
|
color: #333;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#page {
|
|
|
|
|
|
|
|
z-index: 100;
|
|
|
|
|
|
|
|
font-size: .3rem;
|
|
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
|
|
padding-right: 0.4rem;
|
|
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
|
|
flex: 0 0 .5rem;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#load {
|
|
|
|
|
|
|
|
z-index: 100;
|
|
|
|
|
|
|
|
font-size: .3rem;
|
|
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
|
|
padding-right: 0.4rem;
|
|
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
|
|
flex: 0 0 .5rem;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#toc-content {
|
|
|
|
#toc-content {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
@ -53,6 +75,7 @@
|
|
|
|
background: white;
|
|
|
|
background: white;
|
|
|
|
flex-direction: column
|
|
|
|
flex-direction: column
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#toc-mask {
|
|
|
|
#toc-mask {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
top: 0;
|
|
|
@ -62,6 +85,7 @@
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
background: rgba(51, 51, 51, .8);
|
|
|
|
background: rgba(51, 51, 51, .8);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.intro {
|
|
|
|
.intro {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 2.4rem;
|
|
|
|
height: 2.4rem;
|
|
|
@ -71,6 +95,7 @@
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
border-bottom: .1rem solid #f4f4f4;
|
|
|
|
border-bottom: .1rem solid #f4f4f4;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.txt {
|
|
|
|
.txt {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
@ -78,15 +103,18 @@
|
|
|
|
padding: 0 .2rem;
|
|
|
|
padding: 0 .2rem;
|
|
|
|
font-size: .3rem;
|
|
|
|
font-size: .3rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#content {
|
|
|
|
#content {
|
|
|
|
overflow-y: auto;
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
.item {
|
|
|
|
padding: .2rem .4rem;
|
|
|
|
padding: .2rem .4rem;
|
|
|
|
border-bottom: .07rem solid #f4f4f4;
|
|
|
|
border-bottom: .07rem solid #f4f4f4;
|
|
|
|
font-size: .4rem;
|
|
|
|
font-size: .4rem;
|
|
|
|
color: #333;
|
|
|
|
color: #333;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#open {
|
|
|
|
#open {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
@ -97,26 +125,32 @@
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#open span {
|
|
|
|
#open span {
|
|
|
|
padding: .3rem .3rem;
|
|
|
|
padding: .3rem .3rem;
|
|
|
|
border: .05rem solid #333;
|
|
|
|
border: .05rem solid #333;
|
|
|
|
border-radius: .2rem;
|
|
|
|
border-radius: .2rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.read {
|
|
|
|
.read {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#prev {
|
|
|
|
#prev {
|
|
|
|
flex: 0 0 2rem;
|
|
|
|
flex: 0 0 2rem;
|
|
|
|
z-index: 100;
|
|
|
|
z-index: 100;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#viewer {
|
|
|
|
#viewer {
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#next {
|
|
|
|
#next {
|
|
|
|
flex: 0 0 2rem;
|
|
|
|
flex: 0 0 2rem;
|
|
|
|
z-index: 100;
|
|
|
|
z-index: 100;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.save {
|
|
|
|
.save {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -126,8 +160,27 @@
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
border-bottom: .1rem solid #f4f4f4;
|
|
|
|
border-bottom: .1rem solid #f4f4f4;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.jump {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
height: 1rem;
|
|
|
|
|
|
|
|
border-bottom: .1rem solid #f4f4f4;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.jump input {
|
|
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
padding: .1rem .1rem;
|
|
|
|
|
|
|
|
margin: .2rem .2rem .2rem .4rem;
|
|
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
|
|
font-size: .3rem;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.jump span {
|
|
|
|
|
|
|
|
flex: 0 0 1rem;
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
<div id="ebook">
|
|
|
|
<div id="ebook">
|
|
|
|
<div class="mask">
|
|
|
|
<div class="mask">
|
|
|
@ -143,7 +196,8 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="meun">
|
|
|
|
<div class="meun">
|
|
|
|
<div id="toc" onclick="showhide()"></div>
|
|
|
|
<div id="toc" onclick="showhide()"></div>
|
|
|
|
<div id="page" style="padding-left: 0;padding-right: 0.4rem;text-align: right;flex: 0 0 .5rem;"></div>
|
|
|
|
<div id="page"></div>
|
|
|
|
|
|
|
|
<div id="load"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="toc-mask" style="display: none;" onclick="showhide()"></div>
|
|
|
|
<div id="toc-mask" style="display: none;" onclick="showhide()"></div>
|
|
|
|
<div id="toc-content" style="display: none;">
|
|
|
|
<div id="toc-content" style="display: none;">
|
|
|
@ -161,12 +215,16 @@
|
|
|
|
<div class="txt box" onclick="get()">读档</div>
|
|
|
|
<div class="txt box" onclick="get()">读档</div>
|
|
|
|
<div class="txt box" onclick="del()">删档</div>
|
|
|
|
<div class="txt box" onclick="del()">删档</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="jump">
|
|
|
|
|
|
|
|
<input id="jump" type="number" placeholder="0-1之间的数字,如0.25"
|
|
|
|
|
|
|
|
oninput="if(value>1)value=1;if(value<0)value=0">
|
|
|
|
|
|
|
|
<span class="txt" onclick="jump()">跳转</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div id="content"></div>
|
|
|
|
<div id="content"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
var local = [];
|
|
|
|
|
|
|
|
let url = location.search.substring(3);
|
|
|
|
let url = location.search.substring(3);
|
|
|
|
if (url !== "") {
|
|
|
|
if (url !== "") {
|
|
|
|
var book = ePub(url);
|
|
|
|
var book = ePub(url);
|
|
|
@ -193,26 +251,40 @@
|
|
|
|
height: window.innerHeight - 20
|
|
|
|
height: window.innerHeight - 20
|
|
|
|
});
|
|
|
|
});
|
|
|
|
rendition.display();
|
|
|
|
rendition.display();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
book.ready
|
|
|
|
|
|
|
|
.then(() => {
|
|
|
|
|
|
|
|
var local = localStorage.getItem(book.key() + '-locations');
|
|
|
|
|
|
|
|
if (local) {
|
|
|
|
|
|
|
|
return book.locations.load(local);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return book.locations.generate();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.then(locations => {
|
|
|
|
|
|
|
|
localStorage.setItem(book.key() + '-locations', book.locations.save());
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 目录
|
|
|
|
// 目录
|
|
|
|
book.loaded.navigation.then(function (toc) {
|
|
|
|
book.loaded.navigation.then(toc => {
|
|
|
|
var stored = localStorage.getItem(book.key() + '-locations');
|
|
|
|
var read = localStorage.getItem(book.key() + '-read');
|
|
|
|
if (stored) {
|
|
|
|
if (read) {
|
|
|
|
rendition.display(stored);
|
|
|
|
rendition.display(read);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var $content = document.getElementById("content");
|
|
|
|
var $content = document.getElementById("content");
|
|
|
|
toc.forEach(function (chapter) {
|
|
|
|
toc.forEach(item => {
|
|
|
|
var div = document.createElement("div");
|
|
|
|
var div = document.createElement("div");
|
|
|
|
div.className = "item";
|
|
|
|
div.className = "item";
|
|
|
|
div.textContent = chapter.label;
|
|
|
|
div.textContent = item.label;
|
|
|
|
div.addEventListener("click", function () {
|
|
|
|
div.addEventListener("click", () => {
|
|
|
|
rendition.display(chapter.href);
|
|
|
|
rendition.display(item.href);
|
|
|
|
showhide()
|
|
|
|
showhide()
|
|
|
|
});
|
|
|
|
});
|
|
|
|
$content.appendChild(div)
|
|
|
|
$content.appendChild(div)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
//简介
|
|
|
|
//简介
|
|
|
|
book.loaded.metadata.then(function (meta) {
|
|
|
|
book.loaded.metadata.then(meta => {
|
|
|
|
var $title = document.getElementById("title");
|
|
|
|
var $title = document.getElementById("title");
|
|
|
|
var $author = document.getElementById("author");
|
|
|
|
var $author = document.getElementById("author");
|
|
|
|
var $cover = document.getElementById("cover");
|
|
|
|
var $cover = document.getElementById("cover");
|
|
|
@ -224,20 +296,23 @@
|
|
|
|
$pubdate.textContent = `时间:${meta.pubdate}`;
|
|
|
|
$pubdate.textContent = `时间:${meta.pubdate}`;
|
|
|
|
if (book.archive) {
|
|
|
|
if (book.archive) {
|
|
|
|
book.archive.createUrl(book.cover)
|
|
|
|
book.archive.createUrl(book.cover)
|
|
|
|
.then(function (url) {
|
|
|
|
.then(url => {
|
|
|
|
$cover.src = url;
|
|
|
|
$cover.src = url;
|
|
|
|
})
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
$cover.src = book.cover;
|
|
|
|
$cover.src = book.cover;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
//页数
|
|
|
|
//进度显示
|
|
|
|
rendition.on('relocated', function (location) {
|
|
|
|
rendition.on('relocated', location => {
|
|
|
|
|
|
|
|
var percent = book.locations.percentageFromCfi(location.start.cfi);
|
|
|
|
var $page = document.getElementById("page");
|
|
|
|
var $page = document.getElementById("page");
|
|
|
|
|
|
|
|
var $load = document.getElementById("load");
|
|
|
|
$page.textContent = location.end.displayed.page + '/' + location.end.displayed.total;
|
|
|
|
$page.textContent = location.end.displayed.page + '/' + location.end.displayed.total;
|
|
|
|
|
|
|
|
$load.textContent = Math.fround(percent * 100).toFixed(1) + '%';
|
|
|
|
})
|
|
|
|
})
|
|
|
|
//章节
|
|
|
|
//章节名显示
|
|
|
|
rendition.on("rendered", function (section) {
|
|
|
|
rendition.on("rendered", section => {
|
|
|
|
var $toc = document.getElementById("toc");
|
|
|
|
var $toc = document.getElementById("toc");
|
|
|
|
$toc.textContent = "目录";
|
|
|
|
$toc.textContent = "目录";
|
|
|
|
$toc.textContent = book.navigation.get(section.href).label;
|
|
|
|
$toc.textContent = book.navigation.get(section.href).label;
|
|
|
@ -253,18 +328,25 @@
|
|
|
|
$mask.style.display = "none"
|
|
|
|
$mask.style.display = "none"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function jump() {
|
|
|
|
|
|
|
|
$jump = document.getElementById("jump").value;
|
|
|
|
|
|
|
|
rendition.display(book.locations.cfiFromPercentage($jump));
|
|
|
|
|
|
|
|
showhide();
|
|
|
|
|
|
|
|
document.getElementById("jump").value = "";
|
|
|
|
|
|
|
|
}
|
|
|
|
function save() {
|
|
|
|
function save() {
|
|
|
|
localStorage.setItem(book.key() + '-locations', rendition.currentLocation().start.cfi)
|
|
|
|
localStorage.setItem(book.key() + '-read', rendition.currentLocation().start.cfi)
|
|
|
|
showhide()
|
|
|
|
showhide()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function get() {
|
|
|
|
function get() {
|
|
|
|
rendition.display(localStorage.getItem(book.key() + '-locations'));
|
|
|
|
rendition.display(localStorage.getItem(book.key() + '-read'));
|
|
|
|
showhide()
|
|
|
|
showhide()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function del() {
|
|
|
|
function del() {
|
|
|
|
localStorage.removeItem(book.key() + '-locations');
|
|
|
|
localStorage.removeItem(book.key() + '-read');
|
|
|
|
showhide()
|
|
|
|
showhide()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
|
|
|
</html>
|
|
|
|