Commit b283ae3b authored by julientaq's avatar julientaq
Browse files

add config system: override interface from DOM

parent fdba6eb0
@body {
color: purple;
}
\ No newline at end of file
(() => {
// js/modules/config.js
var pagedMakerConfig2 = window.pagedMakerConfig || {
content: void 0,
stylesheet: void 0,
hooks: void 0,
features: [
"pagedSize",
"pagedMargins",
"fontFamily",
"fontSize",
"fontLineHeight",
"backgroundColor"
],
uicolor: void 0
};
// js/modules/utils.js
async function delay(time) {
return new Promise((resolve, reject) => {
......@@ -51,19 +67,20 @@ body, html {
}
body {
font-size: var(--fontSize, 10px);
font-family: var(--fontBody, serif);
line-height: var(--lineHeight, 1.2);
font-size: var(--fontSize, 14px);
font-family: var(--fontBody, sans-serif);
line-height: var(--lineHeight, 1.4);
}
@page {
background: var(--background-color, white);
@bottom-right{
content: counter(page) "/" counter(pages);
}
}
h1,h2 {
text-transform: uppercase;
border-bottom: 1px solid black;
}
......@@ -168,9 +185,8 @@ h1,h2 {
.modal {
font-family: "Jost";
font-weight: 200;
font-family: sans-serif;
font-weight: 400;
font-size: 0.9em;
display: grid;
position: fixed;
......@@ -187,7 +203,6 @@ h1,h2 {
background: white;
border: 3px solid black;
box-shadow: 0 0 0 10vw rgba(0,0,0,0.6);
overflow-y:scroll;
}
.modal .logo {
......@@ -238,8 +253,13 @@ iframe {
.modal .form {
padding: 2em;
background: lightcyan;
}`;
background: ${pagedMakerConfig2.ui ? pagedMakerConfig2.ui.color : "white"};
}
.pagedMaker-hyde {
display: none;
}
`;
// js/modules/ui.js
var ui_default = `
......@@ -249,33 +269,31 @@ iframe {
<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">
<div class="item pagesize ${pagedMakerConfig.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="200mm 200mm">20cm \xD7 20cm</option>
</select>
</div>
<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 margins ${pagedMakerConfig.features.includes("pagedMargins") ? "" : "pagedMaker-hyde"}">
<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">
<div class="item ${pagedMakerConfig.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>
......@@ -283,17 +301,17 @@ iframe {
<option value="sans-serif">sans serif</option>
</select>
</div>
<div class="item">
<div class="item ${pagedMakerConfig.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">
<div class="item ${pagedMakerConfig.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">
<div class="item ${pagedMakerConfig.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">
......@@ -310,11 +328,6 @@ iframe {
// js/main.js
window.onload = document.body.insertAdjacentHTML("afterbegin", ui_default);
var pagedMakerConfig = {
content: void 0,
stylesheet: void 0,
hooks: void 0
};
document.querySelector("body").addEventListener("click", function(e) {
if (e.target.classList.contains("button-modal") || e.target.classList.contains("close")) {
toggleModal(document.querySelector(".modal"));
......@@ -353,13 +366,19 @@ iframe {
let interfacecss = document.createElement("style");
interfacecss.innerText = pagedmakerCSS_default;
document.querySelector(".previewFrame").contentDocument.head.appendChild(interfacecss);
if (pagedMakerConfig2.stylesheet.length > 1) {
let stylesheetConf = document.createElement("link");
stylesheetConf.href = `${pagedMakerConfig2.stylesheet}`;
stylesheetConf.rel = "stylesheet";
document.querySelector(".previewFrame").contentDocument.head.appendChild(stylesheetConf);
}
let styleElement = document.querySelector(".previewFrame").contentDocument.createElement("style");
styleElement.innerText = baseStylesheet_default + getMargins() + getPageSize();
let articleContent = document.querySelector(".previewFrame").contentDocument.createElement("article");
if (pagedMakerConfig.content == void 0) {
if (pagedMakerConfig2.content == void 0) {
articleContent.innerHTML = document.body.innerHTML;
} else {
articleContent.innerHTML = document.querySelector(`${pagedMakerConfig.content}`).innerHTML;
articleContent.innerHTML = document.querySelector(`${pagedMakerConfig2.content}`).innerHTML;
}
document.querySelector(".previewFrame").contentDocument.body.appendChild(articleContent);
getAllValues(styleElement);
......@@ -371,10 +390,14 @@ iframe {
function getAllValues(styleElement) {
let values = "";
selects.forEach((input) => {
values = values + getValue(input);
if (!input.closest(".item").classList.contains("pagedMaker-hyde")) {
values = values + getValue(input);
}
});
inputs.forEach((input) => {
values = values + getValue(input);
if (!input.closest(".item").classList.contains("pagedMaker-hyde")) {
values = values + getValue(input);
}
});
values = `body {${values}}`;
return styleElement.innerText = styleElement.innerText + values;
......
This diff is collapsed.
......@@ -46,14 +46,12 @@ async function populateFrameMaker() {
let values = "";
inputs.forEach((input) => {
console.log(input.dataset);
values = values + getValue(input);
});
values = `body {${values}}`;
styleElement.innerText = styleElement.innerText + values;
console.log(styleElement);
document
.querySelector(".previewFrame")
......
// import { Previewer } from "./modules/paged.esm.js";
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 uicss from "./modules/uicss.js";
import ui from "./modules/ui.js";
// create the UI and push it to the browser
// trying event delegation
window.onload = document.body.insertAdjacentHTML("afterbegin", ui);
const pagedMakerConfig = {
content: undefined,
stylesheet: undefined,
hooks: undefined
}
document.querySelector("body").addEventListener("click", function (e) {
if (
e.target.classList.contains("button-modal") ||
......@@ -25,7 +26,6 @@ document.querySelector("body").addEventListener("click", function (e) {
}
});
// add styles for the preview box
const uicsscontent = document.createElement("style");
uicsscontent.innerText = uicss;
......@@ -67,10 +67,12 @@ function toggleModal(modal) {
// populate the iframe
async function populatePagedMaker() {
// remove the previous iframe
if (document.querySelector(".previewFrame")) {
document.querySelector(".previewFrame").remove();
}
// create the iframe
createFrame();
// wait for the iframe to load the empty src before adding the content
......@@ -80,14 +82,24 @@ async function populatePagedMaker() {
// TO DO: add a way to load a basic stylesheet
let interfacecss = document.createElement("style");
interfacecss.innerText = pagedmakerCSS;
document
.querySelector(".previewFrame")
.contentDocument.head.appendChild(interfacecss);
// create a style element
// import the css file coming from the configuration file
if (pagedMakerConfig.stylesheet != undefined) {
// import the css file
let stylesheetConf = document.createElement("link");
stylesheetConf.href = `${pagedMakerConfig.stylesheet}`;
stylesheetConf.rel = "stylesheet";
document
.querySelector(".previewFrame")
.contentDocument.head.appendChild(stylesheetConf);
}
// create a style element
let styleElement = document
.querySelector(".previewFrame")
.contentDocument.createElement("style");
......@@ -101,8 +113,7 @@ async function populatePagedMaker() {
.contentDocument.createElement("article");
//find the content element from the config or use the body if undefined
if (pagedMakerConfig.content == undefined ) {
if (pagedMakerConfig.content == undefined) {
articleContent.innerHTML = document.body.innerHTML;
} else {
articleContent.innerHTML = document.querySelector(
......@@ -138,12 +149,16 @@ function getAllValues(styleElement) {
// populate the value with the data for each select
selects.forEach((input) => {
values = values + getValue(input);
if (!input.closest(".item").classList.contains("pagedMaker-hyde")) {
values = values + getValue(input);
}
});
// populate the value with the data for each inputs
inputs.forEach((input) => {
values = values + getValue(input);
if (!input.closest(".item").classList.contains("pagedMaker-hyde")) {
values = values + getValue(input);
}
});
// set the css properties to the values
......
// style for the export that include css variable for the UI;
export 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 {
.modal, .button-modal {
display: none;
......@@ -17,9 +16,9 @@ body, html {
}
body {
font-size: var(--fontSize, 10px);
font-family: var(--fontBody, serif);
line-height: var(--lineHeight, 1.2);
font-size: var(--fontSize, 14px);
font-family: var(--fontBody, sans-serif);
line-height: var(--lineHeight, 1.4);
}
@page {
......
let config
export default config = window.pagedMakerConfig || {
content: undefined,
stylesheet: undefined,
hooks: undefined,
features: [
"pagedSize",
"pagedMargins",
"fontFamily",
"fontSize",
"fontLineHeight",
"backgroundColor",
],
uicolor: undefined,
};
// interface preview with pages
export default `
......
import pagedMakerConfig from './config.js';
// dom to modify the output
export default `
<button class="button-modal">Start pagedjs</button>
......@@ -5,33 +9,43 @@ export default `
<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 × 20cm</option>
</select>
</div>
<div class="item margins">
<div class="item pagesize ${
pagedMakerConfig.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="200mm 200mm">20cm × 20cm</option>
</select>
</div>
<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 margins ${
pagedMakerConfig.features.includes("pagedMargins")
? ""
: "pagedMaker-hyde"
}">
<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">
<div class="item ${
pagedMakerConfig.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>
......@@ -39,17 +53,29 @@ export default `
<option value="sans-serif">sans serif</option>
</select>
</div>
<div class="item">
<div class="item ${
pagedMakerConfig.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">
<div class="item ${
pagedMakerConfig.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">
<div class="item ${
pagedMakerConfig.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">
......
import pagedMakerConfig from './config.js';
export default `
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100&display=swap');
.modal {
font-family: "Jost";
font-weight: 200;
font-family: sans-serif;
font-weight: 400;
font-size: 0.9em;
display: grid;
position: fixed;
......@@ -22,7 +23,6 @@ export default `
background: white;
border: 3px solid black;
box-shadow: 0 0 0 10vw rgba(0,0,0,0.6);
overflow-y:scroll;
}
.modal .logo {
......@@ -73,5 +73,10 @@ iframe {
.modal .form {
padding: 2em;
background: lightcyan;
}`
\ No newline at end of file
background: ${pagedMakerConfig.ui ? pagedMakerConfig.uicolor : "white"};
}
.pagedMaker-hyde {
display: none;
}
`;
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