jamesfengcao/uweb
2
0
Fork 0
mirror of https://github.com/torappinfo/uweb.git synced 2024-08-14 23:54:59 +00:00
Code Issues 3 Projects Releases 1 Packages Wiki Activity

rebuilding site Wed Sep 29 04:07:21 PM CST 2021

Browse source
This commit is contained in:
James Feng Cao 2021-09-29 16:07:22 +08:00
parent 368b9359a6
commit 49b7c8bef7
2 changed files with 164 additions and 337 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
searchurl/txt/djvu.html
View file

@ -50,8 +50,6 @@
{ {
//?url=#page= //?url=#page=
let url = location.search.substring(5); let url = location.search.substring(5);
if(url.startsWith("file:///"))
url = "https://local/"+url.substring(8);
let page = 1; let page = 1;
let lhash = location.hash; let lhash = location.hash;
if(lhash) if(lhash)

173
searchurl/txt/epub.html
View file

@ -1,365 +1,194 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" <meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>EPUB</title> <title>EPUB</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.1.5/jszip.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/epubjs@0.3.88/dist/epub.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/epubjs@0.3.88/dist/epub.min.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const html = document.querySelector('html') const html = document.querySelector('html')
let fontSize = window.innerWidth / 10 let fontSize = window.innerWidth / 10
fontSize = fontSize > 50 ? 50 : fontSize fontSize = fontSize > 50 ? 50 : fontSize
html.style.fontSize = fontSize + 'px' html.style.fontSize = fontSize + 'px'
}) })
</script> </script>
<style> <style>
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.mask { .mask {
position: absolute; position: absolute;
display: flex; display: flex;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
} }
.meun { .meun {
display: flex; display: flex;
height: 1em; height: 1em;
align-items: center; align-items: center;
} }
#toc { #toc {
flex: 1; flex: 1;
z-index: 100; z-index: 100;
font-size: 0.6em; font-size: 0.6em;
padding-left: 0.7em; padding-left: 0.7em;
color: #333; color: #333;
} }
#toc-content { #toc-content {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 102; z-index: 102;
width: auto; width: auto;
height: 100%; height: 100%;
background: white; background: white;
} }
#toc-mask { #toc-mask {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 101; z-index: 101;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(51, 51, 51, .8); background: rgba(51, 51, 51, .8);
} }
#content { #content {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
.item { .item {
padding: 0.4em 0.4em; padding: 0.4em 0.4em;
border-bottom: 0.1em solid #f4f4f4; border-bottom: 0.1em solid #f4f4f4;
font-size: 0.4em; font-size: 0.4em;
color: #333; color: #333;
} }
#open { #open {
flex: 1; flex: 1;
z-index: 100; z-index: 100;
font-size: 0.4em; font-size: 0.4em;
text-align: right; text-align: right;
padding-right: 1em; padding-right: 1em;
color: #333; color: #333;
} }
.read { .read {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
} }
#prev { #prev {
flex: 0 0 2em; flex: 0 0 2em;
z-index: 100; z-index: 100;
} }
#viewer { #viewer {
flex: 1; flex: 1;
} }
#next { #next {
flex: 0 0 2em; flex: 0 0 2em;
z-index: 100; z-index: 100;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="ebook"> <div id="ebook">
<div class="mask"> <div class="mask">
<div class="read"> <div class="read">
<div id="prev" onclick="rendition.prev()"></div> <div id="prev" onclick="rendition.prev()"></div>
<div id="viewer"></div> <div id="viewer"></div>
<div id="next" onclick="rendition.next()"></div> <div id="next" onclick="rendition.next()"></div>
</div> </div>
<div class="meun"> <div class="meun">
<div id="toc" onclick="showhide()">≡</div> <div id="toc" onclick="showhide()">≡</div>
<div id="open"> <div id="open">
<span onclick="document.getElementById('input').click()">⊕</span> <span onclick="document.getElementById('input').click()">⊕</span>
<input type="file" id="input" style="display: none;"> <input type="file" id="input" style="display: none;">
</div> </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;">
<div id="content"></div> <div id="content"></div>
</div>
</div> </div>
</div> </div>
</div>
<script> <script>
let url = location.search.substring(3); let url = location.search.substring(3);
if (url !== "") { if (url !== "") {
var book = ePub(url); var book = ePub(url);
} else { } else {
var book = ePub(); var book = ePub();
var inputElement = document.getElementById("input"); var inputElement = document.getElementById("input");
inputElement.addEventListener('change', function (e) { inputElement.addEventListener('change', function (e) {
var file = e.target.files[0]; var file = e.target.files[0];
if (window.FileReader) { if (window.FileReader) {
var reader = new FileReader(); var reader = new FileReader();
reader.onload = openBook; reader.onload = openBook;
reader.readAsArrayBuffer(file); reader.readAsArrayBuffer(file);
} }
}); });
function openBook(e) { function openBook(e) {
var bookData = e.target.result; var bookData = e.target.result;
book.open(bookData, "binary"); book.open(bookData, "binary");
} }
} }
//渲染 //渲染
var rendition = book.renderTo("ebook", { var rendition = book.renderTo("ebook", {
with: window.innerWidth, with: window.innerWidth,
height: window.innerHeight - 20 height: window.innerHeight - 20
}); });
rendition.display(); rendition.display();
var displayed = rendition.display(); var displayed = rendition.display();
function showhide() { function showhide() {
var $toc = document.getElementById("toc-content") var $toc = document.getElementById("toc-content")
var $mask = document.getElementById("toc-mask") var $mask = document.getElementById("toc-mask")
if ($toc.style.display == "none") { if ($toc.style.display == "none") {
$toc.style.display = "" $toc.style.display = ""
$mask.style.display = "" $mask.style.display = ""
} else { } else {
$toc.style.display = "none" $toc.style.display = "none"
$mask.style.display = "none" $mask.style.display = "none"
} }
} }
// 目录 // 目录
book.loaded.navigation.then(function (toc) { book.loaded.navigation.then(function (toc) {
var $content = document.getElementById("content") var $content = document.getElementById("content")
toc.forEach(function (chapter) { toc.forEach(function (chapter) {
var div = document.createElement("div"); var div = document.createElement("div");
div.className = "item"; div.className = "item";
div.textContent = chapter.label; div.textContent = chapter.label;
div.addEventListener("click", function () { div.addEventListener("click", function () {
rendition.display(chapter.href); rendition.display(chapter.href);
showhide() showhide()
}); });
$content.appendChild(div) $content.appendChild(div)
}) })
}) })
</script> </script>
</body> </body>
</html> </html>