Commit 4a7447ba authored by Fred Chasen's avatar Fred Chasen

Add named pages

parent 0b3b534f
......@@ -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.");
......
/* 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;
}
......
......@@ -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",
......
......@@ -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",
......
......@@ -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);
......
......@@ -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();
......
......@@ -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
......
......@@ -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);
......
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");
......
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