Add support for running / element

src/chunker/chunker.js

@@ -74,7 +74,7 @@ class Chunker {
 
 		this.styles = polisher;
 		this.breaks = this.styles && this.styles.breaks;
-		this.styles && this.styles.contents(parsed);
+		this.styles && this.styles.targetText(parsed);
 
 		let sections;
 		if (this.breaks) {
@@ -198,6 +198,12 @@ class Chunker {
 		section.on("page", (page) => {
 			this.styles && this.styles.counters(this.pagesArea);
 			this.emit("page", page);
+		});
+
+		section.on("renderedPage", (page) => {
+			this.styles && this.styles.contents(page.element);
+			this.styles && this.styles.headers(page.element);
+			this.emit("renderedPage", page);
 		})
 
 		return section.render(sectionContent);

src/chunker/section.js

@@ -93,6 +93,8 @@ class Section {
       // Layout content in the page, starting from the breakToken
       breakToken = page.layout(content, breakToken);
 
+      this.emit("renderedPage", page);
+
       yield breakToken;
 
       // Stop if we get undefined, showing we have reached the end of the content

src/polisher/base.js

@@ -118,7 +118,6 @@ export default `
 .page .bottom > div {
   height: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
 }
 
@@ -126,10 +125,16 @@ export default `
 .page .right > div {
   width: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
 }
 
+.pages .left .content::after,
+.pages .top .content::after,
+.pages .right .content::after,
+.pages .bottom .content::after {
+  display: block;
+}
+
 @media print {
   body {
     width: var(--width);

src/polisher/polisher.js

@@ -45,6 +45,8 @@ class Polisher {
 				let stringSets = {};
 				let textTargets = {};
 				let counterTargets = {};
+				let running = {};
+				let elements = {};
 
 				originals.forEach((original, index) => {
 					let href = urls[index];
@@ -68,6 +70,8 @@ class Polisher {
 					stringSets = Object.assign(stringSets, sheet.stringSets);
 					textTargets = Object.assign(textTargets, sheet.textTargets);
 					counterTargets = Object.assign(counterTargets, sheet.counterTargets);
+					running = Object.assign(running, sheet.running);
+					elements = Object.assign(elements, sheet.elements);
 
  					text += sheet.toString();
 				})
@@ -82,6 +86,9 @@ class Polisher {
 				this.textTargets = textTargets;
 				this.counterTargets = counterTargets;
 
+				this.running = running;
+				this.elements = elements;
+
 				return text;
 			});
 	}
@@ -113,22 +120,7 @@ class Polisher {
 		return style;
 	}
 
-	contents(fragment) {
-		for (let name of Object.keys(this.stringSets)) {
-			let set = this.stringSets[name];
-			let selected = fragment.querySelector(set.selector);
-
-			if (selected) {
-				let cssVar;
-				if (set.value === "content" || set.value === "content(text)") {
-					cssVar = selected.textContent.replace(/\\([\s\S])|(["|'])/g,"\\$1$2");
-					this.styleSheet.insertRule(`:root { --string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
-				} else {
-					console.log(set.value + "needs css replacement");
-				}
-			}
-		}
-
+	targetText(fragment) {
 		Object.keys(this.textTargets).forEach((name) => {
 			let target = this.textTargets[name];
 			let split = target.selector.split("::");
@@ -158,6 +150,64 @@ class Polisher {
 		});
 	}
 
+	headers(fragment) {
+		for (let name of Object.keys(this.running)) {
+			let set = this.running[name];
+			let selected = fragment.querySelector(set.selector);
+			if (selected) {
+				let cssVar;
+				if (set.identifier === "running") {
+					// cssVar = selected.textContent.replace(/\\([\s\S])|(["|'])/g,"\\$1$2");
+					// this.styleSheet.insertRule(`:root { --string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
+					// fragment.style.setProperty(`--string-${name}`, `"${cssVar}"`);
+					set.first = selected;
+					selected.style.display = "none";
+				} else {
+					console.log(set.value + "needs css replacement");
+				}
+			}
+		}
+
+		// move elements
+		for (let selector of Object.keys(this.elements)) {
+			if (selector) {
+				let el = this.elements[selector];
+				let selected = fragment.querySelector(selector);
+				if (selected) {
+					let running = this.running[el.args[0]];
+					if (running.first) {
+						let clone = running.first.cloneNode(true);
+						clone.style.display = null;
+						selected.appendChild(clone);
+					}
+				}
+			}
+		}
+	}
+
+	contents(fragment) {
+		for (let name of Object.keys(this.stringSets)) {
+			let set = this.stringSets[name];
+			let selected = fragment.querySelector(set.selector);
+			if (selected) {
+				let cssVar;
+				if (set.value === "content" || set.value === "content(text)") {
+					cssVar = selected.textContent.replace(/\\([\s\S])|(["|'])/g,"\\$1$2");
+					// this.styleSheet.insertRule(`:root { --string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
+					// fragment.style.setProperty(`--string-${name}`, `"${cssVar}"`);
+					set.first = cssVar;
+				} else {
+					console.log(set.value + "needs css replacement");
+				}
+			} else {
+				// Use the previous values
+				if (set.first) {
+					fragment.style.setProperty(`--string-${name}`, `"${set.first}"`);
+				}
+			}
+		}
+	}
+
 	counters(root) {
 		Object.keys(this.counterTargets).forEach((name) => {
 			let target = this.counterTargets[name];
@@ -200,10 +250,6 @@ class Polisher {
 		});
 	}
 
-	targetText(element) {
-
-	}
-
 	attr(element, attributes) {
 		for (var i = 0; i < attributes.length; i++) {
 			if(element.hasAttribute(attributes[i])) {

src/polisher/sheet.js

@@ -39,6 +39,9 @@ class Sheet {
 
 		this.stringSets = this.getStringSets(this.ast);
 
+		this.running = this.getRunning(this.ast);
+		this.elements = this.getElements(this.ast);
+
 		let targets = this.getTargets(this.ast);
 		this.counterTargets = targets.counterTargets;
 		this.textTargets = targets.textTargets;
@@ -487,7 +490,99 @@ class Sheet {
 
 	addMarginalia(page, list, item) {
 		for (let loc in page.marginalia) {
-			let item = page.marginalia[loc];
+			let item = csstree.clone(page.marginalia[loc]);
+			csstree.walk(item, {
+				visit: "Declaration",
+				enter: (node, item, list) => {
+					if (node.property === "content") {
+						list.remove(item);
+					}
+				}
+			});
+
+			let selectorList = new csstree.List();
+			let selectors = new csstree.List();
+
+			let selector = selectorList.createItem({
+				type: 'Selector',
+				children: selectors
+			});
+
+			selectorList.insert(selector);
+
+			selectors.insert(selectors.createItem({
+				type: 'ClassSelector',
+				name: 'page'
+			}));
+
+			// Named page
+			if (page.name) {
+				name = page.name + "_page";
+				selectors.insert(selectors.createItem({
+					type: 'ClassSelector',
+					name: page.name + "_page"
+				}));
+			}
+
+			// PsuedoSelector
+			if (page.psuedo) {
+				selectors.insert(selectors.createItem({
+					type: 'ClassSelector',
+					name: page.psuedo + "_page"
+				}));
+			}
+
+			selectors.insert(selectors.createItem({
+				type: 'Combinator',
+				name: " "
+			}));
+
+			selectors.insert(selectors.createItem({
+				type: 'ClassSelector',
+				name: loc
+			}));
+
+			selectors.insert(selectors.createItem({
+				type: 'Combinator',
+				name: ">"
+			}));
+
+			selectors.insert(selectors.createItem({
+				type: 'ClassSelector',
+				name: "content"
+			}));
+
+			// selectors.insert(selectors.createItem({
+			// 	type: 'PseudoElementSelector',
+			// 	name: "after",
+			// 	children: null
+			// }));
+
+			let rule = list.createItem({
+				type: 'Rule',
+				prelude: {
+					type: 'SelectorList',
+					children: selectorList
+				},
+				block: item
+			});
+
+			list.append(rule);
+
+		}
+
+		// Just content
+		for (let loc in page.marginalia) {
+			let content = csstree.clone(page.marginalia[loc]);
+			csstree.walk(content, {
+				visit: "Declaration",
+				enter: (node, item, list) => {
+					if (node.property !== "content") {
+						list.remove(item);
+					}
+				}
+			});
+
 			let selectorList = new csstree.List();
 			let selectors = new csstree.List();
 
@@ -552,7 +647,7 @@ class Sheet {
 					type: 'SelectorList',
 					children: selectorList
 				},
-				block: item
+				block: content
 			});
 
 			list.append(rule);
@@ -594,6 +689,103 @@ class Sheet {
 		return stringSetSelectors;
 	}
 
+	getRunning(ast) {
+		let runningSelectors = {};
+		csstree.walk(ast, {
+			visit: 'Rule',
+			enter: (node, item, list) => {
+				csstree.walk(node, {
+					visit: 'Declaration',
+					enter: (declaration, dItem, dList) => {
+						if (declaration.property === "position") {
+							let selector = csstree.generate(node.prelude);
+
+							let identifier = declaration.value.children.first().name
+
+							if (identifier === "running") {
+								let value;
+								csstree.walk(declaration, {
+									visit: 'Function',
+									enter: (node, item, list) => {
+										value = node.children.first().name;
+									}
+								});
+
+								runningSelectors[value] = {
+									identifier: identifier,
+									value: value,
+									selector: selector
+								}
+							}
+
+						}
+					}
+				});
+			}
+		});
+		return runningSelectors;
+	}
+
+	getElements(ast) {
+		let elements = {};
+
+		csstree.walk(ast, {
+			visit: 'Rule',
+			enter: (node, item, list) => {
+				csstree.walk(node, {
+					visit: 'Declaration',
+					enter: (declaration, dItem, dList) => {
+						if (declaration.property === "content") {
+
+							// Handle Raw
+							// element(x) is not parsed
+							csstree.walk(declaration, {
+								visit: 'Raw',
+								enter: (funcNode, fItem, fList) => {
+									if (funcNode.value.indexOf("element") > -1) {
+
+										let selector = csstree.generate(node.prelude);
+										let parsed = funcNode.value.match(/([^(]+)\(([^)]+)\)/);
+
+										let func = parsed[1];
+
+										let value = funcNode.value;
+
+										let args = [];
+
+										if (parsed.length >= 3) {
+											args.push(parsed[2]);
+										}
+
+										// we only handle first for now
+										let style = "first";
+
+										selector.split(",").forEach((s) => {
+											// remove before / after
+											s = s.replace(/::after|::before/, "");
+
+											elements[s] = {
+												func: func,
+												args: args,
+												value: value,
+												style: style || "first",
+												selector: s,
+												fullSelector: selector
+											}
+										});
+									}
+
+								}
+							});
+						}
+					}
+				})
+			}
+		});
+
+		return elements;
+	}
+
 	getTargets(ast) {
 		let textTargets = {};
 		let counterTargets = {};
@@ -721,6 +913,10 @@ class Sheet {
 							if (func.name === "target-counter") {
 								// console.log(func);
 							}
+
+							if (func.name === "element") {
+								console.log("element", func);
+							}
 						}
 					});
 				}