Commits (8)
test-hybrid
test-hybrid.html
node_modules
\ No newline at end of file
node_modules
demo/experimentIframeInOutput.html
README
PagedPreview 2.0 Roadmap
Paged preview is a pagedmedia previewer for the browser.
PagedPreviewer will create a modal that will contains on it’s left a series of control, and on the right, the preview of the printed page.
- The styles will be the one used from the styles found on the page (`link` and `style` elements, etc.)
- The content will be cloned from the body element of the web page the script will run on.
The available controls are set as modules.
1. create a module
2. run Paged preview
body {color: purple};
\ No newline at end of file
......@@ -4,8 +4,7 @@
}
@page {
size: 20mm 20mm;
@bottom-center {
content: string(h2title);
......@@ -29,4 +28,5 @@
}
body {
color: orange;
}
\ No newline at end of file
/* reset */
@page {
background: orange;
}
body {
color: red;
}
html {
box-sizing: border-box;
font-size: 16px;
......
......@@ -5,8 +5,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>example</title>
<script type="module" src="http://localhost:8000/main.js"></script>
<link rel="stylesheet" href="../css/reset.css">
<script type="module" src="../scripts/main.js"></script>
<!-- <script type="module" src="../jsOld/main2.js"></script> -->
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
......
document.querySelector('iframe').srcdoc = `
<p>lol</p><script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
`;
document.querySelector('iframe').srcdoc = `
<p>fun</p>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
`;
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="http://www.youtube.fr" frameborder="1"></iframe>
<template><p>fun</p></template>
<!-- <script src="iframe.js"></script> -->
</body>
</html>
\ No newline at end of file
......@@ -19,7 +19,7 @@
text-transform: uppercase;
color: white;
padding:2em;
position: fixed;
position: fixed;
top:0;
left: 0;
}
......
import pagedMakerConfig from "./modules/config.js";
import { delay, print } from "./modules/utils.js";
import { getValue, getMargins, getPageSize } from "./modules/getValues.js";
import styles from "./modules/baseStylesheet.js";
import pagedmakerCSS from "./modules/pagedmakerCSS.js";
import uicss from "./modules/uicss.js";
import ui from "./modules/ui.js";
import config from "./modules/config.js";
// create the UI and push it to the browser
// trying event delegation
window.onload = document.body.insertAdjacentHTML("afterbegin", ui);
document.querySelector("body").addEventListener("click", function (e) {
if (pagedMakerConfig.button != undefined) {
if (e.target === document.querySelector(`${pagedMakerConfig.button}`) ) {
toggleModal(document.querySelector(".pagedPreviewer-modal"));
}
}
if (
e.target.classList.contains("pagedPreviewer-button-modal") ||
e.target.classList.contains("pagedPreviewer-button-close")
) {
toggleModal(document.querySelector(".pagedPreviewer-modal"));
}
});
// add styles for the preview box
const uicsscontent = document.createElement("style");
uicsscontent.textContent = 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);
});
//reload on value changes in the selects
selects.forEach((select) => {
select.addEventListener("change", populatePagedMaker);
});
// reload when changing the margins
document.querySelectorAll(".pagedPreviewer-marginUpdate").forEach((mr) => {
mr.addEventListener("change", populatePagedMaker);
});
document
.querySelector(".pagedPreviewer-button-preview")
.addEventListener("click", populatePagedMaker);
document.querySelector(".pagedPreviewer-button-print").addEventListener("click", print);
// show hide modal
function toggleModal(modal) {
modal.classList.toggle("pagedPreviewer-hidden");
document.body.classList.remove("pagedPreviewer-blocked");
if (
!document.querySelector(".pagedPreviewer-modal").classList.contains("pagedPreviewer-hidden")
) {
document.body.classList.add("pagedPreviewer-blocked");
populatePagedMaker();
}
}
// populate the iframe
async function populatePagedMaker() {
// remove the previous iframe
if (document.querySelector(".pagedPreviewer-previewFrame")) {
document.querySelector(".pagedPreviewer-previewFrame").remove();
}
// create the iframe
createFrame();
// wait for the iframe to load the empty src before adding the content
await delay(100);
// add a pagedjs basic stylesheet for previewing the pages.
// TO DO: add a way to load a basic stylesheet
let interfacecss = document.createElement("style");
interfacecss.textContent = pagedmakerCSS;
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.head.appendChild(interfacecss);
// create a style element
let styleElement = document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.createElement("style");
// populate the style elements that contains the updated styles
styleElement.textContent = styles + getMargins() + getPageSize();
console.log(getPageSize);
// create a article element to paginate
let articleContent = document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.createElement("article");
//find the content element from the config or use the body if undefined
if (pagedMakerConfig.content == undefined) {
articleContent.innerHTML = document.body.innerHTML;
} else {
articleContent.innerHTML = document.querySelector(
`${pagedMakerConfig.content}`
).innerHTML;
}
// populate the article element of the iframe with the element found in the config
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.body.appendChild(articleContent);
// fetch data of each value:
getAllValues(styleElement);
// push the style element to the head of the iframe
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.head.appendChild(styleElement);
// import the css file coming from the configuration file (after the other styles)
if (pagedMakerConfig.stylesheet != undefined) {
// import the css file
let stylesheetConf = document.createElement("link");
stylesheetConf.href = `${pagedMakerConfig.stylesheet}`;
stylesheetConf.rel = "stylesheet";
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.head.appendChild(stylesheetConf);
}
// fetch and run pagedjs in the iframe
let pagedjsscript = document.createElement("script");
pagedjsscript.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.head.appendChild(pagedjsscript);
}
function getAllValues(styleElement) {
// create an empty string value
let values = "";
//add pageSize
// populate the value with the data for each select
selects.forEach((input) => {
if (!input.closest(".pagedPreviewer-item").classList.contains("pagedMaker-hyde")) {
if(!input.classList.contains("pagedSize")) {
values = values + getValue(input);
}
}
});
// populate the value with the data for each inputs
inputs.forEach((input) => {
if (!input.closest(".pagedPreviewer-item").classList.contains("pagedMaker-hyde")) {
values = values + getValue(input);
console.log(values);
}
});
// set the css properties to the values
values = `body {${values}}`;
// populate the styles element with all the values
return (styleElement.textContent = styleElement.textContent + values);
}
// create iframe
function createFrame() {
const pagedMaker = document.createElement("iframe");
pagedMaker.classList.add("pagedPreviewer-previewFrame");
document.querySelector(".pagedPreviewer-zonePreview").appendChild(pagedMaker);
}
let config
//hooks are not ready yet
export default config = window.pagedMakerConfig || {
content: undefined,
stylesheet: undefined,
hooks: undefined,
button: undefined,
features: [
"pagedSize",
"pagedMargins",
"fontFamily",
"fontSize",
"fontLineHeight",
"backgroundColor",
"textColor"
],
uicolor: undefined,
};
function getValue(input) {
const suffix = input.dataset.sizing || "";
return `${input.dataset.cssProp}: ${input.value}${suffix};`;
}
function getMargins() {
let marginObject = "@page { margin: ";
document.querySelectorAll(".pagedPreviewer-marginUpdate").forEach((mr) => {
marginObject = marginObject + ` ${mr.value + mr.dataset.sizing}`;
});
marginObject = marginObject + "}";
return marginObject;
}
function getPageSize() {
let pageSize = `@page { size: ${document.querySelector("select.pagedSize").value}; }`;
return pageSize;
}
// this is not usable yet, as 3 margin-boxes are hidden
function getMarginBoxElement() {
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.addEventListener("click", function (e) {
// if (e.target.classList.contains("pagedjs_margin-top-left-corner")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-top-right-corner")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-bottom-left-corner")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-bottom-right-corner")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-top-left")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-top-center")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-top-right")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-bottom-left")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-bottom-center")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-bottom-right")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-left-top")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-left-middle")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-left-bottom")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-right-top")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-right-middle")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-right-bottom")) {
// console.log(e.target);
// }
});
}
export { getValue, getMargins, getPageSize, getMarginBoxElement};
This diff is collapsed.
import config from './config.js';
import logo from "./pagedjsLogo.js";
// dom to modify the output
export default `
${(config.button == undefined) ? '<button class="pagedPreviewer-button-modal">Start pagedjs</button>' : ''}
<div class="pagedPreviewer-modal pagedPreviewer-hidden">
<div class="pagedPreviewer-form">
<figure class="pagedPreviewer-logo">
${logo}
<figcaption>paged.js <span>previewer</span></figcaption>
</figure>
<div class="pagedPreviewer-item pagesize ${
config.features.includes("pagedSize")
? ""
: "pagedMaker-hyde"
}">
<label class="pagedSize" 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="6in 9in">atla</option>
<option value="200mm 200mm">20cm × 20cm</option>
</select>
</div>
<div class="pagedPreviewer-item margins ${
config.features.includes("pagedMargins")
? ""
: "pagedMaker-hyde"
}">
<label for="marginTop">margin-top</label>
<input class="pagedPreviewer-marginUpdate" id="margin-top" name="marginTop" value="10" data-sizing="mm">
<label for="marginRight">margin-right</label>
<input class="pagedPreviewer-marginUpdate" id="margin-right" name="marginRight" value="10" data-sizing="mm">
<label for="marginBottom">margin-bottom</label>
<input class="pagedPreviewer-marginUpdate" id="margin-bottom" name="marginBottom" value="10" data-sizing="mm">
<label for="marginLeft">margin-left</label>
<input class="pagedPreviewer-marginUpdate" id="margin-left" name="marginLeft" value="10" data-sizing="mm">
</div>
<div class="pagedPreviewer-item ${
config.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>
<option value="'Courier Prime'">Courier Prime</option>
<option value="sans-serif">sans serif</option>
</select>
</div>
<div class="pagedPreviewer-item ${
config.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="pagedPreviewer-item ${
config.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="pagedPreviewer-item ${
config.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="pagedPreviewer-item ${
config.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="pagedPreviewer-item">
<button class="pagedPreviewer-button-preview">preview</button>
</div>
<div class="pagedPreviewer-item">
<button class="pagedPreviewer-button-print">print</button>
</div>
<div class="pagedPreviewer-item">
<button class="pagedPreviewer-button-close">close</button>
</div>
</div>
<div class="pagedPreviewer-zonePreview"></div>
</div>`;
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(".pagedPreviewer-previewFrame").contentWindow;
t.focus(), t.print();
}
export {delay, 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) {
if (!pageZoomIn()) return false;
} else {
if (!pageZoomOut()) return false;
}
scalePage(sr, e.pageX, e.pageY, e.clientX, e.clientY);
return false;
}
}
!(function () {
window.addEventListener("mousewheel", onMouseWheel, { passive: false });
document.body.addEventListener("keydown", onKeyDown, { passive: false });
})();
}
}
Paged.registerHandlers(zooming);
function createInterface() {
const status = document.createElement("div");
status.classList.add("statusBar");
const zoomValue = document.createElement("span");
zoomValue.id = "zoomValue";
status.appendChild(zoomValue);
document.body.appendChild(status);
}
......@@ -4,10 +4,145 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@babel/polyfill": {
"version": "7.12.1",
"resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.12.1.tgz",
"integrity": "sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==",
"requires": {
"core-js": "^2.6.5",
"regenerator-runtime": "^0.13.4"
}
},
"@babel/runtime": {
"version": "7.12.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
"integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"clear-cut": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/clear-cut/-/clear-cut-2.0.2.tgz",
"integrity": "sha1-CC2zLsqkSjWKewhoUv4dVIC77tE="
},
"core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
},
"css-tree": {
"version": "1.0.0-alpha.39",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.39.tgz",
"integrity": "sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==",
"requires": {
"mdn-data": "2.0.6",
"source-map": "^0.6.1"
}
},
"d": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
"integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
"requires": {
"es5-ext": "^0.10.50",
"type": "^1.0.1"
}
},
"es5-ext": {
"version": "0.10.53",
"resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
"integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==",
"requires": {
"es6-iterator": "~2.0.3",
"es6-symbol": "~3.1.3",
"next-tick": "~1.0.0"
}
},
"es6-iterator": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
"integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
"requires": {
"d": "1",
"es5-ext": "^0.10.35",
"es6-symbol": "^3.1.1"
}
},
"es6-symbol": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
"integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
"requires": {
"d": "^1.0.1",
"ext": "^1.1.2"
}
},
"esbuild": {
"version": "0.8.31",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.8.31.tgz",
"integrity": "sha512-7EIU0VdUxltwivjVezX3HgeNzeIVR1snkrAo57WdUnuBMykdzin5rTrxwCDM6xQqj0RL/HjOEm3wFr2ijHKeaA=="
},
"event-emitter": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
"integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
"requires": {
"d": "1",
"es5-ext": "~0.10.14"
}
},
"ext": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz",
"integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
"requires": {
"type": "^2.0.0"
},
"dependencies": {
"type": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/type/-/type-2.1.0.tgz",
"integrity": "sha512-G9absDWvhAWCV2gmF1zKud3OyC61nZDwWvBL2DApaVFogI07CprggiQAOOjvp2NRjYWFzPyu7vwtDrQFq8jeSA=="
}
}
},
"mdn-data": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.6.tgz",
"integrity": "sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA=="
},
"next-tick": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
},
"pagedjs": {
"version": "0.1.43",
"resolved": "https://registry.npmjs.org/pagedjs/-/pagedjs-0.1.43.tgz",
"integrity": "sha512-aShTeMKnF64b1ywLBt/yv2ZCw6ypxsmbRchJ/0Fd3qOodqywPLofyKsCrkgZnWtQGRZ2KeBLO+zv0r3oKprPcQ==",
"requires": {
"@babel/polyfill": "^7.10.1",
"@babel/runtime": "^7.10.2",
"clear-cut": "^2.0.2",
"css-tree": "1.0.0-alpha.39",
"event-emitter": "^0.3.5"
}
},
"regenerator-runtime": {
"version": "0.13.7",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
},
"type": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
"integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
}
}
}
......@@ -4,7 +4,8 @@
"description": "A print css previewer based on top of pagedjs",
"main": "js/main.js",
"dependencies": {
"esbuild": "^0.8.31"
"esbuild": "^0.8.31",
"pagedjs": "^0.1.43"
},
"devDependencies": {},
"scripts": {
......
// create button
import { createUI } from "./src/createUI.js";
import { createPreview } from "./src/preview/createPreview.js";
createUI();
let frame = document.querySelector('.pagedPreviewer-frame');
createPreview(frame);
let config = window.pagedMakerConfig || {
content: 'body',
stylesheet: undefined,
loadHostCSS: true,
hooks: undefined,
button: ".pagedPreviewer-button-modal",
features: [
"pageSize",
"pageMargins",
"fontFamily",
"fontSize",
"fontLineHeight",
"backgroundColor",
"textColor",
],
uicolor: undefined,
};
export default config
\ No newline at end of file