Commit 72796966 authored by julientaq's avatar julientaq
Browse files

fix when the features override the controls

parent 829262e2
......@@ -4,7 +4,7 @@ body {
}
p {
background: orange;
/* background: orange; */
}
@page {
......
@page {
}
body {
}
\ No newline at end of file
This diff is collapsed.
......@@ -69,14 +69,18 @@ body, html {
}
body {
font-size: var(--fontSize, 14px);
font-family: var(--fontBody, sans-serif);
line-height: var(--lineHeight, 1.4);
color: var(--body-color);
${pagedMakerConfig.features.includes("fontFamily") ? "font-family: var(--fontBody, sans-serif);" : ""}
${pagedMakerConfig.features.includes("fontSize") ? "font-size: var(--fontSize, 14px);" : ""}
${pagedMakerConfig.features.includes("fontLineHeight") ? "line-height: var(--lineHeight, 1.4);" : ""}
${pagedMakerConfig.features.includes("textColor") ? "color: var(--body-color);" : ""}
}
@page {
background: var(--background-color);
@page {
${pagedMakerConfig.features.includes("backgroundColor") ? "background: var(--background-color);" : ""}
@bottom-right{
content: counter(page) "/" counter(pages);
}
......@@ -423,12 +427,6 @@ ${config_default.button == void 0 ? '<button class="pagedPreviewer-button-modal"
let interfacecss = document.createElement("style");
interfacecss.textContent = pagedmakerCSS_default;
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(".pagedPreviewer-previewFrame").contentDocument.head.appendChild(stylesheetConf);
}
let styleElement = document.querySelector(".pagedPreviewer-previewFrame").contentDocument.createElement("style");
styleElement.textContent = baseStylesheet_default + getMargins() + getPageSize();
console.log(getPageSize);
......@@ -441,6 +439,12 @@ ${config_default.button == void 0 ? '<button class="pagedPreviewer-button-modal"
document.querySelector(".pagedPreviewer-previewFrame").contentDocument.body.appendChild(articleContent);
getAllValues(styleElement);
document.querySelector(".pagedPreviewer-previewFrame").contentDocument.head.appendChild(styleElement);
if (config_default.stylesheet != void 0) {
let stylesheetConf = document.createElement("link");
stylesheetConf.href = `${config_default.stylesheet}`;
stylesheetConf.rel = "stylesheet";
document.querySelector(".pagedPreviewer-previewFrame").contentDocument.head.appendChild(stylesheetConf);
}
let pagedjsscript = document.createElement("script");
pagedjsscript.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
document.querySelector(".pagedPreviewer-previewFrame").contentDocument.head.appendChild(pagedjsscript);
......@@ -449,16 +453,18 @@ ${config_default.button == void 0 ? '<button class="pagedPreviewer-button-modal"
let values = "";
selects.forEach((input) => {
if (!input.closest(".pagedPreviewer-item").classList.contains("pagedMaker-hyde")) {
values = values + getValue(input);
if (!input.classList.contains("pagedSize")) {
values = values + getValue(input);
}
}
});
inputs.forEach((input) => {
if (!input.closest(".pagedPreviewer-item").classList.contains("pagedMaker-hyde")) {
values = values + getValue(input);
console.log(values);
}
});
values = `body {${values}}`;
console.log(styleElement);
return styleElement.textContent = styleElement.textContent + values;
}
function createFrame() {
......
......@@ -5,6 +5,7 @@ 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
......@@ -88,17 +89,8 @@ async function populatePagedMaker() {
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.head.appendChild(interfacecss);
// 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(".pagedPreviewer-previewFrame")
.contentDocument.head.appendChild(stylesheetConf);
}
// create a style element
let styleElement = document
......@@ -109,11 +101,14 @@ async function populatePagedMaker() {
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;
......@@ -129,7 +124,6 @@ async function populatePagedMaker() {
.contentDocument.body.appendChild(articleContent);
// fetch data of each value:
getAllValues(styleElement);
// push the style element to the head of the iframe
......@@ -137,6 +131,20 @@ async function populatePagedMaker() {
.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";
......@@ -150,10 +158,14 @@ 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")) {
values = values + getValue(input);
if(!input.classList.contains("pagedSize")) {
values = values + getValue(input);
}
}
});
......@@ -161,14 +173,14 @@ function getAllValues(styleElement) {
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
console.log(styleElement);
return (styleElement.textContent = styleElement.textContent + values);
}
......
......@@ -15,14 +15,33 @@ body, html {
}
body {
font-size: var(--fontSize, 14px);
font-family: var(--fontBody, sans-serif);
line-height: var(--lineHeight, 1.4);
color: var(--body-color);
${pagedMakerConfig.features.includes("fontFamily")
? "font-family: var(--fontBody, sans-serif);"
: ""
}
${pagedMakerConfig.features.includes("fontSize")
? "font-size: var(--fontSize, 14px);"
: ""
}
${pagedMakerConfig.features.includes("fontLineHeight")
? "line-height: var(--lineHeight, 1.4);"
: ""
}
${pagedMakerConfig.features.includes("textColor")
? "color: var(--body-color);"
: ""
}
}
@page {
background: var(--background-color);
@page {
${pagedMakerConfig.features.includes("backgroundColor")
? "background: var(--background-color);"
: ""
}
@bottom-right{
content: counter(page) "/" counter(pages);
}
......
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