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

Update content parsing

parent 0a6ae970
......@@ -76,6 +76,7 @@ afterPageLayout(pageElement, page, breakToken)
afterRendered(pages)
// Polisher
beforeTreeParse(text, sheet)
onUrl(urlNode)
onAtPage(atPageNode)
onRule(ruleNode)
......@@ -161,7 +162,7 @@ docker run -it -p 9090:9090 pagedmedia/pagedjs
```
The tests and specs can be run within the container by passing a `seccomp` file for Chrome and running `npm test`
```bash
docker run -it --security-opt 'seccomp=seccomp.json' pagedmedia/pagedjs npm test
```
......@@ -139,7 +139,7 @@ section[data-type="epigraph"],
/* running elements */
#cover h1 {
string-set: booktitle content(text);
/* string-set: booktitle content(text); */
}
#cover {
......@@ -210,8 +210,8 @@ section[data-type="copyright"] #flexbox {
float:right;
}
.toc-subchap a[href]::before{
content: target-text(attr(href)); /* pdfreactor */
.toc-subchap a[href]::before {
content: target-text(attr(href));
}
.toc-subchap a[href]::after {
......
......@@ -32,26 +32,20 @@ class RunningHeaders extends Handler {
}
if (declaration.property === "content") {
// Handle Raw
// element(x) is not parsed
csstree.walk(declaration, {
visit: 'Raw',
visit: 'Function',
enter: (funcNode, fItem, fList) => {
if (funcNode.value.indexOf("element") > -1) {
if (funcNode.name.indexOf("element") > -1) {
let selector = csstree.generate(rule.ruleNode.prelude);
let parsed = funcNode.value.match(/([^(]+)\(([^)]+)\)/);
let func = parsed[1];
let value = funcNode.value;
let func = funcNode.name;
let args = [];
let value = funcNode.children.first().name;
if (parsed.length >= 3) {
args.push(parsed[2]);
}
let args = [value];
// we only handle first for now
let style = "first";
......@@ -216,6 +210,11 @@ class RunningHeaders extends Handler {
return orderedSelectors;
}
beforeTreeParse(text, sheet) {
// element(x) is parsed as image element selector, so update element to element-ident
sheet.text = text.replace(/element[\s]*\(([^\|^#)]*)\)/g, "element-ident($1)");
}
}
export default RunningHeaders;
......@@ -33,6 +33,8 @@ class TargetCounters extends Handler {
counter = last.name;
}
let variable = "--" + UUID();
selector.split(",").forEach((s) => {
this.counterTargets[s] = {
func: func,
......@@ -40,10 +42,19 @@ class TargetCounters extends Handler {
value: value,
counter: counter,
selector: s,
fullSelector: selector
fullSelector: selector,
variable: variable
}
});
// Replace with variable
funcNode.name = "var";
funcNode.children = new csstree.List()
funcNode.children.appendData({
type: "Identifier",
loc: 0,
name: variable
});
}
}
......@@ -81,7 +92,8 @@ class TargetCounters extends Handler {
psuedo += "::" + split[1];
}
this.styleSheet.insertRule(`[data-target-counter="${selector}"]${psuedo} { content: "${pg}"; }`, this.styleSheet.cssRules.length);
// this.styleSheet.insertRule(`[data-target-counter="${selector}"]${psuedo} { content: "${pg}"; }`, this.styleSheet.cssRules.length);
this.styleSheet.insertRule(`[data-target-counter="${selector}"] { ${target.variable}: "${pg}" }`, this.styleSheet.cssRules.length);
}
}
});
......
......@@ -32,6 +32,8 @@ class TargetText extends Handler {
style = last.name;
}
let variable = "--" + UUID();
selector.split(",").forEach((s) => {
this.textTargets[s] = {
func: func,
......@@ -39,10 +41,19 @@ class TargetText extends Handler {
value: value,
style: style || "content",
selector: s,
fullSelector: selector
fullSelector: selector,
variable: variable
}
});
// Replace with variable
funcNode.name = "var";
funcNode.children = new csstree.List()
funcNode.children.appendData({
type: "Identifier",
loc: 0,
name: variable
});
}
}
......@@ -59,16 +70,18 @@ class TargetText extends Handler {
if (target.style === "content") {
let text = element.textContent;
let selector = UUID();
selected.setAttribute("data-target-text", selector);
let psuedo = "";
if (split.length > 1) {
psuedo += "::" + split[1];
}
// this.styleSheet.insertRule(`[data-target-text="${selector}"]${psuedo} { content: "${element.textContent}"; }`, this.styleSheet.cssRules.length);
this.styleSheet.insertRule(`[data-target-text="${selector}"]${psuedo} { ${target.variable}: "${element.textContent.trim()}" }`, this.styleSheet.cssRules.length);
this.styleSheet.insertRule(`[data-target-text="${selector}"]${psuedo} { content: "${element.textContent}"; }`, this.styleSheet.cssRules.length);
}
} else {
console.warn("missed target", val);
}
});
......
......@@ -235,6 +235,7 @@ export default `
.pagedjs_pages .pagedjs_margin .pagedjs_margin-content {
width: 100%;
height: 100%;
}
.pagedjs_pages .pagedjs_margin-left .pagedjs_margin-content::after,
......
......@@ -16,6 +16,7 @@ class Polisher {
this.hooks.onDeclaration = new Hook(this);
this.hooks.onContent = new Hook(this);
this.hooks.beforeTreeParse = new Hook(this);
this.hooks.beforeTreeWalk = new Hook(this);
this.hooks.afterTreeWalk = new Hook(this);
......@@ -60,12 +61,20 @@ class Polisher {
}
return await Promise.all(fetched)
.then((originals) => {
.then(async (originals) => {
let text = "";
originals.forEach((original, index) => {
let href = urls[index];
let sheet = new Sheet(original, href, this.hooks);
let original, index;
let href, sheet;
for (index = 0; index < originals.length; index++) {
original = originals[index];
href = urls[index];
sheet = new Sheet(href, this.hooks);
await sheet.parse(original);
this.sheets.push(sheet);
......@@ -82,11 +91,11 @@ class Polisher {
}
text += sheet.toString();
})
}
let s = this.insert(text);
this.inserted.push(s);
// console.log(text);
return text;
});
}
......
......@@ -3,7 +3,7 @@ import { UUID } from "../utils/utils";
import Hook from "../utils/hook";
class Sheet {
constructor(text, url, hooks) {
constructor(url, hooks) {
if (hooks) {
this.hooks = hooks;
......@@ -16,6 +16,7 @@ class Sheet {
this.hooks.onDeclaration = new Hook(this);
this.hooks.onContent = new Hook(this);
this.hooks.beforeTreeParse = new Hook(this);
this.hooks.beforeTreeWalk = new Hook(this);
this.hooks.afterTreeWalk = new Hook(this);
}
......@@ -25,13 +26,20 @@ class Sheet {
} catch (e) {
this.url = new URL(window.location.href);
}
}
// this.original = text;
// Parse the text
this.ast = this.parse(text);
// parse
async parse(text) {
this.text = text;
this.hooks.beforeTreeWalk.trigger(this.ast);
await this.hooks.beforeTreeParse.trigger(this.text, this);
// send to csstree
this.ast = csstree.parse(this._text);
await this.hooks.beforeTreeWalk.trigger(this.ast);
// Replace urls
this.replaceUrls(this.ast);
......@@ -48,15 +56,10 @@ class Sheet {
this.rules(this.ast);
this.atrules(this.ast);
this.hooks.afterTreeWalk.trigger(this.ast, this);
}
await this.hooks.afterTreeWalk.trigger(this.ast, this);
// parse
parse(text) {
// send to csstree
let ast = csstree.parse(text);
// return ast
return ast;
return this.ast;
}
insertRule(rule) {
......@@ -213,6 +216,14 @@ class Sheet {
});
}
set text(t) {
this._text = t;
}
get text() {
return this._text;
}
// generate string
toString(ast) {
return csstree.generate(ast || this.ast);
......
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