user01/calibre-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update epub reader and pdf reader

Browse Source 
Update epub reader and use pdf.js tu view pdf files
This commit is contained in:
wuqi
2016-07-09 16:54:13 +08:00
parent 82574d2118
commit 9a8d795eff
234 changed files with 86778 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
cps/templates/read.html
View File

@@ -3,156 +3,123 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Basic ePubJS Example</title>
<title>ePubJS Reader</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="{{ url_for('static', filename='css/normalize.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/popup.css') }}">
<script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/libs/zip.min.js') }}"></script>
<!-- EPUBJS Renderer -->
<script src="{{ url_for('static', filename='js/zip.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/inflate.js') }}"></script>
<script src="{{ url_for('static', filename='js/epub.min.js') }}"></script>
<script src="{{ url_for('static', filename='css/style.css') }}"></script>
<style type="text/css">
body {
overflow: hidden;
}
body{background:#f2f2f2}
h1, h1 span{font-weight:normal;color:#444 !important}
.t{
color: #444 !important;
}
#main {
position: absolute;
width: 100%;
height: 100%;
}
#area {
width: 80%;
height: 80%;
margin: 5% auto;
max-width: 1250px;
}
#area iframe {
border: none;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
.arrow {
position: absolute;
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;
}
</style>
<script>
<script>
"use strict";
EPUBJS.filePath = "{{ url_for('static', filename='js/') }}";
EPUBJS.Hooks.register("beforeChapterDisplay").newStyle = function(callback, chapter){
EPUBJS.core.addCss("{{ url_for('static', filename='css/colors.css') }}", false, chapter.doc.head);
if(callback) callback();
}
EPUBJS.Hooks.register("beforeChapterDisplay").highlight = function(callback, renderer){
document.onreadystatechange = function () {
if (document.readyState == "complete") {
EPUBJS.filePath = "{{ url_for('static', filename='js/libs/') }}";//"js/libs/";
EPUBJS.cssPath = "{{ url_for('static', filename='css/') }}";//window.location.href.replace(window.location.hash, '').replace('read.html', '') + "css/";
// fileStorage.filePath = EPUBJS.filePath;
// EPUBJS.core.addScript("js/libs/jquery.highlight.js", null, renderer.doc.head);
var s = document.createElement("style");
s.innerHTML =".highlight { background: yellow; font-weight: normal; }";
renderer.doc.head.appendChild(s);
if(callback) callback();
}
var Book = ePub("{{ url_for('static', filename=bookid) }}/", { restore: false });
window.reader = ePubReader("{{ url_for('static', filename=bookid) }}/");
}
};
</script>
<!-- File Storage -->
<!-- <script src="js/libs/localforage.min.js"></script> -->
<!-- Full Screen -->
<!--<script src="js/libs/screenfull.min.js"></script>-->
<script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
<!-- Render -->
<!--<script src="js/epub.min.js"></script>-->
<script src="{{ url_for('static', filename='js/epub.min.js') }}"></script>
<!-- Hooks -->
<!--<script src="js/hooks.min.js"></script>-->
<script src="{{ url_for('static', filename='js/hooks.min.js') }}"></script>
<!-- Reader -->
<!--<script src="js/reader.min.js"></script>-->
<script src="{{ url_for('static', filename='js/reader.min.js') }}"></script>
<!-- Plugins -->
<!-- <script src="js/plugins/search.js"></script> -->
<script src="{{ url_for('static', filename='js/plugins/search.js') }}"></script>
<!-- Highlights -->
<!-- <script src="js/libs/jquery.highlight.js"></script> -->
<!-- <script src="js/hooks/extensions/highlight.js"></script> -->
</head>
<body>
<div id="main">
<select id="toc"></select>
<div id="prev" onclick="Book.prevPage();" class="arrow">‹</div>
<div id="area"></div>
<div id="next" onclick="Book.nextPage();"class="arrow">›</div>
<div id="sidebar">
<div id="panels">
<input id="searchBox" placeholder="search" type="search">
<a id="show-Search" class="show_view icon-search" data-view="Search">Search</a>
<a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a>
<a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a>
<a id="show-Notes" class="show_view icon-edit" data-view="Notes">Notes</a>
</div>
<div id="tocView" class="view">
</div>
<div id="searchView" class="view">
<ul id="searchResults"></ul>
</div>
<div id="bookmarksView" class="view">
<ul id="bookmarks"></ul>
</div>
<div id="notesView" class="view">
<div id="new-note">
<textarea id="note-text"></textarea>
<button id="note-anchor">Anchor</button>
</div>
<ol id="notes"></ol>
</div>
</div>
<div id="main">
<div id="titlebar">
<div id="opener">
<a id="slider" class="icon-menu">Menu</a>
</div>
<div id="metainfo">
<span id="book-title"></span>
<span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
<span id="chapter-title"></span>
</div>
<div id="title-controls">
<a id="bookmark" class="icon-bookmark-empty">Bookmark</a>
<a id="setting" class="icon-cog">Settings</a>
<a id="fullscreen" class="icon-resize-full">Fullscreen</a>
</div>
</div>
<div id="divider"></div>
<div id="prev" class="arrow">‹</div>
<div id="viewer"></div>
<div id="next" class="arrow">›</div>
<!-- <script src="{{ url_for('static', filename='js/zip.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/inflate.js') }}"></script>
<script src="{{ url_for('static', filename='js/hooks.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/epub.min.js') }}"></script> -->
<script>
Book.getMetadata().then(function(meta){
document.title = meta.bookTitle+" – "+meta.creator;
});
Book.getToc().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;
Book.goto(url);
return false;
}
});
Book.renderTo("area");
Book.setStyle("padding", "0 40px");
// EPUBJS.filePath = "{{ url_for('static', filename='js/') }}";
// var Book = ePub("{{ url_for('get_download_link', book_id=bookid, format='epub') }}.epub", { restore: true });
// Book.renderTo("area").then(function(){
// Book.setStyle("padding", "0 40px");
// });
</script>
</body>
<div id="loader"><img src="{{ url_for('static', filename='img/loader.gif') }}"></div>
</div>
<div class="modal md-effect-1" id="settings-modal">
<div class="md-content">
<h3>Settings</h3>
<div>
<p>
<input type="checkbox" id="sidebarReflow" name="sidebarReflow">Reflow text when sidebars are open.
</p>
</div>
<div class="closer icon-cancel-circled"></div>
</div>
</div>
<div class="overlay"></div>
</body>
</html>