hrk/lepa_octomode
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: hrk:1fb8301c962c18f07bc6c25a743c34e5004179f4
Branches Tags
hrk:main
..
compare: hrk:b16325d0fea3926f18d74a10071e6d0528b55243
Branches Tags
hrk:main

No commits in common. "1fb8301c962c18f07bc6c25a743c34e5004179f4" and "b16325d0fea3926f18d74a10071e6d0528b55243" have entirely different histories.
1fb8301c96 ... b16325d0fe

6 changed files with 18 additions and 312 deletions
Show stats Expand all files Collapse all files

29
octomode.py
View file

@ -26,7 +26,6 @@ APP.config.from_pyfile('settings.py')
# ---
# My attempt as showing helpful error messages.
# the class holds an error string to show in the error.html tempalte
# for now mostly for when the space in the yaml meta is missing.
@ -225,17 +224,8 @@ def html(name):
@APP.route('/<name>/pdf/')
def pdf(name):
app_root = get_app_root()
pagedjs_base = f"{ app_root }/{name}/pagedjs.html"
impose = request.args.get("impose") == "1"
single_page = request.args.get("single") == "1"
params = {}
if impose:
params["impose"] = "1"
if single_page:
params["single"] = "1"
query = f"?{ urlencode(params) }" if params else ""
url = f"{ pagedjs_base }{ query }"
return render_template('pdf.html', url=url, pagedjs_base=pagedjs_base, name=name.strip(), pad_url=APP.config['PAD_URL'])
url = f"{ app_root }/{name}/pagedjs.html"
return render_template('pdf.html', url=url, name=name.strip(), pad_url=APP.config['PAD_URL'])
# @APP.route('/<name>/impose/')
# def impose(name):
@ -282,18 +272,9 @@ def pagedjs(name):
title = get_meta(metadata, 'title', 'Untitled')
cover = get_meta(metadata, 'cover', None)
impose = request.args.get("impose") == "1"
single_page = request.args.get("single") == "1"
return render_template(
'pagedjs.html',
name=name.strip(),
pad_content=html,
lang=lang,
title=title,
cover=cover,
impose=impose,
single_page=single_page
)
print("impose?" + str(request.args.get("impose")))
impose = False #request.args.get("impose") == "true"
return render_template('pagedjs.html', name=name.strip(), pad_content=html, lang=lang, title=title, cover=cover, impose=impose)
# @APP.route('/<name>/imposed.html')
# def imposed(name):

18
static/main.css
View file

@ -45,25 +45,9 @@ div#nav{
right: 1.5em;
margin-top: 8px;
}
div#nav input[type="text"]{
div#nav input{
min-width: 300px;
}
div#nav .layout-options {
display: inline-flex;
align-items: center;
gap: 0.5em;
margin-left: 0.5em;
font-size: 0.9em;
}
div#nav .layout-options label {
display: inline-flex;
align-items: center;
gap: 0.25em;
cursor: pointer;
}
div#nav .layout-options input[type="checkbox"] {
margin: 0;
}
/* click logic (CSS only) */
span#click_md {
cursor: pointer;

32
static/pagedjs.css
View file

@ -66,36 +66,6 @@
left: calc(var(--pagedjs-bleed-left)*-1);
}
body.single-pages .pagedjs_pages {
flex-direction: column;
width: 100%;
}
body.single-pages .pagedjs_first_page {
margin-left: 0;
}
body.single-pages .pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
}
body.single-pages .pagedjs_left_page{
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
}
body.single-pages .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
border-color: var(--pagedjs-crop-color);
}
body.single-pages .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
width: var(--pagedjs-cross-size)!important;
}
body.single-pages .pagedjs_right_page{
left: 0;
}
/* show the margin-box */
.pagedjs_margin-top-left-corner-holder,
@ -207,4 +177,4 @@
.pagedjs_bleed-left .pagedjs_marks-crop:last-child,
.pagedjs_bleed-right .pagedjs_marks-crop:last-child{
box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
}
}

97
templates/base.html
View file

@ -22,11 +22,7 @@
<a href="{{ url_for('html', name=name) }}"><button>html</button></a>
<a id="layout_link" data-base-href="{{ url_for('pdf', name=name) }}" href="{{ url_for('pdf', name=name) }}"><button>layout</button></a>
<span class="layout-options">
<label><input type="checkbox" id="layout_impose"> impose</label>
<label><input type="checkbox" id="layout_single_page"> single pages</label>
</span>
<a href="{{ url_for('pdf', name=name) }}"><button>layout</button></a>
</div>
@ -35,97 +31,6 @@
{% block content %}
{% endblock %}
</div>
<script>
(function () {
const layoutLink = document.getElementById('layout_link');
const imposeToggle = document.getElementById('layout_impose');
const singleToggle = document.getElementById('layout_single_page');
if (!layoutLink || !imposeToggle || !singleToggle) {
return;
}
const STORE_KEY_IMPOSE = 'octomode_layout_impose';
const STORE_KEY_SINGLE = 'octomode_layout_single';
const store = (key, value) => {
try {
localStorage.setItem(key, value ? '1' : '0');
} catch (err) {}
};
const readStoredValue = (key, fallback) => {
try {
const stored = localStorage.getItem(key);
if (stored === null) {
return fallback;
}
return stored === '1';
} catch (err) {
return fallback;
}
};
const applyQueryDefaults = () => {
const params = new URLSearchParams(window.location.search);
if (params.has('impose')) {
store(STORE_KEY_IMPOSE, params.get('impose') === '1');
}
if (params.has('single')) {
store(STORE_KEY_SINGLE, params.get('single') === '1');
}
};
const createQueryArgs = () => {
const params = new URLSearchParams();
if (imposeToggle.checked) {
params.set('impose', '1');
}
if (singleToggle.checked) {
params.set('single', '1');
}
const query = params.toString();
return query ? `?${query}` : '';
};
const updateLayoutHref = () => {
const baseHref = layoutLink.dataset.baseHref;// || layoutLink.getAttribute('href');
//const base = baseHref.split('?')[0];
layoutLink.setAttribute('href', baseHref + createQueryArgs());
};
const updatePdfIframe = () => {
const iframe = document.getElementById('pdf');
if (!iframe) return;
const baseSrc = iframe.dataset.baseSrc; //|| iframe.getAttribute('src').split('?')[0];
iframe.setAttribute('src', baseSrc + createQueryArgs());
};
applyQueryDefaults();
imposeToggle.checked = readStoredValue(STORE_KEY_IMPOSE, false);
singleToggle.checked = readStoredValue(STORE_KEY_SINGLE, false);
updateLayoutHref();
updatePdfIframe();
const handleChange = (e) => {
console.log(e.target, imposeToggle);
if(e.target == imposeToggle && imposeToggle.checked) {
//console.log("remove single.", singleToggle)
singleToggle.checked = false;
} else if(e.target == singleToggle && singleToggle.checked) {
//console.log("remove impose.", singleToggle)
imposeToggle.checked = false;
}
store(STORE_KEY_IMPOSE, imposeToggle.checked);
store(STORE_KEY_SINGLE, singleToggle.checked);
updateLayoutHref();
updatePdfIframe();
};
imposeToggle.addEventListener('change', handleChange);
singleToggle.addEventListener('change', handleChange);
})();
</script>
</body>

136
templates/pagedjs.html
View file

@ -1,44 +1,15 @@
<!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>
@ -50,103 +21,8 @@
<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>
{{ pad_content }}
</body>
</html>
</html>

18
templates/pdf.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block content %}
<iframe id="pdf" name="pdf" src="{{ url }}" data-base-src="{{ pagedjs_base }}"></iframe>
<iframe id="pdf" name="pdf" src="{{ url }}"></iframe>
{% endblock %}
{% block footer %}
@ -22,19 +22,9 @@ window.addEventListener('load', function () {
const nav = document.getElementById('buttons');
// Insert the SAVE button without replacing existing nodes.
const saveLink = document.createElement('a');
saveLink.href = '#';
const saveButton = document.createElement('button');
saveButton.id = 'save';
saveButton.textContent = 'save';
saveButton.style.backgroundColor = '#66ee66';
saveButton.addEventListener('click', function (event) {
event.preventDefault();
printPage();
});
saveLink.appendChild(saveButton);
nav.appendChild(saveLink);
// Insert the SAVE button
const save = '<a href="#"><button id="save" onClick="printPage()" style="background-color: #66ee66;">save</button></a>';
nav.innerHTML = nav.innerHTML + save;
})
</script>