Add named pages

examples/aurorae/index.html

@@ -10,7 +10,7 @@
     <link rel="coverpage" href="images/cover.jpg" />
 
 
-    <link href="book.css" rel="stylesheet" type='text/css'>
+    <!-- <link href="book.css" rel="stylesheet" type='text/css'> -->
 
 
     <!-- Paged js-->
@@ -53,14 +53,14 @@
 
       // styles
       let styles = new Paged.Styler();
-      let moby = await styles.add("paged-js/layout-pagedjs.css");
-      console.log(moby);
+      let moby = await styles.add("book.css", "paged-js/layout-pagedjs.css");
+      // console.log(moby);
 
       let flowText = document.querySelector("#flow");
 
       let t0 = performance.now();
 
-      let flow = new Paged.Chunker(flowText.content, undefined, preview).then((flow) => {
+      let flow = new Paged.Chunker(flowText.content, undefined, styles.breaks, preview).then((flow) => {
         let t1 = performance.now();
 
         console.log("Rendering " + flow.total + " pages took " + (t1 - t0) + " milliseconds.");

examples/aurorae/paged-js/layout-pagedjs.css

 /* CSS DEMO pagedjs*/
-#fred .ok {
-  
-}
 .sidenote, .footnote {
     display:none!important;
 }
@@ -30,11 +27,20 @@ html{
 
   }
 
-  @page fred {
-    background-image:  none;
-  }
+  /*@page:first {
+    margin: 0;
+    background: url("../images/cover.jpg");
+    background-position: center;
+    background-size: 104%;
+    background-repeat: no-repeat;
+
+    @top-left{ content: none; }
+    @top-center{ content: none; }
+    @top-right{ content: none; }
+    @bottom-left{ content: none; }
+  }*/
 
-  @page:first {
+  @page cover {
     margin: 0;
     background: url("../images/cover.jpg");
     background-position: center;
@@ -160,6 +166,10 @@ html{
     string-set: booktitle content(text);
   }
 
+  #cover {
+    page: cover;
+  }
+
   .shorter{
     position: running(shorter);
     font-weight: 400;
@@ -173,9 +183,6 @@ html{
   }
 
 
-
-
-
   /* flexbox */
   section[data-type="copyright"] #flexbox {
     display: block;
@@ -192,13 +199,7 @@ html{
 
 }
 
-
-
-
-
-
 /* table of content */
-
 #toc{
   counter-reset: chaptoc apptoc;
 }

package-lock.json

@@ -2768,8 +2768,7 @@
     "lodash": {
       "version": "4.17.5",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
-      "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
-      "dev": true
+      "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
     },
     "loose-envify": {
       "version": "1.3.1",

package.json

@@ -9,7 +9,8 @@
   "module": "src/index.js",
   "browser": "dist/paged.js",
   "dependencies": {
-    "css-tree": "^1.0.0-alpha.28"
+    "css-tree": "^1.0.0-alpha.28",
+    "lodash": "^4.17.5"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

src/chunker/chunker.js

@@ -38,7 +38,7 @@ const TEMPLATE = `<div class="page">
  * @class
  */
 class Chunker {
-	constructor(content, renderTo, preview) {
+	constructor(content, renderTo, breaks, preview) {
 		this.pagesArea = document.createElement("div");
 		this.pagesArea.classList.add("pages");
 
@@ -59,10 +59,18 @@ class Chunker {
 
 		if (content) {
 			this.content = content;
+			this.breaks = breaks;
 
 			let parsed = new ContentParser(content);
 
-			let sections = [...parsed.children];
+			let sections;
+			if (breaks) {
+				sections = this.processBreaks(parsed, breaks);
+			} else {
+				sections = [...parsed.children];
+			}
+
+			this.namedPages = this.findNamedPages(parsed, breaks);
 
 			if (sections.length > 0) {
 				return this.sections(sections).then(() => {
@@ -80,6 +88,29 @@ class Chunker {
 		}
 	}
 
+	processBreaks(parsed, breaks) {
+		let selectors = [];
+		for (let b in breaks) {
+			selectors.push(b);
+		}
+		let s = selectors.join(",");
+		let parts = parsed.querySelectorAll(s);
+		return parts;
+	}
+
+	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;
+				}
+			}
+		}
+		return named;
+	}
+
 	async sections(sections) {
 		// let sectionContent = sections.shift();
 		// let frag = document.createDocumentFragment();
@@ -101,8 +132,20 @@ 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, this.preview);
+		let section = new Section(this.pagesArea, this.pageTemplate, this.total, name, this.preview);
 
 		// section.create(this.sectionsTotal, this.total);
 

src/chunker/page.js

@@ -6,9 +6,10 @@ import Renderer from "./renderer";
  * @class
  */
 class Page {
-  constructor(pagesArea, pageTemplate) {
+  constructor(pagesArea, pageTemplate, name) {
     this.pagesArea = pagesArea;
     this.pageTemplate = pageTemplate;
+    this.name = name;
 
     // this.mapper = new Mapping(undefined, undefined, undefined, true);
 
@@ -36,6 +37,10 @@ class Page {
 
     page.id = id;
 
+    if (this.name) {
+      page.classList.add(this.name + "_page");
+    }
+    
     if (pgnum === 0) {
       page.classList.add("first_page");
     }
@@ -46,7 +51,6 @@ class Page {
       page.classList.add("left_page");
     }
 
-
     let size = area.getBoundingClientRect();
 
 

src/chunker/section.js

@@ -8,10 +8,10 @@ const MAX_PAGES = 10000000000;
  * @class
  */
 class Section {
-  constructor(pagesArea, pageTemplate, total, preview=true) {
+  constructor(pagesArea, pageTemplate, total, name, preview=true) {
     this.pagesArea = pagesArea;
     this.pageTemplate = pageTemplate;
-
+    this.name = name;
     this.preview = preview;
 
     this.pages = [];
@@ -87,7 +87,7 @@ class Section {
 
   addPage() {
     // Create a new page from the template
-    let page = new Page(this.pagesArea, this.pageTemplate);
+    let page = new Page(this.pagesArea, this.pageTemplate, this.name);
     let total = this.pages.push(page);
 
     // Create the pages

src/styles/sheet.js

@@ -13,6 +13,13 @@ class Sheet {
 		// Scope
 		this.id = UUID();
 		// this.addScope(this.ast, this.uuid);
+
+		// Get page selectors
+		// this.namedPageSelectors = this.getNamedPageSelectors(this.ast);
+
+		// Get page brekas
+		this.pageBreaks = this.replacePageBreaks(this.ast);
+
 		// Remove @page rules
 		this.pages = this.replacePages(this.ast);
 
@@ -26,7 +33,8 @@ class Sheet {
 		// send to csstree
 		let ast = csstree.parse(text);
 		// return ast
-		return ast
+		console.log(ast);
+		return ast;
 	}
 
 	pageModel(selector) {
@@ -64,20 +72,13 @@ class Sheet {
 
 					if (node.prelude) {
 						named = this.getTypeSelector(node);
-						if (named) {
-							selector += named;
-						}
-
 						psuedo = this.getPsuedoSelector(node);
-						if (psuedo && selector) {
-							selector += " :" + psuedo;
-						} else if (psuedo) {
-							selector = ":" + psuedo;
-						}
+						selector = csstree.generate(node.prelude);
 					} else {
 						selector = "*";
 					}
 
+
 					let page = this.pageModel(selector);
 
 					page.name = named;
@@ -640,6 +641,126 @@ class Sheet {
 		});
 	}
 
+	/*
+	getNamedPageSelectors(ast) {
+		let record = false;
+		let namedPageSelectors = {};
+		csstree.walk(ast, {
+			// visit: 'Declaration',
+			leave: (node, item, list) => {
+				if(record && node.type === "Rule"){
+					record.selector = csstree.generate(node.prelude);
+				}
+
+				if (node.type === "Declaration" && node.property === "page") {
+					let name = node.value.children.first().name;
+					namedPageSelectors[name] = {
+						name: name,
+						selector: ''
+					}
+					record = namedPageSelectors[name];
+				}
+			},
+			enter: (node, item, list) => {
+				if (record) {
+					record = false;
+				}
+			}
+		});
+	}
+	*/
+
+	getNamedPageSelectors(ast) {
+		let namedPageSelectors = {};
+		csstree.walk(ast, {
+			visit: 'Rule',
+			enter: (node, item, list) => {
+				csstree.walk(node, {
+					visit: 'Declaration',
+					enter: (declaration, dItem, dList) => {
+						if (declaration.property === "page") {
+							let value = declaration.value.children.first();
+							let name = value.name;
+							let selector = csstree.generate(node.prelude);
+							namedPageSelectors[name] = {
+								name: name,
+								selector: selector
+							}
+
+							// dList.remove(dItem);
+
+							// Add in page break
+							declaration.property = "break-before";
+							value.type = "Identifier";
+							value.name = "always";
+
+						}
+					}
+				});
+			}
+		});
+		return namedPageSelectors;
+	}
+
+	replacePageBreaks(ast) {
+		let breaks = {};
+
+		csstree.walk(ast, {
+			visit: 'Rule',
+			enter: (node, item, list) => {
+				csstree.walk(node, {
+					visit: 'Declaration',
+					enter: (declaration, dItem, dList) => {
+						let property = declaration.property;
+
+						if (property === "break-before" ||
+								property === "break-after" ||
+								property === "page-break-before" ||
+								property === "page-break-after" ||
+								property === "page"
+						) {
+
+							let children = declaration.value.children.first();
+							let value = children.name;
+							let selector = csstree.generate(node.prelude);
+							let name;
+
+							if (property === "page-break-before") {
+								property = "break-before";
+							} else if (property === "page-break-after") {
+								property = "break-after";
+							}
+
+							if (property === "page") {
+								name = value;
+								value = "always";
+							}
+
+							let breaker = {
+								property: property,
+								value: value,
+								selector: selector,
+								name: name
+							};
+
+							selector.split(",").forEach((s) => {
+								if (!breaks[s]) {
+									breaks[s] = [breaker];
+								} else {
+									breaks[s].push(breaker);
+								}
+							})
+
+							dList.remove(dItem);
+						}
+					}
+				});
+			}
+		});
+
+		return breaks;
+	}
+
 	// generate string
 	toString(ast) {
 		return csstree.generate(ast || this.ast);

src/styles/styler.js

 import Sheet from './sheet.js';
 
 class Styler {
-  constructor() {
+	constructor() {
 		this.sheets = [];
-  }
+	}
 
-	async add(href) {
-		let sheet;
-	 	return await fetch(href)
-			.then((response) => {
+	async add() {
+		let fetched = [];
+		for (var i = 0; i < arguments.length; i++) {
+			let f = fetch(arguments[i]).then((response) => {
 				return response.text();
-			}).then((original) => {
-				sheet = new Sheet(original, href);
+			})
+			fetched.push(f);
+		}
+
+		return await Promise.all(fetched)
+			.then((originals) => {
+				let text;
+				let pageBreaks = {};
+
+				originals.forEach((original, index) => {
+					let href = arguments[index];
+					let sheet = new Sheet(original, href);
+
+					this.sheets.push(sheet);
 
-				let text = sheet.toString();
+					this.mergeBreaks(pageBreaks, sheet.pageBreaks);
+
+ 					text += sheet.toString();
+				})
 
 				this.insert(text);
 
-        return text;
+				this.breaks = pageBreaks;
+
+				return text;
 			});
 	}
 
@@ -25,6 +42,17 @@ class Styler {
 
 	}
 
+	mergeBreaks(pageBreaks, newBreaks) {
+		for (let b in newBreaks) {
+			if (b in pageBreaks) {
+				pageBreaks[b] = pageBreaks[b].concat(newBreaks[b]);
+			} else {
+				pageBreaks[b] = newBreaks[b];
+			}
+		}
+		return pageBreaks;
+	}
+
 	insert(text){
 		let head = document.querySelector("head");
 		let style = document.createElement("style");