Skip to content

P
pagedjs
Commit 6fcb632a authored by Fred Chasen's avatar Fred Chasen
Browse files
Options

Add polyfill js

parent 904d0281
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 77 deletions
examples/aurorae/index.html
View file @ 6fcb632a
......@@ -9,8 +9,9 @@
<link rel="coverpage" href="images/cover.jpg" />
<script src="../../dist/paged.polyfill.js"></script>
<!-- <link href="book.css" rel="stylesheet" type='text/css'> -->
<link href="book.css" rel="stylesheet" type='text/css'>
<!-- Paged js-->
......@@ -35,58 +36,9 @@
<link rel="stylesheet" href="fonts/hk-grotesk/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="../assets/styles/index.css">
<link rel="stylesheet" type="text/css" href="../assets/styles/examples.css">
<script>this.ready=new Promise(function($){document.addEventListener('DOMContentLoaded',$,{once:true})})</script>
<script src="../../dist/paged.js"></script>
</head>
<body>
<script>
ready.then(async function () {
let preview = true;
let url = new URL(window.location);
let params = new URLSearchParams(url.search);
for(var pair of params.entries()) {
if(pair[0] === "preview") {
preview = (pair[1] === "true");
}
}
let flowText = document.querySelector("#flow");
// styles
let styles = new Paged.Styler();
let styleText = await styles.add("book.css");
// console.log(moby);
let t0 = performance.now();
let chunker = new Paged.Chunker(flowText.content, undefined, styles, 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);
if (scale < 1) {
pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
} else {
pages.style.transform = "none";
}
};
resizer();
window.addEventListener("resize", resizer, false);
});
</script>
<template id="flow">
<section id="cover">
<h1>Auroræ : their characters and spectra</h1>
......@@ -14488,7 +14440,6 @@ is not entirely a phenomenon of perspective, but that the rays have a true curva
</section>
</template>
......
rollup.config.js
View file @ 6fcb632a
......@@ -30,5 +30,15 @@ export default [
format: 'cjs'
},
]
},
{
input: "./src/polyfill/polyfill.js",
output: {
name: 'PagedPolyfill',
file: "./dist/paged.polyfill.js",
format: 'umd'
},
plugins: plugins
}
];
rollup.server.config.js
View file @ 6fcb632a
......@@ -38,5 +38,15 @@ export default [
format: 'umd'
},
plugins: plugins
},
{
input: "./src/polyfill/polyfill.js",
output: {
name: 'PagedPolyfill',
file: "./dist/paged.polyfill.js",
format: 'umd'
},
plugins: plugins
}
];
src/chunker/chunker.js
View file @ 6fcb632a
......@@ -61,47 +61,37 @@ class Chunker {
this.sectionsTotal = 0;
this.content = content;
this.breaks = this.styles && this.styles.breaks;
if (content) {
this.flowed = this.flow(content, this.breaks);
} else {
this.flowed = new new Promise(function(resolve, reject) {
// TODO: handle deffered
});
return this.flow(content, styler);
}
return this;
}
then() {
return this.flowed.then;
}
flow(content, breaks) {
async flow(content, styler) {
let parsed = new ContentParser(content);
this.styles = styler;
this.breaks = this.styles && this.styles.breaks;
this.styles && this.styles.contents(parsed);
let sections;
if (breaks) {
sections = this.processBreaks(parsed, breaks);
if (this.breaks) {
sections = this.processBreaks(parsed, this.breaks);
} else {
sections = [...parsed.children];
}
if (sections.length > 0) {
return this.sections(sections).then(() => {
return this;
});
await this.sections(sections);
} else {
return this.section(parsed)
await this.section(parsed)
.then((section) => {
this.total += section.total;
this.sectionsTotal += 1;
return this;
});
}
return this;
}
processBreaks(parsed, breaks) {
......@@ -120,8 +110,12 @@ class Chunker {
}
// Add any other direct children
let child;
for (var i = 0; i < parsed.children.length; i++) {
selectors.push("[ref='"+parsed.children[i].getAttribute("ref")+"']");
child = parsed.children[i];
if ((child.noteType === 1 || child.nodeType === "3") && child.nodeName !== "SCRIPT") {
selectors.push("[ref='"+child.getAttribute("ref")+"']");
}
}
let s = selectors.join(",");
......@@ -174,6 +168,7 @@ class Chunker {
// let sectionContent = sections.shift();
// let frag = document.createDocumentFragment();
// frag.appendChild(section);
let renderedSections = [];
for (let sectionContent of sections) {
......@@ -182,15 +177,18 @@ class Chunker {
this.total = section.total;
this.sectionsTotal += 1;
});
renderedSections.push(rendered);
if (MAX_SECTIONS && this.sectionsTotal >= MAX_SECTIONS) {
break;
}
}
return renderedSections;
}
section(sectionContent) {
async section(sectionContent) {
let section = new Section(this.pagesArea, this.pageTemplate, this.total, this.preview);
// section.create(this.sectionsTotal, this.total);
......
src/polyfill/polyfill.js 0 → 100644
View file @ 6fcb632a
import Chunker from '../chunker/chunker';
import Styler from '../styles/styler';
// let ready = new Promise(function($){document.addEventListener('DOMContentLoaded',$,{once:true})});
let ready = new Promise(function(resolve, reject){
document.onreadystatechange = function ($) {
if (document.readyState === "interactive") {
resolve($);
}
}
});
ready.then(async function () {
let preview = true;
let url = new URL(window.location);
let params = new URLSearchParams(url.search);
for(var pair of params.entries()) {
if(pair[0] === "preview") {
preview = (pair[1] === "true");
}
}
// Wrap body in template tag
let body = document.querySelector("body");
// Check if a template exists
let template;
template = body.querySelector(":scope > template");
if (!template) {
// Otherwise create one
template = document.createElement("template");
template.innerHTML = body.innerHTML;
body.innerHTML = '';
body.appendChild(template);
}
// Get all stylesheets
let stylesheets = Array.from(document.querySelectorAll("link[rel='stylesheet']"));
let hrefs = stylesheets.map((sheet) => {
sheet.remove();
return sheet.href;
});
// TODO: add inline styles
// Process styles
let styles = new Styler();
let styleText = await styles.add(...hrefs);
// Chunk contents
let chunker = new Chunker(undefined, body, styles, preview);
let startTime = performance.now();
// Render flow
let flow = await chunker.flow(template.content, styles);
let endTime = performance.now();
console.log("Rendering " + flow.total + " pages took " + (endTime - startTime) + " milliseconds.");
});
src/styles/base.js
View file @ 6fcb632a
......@@ -129,4 +129,20 @@ export default `
justify-content: center;
align-items: center;
}
@media print {
body {
width: var(--width);
height: var(--height);
margin: 0;
padding: 0;
}
.pages {
width: var(--width);
flex-direction: column;
}
.page {
break-before: always;
}
}
`;
src/styles/sheet.js
View file @ 6fcb632a
......@@ -328,14 +328,14 @@ class Sheet {
let right = this.createPage(pages[":right"], ast.children);
ast.children.insert(right);
}
// Add :first & :empty
// Add :first & :blank
if (":first" in pages) {
let first = this.createPage(pages[":first"], ast.children);
ast.children.insert(first);
}
if (":empty" in pages) {
let empty = this.createPage(pages[":empty"], ast.children);
ast.children.insert(empty);
if (":blank" in pages) {
let blank = this.createPage(pages[":blank"], ast.children);
ast.children.insert(blank);
}
// Add named pages
for (let pg in pages) {
......
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