Commit 256daebe authored by julientaq's avatar julientaq

reset folders

parent aad89bbf
test-hybrid
test-hybrid.html
node_modules
demo/experimentIframeInOutput.html
......@@ -4,8 +4,7 @@
}
@page {
size: 20mm 20mm;
@bottom-center {
content: string(h2title);
......@@ -29,4 +28,5 @@
}
body {
color: orange;
}
\ No newline at end of file
......@@ -5,7 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>example</title>
<script type="module" src="../js/main2.js"></script>
<script type="module" src="../scripts/main.js"></script>
<!-- <script type="module" src="../jsOld/main2.js"></script> -->
<link rel="stylesheet" href="css/reset.css">
</head>
......
document.querySelector('iframe').srcdoc = `
<p>lol</p><script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
`;
document.querySelector('iframe').srcdoc = `
<p>fun</p>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
`;
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="http://www.youtube.fr" frameborder="1"></iframe>
<template><p>fun</p></template>
<!-- <script src="iframe.js"></script> -->
</body>
</html>
\ No newline at end of file
......@@ -19,7 +19,7 @@
text-transform: uppercase;
color: white;
padding:2em;
position: fixed;
position: fixed;
top:0;
left: 0;
}
......
import pagedMakerConfig from "./modules/config.js";
import { delay, print } from "./modules/utils.js";
import { getValue, getMargins, getPageSize } from "./modules/getValues.js";
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
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.classList.contains("pagedPreviewer-button-close")
) {
toggleModal(document.querySelector(".pagedPreviewer-modal"));
}
});
// add styles for the preview box
const uicsscontent = document.createElement("style");
uicsscontent.textContent = uicss;
document.head.append(uicsscontent);
// 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);
});
document
.querySelector(".pagedPreviewer-button-preview")
.addEventListener("click", populatePagedMaker);
document.querySelector(".pagedPreviewer-button-print").addEventListener("click", print);
// show hide modal
function toggleModal(modal) {
modal.classList.toggle("pagedPreviewer-hidden");
document.body.classList.remove("pagedPreviewer-blocked");
if (
!document.querySelector(".pagedPreviewer-modal").classList.contains("pagedPreviewer-hidden")
) {
document.body.classList.add("pagedPreviewer-blocked");
populatePagedMaker();
}
}
// populate the iframe
async function populatePagedMaker() {
// remove the previous iframe
if (document.querySelector(".pagedPreviewer-previewFrame")) {
document.querySelector(".pagedPreviewer-previewFrame").remove();
}
// create the iframe
createFrame();
// wait for the iframe to load the empty src before adding the content
await delay(100);
// add a pagedjs basic stylesheet for previewing the pages.
// TO DO: add a way to load a basic stylesheet
let interfacecss = document.createElement("style");
interfacecss.textContent = pagedmakerCSS;
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.head.appendChild(interfacecss);
// create a style element
let styleElement = document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.createElement("style");
// populate the style elements that contains the updated styles
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;
} else {
articleContent.innerHTML = document.querySelector(
`${pagedMakerConfig.content}`
).innerHTML;
}
// populate the article element of the iframe with the element found in the config
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.body.appendChild(articleContent);
// fetch data of each value:
getAllValues(styleElement);
// push the style element to the head of the iframe
document
.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";
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.head.appendChild(pagedjsscript);
}
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")) {
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
values = `body {${values}}`;
// populate the styles element with all the values
return (styleElement.textContent = styleElement.textContent + values);
}
// create iframe
function createFrame() {
const pagedMaker = document.createElement("iframe");
pagedMaker.classList.add("pagedPreviewer-previewFrame");
document.querySelector(".pagedPreviewer-zonePreview").appendChild(pagedMaker);
}
import createUI from "./modules/createUI.js";
import updatePreview from "./modules/createPreview.js";
import { Previewer } from "../node_modules/pagedjs/dist/paged.esm.js";
import { print } from "./modules/utils.js";
import { getValue, getMargins, getPageSize } from "./modules/getValues.js";
import modulesList from "./modules/ui/modulesList.js";
// create the UI and push it to the browser
import config from "./modules/config.js";
createUI();
// document create controls
document.querySelector('select').addEventListener('click',console.log("fun"))
// let controls = "";
// console.log(config.features);
// config.features.forEach((feat) => {
// if (modulesList.name.includes(feat)) {
// controls += modulesList.updateControl;
// } else {
// console.log(`${feat} is not existing in the list of modules`)
// }
// });
// populate the iframe
async function populatePagedMaker() {
// remove the previous iframe
// if (document.querySelector(".pagedPreviewer-previewFrame")) {
// document.querySelector(".pagedPreviewer-previewFrame").remove();
// }
// create the iframe
// createFrame();
// wait for the iframe to load the empty src before adding the content
// add a pagedjs basic stylesheet for previewing the pages.
// TO DO: add a way to load a basic stylesheet
// console.log(getPageSize);
// create a article element to paginate
// fetch data of each value:
// getAllValues(styleElement);
// push the style element to the head of the iframe
// document
// .querySelector(".pagedPreviewer-previewFrame")
// .contentDocument.head.appendChild(styleElement);
// fetch and run pagedjs in the iframe
let pagedjsscript = document.createElement("script");
pagedjsscript.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.head.appendChild(pagedjsscript);
}
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")
) {
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
values = `body {${values}}`;
// populate the styles element with all the values
return (styleElement.textContent = styleElement.textContent + values);
}
// create iframe
let config
//hooks are not ready yet
export default config = window.pagedMakerConfig || {
content: undefined,
stylesheet: undefined,
loadHostCSS:true,
hooks: undefined,
button: '.pagedPreviewer-button-modal',
features: [
"pageSize",
"pageMargins",
"fontFamily",
"fontSize",
"fontLineHeight",
"backgroundColor",
"textColor"
],
uicolor: undefined,
};
class Control {
constructor(name, render) {
this.name = name;
this.render = render;
}
updateControl() {
this.addEventListener("change", console.log(value));
}
// add() {uiElements.appendChild(this.render)};
// updateControl() {
}
export default Control;
function createDOM() {
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;
} else {
articleContent.innerHTML = document.querySelector(
`${pagedMakerConfig.content}`
).innerHTML;
}
// populate the article element of the iframe with the element found in the config
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.body.appendChild(articleContent);
}
export default createDOM;
function createPagedjs() {
//get hooks
//get pagedjs
//start pagedjs
}
\ No newline at end of file
import pagedMakerConfig from "./config.js";
import { delay } from "./utils.js";
import buildCSS from "./createStyles.js";
import previewTemplate from "./preview/previewTemplate.js";
import config from "./config.js";
async function startPreview() {
await createFrame()
.then(await delay(1000))
.then(populatePagedPreviewer());
}
//create Iframe and push it to the modal
// push it to the modal
async function createFrame() {
if (!document.querySelector(".pagedPreviewer-previewFrame")) {
const pagedPreviewerFrame = document.createElement("iframe");
pagedPreviewerFrame.srcdoc = previewTemplate;
pagedPreviewerFrame.classList.add("pagedPreviewer-previewFrame");
document
.querySelector(".pagedPreviewer-zonePreview")
.appendChild(pagedPreviewerFrame);
}
}
async function populatePagedPreviewer() {
// empty the DOM
createContent();
createStyles();
// createPagedjs();
// add styles from the controls
// styleElement.textContent = styles + getMargins() + getPageSize();
}
function createContent() {
//find the content element from the config or use the body if undefined
let articleContent = document.createElement("div");
if (pagedMakerConfig.content == undefined) {
articleContent.innerHTML = document.body.innerHTML;
articleContent.querySelector(".pagedPreviewer-button-modal").remove();
articleContent.querySelector(".pagedPreviewer-modal").remove();
} else {
articleContent.innerHTML = document.querySelector(
`${pagedMakerConfig.content}`
).innerHTML;
}
// pass the content to the iframe
document.querySelector(
".pagedPreviewer-previewFrame"
).contentDocument.body.innerHTML = articleContent.innerHTML;
}
function createStyles() {
// add the styles
let styleElement = document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.createElement("style");
// get the css from the parent page
buildCSS(styleElement);
}
export default startPreview;
import pagedMakerConfig from './config.js'
import uicss from "./ui/uicss.js";
import ui from "./ui/ui.js";
// create the modal, add the button
function createUI() {
window.onload = document.body.insertAdjacentHTML("afterbegin", ui);
defineModal();
styleUI();
}
function defineModal() {
// open close modal
document.querySelector("body").addEventListener("click", function (e) {
console.log(e.target);
console.log(document.querySelector(`${pagedMakerConfig.button}`))
if (
e.target.outerHTML === document.querySelector(`${pagedMakerConfig.button}`).outerHTML ||
e.target.classList.contains("pagedPreviewer-button-close")
) {
toggleModal(document.querySelector(".pagedPreviewer-modal"));
}
});
}
// add styles for the preview box
function styleUI() {
const uicsscontent = document.createElement("style");
uicsscontent.media = "screen";
uicsscontent.textContent = uicss;
document.head.append(uicsscontent);
}
// show hide modal
function toggleModal(modal) {
modal.classList.toggle("pagedPreviewer-hidden");
document.body.classList.remove("pagedPreviewer-blocked");
if (
!document.querySelector(".pagedPreviewer-modal").classList.contains("pagedPreviewer-hidden")
) {
document.body.classList.add("pagedPreviewer-blocked");
// populatePagedMaker();
}
}
export default createUI;
\ No newline at end of file
// This doesn’t work as document.styleSheets doesn’t use CSS it doesn’t know about.
// 1. Get all CSS from the Host (work only on “valid” CSS: ie, no pagedmedia stuff)
function getCSS(cssOutput) {
let sourceStyles = [...document.styleSheets]
.map((styleSheet) => {
// only use media print or media unset
if (
styleSheet.media.length === 0 ||
(styleSheet.media.length > 0 &&
styleSheet.media.mediaText.includes("print"))
) {
try {
return [...styleSheet.cssRules].map((rule) => rule.cssText).join(" ");
} catch (e) {
console.log(
"Can’t load “%s”. This file will be ignored",
styleSheet.href
);
}
}
})
.filter(Boolean)
.join("\n");
\ No newline at end of file
function getValue(input) {
const suffix = input.dataset.sizing || "";
return `${input.dataset.cssProp}: ${input.value}${suffix};`;
}
function getMargins() {
let marginObject = "@page { margin: ";
document.querySelectorAll(".pagedPreviewer-marginUpdate").forEach((mr) => {
marginObject = marginObject + ` ${mr.value + mr.dataset.sizing}`;
});
marginObject = marginObject + "}";
return marginObject;
}
function getPageSize() {
let pageSize = `@page { size: ${document.querySelector("select.pagedSize").value}; }`;
return pageSize;
}
// this is not usable yet, as 3 margin-boxes are hidden
function getMarginBoxElement() {
document
.querySelector(".pagedPreviewer-previewFrame")
.contentDocument.addEventListener("click", function (e) {
// if (e.target.classList.contains("pagedjs_margin-top-left-corner")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-top-right-corner")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-bottom-left-corner")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-bottom-right-corner")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-top-left")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-top-center")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-top-right")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-bottom-left")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-bottom-center")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-bottom-right")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-left-top")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-left-middle")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-left-bottom")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-right-top")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-right-middle")) {
// console.log(e.target);
// }
// if (e.target.classList.contains("pagedjs_margin-right-bottom")) {
// console.log(e.target);
// }
});
}
export { getValue, getMargins, getPageSize, getMarginBoxElement};
//check the available controls
// make a stylesheet out of it
// pass it to the iframe (through buildcss?)
// restart
import pagedMediaConfig from "./config.js";
import pagedjsLogo from "./ui/pagedjsLogo.js";
let uiElements = document.createElement("div");
This diff is collapsed.
import config from "../config.js";
export default `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Spectral:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
/* Change the look */
:root{
--color-background: transparent;
--color-pageBox: #666;
--color-paper: white;