Commit 829262e2 authored by julientaq's avatar julientaq
Browse files

v.0.0.6 clean classes to avoid overriding styles

parent ea8f3663
# PagedMaker.js, the simplest way to add paginated preview of your website
## What it does
Pagedmaker is a print preview solution for any website, based on paged.js.
- Print preview: simulate print preview, but on screen: check how your website will be rendered on paper
- Parametric mode: add control for parametric printing: change font, font-size, colors, and margins
> But isn’t that what firefox and chromium preview offer?
Eventually, that should be the case, when they’ll be done with video, webGL, and all the other features likely to be added to the browser, i’m pretty sure they’ll end up looking for pagedmedia specifications. But until that happens, if you want to have a proper print css preview, you need to print the file, check things, and do it again.
And yet, you won’t have access to automatic running heads, table of contents, page numbers and cross references, things that we can already use today with paged.js. Check the future of #cssPrint and try paged.js.
## How does it work
1. pagedjs creates an iframe
2. clone the `body` element to the iframe
3. link a css print file (pagedmaker is provided with a basic css file)
4. add Pagedjs previewer to the iframe and runs it
5. the controls in the modal change the data/values for each control
## use and configuration
you can use pagedPreviewer by adding this `pagedPreviewer.js` to your HTML (make sure its type is module).
<script type="module" src="../dist/pagedPreviewer.js"></script>
and you’ll have the basic overview of the body you’ll paginate.
You can also have a custom configuration for your pagedjs needs`: from custom stylesheet to select the controls of the interface in parametric mode.
```html
<!-- <script>
window.pagedMakerConfig = {
content: ".bookContent",
stylesheet: "css/pagedtest.css",
button: ".pagedjsButton",
features: [
"pagedSize",
"pagedMargins",
"fontFamily",
"fontSize",
"fontLineHeight",
"backgroundColor",
"textColor"
],
uicolor: "orange"
}
</script>-->
```
where you can add the following. WARNING: if you want to use this custom make sure to use all the config for now (i’ll improve that asap). To get the default of each of the option, set it as `undefined`.
`content`: is the dom element you want to paginate;
`stylesheet`: a custom stylesheet you want to use;
`button`: the button element you want to use to start the script;
`features`: the control you want to give to your user. Can be one of more of the following list: , `"pagedSize"`, `"pagedMargins"`, `"fontFamily"`, `"fontSize"`, `"fontLineHeight"`, `"backgroundColor"`, `"textColor`";
`uicolor`: the color for the UI (the left column);
### styles pagedjs buttons and modal
Use those css classes in your CSS:
`.pagedPreviewer-button-modal` to change the button that call the modal. It will be added as the first element of the body element,
`.pagedPreviewer-modal` to change the styles of the modal (warning, it’s using css-grid to make things work).
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100&display=swap');
.pagedMaker-modal {
.pagedPreviewer-modal {
font-family: "Jost";
font-weight: 200;
......@@ -23,11 +23,11 @@
box-shadow: 0 0 0 10vw rgba(0,0,0,0.6);
}
.pagedMaker-modal .logo {
.pagedPreviewer-modal .logo {
height: 40px;
}
.close {
.pagedPreviewer-button-close {
position: absolute;
right: 2em;
top: 2em;
......@@ -49,16 +49,16 @@ input::after {
}
.pagedMaker-modal .item {
.pagedPreviewer-modal .item {
margin-bottom: 2em;
}
.pagedMaker-modal label {
.pagedPreviewer-modal label {
text-transform: uppercase;
display: block;
}
.preview {
.pagedPreviewer-preview {
}
iframe {
......@@ -67,7 +67,7 @@ iframe {
width: 100%;
}
.pagedMaker-modal .form {
.pagedPreviewer-modal .form {
padding: 2em;
background: lightcyan;
}
\ No newline at end of file
......@@ -82,6 +82,7 @@
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
margin-bottom: 10mm;
}
}
\ No newline at end of file
body {
/* color: purple; */
}
\ No newline at end of file
......@@ -23,3 +23,18 @@ html {
max-width: 100%;
height: auto;
}
/* home page styles */
body {
margin: 2em;
background: #833801;
color: white;
font-size: 2em;
line-height: 1.5;
font-family: sans-serif;
}
\ No newline at end of file
body {
color: purple;
}
p {
background: orange;
}
@page {
@top-right {
content: "lol";
color: orange;
}
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
......@@ -30,7 +30,7 @@
}
function print(e) {
e.preventDefault();
var t = document.querySelector(".previewFrame").contentWindow;
var t = document.querySelector(".pagedPreviewer-previewFrame").contentWindow;
t.focus(), t.print();
}
......@@ -41,7 +41,7 @@
}
function getMargins() {
let marginObject = "@page { margin: ";
document.querySelectorAll(".marginUpdate").forEach((mr) => {
document.querySelectorAll(".pagedPreviewer-marginUpdate").forEach((mr) => {
marginObject = marginObject + ` ${mr.value + mr.dataset.sizing}`;
});
marginObject = marginObject + "}";
......@@ -59,7 +59,7 @@
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@media print {
.pagedMaker-modal, .button-modal {
.pagedPreviewer-modal, .pagedPreviewer-button-modal {
display: none;
}
......@@ -80,8 +80,17 @@ body {
@bottom-right{
content: counter(page) "/" counter(pages);
}
@bottom-left {
content: string(text)
}
}
title {
string-set: title string(text);
}
h1,h2 {
text-transform: uppercase;
......@@ -176,8 +185,7 @@ h1,h2 {
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
margin: 10mm auto 5mm;
}
}
......@@ -187,29 +195,6 @@ h1,h2 {
body {
--color-margins: orange;
}
@page {
@top-left-corner {content: " "; color: var(--color-margins); text-align: center;}
@top-left {content: " "; color: var(--color-margins); text-align: center;}
@top-center {content: " "; color: var(--color-margins); text-align: center;}
@top-right {content: " "; color: var(--color-margins); text-align: center;}
@top-right-corner {content: " "; color: var(--color-margins); text-align: center;}
@left-top {content: " "; color: var(--color-margins); text-align: center;}
@left-middle {content: " "; color: var(--color-margins); text-align: center;}
@left-bottom {content: " "; color: var(--color-margins); text-align: center;}
@bottom-left-corner {content: " "; color: var(--color-margins); text-align: center;}
@bottom-right-corner {content: " "; color: var(--color-margins); text-align: center;}
@bottom-left {content: " "; color: var(--color-margins); text-align: center;}
@bottom-center {content: " "; color: var(--color-margins); text-align: center;}
@bottom-right {content: " "; color: var(--color-margins); text-align: center;}
@right-top {content: " "; color: var(--color-margins); text-align: center;}
@right-middle {content: " "; color: var(--color-margins); text-align: center;}
@right-bottom {content: " "; color: var(--color-margins); text-align: center;}
}
.pagedjs_margin-top-left-corner:hover,
......@@ -241,16 +226,18 @@ h1,h2 {
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100&display=swap');
.pagedMaker-modal {
.pagedPreviewer-modal {
color: black;
font-family: sans-serif;
font-weight: 400;
font-size: 0.9em;
font-weight:400;
font-size: 18px;
display: grid;
position: fixed;
margin: auto;
height: 90vh;
width: 90vw;
top: 5vh;
right: 5vw;
bottom: 5vh;
left: 5vw;
/* border: 2px solid black; */
grid-template-columns: 1fr 5fr;
......@@ -260,42 +247,43 @@ h1,h2 {
background: white;
border: 3px solid black;
box-shadow: 0 0 0 10vw rgba(0,0,0,0.6);
overflow-y: hidden;
}
.pagedMaker-modal .logo {
.pagedPreviewer-modal .logo {
height: 40px;
}
.close {
.pagedPreviewer-button-close {
position: absolute;
right: 2em;
top: 2em;
}
.hidden {
.pagedPreviewer-hidden {
display: none;
}
.blocked {
.pagedPreviewer-blocked {
overflow: hidden;
}
.pagedMaker-modal .item {
.pagedPreviewer-item {
margin-bottom: 2em;
}
.pagedMaker-modal label {
.pagedPreviewer-modal label {
text-transform: uppercase;
display: block;
}
.preview {
.pagedPreviewer-preview {
}
iframe {
.pagedPreviewer-previewFrame {
border: none;
height: 100%;
width: 100%;
......@@ -303,9 +291,8 @@ iframe {
max-height: unset;
}
.pagedMaker-modal .form {
.pagedPreviewer-form {
padding: 2em;
background: ${config_default.ui ? config_default.uicolor : "white"};
}
.pagedMaker-hyde {
......@@ -313,17 +300,21 @@ iframe {
}
`;
// js/modules/pagedjsLogo.js
var pagedjsLogo_default = `<svg width="81" height="99" viewBox="0 0 81 99" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.299988 92.6V98.2H37.6L68.5 73.4C75.8 67.6 80.2 61.8 80.2 52.3V8.70001V0.200012H0.299988V92.6V92.6ZM8.79999 9.10001H47.5C64.8 9.10001 72.6 19.6 72.6 34.8C72.6 61.3 56.4 67.5 30.7 63.3V89.2H8.70001V9.10001H8.79999Z" fill="black"/></svg>`;
// js/modules/ui.js
var ui_default = `
${config_default.button == void 0 ? '<button class="button-modal">Start pagedjs</button>' : ""}
${config_default.button == void 0 ? '<button class="pagedPreviewer-button-modal">Start pagedjs</button>' : ""}
<div class="pagedMaker-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 ${config_default.features.includes("pagedSize") ? "" : "pagedMaker-hyde"}">
<div class="pagedPreviewer-modal pagedPreviewer-hidden">
<div class="pagedPreviewer-form">
<figure class="pagedPreviewer-logo">
${pagedjsLogo_default}
<figcaption>paged.js <span>previewer</span></figcaption>
</figure>
<div class="pagedPreviewer-item pagesize ${config_default.features.includes("pagedSize") ? "" : "pagedMaker-hyde"}">
<label class="pagedSize" for="page-size">page size</label>
<select name="page-size" id="page-size" class="pagedSize">
......@@ -334,19 +325,19 @@ ${config_default.button == void 0 ? '<button class="button-modal">Start pagedjs<
</select>
</div>
<div class="item margins ${config_default.features.includes("pagedMargins") ? "" : "pagedMaker-hyde"}">
<div class="pagedPreviewer-item margins ${config_default.features.includes("pagedMargins") ? "" : "pagedMaker-hyde"}">
<label for="marginTop">margin-top</label>
<input class="marginUpdate" id="margin-top" name="marginTop" value="10" data-sizing="mm">
<input class="pagedPreviewer-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">
<input class="pagedPreviewer-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">
<input class="pagedPreviewer-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">
<input class="pagedPreviewer-marginUpdate" id="margin-left" name="marginLeft" value="10" data-sizing="mm">
</div>
<div class="item ${config_default.features.includes("fontFamily") ? "" : "pagedMaker-hyde"}">
<div class="pagedPreviewer-item ${config_default.features.includes("fontFamily") ? "" : "pagedMaker-hyde"}">
<label for="fontFamily">font-family</label>
<select id="fontFamily" name="fontfamily" data-css-prop="--fontBody">
<option value="Spectral" selected>Spectral</option>
......@@ -354,34 +345,37 @@ ${config_default.button == void 0 ? '<button class="button-modal">Start pagedjs<
<option value="sans-serif">sans serif</option>
</select>
</div>
<div class="item ${config_default.features.includes("fontSize") ? "" : "pagedMaker-hyde"}">
<div class="pagedPreviewer-item ${config_default.features.includes("fontSize") ? "" : "pagedMaker-hyde"}">
<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 ${config_default.features.includes("fontLineHeight") ? "" : "pagedMaker-hyde"}">
<div class="pagedPreviewer-item ${config_default.features.includes("fontLineHeight") ? "" : "pagedMaker-hyde"}">
<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 ${config_default.features.includes("backgroundColor") ? "" : "pagedMaker-hyde"}">
<div class="pagedPreviewer-item ${config_default.features.includes("backgroundColor") ? "" : "pagedMaker-hyde"}">
<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 ${config_default.features.includes("textColor") ? "" : "pagedMaker-hyde"}">
<div class="pagedPreviewer-item ${config_default.features.includes("textColor") ? "" : "pagedMaker-hyde"}">
<label for="text-color">Text color</label>
<input class="cssVarUpdate" id="text-color" type="color" name="color" data-css-prop="--body-color"
value="#121212">
</div>
<div class="item">
<button class="button-preview">preview</button>
<div class="pagedPreviewer-item">
<button class="pagedPreviewer-button-preview">preview</button>
</div>
<div class="pagedPreviewer-item">
<button class="pagedPreviewer-button-print">print</button>
</div>
<div class="item">
<button class="button-print">print</button>
<div class="pagedPreviewer-item">
<button class="pagedPreviewer-button-close">close</button>
</div>
</div>
<div class="preview"></div>
<div class="pagedPreviewer-zonePreview"></div>
</div>`;
// js/main.js
......@@ -389,11 +383,11 @@ ${config_default.button == void 0 ? '<button class="button-modal">Start pagedjs<
document.querySelector("body").addEventListener("click", function(e) {
if (config_default.button != void 0) {
if (e.target === document.querySelector(`${config_default.button}`)) {
toggleModal(document.querySelector(".pagedMaker-modal"));
toggleModal(document.querySelector(".pagedPreviewer-modal"));
}
}
if (e.target.classList.contains("button-modal") || e.target.classList.contains("close")) {
toggleModal(document.querySelector(".pagedMaker-modal"));
if (e.target.classList.contains("pagedPreviewer-button-modal") || e.target.classList.contains("pagedPreviewer-button-close")) {
toggleModal(document.querySelector(".pagedPreviewer-modal"));
}
});
var uicsscontent = document.createElement("style");
......@@ -407,59 +401,59 @@ ${config_default.button == void 0 ? '<button class="button-modal">Start pagedjs<
selects.forEach((select) => {
select.addEventListener("change", populatePagedMaker);
});
document.querySelectorAll(".marginUpdate").forEach((mr) => {
document.querySelectorAll(".pagedPreviewer-marginUpdate").forEach((mr) => {
mr.addEventListener("change", populatePagedMaker);
});
document.querySelector(".button-preview").addEventListener("click", populatePagedMaker);
document.querySelector(".button-print").addEventListener("click", print);
document.querySelector(".pagedPreviewer-button-preview").addEventListener("click", populatePagedMaker);
document.querySelector(".pagedPreviewer-button-print").addEventListener("click", print);
function toggleModal(modal) {
modal.classList.toggle("hidden");
document.body.classList.remove("blocked");
if (!document.querySelector(".pagedMaker-modal").classList.contains("hidden")) {
document.body.classList.add("blocked");
modal.classList.toggle("pagedPreviewer-hidden");
document.body.classList.remove("pagedPreviewer-blocked");
if (!document.querySelector(".pagedPreviewer-modal").classList.contains("hidden")) {
document.body.classList.add("pagedPreviewer-blocked");
populatePagedMaker();
}
}
async function populatePagedMaker() {
if (document.querySelector(".previewFrame")) {
document.querySelector(".previewFrame").remove();
if (document.querySelector(".pagedPreviewer-previewFrame")) {
document.querySelector(".pagedPreviewer-previewFrame").remove();
}
createFrame();
await delay(100);
let interfacecss = document.createElement("style");
interfacecss.textContent = pagedmakerCSS_default;
document.querySelector(".previewFrame").contentDocument.head.appendChild(interfacecss);
document.querySelector(".pagedPreviewer-previewFrame").contentDocument.head.appendChild(interfacecss);
if (config_default.stylesheet != void 0) {
let stylesheetConf = document.createElement("link");
stylesheetConf.href = `${config_default.stylesheet}`;
stylesheetConf.rel = "stylesheet";
document.querySelector(".previewFrame").contentDocument.head.appendChild(stylesheetConf);
document.querySelector(".pagedPreviewer-previewFrame").contentDocument.head.appendChild(stylesheetConf);
}
let styleElement = document.querySelector(".previewFrame").contentDocument.createElement("style");
let styleElement = document.querySelector(".pagedPreviewer-previewFrame").contentDocument.createElement("style");
styleElement.textContent = baseStylesheet_default + getMargins() + getPageSize();
console.log(getPageSize);
let articleContent = document.querySelector(".previewFrame").contentDocument.createElement("article");
let articleContent = document.querySelector(".pagedPreviewer-previewFrame").contentDocument.createElement("article");
if (config_default.content == void 0) {
articleContent.innerHTML = document.body.innerHTML;
} else {
articleContent.innerHTML = document.querySelector(`${config_default.content}`).innerHTML;
}
document.querySelector(".previewFrame").contentDocument.body.appendChild(articleContent);
document.querySelector(".pagedPreviewer-previewFrame").contentDocument.body.appendChild(articleContent);
getAllValues(styleElement);
document.querySelector(".previewFrame").contentDocument.head.appendChild(styleElement);
document.querySelector(".pagedPreviewer-previewFrame").contentDocument.head.appendChild(styleElement);
let pagedjsscript = document.createElement("script");
pagedjsscript.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
document.querySelector(".previewFrame").contentDocument.head.appendChild(pagedjsscript);
document.querySelector(".pagedPreviewer-previewFrame").contentDocument.head.appendChild(pagedjsscript);
}
function getAllValues(styleElement) {
let values = "";
selects.forEach((input) => {
if (!input.closest(".item").classList.contains("pagedMaker-hyde")) {
if (!input.closest(".pagedPreviewer-item").classList.contains("pagedMaker-hyde")) {
values = values + getValue(input);
}
});
inputs.forEach((input) => {
if (!input.closest(".item").classList.contains("pagedMaker-hyde")) {
if (!input.closest(".pagedPreviewer-item").classList.contains("pagedMaker-hyde")) {
values = values + getValue(input);
}
});
......@@ -469,7 +463,7 @@ ${config_default.button == void 0 ? '<button class="button-modal">Start pagedjs<
}
function createFrame() {
const pagedMaker = document.createElement("iframe");
pagedMaker.classList.add("previewFrame");
document.querySelector(".preview").appendChild(pagedMaker);
pagedMaker.classList.add("pagedPreviewer-previewFrame");
document.querySelector(".pagedPreviewer-zonePreview").appendChild(pagedMaker);
}
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>example</title>
<script type="module" src="js/main.js"></script>
<link rel="stylesheet" href="css/interface.css">
<script src="js/pagedMaker.js"></script>
</head>
<body>
</body>
\ No newline at end of file
import { Previewer } from "./modules/paged.esm.js";
import { delay, getValue } from "./modules/utils.js";
// const buttonSet = document.querySelector(".preview")
const buttonPrint = document.querySelector(".button-print");
const buttonPreview = document.querySelector(".button-preview");
buttonPrint.addEventListener("click", print);
buttonPreview.addEventListener("click", populateFrameMaker);
// inputs for the style sheet
const inputs = document.querySelectorAll("input");
// create iframe
function createFrame() {
const frameMaker = document.createElement("iframe");
frameMaker.classList.add("previewFrame");
document.querySelector(".rightSide").appendChild(frameMaker);
}
async function populateFrameMaker() {
if (document.querySelector(".previewFrame")) {
document.querySelector(".previewFrame").remove();
}
await delay(100);
let styleElement = document
.querySelector(".previewFrame")
.contentDocument.createElement("style");
styleElement.innerText =
"@media print {body {font-size: var(--fontSize, 12px); background: grey;} @page {background: white; size: 100mm 100mm}}";
let articleContent = document
.querySelector(".previewFrame")
.contentDocument.createElement("article");
articleContent.innerHTML = document.querySelector(".bookContent").innerHTML;
document
.querySelector(".previewFrame")
.contentDocument.body.appendChild(articleContent);
// fetch data of each value:
let values = "";
inputs.forEach((input) => {
values = values + getValue(input);
});
values = `body {${values}}`;
styleElement.innerText = styleElement.innerText + values;
document
.querySelector(".previewFrame")
.contentDocument.head.appendChild(styleElement);
let pagedjsscript = document.createElement("script");
pagedjsscript.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
document