update to use modules

index.html

@@ -16,6 +16,11 @@
 
         <button class="button-print">print</button>
         <button class="button-preview">preview</button>
+
+        <label for="fontSize">font-size</label>
+        <input name="fontSize" data-css-prop="--fontSize" type="range" min="12" max="20" data-sizing="px">
+
+
     </nav>
 
     <!-- <button>sync</button> -->

js/main.js

-import { Previewer } from "./paged.esm.js";
+import { Previewer } from "./modules/paged.esm.js";
+import { delay, getValue } from "./modules/utils.js";
 
 // const buttonSet = document.querySelector(".preview")
 
@@ -8,53 +9,60 @@ const buttonPreview = document.querySelector(".button-preview");
 buttonPrint.addEventListener("click", print);
 buttonPreview.addEventListener("click", populateFrameMaker);
 
-// let paged = new Previewer();
-
-// buttonSet.addEventListener("click", paginate)
+// inputs for the style sheet
+const inputs = document.querySelectorAll("input");
 
+// create iframe
 function createFrame() {
   const frameMaker = document.createElement("iframe");
   frameMaker.classList.add("previewFrame");
   document.querySelector(".rightSide").appendChild(frameMaker);
 }
 
-async function delay(time) {
-  return new Promise((resolve, reject) => {
-    if (isNaN(time)) {
-      reject(new Error("delay requires a valid number"));
-    } else {
-      setTimeout(resolve, time);
-    }
-  });
-}
-
 async function populateFrameMaker() {
+  if (document.querySelector(".previewFrame")) {
+    document.querySelector(".previewFrame").remove();
+  }
 
-    if (document.querySelector(".previewFrame")) {
-        document.querySelector(".previewFrame").remove();
-    }
-
-  await createFrame();
-  // Add a small delay so the iframe doesnt get 
+  createFrame();
   await delay(100);
 
+
+
   let styleElement = document
     .querySelector(".previewFrame")
     .contentDocument.createElement("style");
   styleElement.innerText =
-    "@media print {body {background: grey;} @page {background: white; size: 100mm 100mm}}";
-  document
-    .querySelector(".previewFrame")
-    .contentDocument.head.appendChild(styleElement);
+    "@media print { body { font-size: var(--fontSize, 12px); background: grey;} @page {background: white;size: 100mm 100mm; }}";
 
   let articleContent = document
     .querySelector(".previewFrame")
     .contentDocument.createElement("article");
+  
   articleContent.innerHTML = document.querySelector(".bookContent").innerHTML;
+
   document
     .querySelector(".previewFrame")
     .contentDocument.body.appendChild(articleContent);
 
+  // fetch data of each value:
+
+  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")
+    .contentDocument.head.appendChild(styleElement);
+
   let pagedjsscript = document.createElement("script");
   pagedjsscript.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
   document
@@ -62,9 +70,7 @@ async function populateFrameMaker() {
     .contentDocument.body.appendChild(pagedjsscript);
 }
 
-
 // handling sliders
-const inputs = document.querySelectorAll("input");
 
 function handleUpdate() {
   const suffix = this.dataset.sizing || "";
@@ -77,8 +83,6 @@ function handleUpdate() {
 inputs.forEach((input) => input.addEventListener("change", handleUpdate));
 inputs.forEach((input) => input.addEventListener("mousemove", handleUpdate));
 
-
-
 // To do
 // Find a way to update the style elements
 
@@ -89,3 +93,5 @@ function print(e) {
   var t = document.querySelector("iframe").contentWindow;
   t.focus(), t.print();
 }
+
+////

js/modules/utils.js

+
+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 getValue(input) {
+    const suffix = input.dataset.sizing || "";
+    return `${input.dataset.cssProp}: ${input.value}${suffix};`;
+  }
+  
+
+export {delay, getValue};
+