Commit 7de2a1b0 authored by julientaq's avatar julientaq
Browse files

remove files

parent ff831731
/* 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;
}
}
\ No newline at end of file
(()=>{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)}})();
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