Add page breaks

examples/aurorae/index.html

@@ -161,10 +161,7 @@
       <p>
         Printed by Taylor and Francis<br/>
         Red Lion Court, Fleet Street</p>
-      </div>
-
-
-
+    </div>
   </section>
 
 
@@ -175,6 +172,7 @@
       one of the earliest spectroscopic observers<br/>
       of the aurora and zodiacal light,<br/>
       this volume is respectfully dedicated <br/>by the author.
+    </p>
   </section>
 
 

src/chunker/chunker.js

 import Section from "./section";
 import Page from "./page";
 import ContentParser from "./parser";
+import { split } from "../utils/dom";
 // import PagedBody from "../utils/paged-body.js";
 
 const MAX_SECTIONS = false;
@@ -70,8 +71,6 @@ class Chunker {
 				sections = [...parsed.children];
 			}
 
-			this.namedPages = this.findNamedPages(parsed, breaks);
-
 			if (sections.length > 0) {
 				return this.sections(sections).then(() => {
 					return this;
@@ -91,26 +90,69 @@ class Chunker {
 	processBreaks(parsed, breaks) {
 		let selectors = [];
 		for (let b in breaks) {
+			// Find elements
+			let elements = parsed.querySelectorAll(b);
+			// Add break data
+			for (var i = 0; i < elements.length; i++) {
+				for (let prop of breaks[b]) {
+					elements[i].setAttribute("data-" + prop.property, prop.value);
+				}
+			}
+			// Add to global selector
 			selectors.push(b);
 		}
+
+		// Add any other direct children
+		for (var i = 0; i < parsed.children.length; i++) {
+			selectors.push("[ref='"+parsed.children[i].getAttribute("ref")+"']");
+		}
+
 		let s = selectors.join(",");
-		let parts = parsed.querySelectorAll(s);
-		return parts;
-	}
+		let parts = Array.from(parsed.querySelectorAll(s));
+
+		let part;
+		let sections = [];
+
+		for (var i = 0; i < parts.length; i++) {
+			part = parts[i];
+			if (part.parentNode && part.parentNode.nodeType === 1) {
+				let parent = part.parentNode;
+				let before = part.dataset.breakBefore;
+				let after = part.dataset.breakAfter;
+				let index = Array.prototype.indexOf.call(parent.childNodes, part);
+
+				// Get the top parent
+				let topParent = part.parentNode;
+				while (topParent) {
+					if(topParent.parentNode.nodeType === 1) {
+						topParent = topParent.parentNode;
+					} else {
+						break;
+					}
+				}
 
-	findNamedPages(parsed, breaks) {
-		let named = {};
-		for (let b in breaks) {
-			for (let p of breaks[b]) {
-				if (p.name) {
-					let parts = parsed.querySelectorAll(b);
-					named[p.name] = parts;
+				// Split
+				let dup = split(topParent, part, before);
+
+				if (dup) {
+					// console.log("dup", part, dup);
+
+					sections.concat(sections, dup);
+				} else {
+					// console.log("topParent", topParent);
+					sections.push(topParent);
 				}
+			} else {
+				// console.log("parT", part);
+
+				sections.push(part);
 			}
 		}
-		return named;
+
+		return sections;
 	}
 
+
 	async sections(sections) {
 		// let sectionContent = sections.shift();
 		// let frag = document.createDocumentFragment();
@@ -132,20 +174,7 @@ class Chunker {
 	}
 
 	section(sectionContent) {
-		let name;
-		for (let named in this.namedPages) {
-			for (let element of this.namedPages[named]) {
-				if(sectionContent == element) {
-					name = named;
-					break;
-				}
-			}
-			if (name) {
-				break;
-			}
-		}
-
-		let section = new Section(this.pagesArea, this.pageTemplate, this.total, name, this.preview);
+		let section = new Section(this.pagesArea, this.pageTemplate, this.total, this.preview);
 
 		// section.create(this.sectionsTotal, this.total);
 

src/chunker/layout.js

@@ -173,7 +173,8 @@ class Layout {
     }
 
     for (var i = 0; i < ancestors.length; i++) {
-      parent = this.createDOMNode(ancestors[i]);
+      // parent = this.createDOMNode(ancestors[i]);
+      parent = ancestors[i].cloneNode(false);
       if (added.length) {
         // let container = this.wrapper.querySelector("[ref='" + ancestors[i].parent.attribs.ref + "']");
         let container = added[added.length-1];

src/chunker/section.js

@@ -8,13 +8,13 @@ const MAX_PAGES = 10000000000;
  * @class
  */
 class Section {
-  constructor(pagesArea, pageTemplate, total, name, preview=true) {
+  constructor(pagesArea, pageTemplate, total, preview=true) {
     this.pagesArea = pagesArea;
     this.pageTemplate = pageTemplate;
-    this.name = name;
     this.preview = preview;
 
     this.pages = [];
+    this.startPage = total || 0;
     this.total = total || 0;
   }
 
@@ -45,6 +45,20 @@ class Section {
     let done = false;
     let result;
 
+    this.name = parsed.dataset.page;
+    this.breaks = {
+      before: parsed.dataset.breakBefore,
+      after: parsed.dataset.breakAfter
+    }
+
+    if (this.breaks.before === "right" && this.startPage % 2 > 0) {
+      this.addPage();
+    }
+
+    if (this.breaks.before === "left" && this.startPage % 2 === 0) {
+      this.addPage();
+    }
+
     while (!done) {
       if (this.preview) {
         result = await this.renderOnIdle(renderer);
@@ -106,7 +120,7 @@ class Section {
     });
 
     page.onUnderflow(() => {
-      console.log("underflow on", page.id);
+      // console.log("underflow on", page.id);
     });
 
     this.total += 1;

src/styles/sheet.js

@@ -33,7 +33,7 @@ class Sheet {
 		// send to csstree
 		let ast = csstree.parse(text);
 		// return ast
-		console.log(ast);
+		// console.log(ast);
 		return ast;
 	}
 
@@ -733,7 +733,7 @@ class Sheet {
 
 							if (property === "page") {
 								name = value;
-								value = "always";
+								// value = "always";
 							}
 
 							let breaker = {

src/utils/dom.js

@@ -55,6 +55,31 @@ export function after(node, limiter) {
 	return after;
 }
 
+export function before(node, limiter) {
+	let before = node;
+
+	if (after.prevSibling) {
+		if (limiter && node === limiter) {
+			return;
+		}
+		before = after.prevSibling;
+	} else {
+		while (before) {
+			before = before.parentNode;
+			if (limiter && before === limiter) {
+				before = undefined;
+				break;
+			}
+			if (before && before.prevSibling) {
+				before = prev.nextSibling;
+				break;
+			}
+		}
+	}
+
+	return before;
+}
+
 export function stackChildren(currentNode, stacked) {
 	let stack = stacked || [];
 
@@ -67,3 +92,81 @@ export function stackChildren(currentNode, stacked) {
 
 	return stack;
 }
+
+export function rebuildAncestors(node) {
+	let parent;
+	let ancestors = [];
+	let added = [];
+
+	let fragment = document.createDocumentFragment();
+
+	// Gather all ancestors
+	let element = node;
+	while(element.parentNode && element.parentNode.nodeType === 1) {
+		ancestors.unshift(element.parentNode);
+		element = element.parentNode;
+	}
+
+	for (var i = 0; i < ancestors.length; i++) {
+		// parent = this.createDOMNode(ancestors[i]);
+		parent = ancestors[i].cloneNode(false);
+		if (added.length) {
+			// let container = this.wrapper.querySelector("[ref='" + ancestors[i].parent.attribs.ref + "']");
+			let container = added[added.length-1];
+			container.appendChild(parent);
+		} else {
+			fragment.appendChild(parent);
+		}
+		added.push(parent);
+	}
+
+	added = undefined;
+	return fragment;
+}
+
+export function split(bound, cutElement, breakAfter) {
+		let needsRemoval = [];
+		let index = Array.prototype.indexOf.call(cutElement.parentNode.children, cutElement);
+
+		if (!breakAfter && index === 0) {
+			return;
+		}
+
+		if (breakAfter && index === (cutElement.parentNode.children.length - 1)) {
+			return;
+		}
+
+		// Create a fragment with rebuilt ancestors
+		let fragment = rebuildAncestors(cutElement);
+
+		// Clone cut
+		if (!breakAfter) {
+			let clone = cutElement.cloneNode(true);
+			let ref = cutElement.parentNode.getAttribute('ref');
+			let parent = fragment.querySelector("[ref='" + ref + "']");
+			parent.appendChild(clone);
+			needsRemoval.push(cutElement);
+		}
+
+		// Remove all after cut
+		let next = after(cutElement, bound);
+		while (next) {
+			let clone = next.cloneNode(true);
+			let ref = next.parentNode.getAttribute('ref');
+			let parent = fragment.querySelector("[ref='" + ref + "']");
+			parent.appendChild(clone);
+			needsRemoval.push(next);
+			next = after(next, bound);
+		}
+
+		// Remove originals
+		needsRemoval.forEach((node) => {
+			if (node) {
+				node.remove();
+			}
+		});
+
+		// Insert after bounds
+		bound.parentNode.insertBefore(fragment, bound.nextSibling);
+		return [bound, bound.nextSibling];
+}