Commit 12a277e1 authored by Fred Chasen's avatar Fred Chasen

Add styles classes

parent f6d850e1
// Apply a natural box layout model to all elements
// but allowing components to change
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
@page {
size: 115mm 200mm; /* measured from scanned book */
margin: 20mm 15mm;
marks: crop;
font: small-caps 600 1.3em "Adobe Caslon Pro", serif;
@footnote {
margin: 0.6em 0 0 0;
padding: 0.3em 0 0 0;
max-height: 10em;
}
@top-center {
vertical-align: bottom;
padding-bottom: 10mm;
}
}
@page :left {
@top-left {
vertical-align: bottom;
padding-bottom: 10mm;
content: string(page-number, first-except);
letter-spacing: 0.1em;
margin-left: -1em;
font-size: 0.9em;
}
}
@page :right {
@top-right {
vertical-align: bottom;
padding-bottom: 10mm;
content: string(page-number, first-except);
letter-spacing: 0.08em;
margin-right: -1em;
font-size: 0.9em;
}
}
@page cover {
size: 125mm 210mm; /* measured from scanned book */
}
html {
box-sizing: border-box;
}
......
@page {
size: 8.5in 11in;
margin: 20mm 15mm;
marks: crop;
@footnote {
margin: 0.6em 0 0 0;
padding: 0.3em 0 0 0;
max-height: 10em;
}
@top-center {
vertical-align: bottom;
padding-bottom: 10mm;
}
}
@page :left {
@top-left {
vertical-align: bottom;
padding-bottom: 10mm;
content: string(page-number, first-except);
letter-spacing: 0.1em;
margin-left: -1em;
font-size: 0.9em;
}
}
@page :right {
@top-right {
vertical-align: bottom;
padding-bottom: 10mm;
content: string(page-number, first-except);
letter-spacing: 0.08em;
margin-right: -1em;
font-size: 0.9em;
}
}
@page cover {
size: 'letter'; /* measured from scanned book */
}
@font-face {
font-family: 'Stix';
font-weight: normal;
......
......@@ -8,7 +8,7 @@
<script src="../dist/paged.js"></script>
<link rel="stylesheet" type="text/css" href="assets/styles/index.css">
<link rel="stylesheet" type="text/css" href="assets/styles/mody-dick.css">
<!-- <link rel="stylesheet" type="text/css" href="assets/styles/mody-dick.css"> -->
</head>
<body>
<script>
......@@ -27,6 +27,10 @@
pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
// styles
let styles = new Paged.Styler();
let moby = await styles.add("assets/styles/mody-dick.css");
console.log(moby);
let flowText = document.querySelector("#flow");
let t0 = performance.now();
......
This diff is collapsed.
......@@ -8,14 +8,18 @@
"main": "lib/index.js",
"module": "src/index.js",
"browser": "dist/paged.js",
"dependencies": {},
"dependencies": {
"css-tree": "^1.0.0-alpha.28"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"rollup": "^0.57.0",
"rollup-plugin-commonjs": "^9.1.0",
"rollup-plugin-json": "^2.3.0",
"rollup-plugin-livereload": "^0.6.0",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-serve": "^0.4.2"
},
......
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
// import json from 'rollup-plugin-json';
import json from 'rollup-plugin-json';
// import builtins from 'rollup-plugin-node-builtins';
// import globals from 'rollup-plugin-node-globals';
......@@ -13,7 +13,7 @@ import livereload from 'rollup-plugin-livereload'
const plugins = [
resolve(),
commonjs(),
// json(),
json(),
// globals(),
// builtins(),
serve({
......
import Section from "./section";
import Page from "./page";
import Parser from "./parser";
import ContentParser from "./parser";
// import PagedBody from "../utils/paged-body.js";
const MAX_SECTIONS = false;
const MAX_SECTIONS = 1;
/**
* Chop up text into flows
......@@ -24,7 +24,7 @@ class Chunker {
if (content) {
this.content = content;
let parsed = new Parser(content);
let parsed = new ContentParser(content);
let sections = [...parsed.children];
......
......@@ -4,7 +4,7 @@ import { UUID } from "../utils/utils";
* Render a flow of text offscreen
* @class
*/
class Parser {
class ContentParser {
constructor(content, cb) {
if (content && content.nodeType) {
......@@ -88,4 +88,4 @@ class Parser {
}
}
export default Parser;
export default ContentParser;
import Chunker from './chunker/chunker';
import Styler from './styles/styler';
export {
Chunker
Chunker,
Styler
};
import csstree from 'css-tree';
class StylesParser {
constructor(text) {
this.text = this.parse(text);
}
parse(text) {
let ast = csstree.parse(text);
let width, height;
// csstree.walk(ast, function(node) {
// console.log(node);
// });
let pages = [];
let rulesList = ast.children;
csstree.walk(ast, {
visit: 'Atrule',
enter: (atNode, atItem, atList) => {
const basename = csstree.keyword(atNode.name).basename;
// console.log("atItem", atItem);
// csstree.walk(node, function(node) {
// console.log(atNode);
// });
if (basename === "page") {
console.log(atNode);
// Switch to class
let newSelectors = new csstree.List();
let pos = 0;
let sel = new csstree.List();
let s = newSelectors.createItem({
type: 'Selector',
children: sel
});
newSelectors.insert(s);
sel.insert(sel.createItem({
type: 'ClassSelector',
name: 'page'
}));
// Convert named pages to class names
csstree.walk(atNode, {
visit: "TypeSelector",
enter: (node, item, list) => {
// sel.insert(sel.createItem({
// type: 'Combinator',
// name: ">"
// }));
sel.insert(sel.createItem({
type: 'ClassSelector',
name: node.name + "_page"
}));
}
});
// Convert :left & :right class names
csstree.walk(atNode, {
visit: "PseudoClassSelector",
enter: (node, item, list) => {
console.log("PseudoClassSelector", node);
node.type = "ClassSelector";
// sel.insert(sel.createItem({
// type: 'Combinator',
// name: ">"
// }));
sel.insert(sel.createItem({
type: 'ClassSelector',
name: node.name + "_page"
}));
}
});
// Move At-rules, like @top-left to their own classes
csstree.walk(atNode.block, {
visit: 'Atrule',
enter: (node, item, list) => {
console.log("Atrule", node.name, item, list);
list.remove(item);
// console.log("val", declaration.value);
}
});
// Get Declarations
csstree.walk(atNode.block, {
visit: 'Declaration',
enter: (declaration, dItem, dList) => {
let prop = csstree.property(declaration.property).name;
let value = declaration.value;
// console.log("prop", prop);
// console.log("val", value);
if (prop === "size") {
console.log("size", value);
// Get the Dimensions
csstree.walk(declaration, {
visit: 'Dimension',
enter: (node, item, list) => {
console.log("Dimension", node);
let {value, unit} = node;
if (typeof width === "undefined") {
width = value + unit;
let widthList = new csstree.List();
widthList.insert(widthList.createItem({
type: "Dimension",
value: value,
unit: unit
}));
let w = dList.createItem({
type: 'Declaration',
property: "width",
value: {
type: 'Value',
children: widthList
}
});
dList.insert(w, dItem);
} else if (typeof height === "undefined") {
height = value + unit;
let heightList = new csstree.List();
heightList.insert(heightList.createItem({
type: "Dimension",
value: value,
unit: unit
}));
let h = dList.createItem({
type: 'Declaration',
property: "height",
value: {
type: 'Value',
children: heightList
}
});
dList.insert(h, dItem);
dList.remove(dItem);
}
}
});
console.log("w", width, "h", height);
// Get strings
csstree.walk(declaration, {
visit: 'String',
enter: (node, item, list) => {
console.log("String", node);
let s = this.size(node);
width = s.width;
height = s.height;
let widthList = new csstree.List();
widthList.insert(widthList.createItem({
type: "Dimension",
value: width.value,
unit: width.unit
}));
let w = dList.createItem({
type: 'Declaration',
property: "width",
value: {
type: 'Value',
children: widthList
}
});
dList.insert(w, dItem);
let heightList = new csstree.List();
heightList.insert(heightList.createItem({
type: "Dimension",
value: height.value,
unit: height.unit
}));
let h = dList.createItem({
type: 'Declaration',
property: "height",
value: {
type: 'Value',
children: heightList
}
});
// dList.insert(h);
dList.insert(h, dItem);
dList.remove(dItem);
}
});
}
}
});
atNode.type = 'Rule';
atNode.prelude = {
type: 'SelectorList',
loc: 0,
children: newSelectors
};
// rulesList.insert(rulesList.createItem({
// type: 'Rule',
// loc: atNode.loc,
// prelude: {
// type: 'SelectorList',
// loc: 0,
// children: newSelectors
// },
// block: {
// type: 'Block',
// loc: atNode.block.loc,
// children: atNode.block.children.copy()
// },
// pseudoSignature: atNode.pseudoSignature
// }), ast.loc);
}
}
});
return csstree.generate(ast);
}
size(str) {
console.log("got size:", str);
return {
width: {
value: '8',
unit: 'in'
},
height: {
value: '11',
unit: 'in'
}
}
}
}
export default StylesParser;
import StylesParser from './parser.js';
class Sheet {
constructor(text) {
this.original = text;
this.text = this.parse(text);
this.add(this.text);
}
parse(text) {
let parser = new StylesParser(text);
return parser.text;
}
add(text){
let head = document.querySelector("head");
let style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode(text));
head.appendChild(style);
}
}
export default Sheet;
import Sheet from './sheet.js';
class Styler {
constructor() {
this.sheets = [];
}
async add(href) {
let sheet;
return await fetch(href)
.then((response) => {
return response.text();
}).then((text) => {
sheet = new Sheet(text);
});
}
}
export default Styler;
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