diff --git a/README.md b/README.md index 4074e888032e72705c96fcd37e02d3330be0f517..73537ec4f16f85e7398907764cf5803bdd2dc6f4 100755 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ let flow = paged.preview(DOMContent, ["path/to/css/file.css"], document.body).th Add the the `paged.polyfill.js` script to replace all `@page` css and render the html page with the Paged Media styles applied: ```html - + ``` Try the [polyfill with Aurorae](https://s3.amazonaws.com/pagedmedia/pagedjs/examples/polyfill.html). @@ -51,7 +51,7 @@ Modules are groups of handlers for that apply the layout and styles of a CSS mod New handlers can be registered from `import { registerHandlers } from 'pagedjs'` or by calling `Paged.registerHandlers` on an html page. ```html - + + + + + + + + + + + + + +
+

Awesome part

+

In this part, we'll talk about a lot of different things

+
+
+
+

chapter one

+

Margin boxes

+
+
Margin boxes
+

the margin boxes as declared by the W3C.

+

Now, some random wikipedia article

+

Zduńska Wola Karsznice

+

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.

+

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.

+

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.

+

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.

+

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.

+
+ + diff --git a/specs/generate-content/content-none/content-none.spec.js b/specs/generate-content/content-none/content-none.spec.js new file mode 100644 index 0000000000000000000000000000000000000000..b1562cbbea0f118090346b2ee99c7bc3b9b171d7 --- /dev/null +++ b/specs/generate-content/content-none/content-none.spec.js @@ -0,0 +1,35 @@ +const TIMEOUT = 10000; + +describe('content-none', async () => { + let page; + let rendered; + beforeAll(async () => { + page = await loadPage('generate-content/content-none/content-none.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); + }) + } + } +) diff --git a/specs/issues/duplicate-headers/duplicate-headers.html b/specs/issues/duplicate-headers/duplicate-headers.html index 863de6153dd784e49ee7c85c88bb2148e27df8df..af65c1fc8e3ec82ca8b5b62994d1e3e827443484 100644 --- a/specs/issues/duplicate-headers/duplicate-headers.html +++ b/specs/issues/duplicate-headers/duplicate-headers.html @@ -50,7 +50,7 @@ @bottom-left{ content: counter(page); } - @top-left: { + @top-left { content: element(chapter-title); } } diff --git a/specs/issues/template/issue.html b/specs/issues/template/issue.html index 6611c0c68620270e6ab732cac116118be59fdad3..86dae60637cb8512dc17ea57d9ca360bbaa1fb5c 100644 --- a/specs/issues/template/issue.html +++ b/specs/issues/template/issue.html @@ -51,9 +51,7 @@ @bottom-left{ content: counter(page); } - @top-left: { - content: element(chapter-title); - } + } section { diff --git a/specs/margin-boxes/style/__image_snapshots__/style-spec-js-text-align-should-create-a-pdf-1-snap.png b/specs/margin-boxes/style/__image_snapshots__/style-spec-js-text-align-should-create-a-pdf-1-snap.png index 421e8b1fd3e9221e7b775a857e651cb84cce309b..23c62f88a22614452b3d0b0b30e641c7ccc7af9c 100644 Binary files a/specs/margin-boxes/style/__image_snapshots__/style-spec-js-text-align-should-create-a-pdf-1-snap.png and b/specs/margin-boxes/style/__image_snapshots__/style-spec-js-text-align-should-create-a-pdf-1-snap.png differ diff --git a/specs/margin-boxes/vertical-align/__image_snapshots__/vertical-align-spec-js-vertical-align-should-create-a-pdf-1-snap.png b/specs/margin-boxes/vertical-align/__image_snapshots__/vertical-align-spec-js-vertical-align-should-create-a-pdf-1-snap.png index be0d3e067235f39b7b4b381f1f8ace809518d348..c7a9c457491b42e9228247677907dd36ae994aad 100644 Binary files a/specs/margin-boxes/vertical-align/__image_snapshots__/vertical-align-spec-js-vertical-align-should-create-a-pdf-1-snap.png and b/specs/margin-boxes/vertical-align/__image_snapshots__/vertical-align-spec-js-vertical-align-should-create-a-pdf-1-snap.png differ diff --git a/specs/page-selector/page-nth/__image_snapshots__/page-nth-spec-js-page-nth-should-create-a-pdf-1-snap.png b/specs/page-selector/page-nth/__image_snapshots__/page-nth-spec-js-page-nth-should-create-a-pdf-1-snap.png index 6c42f9e5ab2f4a01d18bf5cc0451fcc6901ad032..1806faf5c07d1687f73ed5bdd269a819242287f6 100644 Binary files a/specs/page-selector/page-nth/__image_snapshots__/page-nth-spec-js-page-nth-should-create-a-pdf-1-snap.png and b/specs/page-selector/page-nth/__image_snapshots__/page-nth-spec-js-page-nth-should-create-a-pdf-1-snap.png differ diff --git a/specs/target/target-counter/__image_snapshots__/target-counter-spec-js-target-counter-should-create-a-pdf-1-snap.png b/specs/target/target-counter/__image_snapshots__/target-counter-spec-js-target-counter-should-create-a-pdf-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..2b67d39ede4bbe4b7069cb1a393ec791c2184c21 Binary files /dev/null and b/specs/target/target-counter/__image_snapshots__/target-counter-spec-js-target-counter-should-create-a-pdf-1-snap.png differ diff --git a/specs/target/target-counter/target-counter.html b/specs/target/target-counter/target-counter.html new file mode 100644 index 0000000000000000000000000000000000000000..3be7e5b58def14307ee969f8dd0975b8b1954f1d --- /dev/null +++ b/specs/target/target-counter/target-counter.html @@ -0,0 +1,170 @@ + + + + + + + targer-counter + + + + + + + + + + + + + + +
+ + +

Cross reference:

+
+ +
+

Lorem ipsum dolor sit amet

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit. +

+

+ Nulla dignissim pellentesque ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in. Nullam rhoncus mi quis lectus gravida dignissim. Pellentesque a tortor ut leo pretium auctor non in massa. Nunc efficitur vestibulum mi, id mattis quam aliquet id. Ut semper tortor sit amet molestie mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet eleifend purus ut sagittis. Nunc consequat vel sapien at convallis. Maecenas sollicitudin quis justo non varius. +

+

+ Maecenas arcu massa, egestas vel est nec, mollis venenatis tortor. Ut eu finibus libero. Phasellus pharetra ante a purus ornare, eget facilisis sem ultricies. Etiam tincidunt feugiat erat, eget hendrerit turpis ullamcorper quis. Fusce finibus porttitor nisi sed blandit. Nunc libero erat, vehicula ut tincidunt quis, maximus vitae eros. Donec tristique urna bibendum, mattis nisl vel, dignissim nisl. Duis tincidunt eros nec volutpat scelerisque. Phasellus id malesuada nulla. Duis aliquam mi non malesuada suscipit. Curabitur pretium nisl eu tortor tempus, et sollicitudin quam iaculis. Ut venenatis eros ligula, in ornare eros facilisis vel. +

+

+ Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam. Duis magna ipsum, auctor at leo non, pharetra luctus felis. Ut tempus finibus dui, sit amet scelerisque nisi feugiat non. Proin posuere quam vitae finibus pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id felis at nulla mollis bibendum. +

+

+ Donec odio lacus, maximus a ultrices non, pulvinar eget nunc. Morbi cursus eget enim eleifend tincidunt. In vel odio gravida, hendrerit diam ut, fringilla urna. Aenean sit amet nisi ut nisl placerat bibendum. Aenean consequat dapibus orci non accumsan. In imperdiet leo lectus, vitae euismod quam egestas et. Donec augue mauris, malesuada ac nunc dapibus, faucibus malesuada velit. Vivamus quis enim eget orci sollicitudin ultrices. Duis ut nulla velit. Donec feugiat quam nec sem cursus, vel feugiat nunc fringilla. +

+
+
+

Praesent placerat lectus

+

+ Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus. Morbi a lacus eget augue sagittis euismod. Aliquam non leo quis dui bibendum viverra eu vel erat. Fusce iaculis vulputate leo, sit amet laoreet eros aliquam a. Sed id tellus at ligula porttitor pharetra. Morbi non fringilla augue. Cras sodales egestas mi, et porta orci ultricies sed. Sed et nulla a ligula aliquet accumsan non eleifend quam. Aliquam pellentesque, justo vel interdum accumsan, purus ipsum porttitor lectus, ac luctus risus lectus nec lectus. Cras ut augue condimentum, egestas nisi in, dictum erat. Nullam tincidunt tincidunt tempor. Sed in eleifend nibh, sit amet feugiat nisi. Cras at ante ut urna sagittis dictum ut nec elit. +

+

+ 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. Mauris et condimentum ligula. Vestibulum nec tortor quis urna dictum luctus. Cras quis suscipit metus. Ut dignissim ullamcorper aliquam. Donec condimentum eu tellus at interdum. +

+

+ Nulla dignissim pellentesque magna ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in. Nullam rhoncus mi quis lectus gravida dignissim. Pellentesque a tortor ut leo pretium auctor non in massa. Nunc efficitur vestibulum mi, id mattis quam aliquet id. Ut semper tortor sit amet molestie mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet eleifend purus ut sagittis. Nunc consequat vel sapien at convallis. Maecenas sollicitudin quis justo non varius. +

+

+ Proin eu quam id arcu interdum laoreet nec at urna. Vivamus non sem quis dolor sagittis facilisis. Nunc quis urna non neque sollicitudin hendrerit. Vestibulum odio velit, vestibulum vitae elementum convallis, tristique eu est. Sed vitae tortor sed purus accumsan euismod nec finibus lorem. Donec consectetur libero sit amet pretium eleifend. Nulla placerat ipsum sed eros aliquet, at venenatis purus convallis. Pellentesque pulvinar, justo eget tincidunt semper, augue massa placerat enim, non tempus quam erat eu orci. Suspendisse auctor consectetur lectus, a mattis odio. Pellentesque id sem sit amet justo fringilla bibendum id sit amet quam. Vivamus ex est, ultrices non pharetra eu, facilisis nec quam. +

+

+ Etiam molestie sed orci sed suscipit. Donec ipsum est, venenatis ut nisl ut, viverra auctor diam. Cras vestibulum lacus vel nunc dapibus aliquam. Aliquam accumsan lorem rhoncus tortor rhoncus, ut euismod sapien ullamcorper. Vivamus et dictum lacus, eu pellentesque dolor. Suspendisse potenti. Mauris vitae volutpat odio. Duis vitae purus nec enim posuere efficitur at vitae nisl. Etiam enim nisl, rutrum in vestibulum nec, dapibus ut dui. Pellentesque imperdiet molestie ante quis feugiat. Sed nec felis congue, cursus ligula eget, bibendum est. Proin mattis, tortor non lobortis lobortis, nibh quam aliquam neque, sed tristique nibh ex aliquet felis. Phasellus non augue ac ante efficitur consectetur at at est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam dui enim, iaculis et felis ac, porta ullamcorper justo. Suspendisse potenti. +

+

+ Nam eros tellus, hendrerit ut rhoncus sed, aliquet et felis. Cras a ex malesuada, fringilla magna elementum, cursus purus. Etiam fringilla leo non diam congue tempor. Ut laoreet, est eget blandit congue, mauris magna cursus sapien, dictum tempus sapien diam et dolor. Vestibulum vel egestas velit. Pellentesque vel consectetur urna, eu consequat odio. Sed ac pretium magna, ut ultrices tortor. +

+ +
+
+

Aliquam eget massa loborti

+

+ Aliquam eget massa lobortis, maximus leo ac, iaculis quam. Sed non aliquet eros. Integer ultrices consequat tortor eget ullamcorper. Integer quis justo dignissim, porttitor urna sed, faucibus ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elit tortor, pharetra eu nisl vitae, placerat tempus lorem. Praesent rhoncus venenatis sodales. Cras tempor tempus lacus et pharetra. Phasellus at nulla sed ligula gravida hendrerit. Sed lorem tortor, consectetur id tempus eget, accumsan at eros. +

+

+ Aliquam erat volutpat. Aenean ornare elit magna, et efficitur massa dapibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ultricies posuere magna. Vestibulum placerat ligula bibendum tempus viverra. Morbi et magna eleifend, scelerisque justo ut, suscipit enim. Vestibulum ex arcu, dictum ut ligula feugiat, fringilla feugiat dui. Aenean velit nisi, consectetur eu mi quis, sollicitudin elementum mauris. Phasellus condimentum eu magna nec sollicitudin. Morbi sed velit mollis, aliquam libero vel, rutrum sapien. Etiam sit amet turpis tincidunt, euismod justo eget, pretium leo. Quisque a blandit justo. Proin dolor leo, semper non rhoncus sit amet, varius ac erat. Donec in lacus nec purus iaculis posuere eget et ligula. +

+

+ 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. Phasellus placerat fermentum odio. Cras placerat posuere risus et consectetur. Fusce dictum faucibus est quis imperdiet. Ut tristique, enim ultrices scelerisque imperdiet, ex mauris pellentesque arcu, sit amet mattis lacus purus in ligula. Vestibulum rhoncus dapibus orci, sit amet volutpat turpis semper ullamcorper. Nullam tincidunt lacus vel purus molestie fermentum. Fusce dapibus pulvinar vehicula. Pellentesque tempor elementum fermentum. Nunc ex erat, gravida sit amet dictum at, semper ut mi. Vestibulum pulvinar congue eros id faucibus. In non tellus et mi egestas aliquet id non dolor. +

+

+ Nam eros tellus, hendrerit ut rhoncus sed, aliquet et felis. Cras a ex malesuada, fringilla magna elementum, cursus purus. Etiam fringilla leo non diam congue tempor. Ut laoreet, est eget blandit congue, mauris magna cursus sapien, dictum tempus sapien diam et dolor. Vestibulum vel egestas velit. Pellentesque vel consectetur urna, eu consequat odio. Sed ac pretium magna, ut ultrices tortor. +

+ + +
+ + diff --git a/specs/target/target-counter/target-counter.spec.js b/specs/target/target-counter/target-counter.spec.js new file mode 100644 index 0000000000000000000000000000000000000000..9e03c5101a4da91e6bb280a44c364c5202701fb3 --- /dev/null +++ b/specs/target/target-counter/target-counter.spec.js @@ -0,0 +1,31 @@ +const TIMEOUT = 10000; // Some book might take longer than this to renderer + +describe('target-counter', async () => { + let page; + let rendered; + beforeAll(async () => { + page = await loadPage('target/target-counter/target-counter.html') + return page.rendered; + }, TIMEOUT) + + afterAll(async () => { + if (!DEBUG) { + await page.close(); + } + }) + + it('Cross reference should include See p. text', async () => { + let text = await page.$eval("#ref-call", (r) => window.getComputedStyle(r, '::after').content); + expect(text).toContain("(See p. "); + }) + + + if (!DEBUG) { + it('should create a pdf', async () => { + let pdf = await page.pdf(PDF_SETTINGS); + + expect(pdf).toMatchPDFSnapshot(1); + }) + } + } +) diff --git a/src/modules/generated-content/running-headers.js b/src/modules/generated-content/running-headers.js index 284723f12a7a7f9d63bd22f094a3d0bb29db199f..919d13d71fa435e673905a2acab00d91cb92b882 100644 --- a/src/modules/generated-content/running-headers.js +++ b/src/modules/generated-content/running-headers.js @@ -32,26 +32,20 @@ class RunningHeaders extends Handler { } if (declaration.property === "content") { - // Handle Raw - // element(x) is not parsed + csstree.walk(declaration, { - visit: 'Raw', + visit: 'Function', enter: (funcNode, fItem, fList) => { - if (funcNode.value.indexOf("element") > -1) { + if (funcNode.name.indexOf("element") > -1) { let selector = csstree.generate(rule.ruleNode.prelude); - let parsed = funcNode.value.match(/([^(]+)\(([^)]+)\)/); - - let func = parsed[1]; - let value = funcNode.value; + let func = funcNode.name; - let args = []; + let value = funcNode.children.first().name; - if (parsed.length >= 3) { - args.push(parsed[2]); - } + let args = [value]; // we only handle first for now let style = "first"; @@ -121,7 +115,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); @@ -216,6 +210,11 @@ class RunningHeaders extends Handler { return orderedSelectors; } + + beforeTreeParse(text, sheet) { + // element(x) is parsed as image element selector, so update element to element-ident + sheet.text = text.replace(/element[\s]*\(([^\|^#)]*)\)/g, "element-ident($1)"); + } } export default RunningHeaders; diff --git a/src/modules/generated-content/target-counters.js b/src/modules/generated-content/target-counters.js index a26b0cf924f6895bc9865b0987ed06adb3c5dbe7..ae860d0d33a8768bffce5572171efdbdd187cf8a 100644 --- a/src/modules/generated-content/target-counters.js +++ b/src/modules/generated-content/target-counters.js @@ -33,6 +33,8 @@ class TargetCounters extends Handler { counter = last.name; } + let variable = "--" + UUID(); + selector.split(",").forEach((s) => { this.counterTargets[s] = { func: func, @@ -40,10 +42,19 @@ class TargetCounters extends Handler { value: value, counter: counter, selector: s, - fullSelector: selector + fullSelector: selector, + variable: variable } }); + // Replace with variable + funcNode.name = "var"; + funcNode.children = new csstree.List() + funcNode.children.appendData({ + type: "Identifier", + loc: 0, + name: variable + }); } } @@ -81,7 +92,8 @@ class TargetCounters extends Handler { psuedo += "::" + split[1]; } - this.styleSheet.insertRule(`[data-target-counter="${selector}"]${psuedo} { content: "${pg}"; }`, this.styleSheet.cssRules.length); + // this.styleSheet.insertRule(`[data-target-counter="${selector}"]${psuedo} { content: "${pg}"; }`, this.styleSheet.cssRules.length); + this.styleSheet.insertRule(`[data-target-counter="${selector}"]${psuedo} { ${target.variable}: "${pg}" }`, this.styleSheet.cssRules.length); } } }); diff --git a/src/modules/generated-content/target-text.js b/src/modules/generated-content/target-text.js index a4f8c820fc58d4fcb7e1d4f4b02c5fa5f29cd50c..c327a11f20f7c8c1c87dd146e2ccdd70926a2450 100644 --- a/src/modules/generated-content/target-text.js +++ b/src/modules/generated-content/target-text.js @@ -32,6 +32,8 @@ class TargetText extends Handler { style = last.name; } + let variable = "--" + UUID(); + selector.split(",").forEach((s) => { this.textTargets[s] = { func: func, @@ -39,10 +41,19 @@ class TargetText extends Handler { value: value, style: style || "content", selector: s, - fullSelector: selector + fullSelector: selector, + variable: variable } }); + // Replace with variable + funcNode.name = "var"; + funcNode.children = new csstree.List() + funcNode.children.appendData({ + type: "Identifier", + loc: 0, + name: variable + }); } } @@ -59,7 +70,6 @@ class TargetText extends Handler { if (target.style === "content") { let text = element.textContent; let selector = UUID(); - selected.setAttribute("data-target-text", selector); let psuedo = ""; @@ -67,8 +77,18 @@ class TargetText extends Handler { psuedo += "::" + split[1]; } - this.styleSheet.insertRule(`[data-target-text="${selector}"]${psuedo} { content: "${element.textContent}"; }`, this.styleSheet.cssRules.length); + let textContent = element.textContent.trim().replace(/[\"\']/g, (match) => { + return "\\" + match; + }).replace(/[\n]/g, (match) => { + return "\\00000A"; + }); + + // this.styleSheet.insertRule(`[data-target-text="${selector}"]${psuedo} { content: "${element.textContent}" }`, this.styleSheet.cssRules.length); + this.styleSheet.insertRule(`[data-target-text="${selector}"]${psuedo} { ${target.variable}: "${textContent}" }`, this.styleSheet.cssRules.length); + } + } else { + console.warn("missed target", val); } }); diff --git a/src/modules/paged-media/atpage.js b/src/modules/paged-media/atpage.js index cba2e230d6549427782da08dd5814729733289cf..7b74fb0bdc9ac7a3f8db6a73fe70450ee3227431 100644 --- a/src/modules/paged-media/atpage.js +++ b/src/modules/paged-media/atpage.js @@ -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)); diff --git a/src/polisher/base.js b/src/polisher/base.js index 9d15a192dc2ea11c74f5277f5e1d02e98c73b0de..2e34d5cdb2775965757c5597b173dce1c0c77107 100644 --- a/src/polisher/base.js +++ b/src/polisher/base.js @@ -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; } diff --git a/src/polisher/polisher.js b/src/polisher/polisher.js index 0b8f2e9d8e855a27609f0f1c993d76ca366815b1..75b301cf1064c0dbc9f076ffa81ccbe03d3ad3dc 100644 --- a/src/polisher/polisher.js +++ b/src/polisher/polisher.js @@ -16,6 +16,7 @@ class Polisher { this.hooks.onDeclaration = new Hook(this); this.hooks.onContent = new Hook(this); + this.hooks.beforeTreeParse = new Hook(this); this.hooks.beforeTreeWalk = new Hook(this); this.hooks.afterTreeWalk = new Hook(this); @@ -60,12 +61,20 @@ class Polisher { } return await Promise.all(fetched) - .then((originals) => { + .then(async (originals) => { let text = ""; - originals.forEach((original, index) => { - let href = urls[index]; - let sheet = new Sheet(original, href, this.hooks); + let original, index; + let href, sheet; + + for (index = 0; index < originals.length; index++) { + original = originals[index]; + + href = urls[index]; + + sheet = new Sheet(href, this.hooks); + + await sheet.parse(original); this.sheets.push(sheet); @@ -82,11 +91,11 @@ class Polisher { } text += sheet.toString(); - }) + } let s = this.insert(text); this.inserted.push(s); - + // console.log(text); return text; }); } diff --git a/src/polisher/sheet.js b/src/polisher/sheet.js index 96255a1773506fc0ac103ee9f540aad78814a2c5..e8d94a7c097af91bacd06ca597e9d92fa8c0323d 100644 --- a/src/polisher/sheet.js +++ b/src/polisher/sheet.js @@ -3,7 +3,7 @@ import { UUID } from "../utils/utils"; import Hook from "../utils/hook"; class Sheet { - constructor(text, url, hooks) { + constructor(url, hooks) { if (hooks) { this.hooks = hooks; @@ -16,6 +16,7 @@ class Sheet { this.hooks.onDeclaration = new Hook(this); this.hooks.onContent = new Hook(this); + this.hooks.beforeTreeParse = new Hook(this); this.hooks.beforeTreeWalk = new Hook(this); this.hooks.afterTreeWalk = new Hook(this); } @@ -25,13 +26,20 @@ class Sheet { } catch (e) { this.url = new URL(window.location.href); } + } + - // this.original = text; - // Parse the text - this.ast = this.parse(text); + // parse + async parse(text) { + this.text = text; - this.hooks.beforeTreeWalk.trigger(this.ast); + await this.hooks.beforeTreeParse.trigger(this.text, this); + + // send to csstree + this.ast = csstree.parse(this._text); + + await this.hooks.beforeTreeWalk.trigger(this.ast); // Replace urls this.replaceUrls(this.ast); @@ -48,15 +56,10 @@ class Sheet { this.rules(this.ast); this.atrules(this.ast); - this.hooks.afterTreeWalk.trigger(this.ast, this); - } + await this.hooks.afterTreeWalk.trigger(this.ast, this); - // parse - parse(text) { - // send to csstree - let ast = csstree.parse(text); // return ast - return ast; + return this.ast; } insertRule(rule) { @@ -213,6 +216,14 @@ class Sheet { }); } + set text(t) { + this._text = t; + } + + get text() { + return this._text; + } + // generate string toString(ast) { return csstree.generate(ast || this.ast);