thumbnails!!
This commit is contained in:
my
parent
a76d5a1552
commit
1fb8301c96
|
|
@ -1,15 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ lang }}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="{{ url_for('static', filename='paged.polyfill.js') }}" type="text/javascript"></script>
|
||||
<script src="{{ url_for('static', filename='footnotes.js') }}" type="text/javascript"></script>
|
||||
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript"
|
||||
id="html2canvas_js"></script>
|
||||
<style>
|
||||
@media screen,
|
||||
pagedjs-ignore {
|
||||
div.thumbnails {
|
||||
position: fixed !important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
div.thumbnails div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.thumbnails span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% if impose %}
|
||||
<script src="{{ url_for('static', filename='imposition.js') }}" type="text/javascript" id="imposition_js"></script>
|
||||
<style>body{
|
||||
--paged-layout: booklet;
|
||||
}</style>
|
||||
|
||||
<style>
|
||||
body {
|
||||
--paged-layout: booklet;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
{% if cover %}
|
||||
<style>
|
||||
|
|
@ -21,8 +50,103 @@
|
|||
<link href="{{ url_for('static', filename='pagedjs.css') }}" rel="stylesheet" type="text/css" media="screen">
|
||||
<link href="{{ url_for('css', name=name) }}" rel="stylesheet" type="text/css" media="print">
|
||||
<title>{{ title }}</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
{{ pad_content }}
|
||||
|
||||
<body {% if single_page %} class="single-pages" {% endif %}>
|
||||
<div id="thumbs" class="thumbnails"></div>
|
||||
<template data-ref='pagedjs-content'>{{ pad_content }}</template>
|
||||
<script>
|
||||
class Thumb extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.pagedbooklet;
|
||||
this.sourceSize;
|
||||
this.pageStart;
|
||||
this.pageEnd;
|
||||
this.thumbsEl = document.querySelector("#thumbs");
|
||||
}
|
||||
|
||||
afterRendered() {
|
||||
this.thumbsEl.style.position = 'fixed';
|
||||
}
|
||||
finalizePage(pageElement, page, breakToken) {
|
||||
//html2canvas.useCORS = true;
|
||||
//html2canvas.allowTaint = false;
|
||||
console.log(pageElement, page, breakToken);
|
||||
html2canvas(pageElement, {
|
||||
backgroundColor: null,
|
||||
onclone: (clonedDoc) => {
|
||||
const root = clonedDoc.querySelector("#" + pageElement.id);
|
||||
root.querySelectorAll("img").forEach((img) => {
|
||||
const r = img.getBoundingClientRect();
|
||||
|
||||
const ph = clonedDoc.createElement("div");
|
||||
ph.style.width = `${r.width}px`;
|
||||
ph.style.height = `${r.height}px`;
|
||||
ph.style.display = "inline-block";
|
||||
ph.style.boxSizing = "border-box";
|
||||
ph.style.border = "2px solid rgba(0,0,0,1)";
|
||||
ph.style.background = "rgba(0,0,0,.06)";
|
||||
ph.style.position = "relative";
|
||||
ph.style.overflow = "hidden";
|
||||
|
||||
const w = r.width;
|
||||
const h = r.height;
|
||||
const diag = Math.hypot(w, h);
|
||||
const ang = (Math.atan2(h, w) * 180) / Math.PI;
|
||||
|
||||
// diagnal 1
|
||||
const d1 = clonedDoc.createElement("div");
|
||||
d1.style.position = "absolute";
|
||||
d1.style.left = "0";
|
||||
d1.style.top = "0";
|
||||
d1.style.width = `${diag}px`;
|
||||
d1.style.height = "2px";
|
||||
d1.style.background = "rgba(0,0,0,1)";
|
||||
d1.style.transformOrigin = "0 0";
|
||||
d1.style.transform = `rotate(${ang}deg)`;
|
||||
|
||||
// diagonal 2
|
||||
const d2 = clonedDoc.createElement("div");
|
||||
d2.style.position = "absolute";
|
||||
d2.style.right = "0";
|
||||
d2.style.top = "0";
|
||||
d2.style.width = `${diag}px`;
|
||||
d2.style.height = "2px";
|
||||
d2.style.background = "rgba(0,0,0,1)";
|
||||
d2.style.transformOrigin = "100% 0";
|
||||
d2.style.transform = `rotate(${-ang}deg)`;
|
||||
|
||||
ph.appendChild(d1);
|
||||
ph.appendChild(d2);
|
||||
|
||||
img.replaceWith(ph);
|
||||
});
|
||||
},
|
||||
}).then((canvas) => {
|
||||
canvas.style.height = 'auto';
|
||||
canvas.style.width = '80px';
|
||||
const a = document.createElement('a');
|
||||
const span = document.createElement('span');
|
||||
this.thumbsEl.appendChild(a);
|
||||
a.appendChild(canvas);
|
||||
a.href = "#" + pageElement.id;
|
||||
a.appendChild(span);
|
||||
span.append(page.position + 1);
|
||||
a.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
pageElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Paged
|
||||
.registerHandlers(Thumb);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue