fix when the features override the controls

demo/demo.css → demo/css/demo.css

@@ -4,7 +4,7 @@ body {
 }
 
 p {
-    background: orange;
+    /* background: orange; */
 }
 
 @page {

demo/css/print.css

+@page {
+}
+ 
+
+body {
+}
\ No newline at end of file

dist/pagedPreviewer.js

@@ -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() {

js/main.js

@@ -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);
 }
 

js/modules/baseStylesheet.js

@@ -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);
     }