Commit ee23c31b authored by julien's avatar julien
Browse files

rewrite to take care of the second argument

parent 80e8f6a2
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
string set specs </title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
:root {
font-size: 18px;
}
* {
font-family: Times New Roman, sans-serif;
}
h1 {
string-set: alphabet content(text);
font-size: 20px;
margin-bottom: 0;
}
@page {
size: 140mm 200mm;
margin: 20mm 20mm;
/* border: solid 1px black; */
@bottom-left {
content: counter(page);
}
@bottom-center {
content: string(alphabet, first);
}
}
p {
line-height: 22px;
}
h1 {
font-size: 24px;
line-height: 25px;
margin-top: 0;
}
</style>
</head>
<body>
<section>
<h1>aaa</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo.
</p>
<h1>bbb</h1>
<p>
Nulla dignissim pellentesque magna ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in.
</p>
<h1>ddd</h1>
<p>
Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam.
</p>
<h1>eee</h1>
<p>
Morbi cursus eget enim eleifend tincidunt. In vel odio gravida, hendrerit diam ut, fringilla urna.
</p>
<h1>fff</h1>
<p>
Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
</p>
<p>
Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
</p>
<p>
Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
</p>
<p>
Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
</p>
<p>
Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
</p>
<p>
Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
</p>
<p>
Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
</p>
<p>
Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
</p>
<p>
Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
</p>
<p>
Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
</p>
<h1>ggg</h1>
<p>
In feugiat euismod massa sagittis dictum. Nullam eu nisl eu elit laoreet tincidunt id sed ligula. Praesent vulputate faucibus nibh, ut ultrices nunc aliquam nec.
</p>
<p>
In feugiat euismod massa sagittis dictum. Nullam eu nisl eu elit laoreet tincidunt id sed ligula. Praesent vulputate faucibus nibh, ut ultrices nunc aliquam nec.
</p>
<h1>hhh</h1>
<p>
Proin eu quam id arcu interdum laoreet nec at urna. Vivamus non sem quis dolor sagittis facilisis. Nunc quis urna non neque sollicitudin hendrerit.
</p>
<h1>iii</h1>
<p>
Etiam molestie sed orci sed suscipit. Donec ipsum est, venenatis ut nisl ut, viverra auctor diam. Cras vestibulum lacus vel nunc dapibus aliquam.
</p>
<h1>jjj</h1>
<p>
Aliquam eget massa lobortis, maximus leo ac, iaculis quam. Sed non aliquet eros. Integer ultrices consequat tortor eget ullamcorper.
</p>
<p>
Aliquam eget massa lobortis, maximus leo ac, iaculis quam. Sed non aliquet eros. Integer ultrices consequat tortor eget ullamcorper.
</p>
<p>
Aliquam eget massa lobortis, maximus leo ac, iaculis quam. Sed non aliquet eros. Integer ultrices consequat tortor eget ullamcorper.
</p>
<h1>kkk</h1>
<p>
Aliquam erat volutpat. Aenean ornare elit magna, et efficitur massa dapibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<h1>lll</h1>
<p>
Vivamus vel velit vel metus bibendum luctus ut vitae tortor. Nullam at ante eu felis ultrices ultrices at in diam. Vivamus vel velit vel metus bibendum luctus ut vitae tortor. Nullam at ante eu felis ultrices ultrices at in diam. Pellentesque eleifend leo sapien, vel commodo orci mollis vel.
</p>
<h1>mmm</h1>
<p>
Nullam at ante eu felis ultrices ultrices at in diam. Pellentesque eleifend leo sapien, vel commodo orci mollis vel. Nam eros tellus, hendrerit ut rhoncus sed, aliquet et felis. Cras a ex malesuada, fringilla magna elementum, cursus purus.
</p>
<h1>nnn</h1>
<p>
Aliquam eget massa lobortis, maximus leo ac, iaculis quam. Sed non aliquet eros. Nulla dignissim pellentesque magna ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in.
</p>
<h1>ooo</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo.
</p>
<h1>ppp</h1>
<p>
Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam.
</p>
</section>
</body>
</html>
\ No newline at end of file
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe('default', async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage('default/default.html')
return page.rendered;
}, TIMEOUT)
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
})
it('should render text', async () => {
let text = await page.evaluate(() => document.body.textContent);
expect(text).toContain('Chapter 1. Loomings.');
})
it('should render 1 page', async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(5);
})
if (!DEBUG) {
it('should create a pdf', async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
})
}
}
)
......@@ -6,6 +6,8 @@ class StringSets extends Handler {
super(chunker, polisher, caller);
this.stringSetSelectors = {};
this.type;
this.lastString = "";
}
onDeclaration(declaration, dItem, dList, rule) {
......@@ -33,37 +35,63 @@ class StringSets extends Handler {
onContent(funcNode, fItem, fList, declaration, rule) {
if (funcNode.name === "string") {
let identifier = funcNode.children && funcNode.children.first().name;
this.type = funcNode.children.last().name;
funcNode.name = "var";
funcNode.children = new csstree.List();
funcNode.children.append(funcNode.children.createItem({
type: "Identifier",
loc: null,
name: "--pagedjs-string-" + identifier
}));
funcNode.children.append(
funcNode.children.createItem({
type: "Identifier",
loc: null,
name: "--pagedjs-string-" + identifier
})
);
}
}
afterPageLayout(fragment) {
for (let name of Object.keys(this.stringSetSelectors)) {
let set = this.stringSetSelectors[name];
let selected = fragment.querySelector(set.selector);
if (selected) {
let cssVar;
if (set.value === "content" || set.value === "content()" || set.value === "content(text)") {
cssVar = selected.textContent.replace(/\\([\s\S])|(["|'])/g,"\\$1$2");
// this.styleSheet.insertRule(`:root { --pagedjs-string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
// fragment.style.setProperty(`--pagedjs-string-${name}`, `"${cssVar}"`);
set.first = cssVar;
fragment.style.setProperty(`--pagedjs-string-${name}`, `"${set.first}"`);
} else {
console.warn(set.value + "needs css replacement");
let selected = fragment.querySelectorAll(set.selector);
let selArray = [];
let cssVar;
selected.forEach((sel, index) => {
if (sel) {
// push each content into the array to define in the variable the first and the last element of the page.
selArray.push(sel.textContent);
}
} else {
// Use the previous values
if (set.first) {
fragment.style.setProperty(`--pagedjs-string-${name}`, `"${set.first}"`);
if (!this.lastString === "") {
cssVar = this.lastString;
}
if (this.type === "first" ||
this.type === "start" ||
this.type === "first-except" ||
!this.type) {
cssVar = selArray[0].replace(/\\([\s\S])|(["|'])/g, "\\$1$2");
} else if (this.type === "last") {
cssVar = selArray[selArray.length - 1].replace(/\\([\s\S])|(["|'])/g, "\\$1$2");
}
this.lastString = selArray[selArray.length - 1].replace(/\\([\s\S])|(["|'])/g, "\\$1$2");;
fragment.setAttribute("data-string", `string-type-${this.type}-${name}`);
fragment.setAttribute(`data-pagedjs-string-${name}`, `"${cssVar}"`);
fragment.style.setProperty(`--pagedjs-string-${name}`, `"${cssVar}"`);
});
if (!fragment.hasAttribute("data-string")) {
fragment.style.setProperty(`--pagedjs-string-${name}`, `"${this.lastString}"`);
}
}
}
......
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