Commit 2bf50153 authored by Fred Chasen's avatar Fred Chasen

Internal page template

parent 4d20818c
......@@ -120,6 +120,7 @@ html {
.top > div {
flex-grow: 1;
position: relative;
}
.right {
......@@ -135,6 +136,7 @@ html {
.right > div {
flex-grow: 1;
position: relative;
}
.bottom {
......@@ -159,6 +161,7 @@ html {
.bottom > div {
flex-grow: 1;
position: relative;
}
.left {
......@@ -173,6 +176,7 @@ html {
.left > div {
flex-grow: 1;
position: relative;
}
.page > .area {
......@@ -193,11 +197,11 @@ html {
.page .content {
width: 100%;
/* width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
align-items: center; */
}
......
......@@ -2,7 +2,7 @@
size: 8.5in 11in;
margin: 20mm 25mm;
marks: crop;
@footnote {
margin: 0.6em 0 0 0;
padding: 0.3em 0 0 0;
......@@ -12,6 +12,7 @@
@top-center {
vertical-align: bottom;
padding-bottom: 10mm;
content: string(booktitle);
}
}
......@@ -78,6 +79,10 @@ font-weight: bold;
font-style: italic;
}
#c001s0000 {
string-set: booktitle "hi";
}
body {
font-size: 1em;
......
......@@ -99,8 +99,8 @@
return sections(this.book.spine);
}).then((text) => {
let t0 = performance.now();
let flow = new Paged.Chunker(text, preview).then((flow) => {
let viewer = document.querySelector("#viewer");
let flow = new Paged.Chunker(text, viewer, preview).then((flow) => {
let t1 = performance.now();
console.log("Rendering " + flow.total + " pages took " + (t1 - t0) + " milliseconds.");
......@@ -117,36 +117,6 @@
<input type="file" id="input">
</div>
<div class="pages">
<template id="page-template">
<div class="page">
<div class="top">
<div class="top-left-corner"></div>
<div class="top-left"></div>
<div class="top-center"></div>
<div class="top-right"></div>
<div class="top-right-corner"></div>
</div>
<div class="right">
<div class="right-top"></div>
<div class="right-middle"></div>
<div class="right-bottom"></div>
</div>
<div class="left">
<div class="left-top"></div>
<div class="left-middle"></div>
<div class="left-bottom"></div>
</div>
<div class="bottom">
<div class="bottom-left-corner"></div>
<div class="bottom-left"></div>
<div class="bottom-center"></div>
<div class="bottom-right"></div>
<div class="bottom-right-corner"></div>
</div>
<div class="area"></div>
</div>
</template>
</div>
<div id="viewer"></div>
</body>
</html>
......@@ -27,6 +27,16 @@
let moby = await styles.add("assets/styles/mody-dick.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 t1 = performance.now();
console.log("Rendering " + flow.total + " pages took " + (t1 - t0) + " milliseconds.");
});
let resizer = () => {
let pages = document.querySelector(".pages");
let scale = ((window.innerWidth * .9 ) / pages.offsetWidth);
......@@ -37,49 +47,8 @@
window.addEventListener("resize", resizer, false);
let flowText = document.querySelector("#flow");
let t0 = performance.now();
let flow = new Paged.Chunker(flowText.content, preview).then((flow) => {
let t1 = performance.now();
console.log("Rendering " + flow.total + " pages took " + (t1 - t0) + " milliseconds.");
});
});
</script>
<div class="pages">
<template id="page-template">
<div class="page">
<div class="top">
<div class="top-left-corner"><div class="content"></div></div>
<div class="top-left"><div class="content"></div></div>
<div class="top-center"><div class="content"></div></div>
<div class="top-right"><div class="content"></div></div>
<div class="top-right-corner"><div class="content"></div></div>
</div>
<div class="right">
<div class="right-top"><div class="content"></div></div>
<div class="right-middle"><div class="content"></div></div>
<div class="right-bottom"><div class="content"></div></div>
</div>
<div class="left">
<div class="left-top"><div class="content"></div></div>
<div class="left-middle"><div class="content"></div></div>
<div class="left-bottom"><div class="content"></div></div>
</div>
<div class="bottom">
<div class="bottom-left-corner"><div class="content"></div></div>
<div class="bottom-left"><div class="content"></div></div>
<div class="bottom-center"><div class="content"></div></div>
<div class="bottom-right"><div class="content"></div></div>
<div class="bottom-right-corner"><div class="content"></div></div>
</div>
<div class="area"></div>
</div>
</template>
</div>
<template id="flow">
<section class="body-rw Chapter-rw" epub:type="bodymatter chapter">
<header>
......
......@@ -3,17 +3,53 @@ import Page from "./page";
import ContentParser from "./parser";
// import PagedBody from "../utils/paged-body.js";
const MAX_SECTIONS = 1;
const MAX_SECTIONS = false;
const TEMPLATE = `<div class="page">
<div class="top">
<div class="top-left-corner"><div class="content"></div></div>
<div class="top-left"><div class="content"></div></div>
<div class="top-center"><div class="content"></div></div>
<div class="top-right"><div class="content"></div></div>
<div class="top-right-corner"><div class="content"></div></div>
</div>
<div class="right">
<div class="right-top"><div class="content"></div></div>
<div class="right-middle"><div class="content"></div></div>
<div class="right-bottom"><div class="content"></div></div>
</div>
<div class="left">
<div class="left-top"><div class="content"></div></div>
<div class="left-middle"><div class="content"></div></div>
<div class="left-bottom"><div class="content"></div></div>
</div>
<div class="bottom">
<div class="bottom-left-corner"><div class="content"></div></div>
<div class="bottom-left"><div class="content"></div></div>
<div class="bottom-center"><div class="content"></div></div>
<div class="bottom-right"><div class="content"></div></div>
<div class="bottom-right-corner"><div class="content"></div></div>
</div>
<div class="area"></div>
</div>`;
/**
* Chop up text into flows
* @class
*/
class Chunker {
constructor(content, preview) {
constructor(content, renderTo, preview) {
this.pagesArea = document.createElement("div");
this.pagesArea.classList.add("pages");
if (renderTo) {
renderTo.appendChild(this.pagesArea);
} else {
document.querySelector("body").appendChild(this.pagesArea);
}
this.pagesArea = document.querySelector(".pages");
this.pageTemplate = document.querySelector("#page-template");
this.pageTemplate = document.createElement("template");
this.pageTemplate.innerHTML = TEMPLATE;
this.preview = preview;
......@@ -53,7 +89,7 @@ class Chunker {
// Wait for section to finish rendering before adding the next section
let rendered = await this.section(sectionContent).then((section) => {
this.total += section.total;
this.total = section.total;
this.sectionsTotal += 1;
});
......@@ -66,9 +102,9 @@ class Chunker {
section(sectionContent) {
let section = new Section(this.pagesArea, this.pageTemplate, this.preview);
let section = new Section(this.pagesArea, this.pageTemplate, this.total, this.preview);
section.create(this.sectionsTotal, this.total);
// section.create(this.sectionsTotal, this.total);
return section.render(sectionContent);
}
......
......@@ -19,19 +19,27 @@ class Page {
}
create(pgnum, section, template) {
//let documentFragment = document.createRange().createContextualFragment( TEMPLATE );
//let page = documentFragment.children[0];
let clone = document.importNode(this.pageTemplate.content, true);
let id = `section-${section || 0}-page-${pgnum}`;
this.id = id;
this.pagesArea.appendChild(clone);
let page = this.pagesArea.children[pgnum];
let page = this.pagesArea.lastChild;
// let page = this.pagesArea.children[pgnum];
let area = page.querySelector(".area");
page.id = id;
if (pgnum === 0) {
page.classList.add("first_page");
}
if (pgnum % 2 !== 0) {
page.classList.add("right_page");
} else {
......@@ -52,13 +60,13 @@ class Page {
this.width = Math.round(size.width);
this.height = Math.round(size.height);
this.element = clone;
this.element = page;
this.area = area;
let wrapper = document.createElement("div");
wrapper.style.outline = "none";
wrapper.setAttribute("contenteditable", true);
// wrapper.style.outline = "none";
// wrapper.setAttribute("contenteditable", true);
area.appendChild(wrapper);
......@@ -67,7 +75,7 @@ class Page {
// this.render = new Renderer(area);
return clone;
return page;
}
/*
......
......@@ -8,14 +8,14 @@ const MAX_PAGES = 10000000000;
* @class
*/
class Section {
constructor(pagesArea, pageTemplate, preview=true) {
constructor(pagesArea, pageTemplate, total, preview=true) {
this.pagesArea = pagesArea;
this.pageTemplate = pageTemplate;
this.preview = preview;
this.pages = [];
this.total = 0;
this.total = total || 0;
}
create(section, startPage) {
......@@ -87,7 +87,7 @@ class Section {
addPage() {
// Create a new page from the template
let page = new Page(this.element, this.pageTemplate);
let page = new Page(this.pagesArea, this.pageTemplate);
let total = this.pages.push(page);
// Create the pages
......
......@@ -35,10 +35,10 @@ class StylesParser {
width: undefined,
height: undefined,
margin : {
top: undefined,
right: undefined,
left: undefined,
bottom: undefined
top: {value: 0, unit: "px"},
right: {value: 0, unit: "px"},
left: {value: 0, unit: "px"},
bottom: {value: 0, unit: "px"}
},
block: {},
marks: undefined
......@@ -68,8 +68,8 @@ class StylesParser {
});
if (margins.length === 1) {
for (let m of page.margin) {
m = margins[0];
for (let m in page.margin) {
page.margin[m] = margins[0];
}
} else if (margins.length === 2) {
page.margin.top = margins[0];
......@@ -95,7 +95,7 @@ class StylesParser {
property: "--margin-" + m,
value: {
type: "Raw",
value: page.margin[m].value + page.margin[m].unit
value: page.margin[m].value + (page.margin[m].unit || '')
}
});
dList.insert(mVar, dItem);
......@@ -106,6 +106,20 @@ class StylesParser {
dList.remove(dItem);
}
if (prop.indexOf("margin-") === 0) {
let m = prop.substring("margin-".length);
page.margin[m] = declaration.value.children.first();
let mVar = dList.createItem({
type: 'Declaration',
property: "--margin-" + m,
value: {
type: "Raw",
value: page.margin[m].value + (page.margin[m].unit || '')
}
});
dList.replace(dItem, mVar);
}
if (prop === "size") {
// console.log("size", value);
......
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