151 lines
5.8 KiB
HTML
151 lines
5.8 KiB
HTML
<!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>
|
|
{% endif %}
|
|
{% if cover %}
|
|
<style>
|
|
.pagedjs_first_page {
|
|
background-image: url({{cover}});
|
|
}
|
|
</style>
|
|
{% endif %}
|
|
<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 {% 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> |