Commit 54f6c3fb authored by Guillaume's avatar Guillaume

resolves #164 remove elements that do not affect the layout

parent 31f1f111
Pipeline #365 failed with stage
in 4 minutes and 12 seconds
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>display: none elements should be ignored</title>
<style>
#cover {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
break-after: page;
align-items: flex-end;
}
#displayNoneStyle {
display: none;
}
#displayNoneWithPageBreak {
display: none;
break-after: page;
}
</style>
</head>
<body>
<div id="cover" class="title-page">
<h1>Title</h1>
</div>
<div id="displayNoneInlineStyle" style="display: none;"></div>
<div id="displayNoneStyle"></div>
<div id="displayNoneWithPageBreak"></div>
<script src="../../dist/paged.polyfill.js"></script>
</body>
</html>
/* global describe, beforeAll, afterAll, it, loadPage, DEBUG, expect */
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe("default", () => {
let page;
beforeAll(async () => {
page = await loadPage("no-effect-layout/display-none-elements.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("display: none elements should not be appended in the layout", async () => {
let el = await page.$("#displayNoneInlineStyle");
expect(el).toBe(null);
el = await page.$("#displayNoneStyle");
expect(el).toBe(null);
el = await page.$("#displayNoneWithPageBreak");
expect(el).not.toBe(null);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Script elements should be ignored</title>
<style>
#cover {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
break-after: page;
align-items: flex-end;
}
</style>
</head>
<body>
<div id="cover" class="title-page">
<h1>Title</h1>
</div>
<script id="pagedScript" src="../../dist/paged.polyfill.js"></script>
</body>
</html>
/* global describe, beforeAll, afterAll, it, loadPage, DEBUG, expect */
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe("default", () => {
let page;
beforeAll(async () => {
page = await loadPage("no-effect-layout/script-elements.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("script elements should not be appended in the layout", async () => {
let el = await page.$("#pagedScript");
expect(el).toBe(null);
});
});
......@@ -57,7 +57,7 @@ class Layout {
this.maxChars = this.settings.maxChars || MAX_CHARS_PER_BREAK;
}
async renderTo(wrapper, source, breakToken, bounds=this.bounds) {
async renderTo(wrapper, source, breakToken, bounds = this.bounds) {
let start = this.getStart(source, breakToken);
let walker = walk(start, source);
......
......@@ -91,6 +91,7 @@ class Previewer {
// Otherwise create one
template = document.createElement("template");
template.dataset.ref = "pagedjs-content";
this.removeElementsWithNoEffectOnLayout(body);
template.innerHTML = body.innerHTML;
body.innerHTML = "";
body.appendChild(template);
......@@ -99,6 +100,31 @@ class Previewer {
return template.content;
}
removeElementsWithNoEffectOnLayout (body) {
const scriptElements = Array.from(body.getElementsByTagName("script"));
for (let scriptElement of scriptElements) {
scriptElement.parentElement.removeChild(scriptElement);
}
const elements = Array.from(body.getElementsByTagName("*"));
const pageBreakValuesWithNoEffectOnLayout = [
"auto",
"avoid",
"avoid-page",
"avoid-column",
"avoid-region"
];
for (let element of elements) {
const computedStyle = window.getComputedStyle(element, null);
if (computedStyle.getPropertyValue("display") === "none"
&& pageBreakValuesWithNoEffectOnLayout.includes(computedStyle.getPropertyValue("break-after"))
&& pageBreakValuesWithNoEffectOnLayout.includes(computedStyle.getPropertyValue("page-break-after"))
&& pageBreakValuesWithNoEffectOnLayout.includes(computedStyle.getPropertyValue("break-before"))
&& pageBreakValuesWithNoEffectOnLayout.includes(computedStyle.getPropertyValue("page-break-after"))) {
element.parentElement.removeChild(element);
}
}
}
removeStyles(doc=document) {
// Get all stylesheets
let stylesheets = Array.from(doc.querySelectorAll("link[rel='stylesheet']"));
......
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