Commit eff0ca6a authored by Fred Chasen's avatar Fred Chasen

Update margin handling, fix content: none

parent 1b887733
Pipeline #41 canceled with stage
{
"name": "pagedjs",
"version": "0.1.8",
"version": "0.1.9",
"description": "Chunks up a document into paged media flows and applies print styles",
"author": "Fred Chasen",
"license": "MIT",
......
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Content None
</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
/* Paged.js fragmentation rendering on screen */
/* bind chapter section to the chapter layout */
.chapter {
page: chapter;
}
@page chapter :first {
background-color: lightcyan;
@top-left {
content: none;
}
@top-left-corner {
content: none;
}
@top-right {
content: none;
}
@top-right-corner {
content: none;
}
}
@page chapter :nth(4) {
@top-right {
content: 'lol';
}
}
/* blanck page: pages with no content */
@page :blank {
@top-left-corner {
content: none;
}
@top-left {
content: none;
}
@top-right-corner {
content: none;
}
@top-right {
content: none;
}
background: white;
}
/* variable used for the boook */
:root {
--background: rgba(0,0,0,0.4);
--color-paper: white;
--color-margin-box: transparent;
--color-page-box: grey;
--size-margin-box: 2px;
}
/* set the running-title element AS a running title position */
.running-title {
position: running(titleRun);
}
/* Binding the part layout to the section with a class 'part' */
.part {
page: part;
}
/* print css that's being rendered on screen */
@page {
size: 170mm 240mm;
margin: 30mm 25mm;
}
@page part {
background: darkcyan;
color: white;
@top-left-corner {
content: none;
}
@top-left {
content: none;
}
@top-right-corner {
content: none;
}
@top-right {
content: none;
}
}
/* layout for the left page */
@page :left {
@top-left-corner {
content: counter(page);
padding-right: 3ch
}
@top-left {
content: element(titleRun);
}
}
/* layout for the right page */
@page :right {
@top-right-corner {
content: counter(page);
padding-left: 3ch;
}
@top-right {
content: element(titleRun);
}
}
</style>
<style>
/* BELOW COMES CSS FOR THE BOOK STYLING AND FOR THE THE PAGES ALIGNMENTS */
header p {
text-transform: uppercase;
font-family: sans-serif;
margin-top: -6em;
margin-left: -14ch;
background: white;
position: absolute;
padding: 0.5em;
padding-left: 4em;
}
header h1 {
margin-top: 2em;
}
body {
padding: 1em;
}
section {
break-before: right;
}
/* To define how the book look on the screen: */
@media screen {
body {
background-color: var(--background);
}
.pagedjs_pages {
display: flex;
width: calc(var(--width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
}
.pagedjs_page {
background: var(--color-paper);
box-shadow: 0 0 0 1px inset var(--color-page-box);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
.pagedjs_first_page {
margin-left: var(--width);
}
/* show the margin-box */
[class*="pagedjs_margin-top"], [class*="pagedjs_margin-left"], [class*="pagedjs_margin-right"], [class*="pagedjs_margin-bottom"] {
box-shadow: 0 0 0 var(--size-margin-box) inset var(--color-margin-box);
}
}
body {
font-family: serif;
}
</style>
</head>
<body>
<section class="part">
<h1>Awesome part</h1>
<p>In this part, we'll talk about a lot of different things</p>
</section>
<section class="chapter">
<header>
<p>chapter one</p>
<h1>Margin boxes</h1>
</header>
<div class="running-title">Margin boxes </div>
<p>the margin boxes as declared by the W3C.</p>
<h2>Now, some random wikipedia article </h2>
<h3>Zduńska Wola Karsznice</h3>
<p>Zduńska Wola Karsznice is one of the biggest rail junctions in Poland, located in central part of the country, within the borders of the town of Zduńska Wola (Łódź Voivodeship). It is a station along the Polish Coal Trunk-Line; before 1930 it had been a separate village, but construction of the Trunk-Line resulted in creation of a separate district for rail workers, with numerous condominiums. A few kilometers north of Karsznice, the Trunk-Line crosses the main East-West rail route Warsaw - Łódź - Ostrów Wielkopolski - Poznań/Wrocław. p Zduńska Wola Karsznice is one of the biggest rail junctions in Poland, located in central part of the country, within the borders of the town of Zduńska Wola (Łódź Voivodeship). It is a station along the Polish Coal Trunk-Line; before 1930 it had been a separate village, but construction of the Trunk-Line resulted in creation of a separate district for rail workers, with numerous condominiums. A few kilometers north of Karsznice, the Trunk-Line crosses the main East-West rail route Warsaw - Łódź - Ostrów Wielkopolski - Poznań/Wrocław. </p>
<p>Zduńska Wola Karsznice is one of the biggest rail junctions in Poland, located in central part of the country, within the borders of the town of Zduńska Wola (Łódź Voivodeship). It is a station along the Polish Coal Trunk-Line; before 1930 it had been a separate village, but construction of the Trunk-Line resulted in creation of a separate district for rail workers, with numerous condominiums. A few kilometers north of Karsznice, the Trunk-Line crosses the main East-West rail route Warsaw - Łódź - Ostrów Wielkopolski - Poznań/Wrocław. Zduńska Wola Karsznice is one of the biggest rail junctions in Poland, located in central part of the country, within the borders of the town of Zduńska Wola (Łódź Voivodeship). It is a station along the Polish Coal Trunk-Line; before 1930 it had been a separate village, but construction of the Trunk-Line resulted in creation of a separate district for rail workers, with numerous condominiums. A few kilometers north of Karsznice, the Trunk-Line crosses the main East-West rail route Warsaw - Łódź - Ostrów Wielkopolski - Poznań/Wrocław. </p>
<p>Zduńska Wola Karsznice is one of the biggest rail junctions in Poland, located in central part of the country, within the borders of the town of Zduńska Wola (Łódź Voivodeship). It is a station along the Polish Coal Trunk-Line; before 1930 it had been a separate village, but construction of the Trunk-Line resulted in creation of a separate district for rail workers, with numerous condominiums. A few kilometers north of Karsznice, the Trunk-Line crosses the main East-West rail route Warsaw - Łódź - Ostrów Wielkopolski - Poznań/Wrocław. </p>
<p>Zduńska Wola Karsznice is one of the biggest rail junctions in Poland, located in central part of the country, within the borders of the town of Zduńska Wola (Łódź Voivodeship). It is a station along the Polish Coal Trunk-Line; before 1930 it had been a separate village, but construction of the Trunk-Line resulted in creation of a separate district for rail workers, with numerous condominiums. A few kilometers north of Karsznice, the Trunk-Line crosses the main East-West rail route Warsaw - Łódź - Ostrów Wielkopolski - Poznań/Wrocław. </p>
<p>Zduńska Wola Karsznice is one of the biggest rail junctions in Poland, located in central part of the country, within the borders of the town of Zduńska Wola (Łódź Voivodeship). It is a station along the Polish Coal Trunk-Line; before 1930 it had been a separate village, but construction of the Trunk-Line resulted in creation of a separate district for rail workers, with numerous condominiums. A few kilometers north of Karsznice, the Trunk-Line crosses the main East-West rail route Warsaw - Łódź - Ostrów Wielkopolski - Poznań/Wrocław. </p>
<p>Zduńska Wola Karsznice is one of the biggest rail junctions in Poland, located in central part of the country, within the borders of the town of Zduńska Wola (Łódź Voivodeship). It is a station along the Polish Coal Trunk-Line; before 1930 it had been a separate village, but construction of the Trunk-Line resulted in creation of a separate district for rail workers, with numerous condominiums. A few kilometers north of Karsznice, the Trunk-Line crosses the main East-West rail route Warsaw - Łódź - Ostrów Wielkopolski - Poznań/Wrocław. </p>
<p>Zduńska Wola Karsznice is one of the biggest rail junctions in Poland, located in central part of the country, within the borders of the town of Zduńska Wola (Łódź Voivodeship). It is a station along the Polish Coal Trunk-Line; before 1930 it had been a separate village, but construction of the Trunk-Line resulted in creation of a separate district for rail workers, with numerous condominiums. A few kilometers north of Karsznice, the Trunk-Line crosses the main East-West rail route Warsaw - Łódź - Ostrów Wielkopolski - Poznań/Wrocław. </p>
</section>
</body>
const TIMEOUT = 10000;
describe('content-none', async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage('issues/template/template.html')
return page.rendered;
}, TIMEOUT)
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
})
it('should render 5 pages', async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(5);
})
if (!DEBUG) {
it('should create a pdf', async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(3);
expect(pdf).toMatchPDFSnapshot(4);
})
}
}
)
......@@ -121,7 +121,7 @@ class RunningHeaders extends Handler {
let running = this.runningSelectors[el.args[0]];
if (running && running.first) {
selected.innerHTML = ""; // Clear node
selected.classList.add("pagedjs_clear-after"); // Clear ::after
// selected.classList.add("pagedjs_clear-after"); // Clear ::after
let clone = running.first.cloneNode(true);
clone.style.display = null;
selected.appendChild(clone);
......
......@@ -537,6 +537,7 @@ class AtPage extends Handler {
}
addMarginaliaContent(page, list, item, sheet) {
let displayNone;
// Just content
for (let loc in page.marginalia) {
let content = csstree.clone(page.marginalia[loc]);
......@@ -546,9 +547,10 @@ class AtPage extends Handler {
if (node.property !== "content") {
list.remove(item);
}
// else if (node.value.children && node.value.children.first().name === "none") {
// list.remove(item);
// }
if (node.value.children && node.value.children.first().name === "none") {
displayNone = true;
}
}
});
......@@ -556,14 +558,37 @@ class AtPage extends Handler {
continue;
}
// insert display rule - handled after page layout
/*
let displaySelectors = this.selectorsForPageMargin(page, loc);
let displayDeclaration = this.createDeclaration("display", "flex");
let displayRule = this.createRule(displaySelectors, [displayDeclaration]);
let displayDeclaration;
displaySelectors.insertData({
type: 'Combinator',
name: ">"
});
displaySelectors.insertData({
type: 'ClassSelector',
name: "pagedjs_margin-content"
});
displaySelectors.insertData({
type: 'Combinator',
name: ">"
});
displaySelectors.insertData({
type: 'TypeSelector',
name: "*"
});
if (displayNone) {
displayDeclaration = this.createDeclaration("display", "none");
} else {
displayDeclaration = this.createDeclaration("display", "block");
}
let displayRule = this.createRule(displaySelectors, [displayDeclaration]);
sheet.insertRule(displayRule);
*/
// insert content rule
let contentSelectors = this.selectorsForPageMargin(page, loc);
......@@ -805,6 +830,10 @@ class AtPage extends Handler {
left.classList.add("emptyBalance");
}
if (leftContent && rightContent) {
center.classList.add("balanceMargins");
}
// Balance Sizes
if (leftContent) {
leftWidth = window.getComputedStyle(left)["max-width"];
......@@ -823,8 +852,8 @@ class AtPage extends Handler {
left.style["width"] = "auto";
left.style["max-width"] = "none";
} else if ((centerWidth === "none" || centerWidth === "auto") &&
leftWidth !== "none" && leftWidth !== "auto" &&
rightWidth !== "none" && rightWidth !== "auto") {
leftContent && leftWidth !== "none" && leftWidth !== "auto" &&
rightContent && rightWidth !== "none" && rightWidth !== "auto") {
// TODO: convert units before comparing
let newWidth = Math.max(parseFloat(leftWidth), parseFloat(rightWidth));
......@@ -889,8 +918,8 @@ class AtPage extends Handler {
bottom.style["height"] = "auto";
bottom.style["max-height"] = "none";
} else if ((middleHeight === "none" || middleHeight === "auto") &&
topHeight !== "none" && topHeight !== "auto" &&
bottomHeight !== "none" && bottomHeight !== "auto") {
topContent && topHeight !== "none" && topHeight !== "auto" &&
bottomContent && bottomHeight !== "none" && bottomHeight !== "auto") {
// TODO: convert units before comparing
let newHeight = Math.max(parseFloat(topHeight), parseFloat(bottomHeight));
......
......@@ -143,6 +143,10 @@ export default `
visibility: hidden;
}
.pagedjs_page .pagedjs_margin.balanceMargins {
flex: 1 0;
}
.pagedjs_page > .pagedjs_area {
grid-column: center;
grid-row: page;
......@@ -172,7 +176,7 @@ export default `
height: 100%;
display: none;
align-items: center;
flex: 2 1 0;
flex: 1 1 0;
}
.pagedjs_page .pagedjs_margin-top-center,
......@@ -180,7 +184,7 @@ export default `
height: 100%;
display: none;
align-items: center;
flex: 1 0 auto;
flex: 1 0 33%;
margin: 0 auto;
}
......
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