Commit 2829604d authored by julientaq's avatar julientaq
Browse files

add dist file

parent 4e34ac54
(() => {
// js/modules/utils.js
async function delay(time) {
return new Promise((resolve, reject) => {
if (isNaN(time)) {
reject(new Error("delay requires a valid number"));
} else {
setTimeout(resolve, time);
}
});
}
function print(e) {
e.preventDefault();
var t = document.querySelector(".previewFrame").contentWindow;
t.focus(), t.print();
}
// js/modules/getValues.js
function getValue(input) {
const suffix = input.dataset.sizing || "";
return `${input.dataset.cssProp}: ${input.value}${suffix};`;
}
function getMargins() {
let marginObject = "@page { margin: ";
document.querySelectorAll(".marginUpdate").forEach((mr) => {
marginObject = marginObject + ` ${mr.value + mr.dataset.sizing}`;
});
marginObject = marginObject + "}";
return marginObject;
}
function getPageSize() {
let pageSize = `@page { size: ${document.querySelector(".pagedSize").value} }`;
return pageSize;
}
// js/modules/baseStylesheet.js
var baseStylesheet_default = `
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@media print {
.modal, .button-modal {
display: none;
}
body, html {
margin: 0;
padding: 0;
}
body {
font-size: var(--fontSize, 10px);
font-family: var(--fontBody, serif);
line-height: var(--lineHeight, 1.2);
}
@page {
background: var(--background-color, white);
@bottom-right{
content: counter(page) "/" counter(pages);
}
}
h1,h2 {
text-transform: uppercase;
border-bottom: 1px solid black;
}
}
`;
// js/modules/pagedmakerCSS.js
var pagedmakerCSS_default = `
/* Change the look */
:root{
--color-background: transparent;
--color-pageBox: #666;
--color-paper: white;
--color-marginBox: transparent;
}
/* To define how the book look on the screen: */
@media screen {
body {
background-color: var(--color-background);
}
.pagedjs_pages {
display: flex;
width: calc(var(--pagedjs-width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
}
.pagedjs_page {
box-shadow: 0 0 0 1px var(--color-pageBox);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
.pagedjs_first_page {
margin-left: var(--pagedjs-width);
}
.pagedjs_page:last-of-type{
margin-bottom: 10mm;
}
/* show the margin-box */
.pagedjs_margin-top-left-corner-holder,
.pagedjs_margin-top,
.pagedjs_margin-top-left,
.pagedjs_margin-top-center,
.pagedjs_margin-top-right,
.pagedjs_margin-top-right-corner-holder,
.pagedjs_margin-bottom-left-corner-holder,
.pagedjs_margin-bottom,
.pagedjs_margin-bottom-left,
.pagedjs_margin-bottom-center,
.pagedjs_margin-bottom-right,
.pagedjs_margin-bottom-right-corner-holder,
.pagedjs_margin-right,
.pagedjs_margin-right-top,
.pagedjs_margin-right-middle,
.pagedjs_margin-right-bottom,
.pagedjs_margin-left,
.pagedjs_margin-left-top,
.pagedjs_margin-left-middle,
.pagedjs_margin-left-bottom{
box-shadow: 0 0 0 1px inset var(--color-marginBox);
}
}
@media screen {
.pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
}
}`;
// js/modules/uicss.js
var uicss_default = `
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100&display=swap');
.modal {
font-family: "Jost";
font-weight: 200;
font-size: 0.9em;
display: grid;
position: fixed;
margin: auto;
height: 90vh;
width: 90vw;
top: 5vh;
left: 5vw;
/* border: 2px solid black; */
grid-template-columns: 1fr 5fr;
padding: 0;
background: white;
z-index: 99999999999999999999999999999;
background: white;
border: 3px solid black;
box-shadow: 0 0 0 10vw rgba(0,0,0,0.6);
overflow-y:scroll;
}
.modal .logo {
height: 40px;
}
.close {
position: absolute;
right: 2em;
top: 2em;
}
.hidden {
display: none;
}
.blocked {
overflow: hidden;
}
input::after {
content: attr(value);
display: inline-block;
background: orange;
color: white;
}
.modal .item {
margin-bottom: 2em;
}
.modal label {
text-transform: uppercase;
display: block;
}
.preview {
}
iframe {
border: none;
height: 100%;
width: 100%;
max-width: unset;
max-height: unset;
}
.modal .form {
padding: 2em;
background: lightcyan;
}`;
// js/modules/ui.js
var ui_default = `
<button class="button-modal">Start pagedjs</button>
<div class="modal hidden">
<button class="close">close</button>
<div class="form">
<img class="logo" src="img/pagedjsLogo.svg" alt="Logo type of Paged.js: a sheet of paper in the shape of the letter P">
<div class="item pagesize">
<label for="page-size">page size</label>
<select name="page-size" id="page-size" class="pagedSize">
<option value="A4">A4</option>
<option value="A5">A5</option>
<option value="letter">Letter</option>
<option value="200mm 200mm">20cm \xD7 20cm</option>
</select>
</div>
<div class="item margins">
<label for="marginTop">margin-top</label>
<input class="marginUpdate" id="margin-top" name="marginTop" value="10" data-sizing="mm">
<label for="marginRight">margin-right</label>
<input class="marginUpdate" id="margin-right" name="marginRight" value="10" data-sizing="mm">
<label for="marginBottom">margin-bottom</label>
<input class="marginUpdate" id="margin-bottom" name="marginBottom" value="10" data-sizing="mm">
<label for="marginLeft">margin-left</label>
<input class="marginUpdate" id="margin-left" name="marginLeft" value="10" data-sizing="mm">
</div>
<div class="item">
<label for="fontFamily">font-family</label>
<select id="fontFamily" name="fontfamily" data-css-prop="--fontBody">
<option value="Spectral" selected>Spectral</option>
<option value="'Courier Prime'">Courier Prime</option>
<option value="sans-serif">sans serif</option>
</select>
</div>
<div class="item">
<label for="fontSize">font-size</label>
<input class="cssVarUpdate" id="fontSize" name="fontSize" data-css-prop="--fontSize" type="range" min="12" max="20"
data-sizing="px">
</div>
<div class="item">
<label for="lineHeight">line-height</label>
<input class="cssVarUpdate" id="lineHeight" step="0.1" name="lineHeight" data-css-prop="--lineHeight" type="range" min=".8" max="2" >
</div>
<div class="item">
<label for="background-color">background color</label>
<input class="cssVarUpdate" id="background-color" type="color" name="color" data-css-prop="--background-color"
value="#ffffff">
</div>
<div class="item">
<button class="button-preview">preview</button>
</div>
<div class="item">
<button class="button-print">print</button>
</div>
</div>
<div class="preview"></div>
</div>`;
// js/main.js
window.onload = document.body.insertAdjacentHTML("afterbegin", ui_default);
var pagedMakerConfig = {
content: void 0,
stylesheet: void 0,
hooks: void 0
};
document.querySelector("body").addEventListener("click", function(e) {
if (e.target.classList.contains("button-modal") || e.target.classList.contains("close")) {
toggleModal(document.querySelector(".modal"));
}
});
var uicsscontent = document.createElement("style");
uicsscontent.innerText = uicss_default;
document.head.append(uicsscontent);
var inputs = document.querySelectorAll(".cssVarUpdate");
var selects = document.querySelectorAll("select");
inputs.forEach((input) => {
input.addEventListener("change", populatePagedMaker);
});
selects.forEach((select) => {
select.addEventListener("change", populatePagedMaker);
});
document.querySelectorAll(".marginUpdate").forEach((mr) => {
mr.addEventListener("change", populatePagedMaker);
});
document.querySelector(".button-preview").addEventListener("click", populatePagedMaker);
document.querySelector(".button-print").addEventListener("click", print);
function toggleModal(modal) {
modal.classList.toggle("hidden");
document.body.classList.remove("blocked");
if (!document.querySelector(".modal").classList.contains("hidden")) {
document.body.classList.add("blocked");
populatePagedMaker();
}
}
async function populatePagedMaker() {
if (document.querySelector(".previewFrame")) {
document.querySelector(".previewFrame").remove();
}
createFrame();
await delay(100);
let interfacecss = document.createElement("style");
interfacecss.innerText = pagedmakerCSS_default;
document.querySelector(".previewFrame").contentDocument.head.appendChild(interfacecss);
let styleElement = document.querySelector(".previewFrame").contentDocument.createElement("style");
styleElement.innerText = baseStylesheet_default + getMargins() + getPageSize();
let articleContent = document.querySelector(".previewFrame").contentDocument.createElement("article");
if (pagedMakerConfig.content == void 0) {
articleContent.innerHTML = document.body.innerHTML;
} else {
articleContent.innerHTML = document.querySelector(`${pagedMakerConfig.content}`).innerHTML;
}
document.querySelector(".previewFrame").contentDocument.body.appendChild(articleContent);
getAllValues(styleElement);
document.querySelector(".previewFrame").contentDocument.head.appendChild(styleElement);
let pagedjsscript = document.createElement("script");
pagedjsscript.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
document.querySelector(".previewFrame").contentDocument.body.appendChild(pagedjsscript);
}
function getAllValues(styleElement) {
let values = "";
selects.forEach((input) => {
values = values + getValue(input);
});
inputs.forEach((input) => {
values = values + getValue(input);
});
values = `body {${values}}`;
return styleElement.innerText = styleElement.innerText + values;
}
function createFrame() {
const pagedMaker = document.createElement("iframe");
pagedMaker.classList.add("previewFrame");
document.querySelector(".preview").appendChild(pagedMaker);
}
})();
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment