Commit ff831731 authored by julientaq's avatar julientaq
Browse files

esbuild version

parent 7ab4a989
(()=>{async function r(e){return new Promise((t,o)=>{isNaN(e)?o(new Error("delay requires a valid number")):setTimeout(t,e)})}function l(e){e.preventDefault();var t=document.querySelector(".previewFrame").contentWindow;t.focus(),t.print()}function i(e){let t=e.dataset.sizing||"";return`${e.dataset.cssProp}: ${e.value}${t};`}function s(){let e="@page { margin: ";return document.querySelectorAll(".marginUpdate").forEach(t=>{e=e+` ${t.value+t.dataset.sizing}`}),e=e+"}",e}function c(){let e=`@page { size: ${document.querySelector(".pagedSize").value} }`;return e}var d=`
@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;
}
}
`,m=`
@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);
}
.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%;
}
.modal .form {
padding: 2em;
background: lightcyan;
}`,p=`
<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>`;window.onload=document.body.insertAdjacentHTML("afterbegin",p);document.querySelector("body").addEventListener("click",function(e){(e.target.classList.contains("button-modal")||e.target.classList.contains("close"))&&b(document.querySelector(".modal"))});var u=document.createElement("style");u.innerText=m;document.head.append(u);var g=document.querySelectorAll(".cssVarUpdate"),f=document.querySelectorAll("select");g.forEach(e=>{e.addEventListener("change",a)});f.forEach(e=>{e.addEventListener("change",a)});document.querySelectorAll(".marginUpdate").forEach(e=>{e.addEventListener("change",a)});document.querySelector(".button-preview").addEventListener("click",a);document.querySelector(".button-print").addEventListener("click",l);function b(e){e.classList.toggle("hidden"),document.body.classList.remove("blocked"),document.querySelector(".modal").classList.contains("hidden")||(document.body.classList.add("blocked"),a())}async function a(){document.querySelector(".previewFrame")&&document.querySelector(".previewFrame").remove(),h(),await r(100);let e=document.createElement("link");e.href="css/pagedjs-preview.css",e.rel="stylesheet",document.querySelector(".previewFrame").contentDocument.head.appendChild(e);let t=document.querySelector(".previewFrame").contentDocument.createElement("style");t.innerText=d+s()+c();let o=document.querySelector(".previewFrame").contentDocument.createElement("article");pagedMaker.content?o.innerHTML=document.querySelector(`${pagedMaker.content}`).innerHTML:o.innerHTML=document.body.innerHTML,document.querySelector(".previewFrame").contentDocument.body.appendChild(o),v(t),document.querySelector(".previewFrame").contentDocument.head.appendChild(t);let n=document.createElement("script");n.src="https://unpkg.com/pagedjs/dist/paged.polyfill.js",document.querySelector(".previewFrame").contentDocument.body.appendChild(n)}function v(e){let t="";return f.forEach(o=>{t=t+i(o)}),g.forEach(o=>{t=t+i(o)}),t=`body {${t}}`,e.innerText=e.innerText+t}function h(){let e=document.createElement("iframe");e.classList.add("previewFrame"),document.querySelector(".preview").appendChild(e)}})();
......@@ -7,15 +7,15 @@
<title>example</title>
<script>
let pagedMaker = {
content: ".bookContent",
// content: ".bookContent",
stylesheet: "",
hooks: ""
}
</script>
<script type="module" src="js/main.js"></script>
<script type="module" src="dist/out.js"></script>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/interface.css">
<!--link rel="stylesheet" href="css/interface.css"-->
</head>
<body>
......
......@@ -2,6 +2,7 @@
import { delay, print } from "./modules/utils.js";
import { getValue, getMargins, getPageSize } from "./modules/getValues.js";
import styles from "./modules/baseStylesheet.js";
import uicss from "./modules/uicss.js"
import ui from "./modules/ui.js";
// create the UI and push it to the browser
......@@ -10,19 +11,25 @@ import ui from "./modules/ui.js";
window.onload = document.body.insertAdjacentHTML("afterbegin", ui);
document.querySelector("body").addEventListener("click", function(e) {
if (e.target.classList.contains("button-modal") || e.target.classList.contains("close") ) {
document.querySelector("body").addEventListener("click", function (e) {
if (
e.target.classList.contains("button-modal") ||
e.target.classList.contains("close")
) {
toggleModal(document.querySelector(".modal"));
}
})
});
// add styles for the preview box
const uicsscontent = document.createElement("style");
uicsscontent.innerText = uicss;
document.head.append(uicsscontent);
// inputs for the style sheet
const inputs = document.querySelectorAll(".cssVarUpdate");
const selects = document.querySelectorAll("select");
//reload on value changes in the input
inputs.forEach((input) => {
input.addEventListener("change", populatePagedMaker);
......@@ -89,9 +96,13 @@ async function populatePagedMaker() {
.contentDocument.createElement("article");
//find the content element from the config or use the body if undefined
articleContent.innerHTML = document.querySelector(
`${pagedMaker.content || body}`
).innerHTML;
if (!pagedMaker.content) {
articleContent.innerHTML = document.body.innerHTML;
} else {
articleContent.innerHTML = document.querySelector(
`${pagedMaker.content}`
).innerHTML;
}
// populate the article element of the iframe with the element found in the config
document
......
......@@ -4,6 +4,11 @@ export default `
@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;
......
export 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);
}
.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%;
}
.modal .form {
padding: 2em;
background: lightcyan;
}`
\ No newline at end of file
(() => {
// 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 {
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/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);
document.querySelector("body").addEventListener("click", function(e) {
if (e.target.classList.contains("button-modal") || e.target.classList.contains("close")) {
toggleModal(document.querySelector(".modal"));
}
});
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("link");
interfacecss.href = "css/pagedjs-preview.css";
interfacecss.rel = "stylesheet";
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");
articleContent.innerHTML = document.querySelector(`${pagedMaker.content || document.body}`).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 pagedMaker2 = document.createElement("iframe");
pagedMaker2.classList.add("previewFrame");
document.querySelector(".preview").appendChild(pagedMaker2);
}
})();
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