Commit 91719097 authored by Fred Chasen's avatar Fred Chasen

Add support for running / element

parent 5e94943a
......@@ -74,7 +74,7 @@ class Chunker {
this.styles = polisher;
this.breaks = this.styles && this.styles.breaks;
this.styles && this.styles.contents(parsed);
this.styles && this.styles.targetText(parsed);
let sections;
if (this.breaks) {
......@@ -198,6 +198,12 @@ class Chunker {
section.on("page", (page) => {
this.styles && this.styles.counters(this.pagesArea);
this.emit("page", page);
});
section.on("renderedPage", (page) => {
this.styles && this.styles.contents(page.element);
this.styles && this.styles.headers(page.element);
this.emit("renderedPage", page);
})
return section.render(sectionContent);
......
......@@ -93,6 +93,8 @@ class Section {
// Layout content in the page, starting from the breakToken
breakToken = page.layout(content, breakToken);
this.emit("renderedPage", page);
yield breakToken;
// Stop if we get undefined, showing we have reached the end of the content
......
......@@ -118,7 +118,6 @@ export default `
.page .bottom > div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
......@@ -126,10 +125,16 @@ export default `
.page .right > div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.pages .left .content::after,
.pages .top .content::after,
.pages .right .content::after,
.pages .bottom .content::after {
display: block;
}
@media print {
body {
width: var(--width);
......
......@@ -45,6 +45,8 @@ class Polisher {
let stringSets = {};
let textTargets = {};
let counterTargets = {};
let running = {};
let elements = {};
originals.forEach((original, index) => {
let href = urls[index];
......@@ -68,6 +70,8 @@ class Polisher {
stringSets = Object.assign(stringSets, sheet.stringSets);
textTargets = Object.assign(textTargets, sheet.textTargets);
counterTargets = Object.assign(counterTargets, sheet.counterTargets);
running = Object.assign(running, sheet.running);
elements = Object.assign(elements, sheet.elements);
text += sheet.toString();
})
......@@ -82,6 +86,9 @@ class Polisher {
this.textTargets = textTargets;
this.counterTargets = counterTargets;
this.running = running;
this.elements = elements;
return text;
});
}
......@@ -113,22 +120,7 @@ class Polisher {
return style;
}
contents(fragment) {
for (let name of Object.keys(this.stringSets)) {
let set = this.stringSets[name];
let selected = fragment.querySelector(set.selector);
if (selected) {
let cssVar;
if (set.value === "content" || set.value === "content(text)") {
cssVar = selected.textContent.replace(/\\([\s\S])|(["|'])/g,"\\$1$2");
this.styleSheet.insertRule(`:root { --string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
} else {
console.log(set.value + "needs css replacement");
}
}
}
targetText(fragment) {
Object.keys(this.textTargets).forEach((name) => {
let target = this.textTargets[name];
let split = target.selector.split("::");
......@@ -158,6 +150,64 @@ class Polisher {
});
}
headers(fragment) {
for (let name of Object.keys(this.running)) {
let set = this.running[name];
let selected = fragment.querySelector(set.selector);
if (selected) {
let cssVar;
if (set.identifier === "running") {
// cssVar = selected.textContent.replace(/\\([\s\S])|(["|'])/g,"\\$1$2");
// this.styleSheet.insertRule(`:root { --string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
// fragment.style.setProperty(`--string-${name}`, `"${cssVar}"`);
set.first = selected;
selected.style.display = "none";
} else {
console.log(set.value + "needs css replacement");
}
}
}
// move elements
for (let selector of Object.keys(this.elements)) {
if (selector) {
let el = this.elements[selector];
let selected = fragment.querySelector(selector);
if (selected) {
let running = this.running[el.args[0]];
if (running.first) {
let clone = running.first.cloneNode(true);
clone.style.display = null;
selected.appendChild(clone);
}
}
}
}
}
contents(fragment) {
for (let name of Object.keys(this.stringSets)) {
let set = this.stringSets[name];
let selected = fragment.querySelector(set.selector);
if (selected) {
let cssVar;
if (set.value === "content" || set.value === "content(text)") {
cssVar = selected.textContent.replace(/\\([\s\S])|(["|'])/g,"\\$1$2");
// this.styleSheet.insertRule(`:root { --string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
// fragment.style.setProperty(`--string-${name}`, `"${cssVar}"`);
set.first = cssVar;
} else {
console.log(set.value + "needs css replacement");
}
} else {
// Use the previous values
if (set.first) {
fragment.style.setProperty(`--string-${name}`, `"${set.first}"`);
}
}
}
}
counters(root) {
Object.keys(this.counterTargets).forEach((name) => {
let target = this.counterTargets[name];
......@@ -200,10 +250,6 @@ class Polisher {
});
}
targetText(element) {
}
attr(element, attributes) {
for (var i = 0; i < attributes.length; i++) {
if(element.hasAttribute(attributes[i])) {
......
......@@ -39,6 +39,9 @@ class Sheet {
this.stringSets = this.getStringSets(this.ast);
this.running = this.getRunning(this.ast);
this.elements = this.getElements(this.ast);
let targets = this.getTargets(this.ast);
this.counterTargets = targets.counterTargets;
this.textTargets = targets.textTargets;
......@@ -487,7 +490,99 @@ class Sheet {
addMarginalia(page, list, item) {
for (let loc in page.marginalia) {
let item = page.marginalia[loc];
let item = csstree.clone(page.marginalia[loc]);
csstree.walk(item, {
visit: "Declaration",
enter: (node, item, list) => {
if (node.property === "content") {
list.remove(item);
}
}
});
let selectorList = new csstree.List();
let selectors = new csstree.List();
let selector = selectorList.createItem({
type: 'Selector',
children: selectors
});
selectorList.insert(selector);
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: 'page'
}));
// Named page
if (page.name) {
name = page.name + "_page";
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: page.name + "_page"
}));
}
// PsuedoSelector
if (page.psuedo) {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: page.psuedo + "_page"
}));
}
selectors.insert(selectors.createItem({
type: 'Combinator',
name: " "
}));
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: loc
}));
selectors.insert(selectors.createItem({
type: 'Combinator',
name: ">"
}));
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: "content"
}));
// selectors.insert(selectors.createItem({
// type: 'PseudoElementSelector',
// name: "after",
// children: null
// }));
let rule = list.createItem({
type: 'Rule',
prelude: {
type: 'SelectorList',
children: selectorList
},
block: item
});
list.append(rule);
}
// Just content
for (let loc in page.marginalia) {
let content = csstree.clone(page.marginalia[loc]);
csstree.walk(content, {
visit: "Declaration",
enter: (node, item, list) => {
if (node.property !== "content") {
list.remove(item);
}
}
});
let selectorList = new csstree.List();
let selectors = new csstree.List();
......@@ -552,7 +647,7 @@ class Sheet {
type: 'SelectorList',
children: selectorList
},
block: item
block: content
});
list.append(rule);
......@@ -594,6 +689,103 @@ class Sheet {
return stringSetSelectors;
}
getRunning(ast) {
let runningSelectors = {};
csstree.walk(ast, {
visit: 'Rule',
enter: (node, item, list) => {
csstree.walk(node, {
visit: 'Declaration',
enter: (declaration, dItem, dList) => {
if (declaration.property === "position") {
let selector = csstree.generate(node.prelude);
let identifier = declaration.value.children.first().name
if (identifier === "running") {
let value;
csstree.walk(declaration, {
visit: 'Function',
enter: (node, item, list) => {
value = node.children.first().name;
}
});
runningSelectors[value] = {
identifier: identifier,
value: value,
selector: selector
}
}
}
}
});
}
});
return runningSelectors;
}
getElements(ast) {
let elements = {};
csstree.walk(ast, {
visit: 'Rule',
enter: (node, item, list) => {
csstree.walk(node, {
visit: 'Declaration',
enter: (declaration, dItem, dList) => {
if (declaration.property === "content") {
// Handle Raw
// element(x) is not parsed
csstree.walk(declaration, {
visit: 'Raw',
enter: (funcNode, fItem, fList) => {
if (funcNode.value.indexOf("element") > -1) {
let selector = csstree.generate(node.prelude);
let parsed = funcNode.value.match(/([^(]+)\(([^)]+)\)/);
let func = parsed[1];
let value = funcNode.value;
let args = [];
if (parsed.length >= 3) {
args.push(parsed[2]);
}
// we only handle first for now
let style = "first";
selector.split(",").forEach((s) => {
// remove before / after
s = s.replace(/::after|::before/, "");
elements[s] = {
func: func,
args: args,
value: value,
style: style || "first",
selector: s,
fullSelector: selector
}
});
}
}
});
}
}
})
}
});
return elements;
}
getTargets(ast) {
let textTargets = {};
let counterTargets = {};
......@@ -721,6 +913,10 @@ class Sheet {
if (func.name === "target-counter") {
// console.log(func);
}
if (func.name === "element") {
console.log("element", func);
}
}
});
}
......
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