Commit 0681eac1 authored by Fred Chasen's avatar Fred Chasen

Merge branch 'string-value' into 'master'

String value

Closes #38

See merge request tools/pagedjs!136
parents 75507949 d79da60f
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<body> <body>
<section> <section>
<h1>a ' this " ' aa</h1> <h1>aaa</h1>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo.
</p> </p>
......
...@@ -15,13 +15,13 @@ describe("default", () => { ...@@ -15,13 +15,13 @@ describe("default", () => {
it("should set the running header as \"a '' this \" ' aa\" on the first page", async () => { it("should set the running header as \"a '' this \" ' aa\" on the first page", async () => {
let text = await page.$eval(".pagedjs_first_page", (r) => let text = await page.$eval(".pagedjs_first_page", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-first-alphabet"));
expect(text).toEqual("\"a ' this \\\" ' aa\""); expect(text).toEqual("\"aaa\"");
}); });
it("should set the running header as \"fff\" on the second page", async () => { it("should set the running header as \"fff\" on the second page", async () => {
let text = await page.$eval("#page-2", (r) => let text = await page.$eval("#page-2", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-first-alphabet"));
expect(text).toEqual("\"fff\""); expect(text).toEqual("\"fff\"");
}); });
}); });
...@@ -41,13 +41,13 @@ describe("first", () => { ...@@ -41,13 +41,13 @@ describe("first", () => {
it("should set the running header as \"aaa\" on the first page", async () => { it("should set the running header as \"aaa\" on the first page", async () => {
let text = await page.$eval(".pagedjs_first_page", (r) => let text = await page.$eval(".pagedjs_first_page", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-first-alphabet"));
expect(text).toEqual("\"aaa\""); expect(text).toEqual("\"aaa\"");
}); });
it("should set the running header as \"fff\" on the second page", async () => { it("should set the running header as \"fff\" on the second page", async () => {
let text = await page.$eval("#page-2", (r) => let text = await page.$eval("#page-2", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-first-alphabet"));
expect(text).toEqual("\"fff\""); expect(text).toEqual("\"fff\"");
}); });
}); });
...@@ -67,13 +67,13 @@ describe("last", () => { ...@@ -67,13 +67,13 @@ describe("last", () => {
it("should set the running header as \"fff\" on the first page", async () => { it("should set the running header as \"fff\" on the first page", async () => {
let text = await page.$eval(".pagedjs_first_page", (r) => let text = await page.$eval(".pagedjs_first_page", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-last-alphabet"));
expect(text).toEqual("\"fff\""); expect(text).toEqual("\"fff\"");
}); });
it("should set the running header as \"fff\" on the second page", async () => { it("should set the running header as \"fff\" on the second page", async () => {
let text = await page.$eval("#page-2", (r) => let text = await page.$eval("#page-2", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-last-alphabet"));
expect(text).toEqual("\"fff\""); expect(text).toEqual("\"fff\"");
}); });
}); });
...@@ -93,13 +93,13 @@ describe("first-except", () => { ...@@ -93,13 +93,13 @@ describe("first-except", () => {
it("should set the running header as nothing on the first page", async () => { it("should set the running header as nothing on the first page", async () => {
let text = await page.$eval(".pagedjs_first_page", (r) => let text = await page.$eval(".pagedjs_first_page", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-first-except-alphabet"));
expect(text).toEqual("\"\""); expect(text).toEqual("\"\"");
}); });
it("should set the running header as \"aaa\" on the second page", async () => { it("should set the running header as \"aaa\" on the second page", async () => {
let text = await page.$eval("#page-2", (r) => let text = await page.$eval("#page-2", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-first-except-alphabet"));
expect(text).toEqual("\"aaa\""); expect(text).toEqual("\"aaa\"");
}); });
}); });
...@@ -121,18 +121,18 @@ describe("string-start", () => { ...@@ -121,18 +121,18 @@ describe("string-start", () => {
// See https://www.w3.org/TR/css-gcpm-3/#string-start // See https://www.w3.org/TR/css-gcpm-3/#string-start
it("should set the running header as nothing on the first page", async () => { it("should set the running header as nothing on the first page", async () => {
let text = await page.$eval(".pagedjs_first_page", (r) => let text = await page.$eval(".pagedjs_first_page", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-start-alphabet"));
expect(text).toEqual("\"\""); expect(text).toEqual("\"\"");
}); });
it("should set the running header as \"fff\" on the third page", async () => { it("should set the running header as \"fff\" on the third page", async () => {
let text = await page.$eval("#page-3", (r) => let text = await page.$eval("#page-3", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-start-alphabet"));
expect(text).toEqual("\"fff\""); expect(text).toEqual("\"fff\"");
}); });
it("should set the running header as \"ggg\" on page 4", async () => { it("should set the running header as \"ggg\" on page 4", async () => {
let text = await page.$eval("#page-4", (r) => let text = await page.$eval("#page-4", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-start-alphabet"));
expect(text).toEqual("\"ggg\""); expect(text).toEqual("\"ggg\"");
}); });
}); });
...@@ -152,22 +152,22 @@ describe("string-multiple", () => { ...@@ -152,22 +152,22 @@ describe("string-multiple", () => {
it("should set the running header as \"aaa\" on the second page", async () => { it("should set the running header as \"aaa\" on the second page", async () => {
let text = await page.$eval("#page-2", (r) => let text = await page.$eval("#page-2", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-first-except-alphabet"));
expect(text).toEqual("\"aaa\""); expect(text).toEqual("\"aaa\"");
}); });
it("should set the running header as \"1111\" on the second page", async () => { it("should set the running header as \"1111\" on the second page", async () => {
let text = await page.$eval("#page-2", (r) => let text = await page.$eval("#page-2", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabetbis")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-first-except-alphabetbis"));
expect(text).toEqual("\"1111\""); expect(text).toEqual("\"1111\"");
}); });
it("should set the running header as \"fff\" on the third page", async () => { it("should set the running header as \"fff\" on the third page", async () => {
let text = await page.$eval("#page-9", (r) => let text = await page.$eval("#page-9", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabet")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-first-except-alphabet"));
expect(text).toEqual("\"bbb\""); expect(text).toEqual("\"bbb\"");
}); });
it("should set the running header as \"fff\" on the third page", async () => { it("should set the running header as \"fff\" on the third page", async () => {
let text = await page.$eval("#page-9", (r) => let text = await page.$eval("#page-9", (r) =>
window.getComputedStyle(r).getPropertyValue("--pagedjs-string-alphabetbis")); window.getComputedStyle(r).getPropertyValue("--pagedjs-string-first-except-alphabetbis"));
expect(text).toEqual("\"2222\""); expect(text).toEqual("\"2222\"");
}); });
}); });
...@@ -43,13 +43,24 @@ class StringSets extends Handler { ...@@ -43,13 +43,24 @@ class StringSets extends Handler {
funcNode.name = "var"; funcNode.name = "var";
funcNode.children = new csstree.List(); funcNode.children = new csstree.List();
funcNode.children.append(
funcNode.children.createItem({ if(this.type === "first" || this.type === "last" || this.type === "start" || this.type === "first-except"){
type: "Identifier", funcNode.children.append(
loc: null, funcNode.children.createItem({
name: "--pagedjs-string-" + identifier type: "Identifier",
}) loc: null,
); name: "--pagedjs-string-" + this.type + "-" + identifier
})
);
}else{
funcNode.children.append(
funcNode.children.createItem({
type: "Identifier",
loc: null,
name: "--pagedjs-string-first-" + identifier
})
);
}
} }
} }
...@@ -61,59 +72,65 @@ class StringSets extends Handler { ...@@ -61,59 +72,65 @@ class StringSets extends Handler {
this.pageLastString = {}; this.pageLastString = {};
} }
// get the value of the previous last string
for (let name of Object.keys(this.stringSetSelectors)) { for (let name of Object.keys(this.stringSetSelectors)) {
let set = this.stringSetSelectors[name]; let set = this.stringSetSelectors[name];
let selected = fragment.querySelectorAll(set.selector); let selected = fragment.querySelectorAll(set.selector);
// let cssVar = previousPageLastString;
// Get the last found string for the current identifier // Get the last found string for the current identifier
let cssVar = ( name in this.pageLastString ) ? this.pageLastString[name] : ""; let stringPrevPage = ( name in this.pageLastString ) ? this.pageLastString[name] : "";
selected.forEach((sel) => { let varFirst, varLast, varStart, varFirstExcept;
// push each content into the array to define in the variable the first and the last element of the page.
if(selected.length == 0){
// if there is no sel. on the page
//this.pageLastString = selected[selected.length - 1].textContent; varFirst = stringPrevPage;
// Index by identifier varLast = stringPrevPage;
this.pageLastString[name] = selected[selected.length - 1].textContent; varStart = stringPrevPage;
varFirstExcept = stringPrevPage;
}else{
if (this.type === "first") {
cssVar = selected[0].textContent; selected.forEach((sel) => {
} // push each content into the array to define in the variable the first and the last element of the page.
this.pageLastString[name] = selected[selected.length - 1].textContent;
else if (this.type === "last") {
cssVar = selected[selected.length - 1].textContent;
}
else if (this.type === "start") {
if (sel.parentElement.firstChild === sel) { });
cssVar = sel.textContent;
} /* FIRST */
}
else if (this.type === "first-except") { varFirst = selected[0].textContent;
cssVar = "";
/* LAST */
varLast = selected[selected.length - 1].textContent;
/* START */
// Hack to find if the sel. is the first elem of the page / find a better way
let selTop = selected[0].getBoundingClientRect().top;
let pageContent = selected[0].closest(".pagedjs_page_content");
let pageContentTop = pageContent.getBoundingClientRect().top;
if(selTop == pageContentTop){
varStart = varFirst;
}else{
varStart = stringPrevPage;
} }
else { /* FIRST EXCEPT */
cssVar = selected[0].textContent;
} varFirstExcept = "";
});
}
fragment.setAttribute("data-string", `string-type-${this.type}-${name}`);
fragment.style.setProperty(`--pagedjs-string-first-${name}`, `"${cleanPseudoContent(varFirst)}`);
fragment.style.setProperty(`--pagedjs-string-last-${name}`, `"${cleanPseudoContent(varLast)}`);
// fragment.style.setProperty(`--pagedjs-string-${name}`, `"${cssVar.replace(/\\([\s\S])|(["|'])/g, "\\$1$2")}"`); fragment.style.setProperty(`--pagedjs-string-start-${name}`, `"${cleanPseudoContent(varStart)}`);
fragment.style.setProperty(`--pagedjs-string-${name}`, `"${cleanPseudoContent(cssVar)}`); fragment.style.setProperty(`--pagedjs-string-first-except-${name}`, `"${cleanPseudoContent(varFirstExcept)}`);
// if there is no new string on the page
if (!fragment.hasAttribute("data-string")) {
fragment.style.setProperty(`--pagedjs-string-${name}`, `"${this.pageLastString}"`);
}
} }
} }
......
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