Skip to content
Snippets Groups Projects
Commit ea8f3663 authored by julientaq's avatar julientaq
Browse files

add color and fixes

parent ac5b8b18
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
css/pagedtest.css
+ 1
− 1
View file @ ea8f3663
body {
color: purple;
/* color: purple; */
}
\ No newline at end of file
dist/pagedMaker.js
+ 86
− 22
View file @ ea8f3663
......@@ -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() {
......
index.html
+ 7
− 7
View file @ ea8f3663
This diff is collapsed.
js/main.js
+ 5
− 3
View file @ ea8f3663
......@@ -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);
}
......
js/modules/baseStylesheet.js
+ 3
− 3
View file @ ea8f3663
......@@ -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);
}
......
js/modules/config.js
+ 1
− 0
View file @ ea8f3663
......@@ -13,6 +13,7 @@ export default config = window.pagedMakerConfig || {
"fontSize",
"fontLineHeight",
"backgroundColor",
"textColor"
],
uicolor: undefined,
};
......
js/modules/getValues.js
+ 61
− 4
View file @ ea8f3663
......@@ -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};
js/modules/pagedmakerCSS.js
+ 55
− 1
View file @ ea8f3663
......@@ -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;
}
`;
js/modules/ui.js
+ 9
− 0
View file @ ea8f3663
......@@ -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>
......
js/modules/uicss.js
+ 1
− 6
View file @ ea8f3663
......@@ -43,12 +43,7 @@ export default `
overflow: hidden;
}
input::after {
content: attr(value);
display: inline-block;
background: orange;
color: white;
}
.pagedMaker-modal .item {
......
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