Generate that beautiful double page

This commit is contained in:
2021-12-17 22:07:00 +01:00
parent 72a245610a
commit 05ac24254c

View File

@@ -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>