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

Add pagebox

parent 392a6f6f
......@@ -19,9 +19,9 @@ describe('bleed', async () => {
expect(text).toContain('Chapter 1. Loomings.');
})
it('should render 1 page', async () => {
it('should render 7 pages', async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(1);
expect(pages).toBe(7);
})
if (!DEBUG) {
......
......@@ -10,68 +10,70 @@ import {
const MAX_PAGES = false;
const TEMPLATE = `
<div class="pagedjs_sheet">
<div class="pagedjs_bleed pagedjs_bleed-top">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-middle">
<div class="pagedjs_marks-cross"></div>
<div class="pagedjs_page">
<div class="pagedjs_sheet">
<div class="pagedjs_bleed pagedjs_bleed-top">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-middle">
<div class="pagedjs_marks-cross"></div>
</div>
<div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_bleed pagedjs_bleed-bottom">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-middle">
<div class="pagedjs_marks-cross"></div>
</div> <div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_bleed pagedjs_bleed-left">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-middle">
<div class="pagedjs_marks-cross"></div>
</div> <div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_bleed pagedjs_bleed-right">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-middle">
<div class="pagedjs_marks-cross"></div>
</div>
<div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_page">
<div class="pagedjs_margin-top-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-left-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-top">
<div class="pagedjs_margin pagedjs_margin-top-left"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-top-center"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-top-right"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_bleed pagedjs_bleed-bottom">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-middle">
<div class="pagedjs_marks-cross"></div>
</div> <div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_margin-top-right-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-right-corner"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_bleed pagedjs_bleed-left">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-middle">
<div class="pagedjs_marks-cross"></div>
</div> <div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_margin-right">
<div class="pagedjs_margin pagedjs_margin-right-top"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-right-middle"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-right-bottom"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_bleed pagedjs_bleed-right">
<div class="pagedjs_marks-crop"></div>
<div class="pagedjs_marks-middle">
<div class="pagedjs_marks-cross"></div>
</div>
<div class="pagedjs_marks-crop"></div>
</div>
<div class="pagedjs_margin-left">
<div class="pagedjs_margin pagedjs_margin-left-top"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-left-middle"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-left-bottom"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-bottom-left-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom">
<div class="pagedjs_margin pagedjs_margin-bottom-left"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-bottom-center"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-bottom-right"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom-right-corner-holder">
<div class="pagedjs_margin pagedjs_margin-bottom-right-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_area">
<div class="pagedjs_page_content"></div>
<div class="pagedjs_pagebox">
<div class="pagedjs_margin-top-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-left-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-top">
<div class="pagedjs_margin pagedjs_margin-top-left"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-top-center"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-top-right"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-top-right-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-right-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-right">
<div class="pagedjs_margin pagedjs_margin-right-top"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-right-middle"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-right-bottom"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-left">
<div class="pagedjs_margin pagedjs_margin-left-top"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-left-middle"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-left-bottom"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-bottom-left-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom">
<div class="pagedjs_margin pagedjs_margin-bottom-left"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-bottom-center"><div class="pagedjs_margin-content"></div></div>
<div class="pagedjs_margin pagedjs_margin-bottom-right"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_margin-bottom-right-corner-holder">
<div class="pagedjs_margin pagedjs_margin-bottom-right-corner"><div class="pagedjs_margin-content"></div></div>
</div>
<div class="pagedjs_area">
<div class="pagedjs_page_content"></div>
</div>
</div>
</div>
</div>`;
......@@ -368,7 +370,7 @@ class Chunker {
this.pages.push(page);
// Create the pages
page.create(undefined, lastPage && lastPage.sheet);
page.create(undefined, lastPage && lastPage.page);
page.index(this.total);
......
......@@ -24,17 +24,17 @@ class Page {
//let page = documentFragment.children[0];
let clone = document.importNode(this.pageTemplate.content, true);
let sheet, index;
let page, index;
if (after) {
this.pagesArea.insertBefore(clone, after.nextElementSibling);
index = Array.prototype.indexOf.call(this.pagesArea.children, after.nextElementSibling);
sheet = this.pagesArea.children[index];
page = this.pagesArea.children[index];
} else {
this.pagesArea.appendChild(clone);
sheet = this.pagesArea.lastChild;
page = this.pagesArea.lastChild;
}
let page = sheet.querySelector(".pagedjs_page");
let pagebox = page.querySelector(".pagedjs_pagebox");
let area = page.querySelector(".pagedjs_page_content");
......@@ -48,8 +48,8 @@ class Page {
this.width = Math.round(size.width);
this.height = Math.round(size.height);
this.sheet = sheet;
this.element = page;
this.pagebox = pagebox;
this.area = area;
return page;
......@@ -68,8 +68,8 @@ class Page {
index(pgnum) {
this.position = pgnum;
let sheet = this.sheet;
let page = this.element;
// let pagebox = this.pagebox;
let index = pgnum+1;
......@@ -77,7 +77,7 @@ class Page {
this.id = id;
sheet.dataset.sheetNumber = index;
// page.dataset.pageNumber = index;
page.dataset.pageNumber = index;
page.setAttribute('id', id);
......
......@@ -137,7 +137,7 @@ export default `
height: var(--cross-size);
}
.pagedjs_page {
.pagedjs_pagebox {
box-sizing: border-box;
width: var(--width);
height: var(--height);
......@@ -149,7 +149,7 @@ export default `
grid-row: sheet-middle;
}
.pagedjs_page * {
.pagedjs_pagebox * {
box-sizing: border-box;
}
......@@ -245,18 +245,18 @@ export default `
grid-template-columns: 100%;
}
.pagedjs_pages .pagedjs_page .pagedjs_margin:not(.hasContent) {
.pagedjs_pages .pagedjs_pagebox .pagedjs_margin:not(.hasContent) {
visibility: hidden;
}
.pagedjs_page > .pagedjs_area {
.pagedjs_pagebox > .pagedjs_area {
grid-column: center;
grid-row: page;
width: 100%;
height: 100%;
}
.pagedjs_page > .pagedjs_area > .pagedjs_page_content {
.pagedjs_pagebox > .pagedjs_area > .pagedjs_page_content {
width: 100%;
height: 100%;
position: relative;
......@@ -272,18 +272,18 @@ export default `
}
.pagedjs_page .pagedjs_margin-top-left-corner,
.pagedjs_page .pagedjs_margin-top-right-corner,
.pagedjs_page .pagedjs_margin-bottom-left-corner,
.pagedjs_page .pagedjs_margin-bottom-right-corner,
.pagedjs_page .pagedjs_margin-top-left,
.pagedjs_page .pagedjs_margin-top-right,
.pagedjs_page .pagedjs_margin-bottom-left,
.pagedjs_page .pagedjs_margin-bottom-right,
.pagedjs_page .pagedjs_margin-top-center,
.pagedjs_page .pagedjs_margin-bottom-center,
.pagedjs_page .pagedjs_margin-top-center,
.pagedjs_page .pagedjs_margin-bottom-center,
.pagedjs_pagebox .pagedjs_margin-top-left-corner,
.pagedjs_pagebox .pagedjs_margin-top-right-corner,
.pagedjs_pagebox .pagedjs_margin-bottom-left-corner,
.pagedjs_pagebox .pagedjs_margin-bottom-right-corner,
.pagedjs_pagebox .pagedjs_margin-top-left,
.pagedjs_pagebox .pagedjs_margin-top-right,
.pagedjs_pagebox .pagedjs_margin-bottom-left,
.pagedjs_pagebox .pagedjs_margin-bottom-right,
.pagedjs_pagebox .pagedjs_margin-top-center,
.pagedjs_pagebox .pagedjs_margin-bottom-center,
.pagedjs_pagebox .pagedjs_margin-top-center,
.pagedjs_pagebox .pagedjs_margin-bottom-center,
.pagedjs_margin-right-middle,
.pagedjs_margin-left-middle {
display: flex;
......@@ -306,8 +306,8 @@ export default `
/*
.pagedjs_page .pagedjs_margin-top-center,
.pagedjs_page .pagedjs_margin-bottom-center {
.pagedjs_pagebox .pagedjs_margin-top-center,
.pagedjs_pagebox .pagedjs_margin-bottom-center {
height: 100%;
display: none;
align-items: center;
......@@ -315,51 +315,51 @@ export default `
margin: 0 auto;
}
.pagedjs_page .pagedjs_margin-top-left-corner,
.pagedjs_page .pagedjs_margin-top-right-corner,
.pagedjs_page .pagedjs_margin-bottom-right-corner,
.pagedjs_page .pagedjs_margin-bottom-left-corner {
.pagedjs_pagebox .pagedjs_margin-top-left-corner,
.pagedjs_pagebox .pagedjs_margin-top-right-corner,
.pagedjs_pagebox .pagedjs_margin-bottom-right-corner,
.pagedjs_pagebox .pagedjs_margin-bottom-left-corner {
display: none;
align-items: center;
}
.pagedjs_page .pagedjs_margin-left-top,
.pagedjs_page .pagedjs_margin-right-top {
.pagedjs_pagebox .pagedjs_margin-left-top,
.pagedjs_pagebox .pagedjs_margin-right-top {
display: none;
align-items: flex-start;
}
.pagedjs_page .pagedjs_margin-right-middle,
.pagedjs_page .pagedjs_margin-left-middle {
.pagedjs_pagebox .pagedjs_margin-right-middle,
.pagedjs_pagebox .pagedjs_margin-left-middle {
display: none;
align-items: center;
}
.pagedjs_page .pagedjs_margin-left-bottom,
.pagedjs_page .pagedjs_margin-right-bottom {
.pagedjs_pagebox .pagedjs_margin-left-bottom,
.pagedjs_pagebox .pagedjs_margin-right-bottom {
display: none;
align-items: flex-end;
}
*/
.pagedjs_page .pagedjs_margin-top-left,
.pagedjs_page .pagedjs_margin-top-right-corner,
.pagedjs_page .pagedjs_margin-bottom-left,
.pagedjs_page .pagedjs_margin-bottom-right-corner { text-align: left; }
.pagedjs_page .pagedjs_margin-top-left-corner,
.pagedjs_page .pagedjs_margin-top-right,
.pagedjs_page .pagedjs_margin-bottom-left-corner,
.pagedjs_page .pagedjs_margin-bottom-right { text-align: right; }
.pagedjs_page .pagedjs_margin-top-center,
.pagedjs_page .pagedjs_margin-bottom-center,
.pagedjs_page .pagedjs_margin-left-top,
.pagedjs_page .pagedjs_margin-left-middle,
.pagedjs_page .pagedjs_margin-left-bottom,
.pagedjs_page .pagedjs_margin-right-top,
.pagedjs_page .pagedjs_margin-right-middle,
.pagedjs_page .pagedjs_margin-right-bottom { text-align: center; }
.pagedjs_pagebox .pagedjs_margin-top-left,
.pagedjs_pagebox .pagedjs_margin-top-right-corner,
.pagedjs_pagebox .pagedjs_margin-bottom-left,
.pagedjs_pagebox .pagedjs_margin-bottom-right-corner { text-align: left; }
.pagedjs_pagebox .pagedjs_margin-top-left-corner,
.pagedjs_pagebox .pagedjs_margin-top-right,
.pagedjs_pagebox .pagedjs_margin-bottom-left-corner,
.pagedjs_pagebox .pagedjs_margin-bottom-right { text-align: right; }
.pagedjs_pagebox .pagedjs_margin-top-center,
.pagedjs_pagebox .pagedjs_margin-bottom-center,
.pagedjs_pagebox .pagedjs_margin-left-top,
.pagedjs_pagebox .pagedjs_margin-left-middle,
.pagedjs_pagebox .pagedjs_margin-left-bottom,
.pagedjs_pagebox .pagedjs_margin-right-top,
.pagedjs_pagebox .pagedjs_margin-right-middle,
.pagedjs_pagebox .pagedjs_margin-right-bottom { text-align: center; }
.pagedjs_pages .pagedjs_margin .pagedjs_margin-content {
width: 100%;
......@@ -372,20 +372,20 @@ export default `
display: block;
}
.pagedjs_pages > .pagedjs_page > .pagedjs_area > div [data-split-to] {
.pagedjs_pages > .pagedjs_page > .pagedjs_pagebox > .pagedjs_area > div [data-split-to] {
margin-bottom: unset;
padding-bottom: unset;
}
.pagedjs_pages > .pagedjs_page > .pagedjs_area > div [data-split-from] {
.pagedjs_pages > .pagedjs_page > .pagedjs_pagebox > .pagedjs_area > div [data-split-from] {
text-indent: unset;
margin-top: unset;
padding-top: unset;
initial-letter: unset;
}
.pagedjs_pages > .pagedjs_page > .pagedjs_area > div [data-split-from] > *::first-letter,
.pagedjs_pages > .pagedjs_page > .pagedjs_area > div [data-split-from]::first-letter {
.pagedjs_pages > .pagedjs_page > .pagedjs_pagebox > .pagedjs_area > div [data-split-from] > *::first-letter,
.pagedjs_pages > .pagedjs_page > .pagedjs_pagebox > .pagedjs_area > div [data-split-from]::first-letter {
color: unset;
font-size: unset;
font-weight: unset;
......@@ -397,17 +397,17 @@ export default `
margin: unset;
}
.pagedjs_pages > .pagedjs_page > .pagedjs_area > div [data-split-to]:after,
.pagedjs_pages > .pagedjs_page > .pagedjs_area > div [data-split-to]::after {
.pagedjs_pages > .pagedjs_page > .pagedjs_pagebox > .pagedjs_area > div [data-split-to]:after,
.pagedjs_pages > .pagedjs_page > .pagedjs_pagebox > .pagedjs_area > div [data-split-to]::after {
content: unset;
}
.pagedjs_pages > .pagedjs_page > .pagedjs_area > div [data-split-from]:before,
.pagedjs_pages > .pagedjs_page > .pagedjs_area > div [data-split-from]::before {
.pagedjs_pages > .pagedjs_page > .pagedjs_pagebox > .pagedjs_area > div [data-split-from]:before,
.pagedjs_pages > .pagedjs_page > .pagedjs_pagebox > .pagedjs_area > div [data-split-from]::before {
content: unset;
}
.pagedjs_pages > .pagedjs_page > .pagedjs_area > div li[data-split-from]:first-of-type {
.pagedjs_pages > .pagedjs_page > .pagedjs_pagebox > .pagedjs_area > div li[data-split-from]:first-of-type {
list-style: none;
}
......
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