Commit c5d1c42b authored by julientaq's avatar julientaq
Browse files

add support for different css properties

parent 60d06bcd
body {
.modal {
font-family: sans-serif;
font-size: 0.9em;
display: grid;
position: fixed;
margin: auto;
height: 100vh;
width: 100vw;
/* border: 2px solid black; */
grid-template-columns: 1fr 5fr;
padding: 2em;
background: white;
z-index: 99999999999999999999999999999;
top:0;
left:0;
background: white;
}
body {
display: grid;
grid-template-areas:
"interface interface interface"
"menu preview preview";
.modal .logo {
height: 40px;
}
.close {
position: absolute;
right: 2em;
top: 2em;
}
.hidden {
display: none;
}
nav {
grid-area: interface;
input::after {
content: attr(value);
display: inline-block;
background: orange;
color: white;
}
.interface {
.modal .item {
margin-bottom: 2em;
}
.leftSide {
grid-area: menu;
.modal label {
text-transform: uppercase;
display: block;
}
.preview {
grid-area: preview;
}
iframe {
border: 3px solid black;
height: 400px;
width: 400px;
background: red;
}
\ No newline at end of file
height: 100%;
width: 100%;
}
/* Change the look */
:root{
--color-background: transparent;
--color-pageBox: #666;
--color-paper: white;
--color-marginBox: grey;
}
/* 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
/* reset */
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
font-weight: normal;
}
ol, ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
@page {
size: A5;
}
@media print {
body {
}
p {
font-size: var(--fontsize);
}
}
<!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">
</head>
<body>
</body>
\ No newline at end of file
<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>
This diff is collapsed.
import { Previewer } from "./modules/paged.esm.js";
import { delay, getValue } from "./modules/utils.js";
// import { Previewer } from "./modules/paged.esm.js";
import { delay, getValue, print } from "./modules/utils.js";
import styles from "./modules/baseStylesheet.js";
// const buttonSet = document.querySelector(".preview")
// get config
// define pagedmaker config
// start app
const modalButton = document.querySelector(".button-modal");
const modal = document.querySelector(".modal");
const close = document
.querySelector(".close")
.addEventListener("click", toggleModal);
modalButton.addEventListener("click", toggleModal);
function toggleModal() {
modal.classList.toggle("hidden");
if (!document.querySelector(".modal").classList.contains("hidden")) {
populatepagedMaker();
}
}
// Print & preview
// ---------------------------- //
const buttonPrint = document.querySelector(".button-print");
const buttonPreview = document.querySelector(".button-preview");
buttonPrint.addEventListener("click", print);
buttonPreview.addEventListener("click", populateFrameMaker);
buttonPreview.addEventListener("click", populatepagedMaker);
// inputs for the style sheet
const inputs = document.querySelectorAll("input");
const inputs = document.querySelectorAll(".cssVarUpdate");
const selects = document.querySelectorAll("select");
inputs.forEach((input) => {
input.addEventListener("change", populatepagedMaker);
});
selects.forEach((select) => {
select.addEventListener("change", populatepagedMaker);
});
// create iframe
function createFrame() {
const frameMaker = document.createElement("iframe");
frameMaker.classList.add("previewFrame");
document.querySelector(".rightSide").appendChild(frameMaker);
const pagedMaker = document.createElement("iframe");
pagedMaker.classList.add("previewFrame");
document.querySelector(".preview").appendChild(pagedMaker);
}
async function populateFrameMaker() {
async function populatepagedMaker() {
if (document.querySelector(".previewFrame")) {
document.querySelector(".previewFrame").remove();
}
createFrame();
await delay(100);
// add a pagedjs basic stylesheet
let interfacecss = document.createElement("link");
interfacecss.href = "css/pagedjs-preview.css";
interfacecss.rel = "stylesheet";
document
.querySelector(".previewFrame")
.contentDocument.head.appendChild(interfacecss);
// get styles from the input and update those
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; }}";
console.log(getMargins());
styleElement.innerText = styles;
styleElement.innerText = styleElement.innerText + getMargins() + getPageSize();
console.log(styleElement);
// get content to paginate
let articleContent = document
.querySelector(".previewFrame")
.contentDocument.createElement("article");
articleContent.innerHTML = document.querySelector(".bookContent").innerHTML;
articleContent.innerHTML = document.querySelector(
`${pagedMaker.content}`
).innerHTML;
document
.querySelector(".previewFrame")
......@@ -49,15 +97,19 @@ async function populateFrameMaker() {
let values = "";
selects.forEach((input) => {
values = values + getValue(input);
});
inputs.forEach((input) => {
console.log(input.dataset);
values = values + getValue(input);
});
values = `body {${values}}`;
console.log(values);
styleElement.innerText = styleElement.innerText + values;
console.log(styleElement);
document
.querySelector(".previewFrame")
......@@ -70,28 +122,20 @@ async function populateFrameMaker() {
.contentDocument.body.appendChild(pagedjsscript);
}
// handling sliders
document.querySelectorAll(".marginUpdate").forEach((mr) => {
mr.addEventListener("change", populatepagedMaker);
});
function handleUpdate() {
const suffix = this.dataset.sizing || "";
document.documentElement.style.setProperty(
`--${this.name}`,
this.value + suffix
);
}
inputs.forEach((input) => input.addEventListener("change", handleUpdate));
inputs.forEach((input) => input.addEventListener("mousemove", handleUpdate));
// To do
// Find a way to update the style elements
// Find a way to update the content
function print(e) {
e.preventDefault();
var t = document.querySelector("iframe").contentWindow;
t.focus(), t.print();
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;
}
\ No newline at end of file
export default `
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;1,400;1,500&display=swap');
@media print {
body, html {
margin: 0;
padding: 0;
}
body {
font-size: var(--fontSize, 10px);
font-family: var(--fontBody);
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;
}
}
`;
......@@ -16,5 +16,12 @@ async function delay(time) {
}
export {delay, getValue};
function print(e) {
e.preventDefault();
var t = document.querySelector(".previewFrame").contentWindow;
t.focus(), t.print();
}
export {delay, getValue, print};
class zooming extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
afterRendered(pages) {
createInterface();
var ctm = [1, 0, 0, 1, 0, 0];
function scalePage(s, x, y, cx, cy) {
if (!s) s = sr;
if (typeof x == "undefined" || typeof y == "undefined") {
var c = getCenterPos();
x = c[0];
y = c[1];
}
if (typeof cx == "undefined" || typeof cy == "undefined") {
var c = getCenterPos(true);
cx = c[0];
cy = c[1];
}
var im = getInverseMatrix(ctm);
var ox = im[0] * x + im[2] * y + im[4];
var oy = im[1] * x + im[3] * y + im[5];
let pages = document.querySelector(".pagedjs_pages");
if (pages) {
let wSize = getScrollPage();
let pWidth = pages.offsetWidth;
let pHeight = pages.offsetHeight;
pWidth *= s;
pHeight *= s;
ctm[0] = ctm[3] = s;
if (pWidth < wSize[0]) ctm[4] = (wSize[0] - pWidth) / 2;
else ctm[4] = 0;
if (pHeight < wSize[1]) ctm[5] = (wSize[1] - pHeight) / 2;
else ctm[5] = 0;
let ps = pages.style;
ps.transform = `matrix(${ctm[0]},${ctm[1]},${ctm[2]},${ctm[3]},${ctm[4]},${ctm[5]})`;
ps.margin = "0px";
ps.padding = "0px";
let bs = document.body.style;
bs.width = `${Math.max(pWidth, wSize[0])}px`;
bs.height = `${Math.max(pHeight, wSize[1])}px`;
bs.margin = "0px";
bs.padding = "0px";
let srs = getScrollRange();
let sps = getScrollPage();
let cs = getClientSize();
let mx = srs[0] - sps[0];
let my = srs[1] - sps[1];
if (mx > 0) {
let nx = ctm[0] * ox + ctm[2] * oy + ctm[4];
let px = (sps[0] / cs[0]) * cx;
nx -= px;
if (nx > 0) document.documentElement.scrollLeft = nx;
}
if (my > 0) {
let ny = ctm[1] * ox + ctm[3] * oy + ctm[5];
let py = (sps[1] / cs[1]) * cy;
ny -= py;
if (ny > 0) document.documentElement.scrollTop = ny;
}
}
let editable = document.querySelectorAll(
".pagedjs_page .pagedjs_area > div"
);
let zv = document.getElementById("zoomValue");
zv.innerHTML =
"Pages: " + editable.length + ", Zoom: " + Math.round(s * 100) + "%";
}
var sr = 1.0;
function pageZoomIn() {
if (sr < 1.5) sr += 0.1;
else if (sr < 3.0) sr += 0.5;
else if (sr < 5.0) sr += 1.0;
else return false;
return true;
}
function pageZoomOut() {
if (sr > 3.0) sr -= 1.0;
else if (sr > 1.51) sr -= 0.5;
else if (sr > 0.25) sr -= 0.1;
else return false;
return true;
}
function getInverseMatrix(m) {
//please refer to: https://github.com/deoxxa/transformation-matrix-js/blob/master/src/matrix.js
var dt = m[0] * m[3] - m[1] * m[2];
var a = m[3] / dt;
var b = -m[1] / dt;
var c = -m[2] / dt;
var d = m[0] / dt;
var e = (m[2] * m[5] - m[3] * m[4]) / dt;
var f = -(m[0] * m[5] - m[1] * m[4]) / dt;
return [a, b, c, d, e, f];
}
function getBrowserZoom() {
return window.outerWidth / window.innerWidth;
}
function getScrollRange() {
var sx,
sy,
b = document.body,
r = document.documentElement;
sx = r.scrollWidth || b.scrollWidth || b.offsetWidth || 0;
sy = r.scrollHeight || b.scrollHeight || b.offsetHeight || 0;
return [sx, sy];
}
function getScrollPage() {
var sx,
sy,
r = document.documentElement;
sx = r.clientWidth || r.offsetWidth;
sy = r.clientHeight || r.offsetHeight;
return [sx, sy];
}
function getScrollPos() {
if (window.pageYOffset != undefined) return [pageXOffset, pageYOffset];
var sx,
sy,
r = document.documentElement,
b = document.body;
sx = r.scrollLeft || b.scrollLeft || 0;
sy = r.scrollTop || b.scrollTop || 0;
return [sx, sy];
}
function getCenterPos(c) {
if (!c) {
var p = getScrollPage();
var o = getScrollPos();
return [p[0] / 2 + o[0], p[1] / 2 + o[1]];
}
let cs = getClientSize();
return [cs[0] / 2, cs[1] / 2];
}
function getClientSize() {
var sx,
sy,
r = document.documentElement,
b = window,
s = screen;
sx = r.clientWidth || b.innerWidth || s.width;
sy = r.clientHeight || b.innerHeight || s.height;
return [sx, sy];
}
function preventEvent(e) {
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
function onKeyDown(e) {
if (
e.ctrlKey == true &&
(e.keyCode == 61 ||
e.keyCode == 107 ||
e.keyCode == 109 ||
e.keyCode == 173 ||
e.keyCode == 187 ||
e.keyCode == 189)
) {
preventEvent(e);
if (e.keyCode == 61 || e.keyCode == 107 || e.keyCode == 187) {
if (!pageZoomIn()) return false;
} else {
if (!pageZoomOut()) return false;
}
scalePage();
return false;
}
}
function onMouseWheel(e) {
if (e.ctrlKey == true) {
preventEvent(e);
if (e.wheelDelta > 0) {