Commit 23e3a1c2 authored by Fred Chasen's avatar Fred Chasen

Merge branch 'bleeds' into 'master'

Adding custom bleed options for left and right pages

See merge request !61
parents 6fb54133 139b2ba6
Pipeline #281 passed with stage
in 3 minutes and 11 seconds
This diff is collapsed.
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe('bleed', async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage('bleed/bleed.html')
return page.rendered;
}, TIMEOUT)
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
})
it('should render text', async () => {
let text = await page.evaluate(() => document.body.textContent);
expect(text).toContain('Chapter 1. Loomings.');
})
it('should render 14 pages', async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(7);
})
if (!DEBUG) {
it('should create a pdf', async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
})
}
}
)
This diff is collapsed.
......@@ -2,6 +2,10 @@ export default `
:root {
--pagedjs-width: 8.5in;
--pagedjs-height: 11in;
--pagedjs-width-right: 8.5in;
--pagedjs-height-right: 11in;
--pagedjs-width-left: 8.5in;
--pagedjs-height-left: 11in;
--pagedjs-pagebox-width: 8.5in;
--pagedjs-pagebox-height: 11in;
--pagedjs-margin-top: 1in;
......@@ -12,6 +16,14 @@ export default `
--pagedjs-bleed-right: 0mm;
--pagedjs-bleed-bottom: 0mm;
--pagedjs-bleed-left: 0mm;
--pagedjs-bleed-right-top: 0mm;
--pagedjs-bleed-right-right: 0mm;
--pagedjs-bleed-right-bottom: 0mm;
--pagedjs-bleed-right-left: 0mm;
--pagedjs-bleed-left-top: 0mm;
--pagedjs-bleed-left-right: 0mm;
--pagedjs-bleed-left-bottom: 0mm;
--pagedjs-bleed-left-left: 0mm;
--pagedjs-crop-color: black;
--pagedjs-crop-offset: 2mm;
--pagedjs-crop-stroke: 1px;
......@@ -37,6 +49,20 @@ export default `
grid-template-rows: [bleed-top] var(--pagedjs-bleed-top) [sheet-middle] calc(var(--pagedjs-height) - var(--pagedjs-bleed-top) - var(--pagedjs-bleed-bottom)) [bleed-bottom] var(--pagedjs-bleed-bottom);
}
.pagedjs_right_page .pagedjs_sheet {
width: var(--pagedjs-width-right);
height: var(--pagedjs-height-right);
grid-template-columns: [bleed-left] var(--pagedjs-bleed-right-left) [sheet-center] calc(var(--pagedjs-width) - var(--pagedjs-bleed-right-left) - var(--pagedjs-bleed-right-right)) [bleed-right] var(--pagedjs-bleed-right-right);
grid-template-rows: [bleed-top] var(--pagedjs-bleed-right-top) [sheet-middle] calc(var(--pagedjs-height) - var(--pagedjs-bleed-right-top) - var(--pagedjs-bleed-right-bottom)) [bleed-bottom] var(--pagedjs-bleed-right-bottom);
}
.pagedjs_left_page .pagedjs_sheet {
width: var(--pagedjs-width-left);
height: var(--pagedjs-height-left);
grid-template-columns: [bleed-left] var(--pagedjs-bleed-left-left) [sheet-center] calc(var(--pagedjs-width) - var(--pagedjs-bleed-left-left) - var(--pagedjs-bleed-left-right)) [bleed-right] var(--pagedjs-bleed-left-right);
grid-template-rows: [bleed-top] var(--pagedjs-bleed-left-top) [sheet-middle] calc(var(--pagedjs-height) - var(--pagedjs-bleed-left-top) - var(--pagedjs-bleed-left-bottom)) [bleed-bottom] var(--pagedjs-bleed-left-bottom);
}
.pagedjs_bleed {
display: flex;
align-items: center;
......@@ -81,44 +107,116 @@ export default `
border-right: var(--pagedjs-crop-stroke) solid var(--pagedjs-crop-color);
}
.pagedjs_right_page .pagedjs_bleed-top .pagedjs_marks-crop:nth-child(1),
.pagedjs_right_page .pagedjs_bleed-bottom .pagedjs_marks-crop:nth-child(1) {
width: calc(var(--pagedjs-bleed-right-left) - var(--pagedjs-crop-stroke));
}
.pagedjs_left_page .pagedjs_bleed-top .pagedjs_marks-crop:nth-child(1),
.pagedjs_left_page .pagedjs_bleed-bottom .pagedjs_marks-crop:nth-child(1) {
width: calc(var(--pagedjs-bleed-left-left) - var(--pagedjs-crop-stroke));
}
.pagedjs_bleed-top .pagedjs_marks-crop:nth-child(3),
.pagedjs_bleed-bottom .pagedjs_marks-crop:nth-child(3) {
width: calc(var(--pagedjs-bleed-right) - var(--pagedjs-crop-stroke));
border-left: var(--pagedjs-crop-stroke) solid var(--pagedjs-crop-color);
}
.pagedjs_right_page .pagedjs_bleed-top .pagedjs_marks-crop:nth-child(3),
.pagedjs_right_page .pagedjs_bleed-bottom .pagedjs_marks-crop:nth-child(3) {
width: calc(var(--pagedjs-bleed-right-right) - var(--pagedjs-crop-stroke));
}
.pagedjs_left_page .pagedjs_bleed-top .pagedjs_marks-crop:nth-child(3),
.pagedjs_left_page .pagedjs_bleed-bottom .pagedjs_marks-crop:nth-child(3) {
width: calc(var(--pagedjs-bleed-left-right) - var(--pagedjs-crop-stroke));
}
.pagedjs_bleed-top .pagedjs_marks-crop {
align-self: flex-start;
height: calc(var(--pagedjs-bleed-top) - var(--pagedjs-crop-offset));
}
.pagedjs_right_page .pagedjs_bleed-top .pagedjs_marks-crop {
height: calc(var(--pagedjs-bleed-right-top) - var(--pagedjs-crop-offset));
}
.pagedjs_left_page .pagedjs_bleed-top .pagedjs_marks-crop {
height: calc(var(--pagedjs-bleed-left-top) - var(--pagedjs-crop-offset));
}
.pagedjs_bleed-bottom .pagedjs_marks-crop {
align-self: flex-end;
height: calc(var(--pagedjs-bleed-bottom) - var(--pagedjs-crop-offset));
}
.pagedjs_right_page .pagedjs_bleed-bottom .pagedjs_marks-crop {
height: calc(var(--pagedjs-bleed-right-bottom) - var(--pagedjs-crop-offset));
}
.pagedjs_left_page .pagedjs_bleed-bottom .pagedjs_marks-crop {
height: calc(var(--pagedjs-bleed-left-bottom) - var(--pagedjs-crop-offset));
}
.pagedjs_bleed-left .pagedjs_marks-crop:nth-child(1),
.pagedjs_bleed-right .pagedjs_marks-crop:nth-child(1) {
height: calc(var(--pagedjs-bleed-top) - var(--pagedjs-crop-stroke));
border-bottom: var(--pagedjs-crop-stroke) solid var(--pagedjs-crop-color);
}
.pagedjs_right_page .pagedjs_bleed-left .pagedjs_marks-crop:nth-child(1),
.pagedjs_right_page .pagedjs_bleed-right .pagedjs_marks-crop:nth-child(1) {
height: calc(var(--pagedjs-bleed-right-top) - var(--pagedjs-crop-stroke));
}
.pagedjs_left_page .pagedjs_bleed-left .pagedjs_marks-crop:nth-child(1),
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop:nth-child(1) {
height: calc(var(--pagedjs-bleed-left-top) - var(--pagedjs-crop-stroke));
}
.pagedjs_bleed-left .pagedjs_marks-crop:nth-child(3),
.pagedjs_bleed-right .pagedjs_marks-crop:nth-child(3) {
height: calc(var(--pagedjs-bleed-bottom) - var(--pagedjs-crop-stroke));
border-top: var(--pagedjs-crop-stroke) solid var(--pagedjs-crop-color);
}
.pagedjs_right_page .pagedjs_bleed-left .pagedjs_marks-crop:nth-child(3),
.pagedjs_right_page .pagedjs_bleed-right .pagedjs_marks-crop:nth-child(3) {
height: calc(var(--pagedjs-bleed-right-bottom) - var(--pagedjs-crop-stroke));
}
.pagedjs_left_page .pagedjs_bleed-left .pagedjs_marks-crop:nth-child(3),
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop:nth-child(3) {
height: calc(var(--pagedjs-bleed-left-bottom) - var(--pagedjs-crop-stroke));
}
.pagedjs_bleed-left .pagedjs_marks-crop {
width: calc(var(--pagedjs-bleed-left) - var(--pagedjs-crop-offset));
align-self: flex-start;
}
.pagedjs_right_page .pagedjs_bleed-left .pagedjs_marks-crop {
width: calc(var(--pagedjs-bleed-right-left) - var(--pagedjs-crop-offset));
}
.pagedjs_left_page .pagedjs_bleed-left .pagedjs_marks-crop {
width: calc(var(--pagedjs-bleed-left-left) - var(--pagedjs-crop-offset));
}
.pagedjs_bleed-right .pagedjs_marks-crop {
width: calc(var(--pagedjs-bleed-right) - var(--pagedjs-crop-offset));
align-self: flex-end;
}
.pagedjs_right_page .pagedjs_bleed-right .pagedjs_marks-crop {
width: calc(var(--pagedjs-bleed-right-right) - var(--pagedjs-crop-offset));
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
width: calc(var(--pagedjs-bleed-left-right) - var(--pagedjs-crop-offset));
}
.pagedjs_marks-middle {
display: flex;
flex-grow: 1;
......@@ -271,6 +369,18 @@ export default `
height: var(--pagedjs-height);
}
.pagedjs_page.pagedjs_right_page {
counter-increment: page;
width: var(--pagedjs-width-right);
height: var(--pagedjs-height-right);
}
.pagedjs_page.pagedjs_left_page {
counter-increment: page;
width: var(--pagedjs-width-left);
height: var(--pagedjs-height-left);
}
.pagedjs_pages {
counter-reset: pages var(--pagedjs-page-count);
}
......@@ -463,7 +573,7 @@ img {
max-height: 100%;
}
.pagedjs_pages {
width: var(--pagedjs-width);
width: auto;
display: block !important;
transform: none !important;
height: 100% !important;
......
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