Commit ea8f3663 authored by julientaq's avatar julientaq
Browse files

add color and fixes

parent ac5b8b18
body {
color: purple;
/* color: purple; */
}
\ No newline at end of file
......@@ -5,13 +5,15 @@
content: void 0,
stylesheet: void 0,
hooks: void 0,
button: void 0,
features: [
"pagedSize",
"pagedMargins",
"fontFamily",
"fontSize",
"fontLineHeight",
"backgroundColor"
"backgroundColor",
"textColor"
],
uicolor: void 0
};
......@@ -46,7 +48,7 @@
return marginObject;
}
function getPageSize() {
let pageSize = `@page { size: ${document.querySelector(".pagedSize").value} }`;
let pageSize = `@page { size: ${document.querySelector("select.pagedSize").value}; }`;
return pageSize;
}
......@@ -57,9 +59,8 @@
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@media print {
.modal, .button-modal {
.pagedMaker-modal, .button-modal {
display: none;
}
body, html {
......@@ -71,10 +72,11 @@ body {
font-size: var(--fontSize, 14px);
font-family: var(--fontBody, sans-serif);
line-height: var(--lineHeight, 1.4);
color: var(--body-color);
}
@page {
background: var(--background-color);
@bottom-right{
content: counter(page) "/" counter(pages);
}
......@@ -178,14 +180,68 @@ h1,h2 {
margin-top: 10mm;
}
}`;
}
/* to show/hide page number in the margin boxes */
body {
--color-margins: orange;
}
@page {
@top-left-corner {content: " "; color: var(--color-margins); text-align: center;}
@top-left {content: " "; color: var(--color-margins); text-align: center;}
@top-center {content: " "; color: var(--color-margins); text-align: center;}
@top-right {content: " "; color: var(--color-margins); text-align: center;}
@top-right-corner {content: " "; color: var(--color-margins); text-align: center;}
@left-top {content: " "; color: var(--color-margins); text-align: center;}
@left-middle {content: " "; color: var(--color-margins); text-align: center;}
@left-bottom {content: " "; color: var(--color-margins); text-align: center;}
@bottom-left-corner {content: " "; color: var(--color-margins); text-align: center;}
@bottom-right-corner {content: " "; color: var(--color-margins); text-align: center;}
@bottom-left {content: " "; color: var(--color-margins); text-align: center;}
@bottom-center {content: " "; color: var(--color-margins); text-align: center;}
@bottom-right {content: " "; color: var(--color-margins); text-align: center;}
@right-top {content: " "; color: var(--color-margins); text-align: center;}
@right-middle {content: " "; color: var(--color-margins); text-align: center;}
@right-bottom {content: " "; color: var(--color-margins); text-align: center;}
}
.pagedjs_margin-top-left-corner:hover,
.pagedjs_margin-top-right-corner:hover,
.pagedjs_margin-bottom-left-corner:hover,
.pagedjs_margin-bottom-right-corner:hover,
.pagedjs_margin-top-left:hover,
.pagedjs_margin-top-center:hover,
.pagedjs_margin-top-right:hover,
.pagedjs_margin-bottom-left:hover,
.pagedjs_margin-bottom-center:hover,
.pagedjs_margin-bottom-right:hover,
.pagedjs_margin-left-top:hover,
.pagedjs_margin-left-middle:hover,
.pagedjs_margin-left-bottom:hover,
.pagedjs_margin-right-top:hover,
.pagedjs_margin-right-middle:hover,
.pagedjs_margin-right-bottom:hover {
background: grey;
}
`;
// js/modules/uicss.js
var uicss_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;
......@@ -206,7 +262,7 @@ h1,h2 {
box-shadow: 0 0 0 10vw rgba(0,0,0,0.6);
}
.modal .logo {
.pagedMaker-modal .logo {
height: 40px;
}
......@@ -224,19 +280,14 @@ h1,h2 {
overflow: hidden;
}
input::after {
content: attr(value);
display: inline-block;
background: orange;
color: white;
}
.modal .item {
.pagedMaker-modal .item {
margin-bottom: 2em;
}
.modal label {
.pagedMaker-modal label {
text-transform: uppercase;
display: block;
}
......@@ -252,7 +303,7 @@ iframe {
max-height: unset;
}
.modal .form {
.pagedMaker-modal .form {
padding: 2em;
background: ${config_default.ui ? config_default.uicolor : "white"};
}
......@@ -264,9 +315,10 @@ iframe {
// js/modules/ui.js
var ui_default = `
<button class="button-modal">Start pagedjs</button>
${config_default.button == void 0 ? '<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">
......@@ -317,6 +369,11 @@ iframe {
<input class="cssVarUpdate" id="background-color" type="color" name="color" data-css-prop="--background-color"
value="#ffffff">
</div>
<div class="item ${config_default.features.includes("textColor") ? "" : "pagedMaker-hyde"}">
<label for="text-color">Text color</label>
<input class="cssVarUpdate" id="text-color" type="color" name="color" data-css-prop="--body-color"
value="#121212">
</div>
<div class="item">
<button class="button-preview">preview</button>
</div>
......@@ -330,8 +387,13 @@ iframe {
// js/main.js
window.onload = document.body.insertAdjacentHTML("afterbegin", ui_default);
document.querySelector("body").addEventListener("click", function(e) {
if (config_default.button != void 0) {
if (e.target === document.querySelector(`${config_default.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"));
}
});
var uicsscontent = document.createElement("style");
......@@ -353,7 +415,7 @@ iframe {
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();
}
......@@ -375,6 +437,7 @@ iframe {
}
let styleElement = document.querySelector(".previewFrame").contentDocument.createElement("style");
styleElement.textContent = baseStylesheet_default + getMargins() + getPageSize();
console.log(getPageSize);
let articleContent = document.querySelector(".previewFrame").contentDocument.createElement("article");
if (config_default.content == void 0) {
articleContent.innerHTML = document.body.innerHTML;
......@@ -386,7 +449,7 @@ iframe {
document.querySelector(".previewFrame").contentDocument.head.appendChild(styleElement);
let pagedjsscript = document.createElement("script");
pagedjsscript.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
document.querySelector(".previewFrame").contentDocument.body.appendChild(pagedjsscript);
document.querySelector(".previewFrame").contentDocument.head.appendChild(pagedjsscript);
}
function getAllValues(styleElement) {
let values = "";
......@@ -401,6 +464,7 @@ iframe {
}
});
values = `body {${values}}`;
console.log(styleElement);
return styleElement.textContent = styleElement.textContent + values;
}
function createFrame() {
......
This diff is collapsed.
......@@ -11,9 +11,7 @@ import ui from "./modules/ui.js";
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"));
......@@ -60,7 +58,9 @@ document.querySelector(".button-print").addEventListener("click", print);
function toggleModal(modal) {
modal.classList.toggle("hidden");
document.body.classList.remove("blocked");
if (!document.querySelector(".pagedMaker-modal").classList.contains("hidden")) {
if (
!document.querySelector(".pagedMaker-modal").classList.contains("hidden")
) {
document.body.classList.add("blocked");
populatePagedMaker();
}
......@@ -107,6 +107,7 @@ async function populatePagedMaker() {
// 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
......@@ -167,6 +168,7 @@ function getAllValues(styleElement) {
values = `body {${values}}`;
// populate the styles element with all the values
console.log(styleElement);
return (styleElement.textContent = styleElement.textContent + values);
}
......
......@@ -5,9 +5,8 @@ export default `
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@media print {
.modal, .button-modal {
.pagedMaker-modal, .button-modal {
display: none;
}
body, html {
......@@ -19,10 +18,11 @@ body {
font-size: var(--fontSize, 14px);
font-family: var(--fontBody, sans-serif);
line-height: var(--lineHeight, 1.4);
color: var(--body-color);
}
@page {
background: var(--background-color);
@bottom-right{
content: counter(page) "/" counter(pages);
}
......
......@@ -13,6 +13,7 @@ export default config = window.pagedMakerConfig || {
"fontSize",
"fontLineHeight",
"backgroundColor",
"textColor"
],
uicolor: undefined,
};
......
......@@ -13,10 +13,67 @@ function getMargins() {
}
function getPageSize() {
let pageSize = `@page { size: ${
document.querySelector(".pagedSize").value
} }`;
let pageSize = `@page { size: ${document.querySelector("select.pagedSize").value}; }`;
return pageSize;
}
export { getValue, getMargins, getPageSize };
// this is not usable yet, as 3 margin-boxes are hidden
function getMarginBoxElement() {
document
.querySelector(".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};
......@@ -86,4 +86,58 @@ export default `
margin-top: 10mm;
}
}`
\ No newline at end of file
}
/* to show/hide page number in the margin boxes */
body {
--color-margins: orange;
}
@page {
@top-left-corner {content: " "; color: var(--color-margins); text-align: center;}
@top-left {content: " "; color: var(--color-margins); text-align: center;}
@top-center {content: " "; color: var(--color-margins); text-align: center;}
@top-right {content: " "; color: var(--color-margins); text-align: center;}
@top-right-corner {content: " "; color: var(--color-margins); text-align: center;}
@left-top {content: " "; color: var(--color-margins); text-align: center;}
@left-middle {content: " "; color: var(--color-margins); text-align: center;}
@left-bottom {content: " "; color: var(--color-margins); text-align: center;}
@bottom-left-corner {content: " "; color: var(--color-margins); text-align: center;}
@bottom-right-corner {content: " "; color: var(--color-margins); text-align: center;}
@bottom-left {content: " "; color: var(--color-margins); text-align: center;}
@bottom-center {content: " "; color: var(--color-margins); text-align: center;}
@bottom-right {content: " "; color: var(--color-margins); text-align: center;}
@right-top {content: " "; color: var(--color-margins); text-align: center;}
@right-middle {content: " "; color: var(--color-margins); text-align: center;}
@right-bottom {content: " "; color: var(--color-margins); text-align: center;}
}
.pagedjs_margin-top-left-corner:hover,
.pagedjs_margin-top-right-corner:hover,
.pagedjs_margin-bottom-left-corner:hover,
.pagedjs_margin-bottom-right-corner:hover,
.pagedjs_margin-top-left:hover,
.pagedjs_margin-top-center:hover,
.pagedjs_margin-top-right:hover,
.pagedjs_margin-bottom-left:hover,
.pagedjs_margin-bottom-center:hover,
.pagedjs_margin-bottom-right:hover,
.pagedjs_margin-left-top:hover,
.pagedjs_margin-left-middle:hover,
.pagedjs_margin-left-bottom:hover,
.pagedjs_margin-right-top:hover,
.pagedjs_margin-right-middle:hover,
.pagedjs_margin-right-bottom:hover {
background: grey;
}
`;
......@@ -83,6 +83,15 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="button-modal">Start p
<input class="cssVarUpdate" id="background-color" type="color" name="color" data-css-prop="--background-color"
value="#ffffff">
</div>
<div class="item ${
pagedMakerConfig.features.includes("textColor")
? ""
: "pagedMaker-hyde"
}">
<label for="text-color">Text color</label>
<input class="cssVarUpdate" id="text-color" type="color" name="color" data-css-prop="--body-color"
value="#121212">
</div>
<div class="item">
<button class="button-preview">preview</button>
</div>
......
......@@ -43,12 +43,7 @@ export default `
overflow: hidden;
}
input::after {
content: attr(value);
display: inline-block;
background: orange;
color: white;
}
.pagedMaker-modal .item {
......
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