Commit a825cb77 authored by Fred Chasen's avatar Fred Chasen

Namespace classes with pagedjs_

parent 93a4ee20
......@@ -14,7 +14,7 @@ html{
}
@media screen {
.baseline .page {
.baseline .pagedjs_page {
background-image: repeating-linear-gradient(180deg, transparent 0, transparent 14px , rgba(0,255,0,0.7) var(--baseline)) ;
background-size: cover;
background-position: 0 -3px , 0 0
......
......@@ -75,6 +75,6 @@
color: #000;
}
.page {
.pagedjs_page {
box-shadow: 0 0 4px #ccc;
}
......@@ -17,14 +17,14 @@
background-color: whitesmoke;
}
.page {
.pagedjs_page {
background-color: #fdfdfd;
margin: calc(var(--margin) * 4) var(--margin);
flex: none;
box-shadow: 0 0 0 1px var(--color-mbox);
}
.pages {
.pagedjs_pages {
width: calc((var(--width) * 2) + (var(--margin) * 4));
display: flex;
flex-direction: row;
......@@ -40,35 +40,35 @@
display: block;
}
.page.first_page {
.pagedjs_first_page {
margin-left: calc(50% + var(--margin));
}
}
@media screen {
.debug .top .top-left-corner,
.debug .top .top-right-corner {
.debug .pagedjs_margin-top .pagedjs_margin-top-left-corner,
.debug .pagedjs_margin-top .pagedjs_margin-top-right-corner {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
.debug .top > div {
.debug .pagedjs_margin-top > div {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
.debug .right > div {
.debug .pagedjs_margin-right > div {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
.debug .bottom .bottom-left-corner,
.debug .bottom .bottom-right-corner {
.debug .pagedjs_margin-bottom .pagedjs_margin-bottom-left-corner,
.debug .pagedjs_margin-bottom .pagedjs_margin-bottom-right-corner {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
.debug .bottom > div {
.debug .pagedjs_margin-bottom > div {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
.debug .left > div {
.debug .pagedjs_margin-left > div {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
}
......@@ -232,7 +232,7 @@
});
let resizer = () => {
let pages = document.querySelector(".pages");
let pages = document.querySelector(".pagedjs_pages");
scale = ((window.innerWidth ) / pages.offsetWidth) * .75;
if (scale < 1) {
......@@ -250,7 +250,7 @@
setTimeout(() => {
let page = document.querySelector(".page");
let page = document.querySelector(".pagedjs_page");
let height = (page.offsetHeight + 51) * scale;
var next = document.getElementById("next");
......@@ -324,13 +324,13 @@
transform-origin: 0 0;
} */
.page {
.pagedjs_page {
background-color: #fdfdfd;
margin-bottom: calc(var(--margin) / 2);
flex: none;
}
.pages {
.pagedjs_pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -340,7 +340,7 @@
margin: 0 auto;
}
.pages > .section {
.pagedjs_pages > .section {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -348,7 +348,7 @@
justify-content: flex-start;
}
.first_page {
.pagedjs_first_page {
margin-left: 50%;
}
......
......@@ -24,14 +24,14 @@
console.log("Rendering " + flow.total + " pages took " + (t1 - t0) + " milliseconds.");
let editable = document.querySelectorAll(".page .area > div");
let editable = document.querySelectorAll(".pagedjs_page .pagedjs_area > div");
for (var i = 0; i < editable.length; i++) {
editable[i].setAttribute("contenteditable", true);
}
});
let resizer = () => {
let pages = document.querySelector(".pages");
let pages = document.querySelector(".pagedjs_pages");
if (pages) {
let scale = ((window.innerWidth * .9 ) / pages.offsetWidth);
......
......@@ -27,7 +27,7 @@
<script src="../dist/paged.js"></script>
<style>
#main .first_page {
#main .pagedjs_first_page {
margin-left: unset;
}
</style>
......@@ -39,7 +39,7 @@
// Codemirror
let cssTextArea = document.getElementById('codemirror');
await fetch("aurorae/book.css")
await fetch("assets/aurorae/book.css")
.then((response) => {
return response.text();
}).then((text) => {
......@@ -90,7 +90,7 @@
let resizer = () => {
let pages = document.querySelector(".pages");
let pages = document.querySelector(".pagedjs_pages");
let scale = ((window.innerWidth * .9 ) / pages.offsetWidth);
if (scale < 1) {
pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
......
......@@ -83,13 +83,13 @@
}
.page {
.pagedjs_page {
margin-bottom: calc(var(--margin) / 2);
flex: none;
border: 1px solid black;
}
.pages {
.pagedjs_pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -99,7 +99,7 @@
margin: 0 auto;
}
.pages>.section {
.pagedjs_pages>.section {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -107,7 +107,7 @@
justify-content: flex-start;
}
.first_page {
.pagedjs_first_page {
margin-left: 50%;
}
}
......@@ -214,4 +214,4 @@
</div>
</body>
\ No newline at end of file
</body>
......@@ -83,13 +83,13 @@
}
.page {
.pagedjs_page {
margin-bottom: calc(var(--margin) / 2);
flex: none;
border: 1px solid black;
}
.pages {
.pagedjs_pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -99,7 +99,7 @@
margin: 0 auto;
}
.pages>.section {
.pagedjs_pages>.section {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -107,7 +107,7 @@
justify-content: flex-start;
}
.first_page {
.pagedjs_first_page {
margin-left: 50%;
}
}
......@@ -214,4 +214,4 @@
</div>
</body>
\ No newline at end of file
</body>
......@@ -83,13 +83,13 @@
}
.page {
.pagedjs_page {
margin-bottom: calc(var(--margin) / 2);
flex: none;
border: 1px solid black;
}
.pages {
.pagedjs_pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -99,7 +99,7 @@
margin: 0 auto;
}
.pages>.section {
.pagedjs_pages>.section {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -107,7 +107,7 @@
justify-content: flex-start;
}
.first_page {
.pagedjs_first_page {
margin-left: 50%;
}
}
......@@ -214,4 +214,4 @@
</div>
</body>
\ No newline at end of file
</body>
......@@ -83,13 +83,13 @@
}
.page {
.pagedjs_page {
margin-bottom: calc(var(--margin) / 2);
flex: none;
border: 1px solid black;
}
.pages {
.pagedjs_pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -99,7 +99,7 @@
margin: 0 auto;
}
.pages>.section {
.pagedjs_pages>.section {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -107,7 +107,7 @@
justify-content: flex-start;
}
.first_page {
.pagedjs_first_page {
margin-left: 50%;
}
}
......@@ -214,4 +214,4 @@
</div>
</body>
\ No newline at end of file
</body>
......@@ -83,13 +83,13 @@
}
.page {
.pagedjs_page {
margin-bottom: calc(var(--margin) / 2);
flex: none;
border: 1px solid black;
}
.pages {
.pagedjs_pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -99,7 +99,7 @@
margin: 0 auto;
}
.pages>.section {
.pagedjs_pages>.section {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
......@@ -107,7 +107,7 @@
justify-content: flex-start;
}
.first_page {
.pagedjs_first_page {
margin-left: 50%;
}
}
......@@ -214,4 +214,4 @@
</div>
</body>
\ No newline at end of file
</body>
......@@ -31,7 +31,7 @@
}
@media screen {
.page {
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
}
......
......@@ -15,7 +15,7 @@ describe('default', async () => {
})
it('should render 5 pages', async () => {
let pages = await page.$$eval(".page", (r) => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
......@@ -24,11 +24,11 @@ describe('default', async () => {
it('should avoid breaking after h2', async () => {
let h2ParentPage = await page.$eval("h2", (r) => {
let pageId = r.closest(".page").id;
let pageId = r.closest(".pagedjs_page").id;
return pageId;
});
let pParentPage = await page.$eval("#afterh2", (r) => {
let pageId = r.closest(".page").id;
let pageId = r.closest(".pagedjs_page").id;
return pageId;
});
......@@ -41,7 +41,7 @@ describe('default', async () => {
let section;
for (let i = 0; i < r.length; i++) {
section = r[i];
curr = section.closest(".page").id;
curr = section.closest(".pagedjs_page").id;
if(curr === prev) {
return false;
}
......@@ -54,7 +54,7 @@ describe('default', async () => {
})
it('should render a blank page before break-before=right', async () => {
let blank = await page.$eval(".blank_page", (r) => {
let blank = await page.$eval(".pagedjs_blank_page", (r) => {
return r.id;
});
......@@ -63,7 +63,7 @@ describe('default', async () => {
it('should render break-before=right sections as right page', async () => {
let isRight = await page.$eval("#page-5", (r) => {
return r.classList.contains("right_page");
return r.classList.contains("pagedjs_right_page");
});
expect(isRight).toEqual(true);
......@@ -71,11 +71,11 @@ describe('default', async () => {
it('should breaking after #breakAfter', async () => {
let h4ParentPage = await page.$eval("#breakAfter", (r) => {
let pageId = r.closest(".page").id;
let pageId = r.closest(".pagedjs_page").id;
return pageId;
});
let pParentPage = await page.$eval("#afterh4", (r) => {
let pageId = r.closest(".page").id;
let pageId = r.closest(".pagedjs_page").id;
return pageId;
});
......
......@@ -18,7 +18,7 @@
}
@media screen {
.page {
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
}
......
......@@ -20,7 +20,7 @@ describe('default', async () => {
})
it('should render 1 page', async () => {
let pages = await page.$$eval(".page", (r) => r.length);
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(1);
})
......
......@@ -18,7 +18,7 @@
}
@media screen {
.page {
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
}
......
......@@ -5,32 +5,32 @@ import Hook from "../utils/hook";
const MAX_PAGES = 10000000000;
const TEMPLATE = `<div class="page">
<div class="top">
<div class="top-left-corner"><div class="content"></div></div>
<div class="top-left"><div class="content"></div></div>
<div class="top-center"><div class="content"></div></div>
<div class="top-right"><div class="content"></div></div>
<div class="top-right-corner"><div class="content"></div></div>
const TEMPLATE = `<div class="pagedjs_page">
<div class="pagedjs_margin-top">
<div class="pagedjs_margin-top-left-corner"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-top-left"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-top-center"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-top-right"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-top-right-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="right">
<div class="right-top"><div class="content"></div></div>
<div class="right-middle"><div class="content"></div></div>
<div class="right-bottom"><div class="content"></div></div>
<div class="pagedjs_margin-right">
<div class="pagedjs_margin-right-top"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-right-middle"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-right-bottom"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="left">
<div class="left-top"><div class="content"></div></div>
<div class="left-middle"><div class="content"></div></div>
<div class="left-bottom"><div class="content"></div></div>
<div class="pagedjs_margin-left">
<div class="pagedjs_margin-left-top"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-left-middle"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-left-bottom"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="bottom">
<div class="bottom-left-corner"><div class="content"></div></div>
<div class="bottom-left"><div class="content"></div></div>
<div class="bottom-center"><div class="content"></div></div>
<div class="bottom-right"><div class="content"></div></div>
<div class="bottom-right-corner"><div class="content"></div></div>
<div class="pagedjs_margin-bottom">
<div class="pagedjs_margin-bottom-left-corner"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-bottom-left"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-bottom-center"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-bottom-right"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin-bottom-right-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="area"></div>
<div class="pagedjs_area"></div>
</div>`;
/**
......@@ -62,7 +62,7 @@ class Chunker {
setup(renderTo) {
this.pagesArea = document.createElement("div");
this.pagesArea.classList.add("pages");
this.pagesArea.classList.add("pagedjs_pages");
if (renderTo) {
renderTo.appendChild(this.pagesArea);
......
......@@ -34,7 +34,7 @@ class Page {
page = this.pagesArea.lastChild;
}
let area = page.querySelector(".area");
let area = page.querySelector(".pagedjs_area");
let size = area.getBoundingClientRect();
......@@ -79,23 +79,23 @@ class Page {
page.id = id;
if (this.name) {
page.classList.add(this.name + "_page");
page.classList.add("pagedjs_" + this.name + "_page");
}
if (this.blank) {
page.classList.add("blank_page");
page.classList.add("pagedjs_blank_page");
}
if (pgnum === 0) {
page.classList.add("first_page");
page.classList.add("pagedjs_first_page");
}
if (pgnum % 2 !== 1) {
page.classList.remove("left_page");
page.classList.add("right_page");
page.classList.remove("pagedjs_left_page");
page.classList.add("pagedjs_right_page");
} else {
page.classList.remove("right_page");
page.classList.add("left_page");
page.classList.remove("pagedjs_right_page");
page.classList.add("pagedjs_left_page");
}
}
......
......@@ -67,7 +67,7 @@ class TargetCounters extends Handler {
selected.setAttribute("data-target-counter", selector);
// TODO: handle other counter types (by query)
if (target.counter === "page") {
let pages = chunker.pagesArea.querySelectorAll(".page");
let pages = chunker.pagesArea.querySelectorAll(".pagedjs_page");
let pg = 0;
for (var i = 0; i < pages.length; i++) {
pg += 1;
......
......@@ -361,14 +361,14 @@ class AtPage extends Handler {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: 'page'
name: 'pagedjs_page'
}));
// Named page
if (page.name) {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: page.name + "_page"
name: "pagedjs_" + page.name + "_page"
}));
}
......@@ -383,7 +383,7 @@ class AtPage extends Handler {
if (page.psuedo) {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: page.psuedo + "_page"
name: "pagedjs_" + page.psuedo + "_page"
}));
}
......@@ -549,7 +549,7 @@ class AtPage extends Handler {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: 'page'
name: 'pagedjs_page'
}));
// Named page
......@@ -557,7 +557,7 @@ class AtPage extends Handler {
name = page.name + "_page";
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: page.name + "_page"
name: "pagedjs_" + page.name + "_page"
}));
}
......@@ -565,7 +565,7 @@ class AtPage extends Handler {
if (page.psuedo) {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: page.psuedo + "_page"
name: "pagedjs_" + page.psuedo + "_page"
}));
}
......@@ -576,7 +576,7 @@ class AtPage extends Handler {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: loc
name: "pagedjs_margin-" + loc
}));
selectors.insert(selectors.createItem({
......@@ -586,7 +586,7 @@ class AtPage extends Handler {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: "content"
name: "pagedjs_margin-content"
}));
// selectors.insert(selectors.createItem({
......@@ -632,7 +632,7 @@ class AtPage extends Handler {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: 'page'
name: 'pagedjs_page'
}));
// Named page
......@@ -640,7 +640,7 @@ class AtPage extends Handler {
name = page.name + "_page";
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: page.name + "_page"
name: "pagedjs_" + page.name + "_page"
}));
}
......@@ -648,7 +648,7 @@ class AtPage extends Handler {
if (page.psuedo) {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: page.psuedo + "_page"
name: "pagedjs_" + page.psuedo + "_page"
}));
}
......@@ -659,7 +659,7 @@ class AtPage extends Handler {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: loc
name: "pagedjs_margin-" + loc
}));
selectors.insert(selectors.createItem({
......@@ -669,7 +669,7 @@ class AtPage extends Handler {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: "content"
name: "pagedjs_margin-content"
}));
selectors.insert(selectors.createItem({
......
......@@ -189,7 +189,7 @@ class Breaks extends Handler {
if (named) {
page.name = named.dataset.page;
page.element.classList.add(named.dataset.page + "_page");
page.element.classList.add("pagedjs_" + named.dataset.page + "_page");
}
}
......
......@@ -12,7 +12,7 @@ export default `
size: var(--width) var(--height);
}
.page {
.pagedjs_page {
box-sizing: border-box;
width: var(--width);
height: var(--height);
......@@ -23,11 +23,11 @@ export default `
grid-template-rows: [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom);
}
.page * {
.pagedjs_page * {
box-sizing: border-box;
}</