Commit 6e7310ae authored by Fred Chasen's avatar Fred Chasen

Prefix css variable with --pagedjs

parent 776016c7
......@@ -25,7 +25,7 @@
}
.pagedjs_pages {
width: calc((var(--width) * 2) + (var(--margin) * 4));
width: calc((var(--pagedjs-width) * 2) + (var(--margin) * 4));
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -337,7 +337,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......@@ -347,7 +347,7 @@
}
.pagedjs_pages > .section {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -77,7 +77,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -90,7 +90,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -90,7 +90,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -89,7 +89,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -89,7 +89,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -90,7 +90,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -74,7 +74,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -88,7 +88,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -88,7 +88,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -92,7 +92,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -180,7 +180,7 @@
}
.pagedjs_pages {
display: flex;
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
......@@ -195,7 +195,7 @@
}
.pagedjs_first_page {
margin-left: var(--width);
margin-left: var(--pagedjs-width);
}
/* show the margin-box */
......
......@@ -25,7 +25,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -30,7 +30,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -25,7 +25,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -90,7 +90,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -25,7 +25,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -128,7 +128,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -24,7 +24,7 @@ describe('landscape', async () => {
it('should give the page a width of 210mm', async () => {
let width = await page.$eval(".pagedjs_page", (r) => {
return window.getComputedStyle(r).getPropertyValue("--width");
return window.getComputedStyle(r).getPropertyValue("--pagedjs-width");
});
expect(width).toEqual("210mm");
......@@ -32,7 +32,7 @@ describe('landscape', async () => {
it('should give the page a height of 148mm', async () => {
let width = await page.$eval(".pagedjs_page", (r) => {
return window.getComputedStyle(r).getPropertyValue("--height");
return window.getComputedStyle(r).getPropertyValue("--pagedjs-height");
});
expect(width).toEqual("148mm");
......
......@@ -24,7 +24,7 @@ describe('length', async () => {
it('should give the page a width of 140mm', async () => {
let width = await page.$eval(".pagedjs_page", (r) => {
return window.getComputedStyle(r).getPropertyValue("--width");
return window.getComputedStyle(r).getPropertyValue("--pagedjs-width");
});
expect(width).toEqual("140mm");
......@@ -32,7 +32,7 @@ describe('length', async () => {
it('should give the page a height of 200mm', async () => {
let width = await page.$eval(".pagedjs_page", (r) => {
return window.getComputedStyle(r).getPropertyValue("--height");
return window.getComputedStyle(r).getPropertyValue("--pagedjs-height");
});
expect(width).toEqual("200mm");
......
......@@ -24,7 +24,7 @@ describe('page-size', async () => {
it('should give the page a width of 148mm', async () => {
let width = await page.$eval(".pagedjs_page", (r) => {
return window.getComputedStyle(r).getPropertyValue("--width");
return window.getComputedStyle(r).getPropertyValue("--pagedjs-width");
});
expect(width).toEqual("148mm");
......@@ -32,7 +32,7 @@ describe('page-size', async () => {
it('should give the page a height of 210mm', async () => {
let width = await page.$eval(".pagedjs_page", (r) => {
return window.getComputedStyle(r).getPropertyValue("--height");
return window.getComputedStyle(r).getPropertyValue("--pagedjs-height");
});
expect(width).toEqual("210mm");
......
......@@ -76,7 +76,7 @@
}
.pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......@@ -86,7 +86,7 @@
}
.pages > .section {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -67,7 +67,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -27,7 +27,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -27,7 +27,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -26,7 +26,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -77,7 +77,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -468,7 +468,7 @@ class Chunker {
}
set total(num) {
this.pagesArea.style.setProperty("--page-count", num);
this.pagesArea.style.setProperty("--pagedjs-page-count", num);
this._total = num;
}
......
......@@ -42,7 +42,7 @@ class Page {
area.style.columnWidth = Math.round(size.width) + "px";
area.style.columnGap = "calc(var(--margin-right) + var(--margin-left))";
area.style.columnGap = "calc(var(--pagedjs-margin-right) + var(--pagedjs-margin-left))";
// area.style.overflow = "scroll";
this.width = Math.round(size.width);
......
......@@ -39,7 +39,7 @@ class StringSets extends Handler {
funcNode.children.append(funcNode.children.createItem({
type: "Identifier",
loc: null,
name: "--string-" + identifier
name: "--pagedjs-string-" + identifier
}));
}
}
......@@ -52,17 +52,17 @@ class StringSets extends Handler {
let cssVar;
if (set.value === "content" || 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}"`);
// this.styleSheet.insertRule(`:root { --pagedjs-string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
// fragment.style.setProperty(`--pagedjs-string-${name}`, `"${cssVar}"`);
set.first = cssVar;
fragment.style.setProperty(`--string-${name}`, `"${set.first}"`);
fragment.style.setProperty(`--pagedjs-string-${name}`, `"${set.first}"`);
} else {
console.warn(set.value + "needs css replacement");
}
} else {
// Use the previous values
if (set.first) {
fragment.style.setProperty(`--string-${name}`, `"${set.first}"`);
fragment.style.setProperty(`--pagedjs-string-${name}`, `"${set.first}"`);
}
}
}
......
......@@ -32,7 +32,7 @@ class TargetText extends Handler {
style = last.name;
}
let variable = "--" + UUID();
let variable = "--pagedjs-" + UUID();
selector.split(",").forEach((s) => {
this.textTargets[s] = {
......
......@@ -521,7 +521,7 @@ class AtPage extends Handler {
let value = margin[m].value + (margin[m].unit || "");
let mVar = list.createItem({
type: "Declaration",
property: "--margin-" + m,
property: "--pagedjs-margin-" + m,
value: {
type: "Raw",
value: value
......@@ -544,11 +544,11 @@ class AtPage extends Handler {
}
// width variable
let wVar = this.createVariable("--width", widthString);
let wVar = this.createVariable("--pagedjs-width", widthString);
list.appendData(wVar);
// height variable
let hVar = this.createVariable("--height", heightString);
let hVar = this.createVariable("--pagedjs-height", heightString);
list.appendData(hVar);
let w = this.createDimension("width", width);
......@@ -736,27 +736,27 @@ class AtPage extends Handler {
widthString = `calc( ${CSSValueToString(width)} + ${CSSValueToString(bleed.left)} + ${CSSValueToString(bleed.right)} )`;
heightString = `calc( ${CSSValueToString(height)} + ${CSSValueToString(bleed.top)} + ${CSSValueToString(bleed.bottom)} )`;
let bleedTop = this.createVariable("--bleed-top", CSSValueToString(bleed.top));
let bleedRight = this.createVariable("--bleed-right", CSSValueToString(bleed.right));
let bleedBottom = this.createVariable("--bleed-bottom", CSSValueToString(bleed.bottom));
let bleedLeft = this.createVariable("--bleed-left", CSSValueToString(bleed.left));
let bleedTop = this.createVariable("--pagedjs-bleed-top", CSSValueToString(bleed.top));
let bleedRight = this.createVariable("--pagedjs-bleed-right", CSSValueToString(bleed.right));
let bleedBottom = this.createVariable("--pagedjs-bleed-bottom", CSSValueToString(bleed.bottom));
let bleedLeft = this.createVariable("--pagedjs-bleed-left", CSSValueToString(bleed.left));
let pageWidthVar = this.createVariable("--page-width", CSSValueToString(width));
let pageHeightVar = this.createVariable("--page-height", CSSValueToString(height));
let pageWidthVar = this.createVariable("--pagedjs-page-width", CSSValueToString(width));
let pageHeightVar = this.createVariable("--pagedjs-page-height", CSSValueToString(height));
rules.push(bleedTop, bleedRight, bleedBottom, bleedLeft, pageWidthVar, pageHeightVar);
}
if (marks) {
marks.forEach((mark) => {
let markDisplay = this.createVariable("--mark-" + mark + "-display", "block");
let markDisplay = this.createVariable("--pagedjs-mark-" + mark + "-display", "block");
rules.push(markDisplay);
})
}
// orientation variable
if (orientation) {
let oVar = this.createVariable("--orientation", orientation);
let oVar = this.createVariable("--pagedjs-orientation", orientation);
rules.push(oVar);
if (orientation !== "portrait") {
......@@ -765,8 +765,8 @@ class AtPage extends Handler {
}
}
let wVar = this.createVariable("--width", widthString);
let hVar = this.createVariable("--height", heightString);
let wVar = this.createVariable("--pagedjs-width", widthString);
let hVar = this.createVariable("--pagedjs-height", heightString);
rules.push(wVar, hVar);
......@@ -777,7 +777,7 @@ class AtPage extends Handler {
/*
@page {
size: var(--width) var(--height);
size: var(--pagedjs-width) var(--pagedjs-height);
margin: 0;
padding: 0;
}
......
This diff is collapsed.
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