Generate that beautiful double page
This commit is contained in:
@@ -9,7 +9,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
function makeCover(args) {
|
function makeCover(args) {
|
||||||
const result = window.covergen(args);
|
const result = window.generateCover(args);
|
||||||
if (result.error) {
|
if (result.error) {
|
||||||
throw result.error;
|
throw result.error;
|
||||||
}
|
}
|
||||||
@@ -17,19 +17,44 @@
|
|||||||
return new File([result], 'cover.pdf', {type: 'application/pdf'});
|
return new File([result], 'cover.pdf', {type: 'application/pdf'});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function makeSplitCover(args) {
|
||||||
|
const result = window.generateSplitCover(args);
|
||||||
|
if (result.error) {
|
||||||
|
throw result.error;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Object.fromEntries(['front', 'back'].map((side) => [side, new File([result[side]], `${side}.pdf`, {type: 'application/pdf'})]));
|
||||||
|
}
|
||||||
|
|
||||||
function letsfuckinggo() {
|
function letsfuckinggo() {
|
||||||
document.getElementById('cover').src = window.URL.createObjectURL(makeCover({
|
const covers = makeSplitCover({
|
||||||
customer: document.getElementById('customer').value,
|
customer: document.getElementById('customer').value,
|
||||||
number: document.getElementById('number').value,
|
number: document.getElementById('number').value,
|
||||||
}));
|
numberPrefix: document.getElementById('prefix').value,
|
||||||
|
hlColor: document.getElementById('color').value,
|
||||||
|
})
|
||||||
|
|
||||||
|
document.getElementById('front').src = window.URL.createObjectURL(covers.front);
|
||||||
|
document.getElementById('back').src = window.URL.createObjectURL(covers.back);
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
html, body, #cover {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.covers {
|
||||||
|
height: 100%;
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.covers iframe {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -39,15 +64,30 @@
|
|||||||
<textarea id="customer"></textarea>
|
<textarea id="customer"></textarea>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>
|
||||||
|
Prefix:
|
||||||
|
<input id="prefix" type="text" value="offerte">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label>
|
<label>
|
||||||
Number:
|
Number:
|
||||||
<input id="number" type="text">
|
<input id="number" type="text">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>
|
||||||
|
Color:
|
||||||
|
<input id="color" type="color" value="#FF69B4">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<button onclick="letsfuckinggo()">Fuck it!</button>
|
<button onclick="letsfuckinggo()">Fuck it!</button>
|
||||||
</div>
|
</div>
|
||||||
<iframe id="cover"></iframe>
|
<div class="covers">
|
||||||
|
<iframe id="front"></iframe>
|
||||||
|
<iframe id="back"></iframe>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user