Commit da29702f authored by julientaq's avatar julientaq

controls setup are now modular

parent 29c14a47
......@@ -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="http://localhost:8000/main.js"></script> -->
<script type="module" src="../js/main.js"></script>
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
......
......@@ -5,7 +5,6 @@ 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
......@@ -13,13 +12,9 @@ import config from "./modules/config.js";
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 === document.querySelector(`${pagedMakerConfig.button}`) ||
e.target.classList.contains("pagedPreviewer-button-close")
) {
toggleModal(document.querySelector(".pagedPreviewer-modal"));
......@@ -162,19 +157,15 @@ function getAllValues(styleElement) {
// 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
......
......@@ -25,7 +25,7 @@ body {
? "font-size: var(--fontSize, 14px);"
: ""
}
${config.features.includes("fontLineHeight")
${config.features.includes("lineHeight")
? "line-height: var(--lineHeight, 1.4);"
: ""
}
......
......@@ -2,18 +2,18 @@ let config
//hooks are not ready yet
export default config = window.pagedMakerConfig || {
content: undefined,
content: "body",
stylesheet: undefined,
hooks: undefined,
button: undefined,
button: '.pagedPreviewer-button-modal',
features: [
"pagedSize",
"pagedMargins",
"fontFamily",
"fontSize",
"fontLineHeight",
"backgroundColor",
"textColor"
"pageSize",
"pageMargins",
"fontFamily",
"fontSize",
"lineHeight",
"backgroundColor",
"textColor"
],
uicolor: undefined,
};
......
import pageSize from './features/pageSize.js'
import pageMargins from "./features/pageMargins.js"
import fontFamily from './features/fontFamily.js'
import fontSize from './features/fontSize.js'
import lineHeight from './features/lineHeight.js'
let featureList = [fontFamily, pageSize, pageMargins, fontSize, lineHeight];
export default featureList;
class Control {
constructor(name, render) {
this.name = name;
this.render = render;
}
updateControl() {
this.addEventListener("change", console.log(value));
}
}
function alligator() {
// localize 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);
});
// button to restart the preview (if bug)
document
.querySelector(".pagedPreviewer-button-preview")
.addEventListener("click", populatePagedMaker);
document
.querySelector(".pagedPreviewer-button-print")
.addEventListener("click", print);
}
export { Control, alligator };
\ No newline at end of file
import {Control} from './class.js'
let fontFamily = new Control;
fontFamily.name = 'fontFamily';
fontFamily.render = `
<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>`
export default fontFamily;
import {Control} from "./class.js";
let fontSize = new Control();
fontSize.name = "fontSize";
fontSize.render = `
<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">
`;
export default fontSize;
import {Control} from './class.js'
let lineHeight = new Control;
lineHeight.name = 'lineHeight';
lineHeight.render = ` <div class="pagedPreviewer-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="3" >
</div>`;
export default lineHeight;
import {Control} from './class.js'
let pageMargins = new Control;
pageMargins.name = 'pageMargins';
pageMargins.render = `<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">`
export default pageMargins;
import {Control} from './class.js'
let pageSize = new Control;
pageSize.name = 'pageSize';
pageSize.render = `<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>`;
export default pageSize;
import config from './config.js';
import config from "./config.js";
import featuresList from "./features.js";
import logo from "./pagedjsLogo.js";
// dom to modify the output
let features = "";
export default `
${(config.button == undefined) ? '<button class="pagedPreviewer-button-modal">Start pagedjs</button>' : ''}
config.features.forEach((feat) => {
featuresList.forEach((module) => {
if (module.name == feat) {
features += module.render;
} else {
// console.log(`${feat} is not existing in the list of modules`);
}
});
});
export default `
${
config.button == ".pagedPreviewer-button-modal"
? '<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>
<figure class="pagedPreviewer-logo">
${logo}
<figcaption>paged.js <span>previewer</span></figcaption>
</figure>
${features}
<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>
<button class="pagedPreviewer-button-print">print</button>
</div>
<div class="pagedPreviewer-item">
<button class="pagedPreviewer-button-close">close</button>
</div>
<button class="pagedPreviewer-button-preview">preview</button>
</div>
<div class="pagedPreviewer-item">
<button class="pagedPreviewer-button-close">close</button>
</div>
</div>
<div class="pagedPreviewer-zonePreview">
</iframe>
</div>
<div class="pagedPreviewer-zonePreview"></div>
</div>`;
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