add support for custom print button in config

css/interface.css

 @import url('https://fonts.googleapis.com/css2?family=Jost:wght@100&display=swap');
 
 
-.modal {
+.pagedMaker-modal {
 
   font-family: "Jost";
   font-weight: 200;
@@ -23,7 +23,7 @@
   box-shadow: 0 0 0 10vw rgba(0,0,0,0.6);
 }
 
-.modal .logo {
+.pagedMaker-modal .logo {
     height: 40px;
 }
 
@@ -49,11 +49,11 @@ input::after  {
 }
 
 
-.modal .item {
+.pagedMaker-modal .item {
     margin-bottom: 2em;
 }
 
-.modal label  {
+.pagedMaker-modal label  {
     text-transform: uppercase;
     display: block;
 }
@@ -67,7 +67,7 @@ iframe {
   width: 100%;
 }
 
-.modal .form {
+.pagedMaker-modal .form {
     padding: 2em;
     background: lightcyan;
 }
\ No newline at end of file

hooks.js

+class MyHandler extends Paged.Handler {
+  constructor(chunker, polisher, caller) {
+    super(chunker, polisher, caller);
+  }
+
+  afterPageLayout(pageFragment, page) {
+    page.element.classList.add("boyo");
+  }
+}
+Paged.registerHandlers(MyHandler);

js/main.js

@@ -9,20 +9,21 @@ import ui from "./modules/ui.js";
 
 // trying event delegation
 
-
-
-
-
 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(".pagedMaker-modal"));
+    }
+  }
   if (
     e.target.classList.contains("button-modal") ||
     e.target.classList.contains("close")
   ) {
-    toggleModal(document.querySelector(".modal"));
+    toggleModal(document.querySelector(".pagedMaker-modal"));
   }
 });
 
@@ -59,7 +60,7 @@ document.querySelector(".button-print").addEventListener("click", print);
 function toggleModal(modal) {
   modal.classList.toggle("hidden");
   document.body.classList.remove("blocked");
-  if (!document.querySelector(".modal").classList.contains("hidden")) {
+  if (!document.querySelector(".pagedMaker-modal").classList.contains("hidden")) {
     document.body.classList.add("blocked");
     populatePagedMaker();
   }
@@ -140,7 +141,8 @@ async function populatePagedMaker() {
   pagedjsscript.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
   document
     .querySelector(".previewFrame")
-    .contentDocument.body.appendChild(pagedjsscript);
+    .contentDocument.head.appendChild(pagedjsscript);
+
 }
 
 function getAllValues(styleElement) {

js/modules/config.js

 let config
 
+//hooks are not ready yet
 export default config = window.pagedMakerConfig || { 
     content: undefined,
     stylesheet: undefined,
     hooks: undefined,
+    button: undefined,
     features: [
       "pagedSize",
       "pagedMargins",

js/modules/ui.js

@@ -2,10 +2,13 @@ import pagedMakerConfig from './config.js';
 
 // dom to modify the output
 
+
+
 export default `
-<button class="button-modal">Start pagedjs</button>
+${(pagedMakerConfig.button == undefined) ? '<button class="button-modal">Start pagedjs</button>' : ''} 
+
 
-<div class="modal hidden">
+<div class="pagedMaker-modal hidden">
     <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">

js/modules/uicss.js

@@ -4,7 +4,7 @@ export default `
 @import url('https://fonts.googleapis.com/css2?family=Jost:wght@100&display=swap');
 
 
-.modal {
+.pagedMaker-modal {
   font-family: sans-serif;
   font-weight: 400;
     font-size: 0.9em;
@@ -25,7 +25,7 @@ export default `
   box-shadow: 0 0 0 10vw rgba(0,0,0,0.6);
 }
 
-.modal .logo {
+.pagedMaker-modal .logo {
     height: 40px;
 }
 
@@ -51,11 +51,11 @@ input::after  {
 }
 
 
-.modal .item {
+.pagedMaker-modal .item {
     margin-bottom: 2em;
 }
 
-.modal label  {
+.pagedMaker-modal label  {
     text-transform: uppercase;
     display: block;
 }
@@ -71,7 +71,7 @@ iframe {
   max-height: unset;
 }
 
-.modal .form {
+.pagedMaker-modal .form {
     padding: 2em;
     background: ${pagedMakerConfig.ui ? pagedMakerConfig.uicolor : "white"};
 }