paged.js back to v0.3.1
This commit is contained in:
parent
c2856146f2
commit
4c4f795469
1 changed files with 100 additions and 316 deletions
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* @license Paged.js v0.4.1 | MIT | https://gitlab.pagedmedia.org/tools/pagedjs
|
||||
* @license Paged.js v0.3.1 | MIT | https://gitlab.pagedmedia.org/tools/pagedjs
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
|
|
@ -698,7 +698,7 @@
|
|||
let after = elementAfter(node, limiter);
|
||||
|
||||
while (after && after.dataset.undisplayed) {
|
||||
after = elementAfter(after, limiter);
|
||||
after = elementAfter(after);
|
||||
}
|
||||
|
||||
return after;
|
||||
|
|
@ -708,7 +708,7 @@
|
|||
let before = elementBefore(node, limiter);
|
||||
|
||||
while (before && before.dataset.undisplayed) {
|
||||
before = elementBefore(before, limiter);
|
||||
before = elementBefore(before);
|
||||
}
|
||||
|
||||
return before;
|
||||
|
|
@ -766,7 +766,7 @@
|
|||
for (var i = 0; i < ancestors.length; i++) {
|
||||
ancestor = ancestors[i];
|
||||
parent = ancestor.cloneNode(false);
|
||||
|
||||
|
||||
parent.setAttribute("data-split-from", parent.getAttribute("data-ref"));
|
||||
// ancestor.setAttribute("data-split-to", parent.getAttribute("data-ref"));
|
||||
|
||||
|
|
@ -792,23 +792,12 @@
|
|||
fragment.appendChild(parent);
|
||||
}
|
||||
added.push(parent);
|
||||
|
||||
// rebuild table rows
|
||||
if (parent.nodeName === "TD" && ancestor.parentElement.contains(ancestor)) {
|
||||
let td = ancestor;
|
||||
let prev = parent;
|
||||
while ((td = td.previousElementSibling)) {
|
||||
let sib = td.cloneNode(false);
|
||||
parent.parentElement.insertBefore(sib, prev);
|
||||
prev = sib;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
added = undefined;
|
||||
return fragment;
|
||||
}
|
||||
|
||||
/*
|
||||
export function split(bound, cutElement, breakAfter) {
|
||||
let needsRemoval = [];
|
||||
|
|
@ -1025,7 +1014,7 @@
|
|||
case "BLOCKQUOTE":
|
||||
case "PRE":
|
||||
case "LI":
|
||||
case "TD":
|
||||
case "TR":
|
||||
case "DT":
|
||||
case "DD":
|
||||
case "VIDEO":
|
||||
|
|
@ -1043,17 +1032,13 @@
|
|||
return n.cloneNode(deep);
|
||||
}
|
||||
|
||||
function findElement(node, doc, forceQuery) {
|
||||
function findElement(node, doc) {
|
||||
const ref = node.getAttribute("data-ref");
|
||||
return findRef(ref, doc, forceQuery);
|
||||
return findRef(ref, doc);
|
||||
}
|
||||
|
||||
function findRef(ref, doc, forceQuery) {
|
||||
if (!forceQuery && doc.indexOfRefs && doc.indexOfRefs[ref]) {
|
||||
return doc.indexOfRefs[ref];
|
||||
} else {
|
||||
return doc.querySelector(`[data-ref='${ref}']`);
|
||||
}
|
||||
function findRef(ref, doc) {
|
||||
return doc.querySelector(`[data-ref='${ref}']`);
|
||||
}
|
||||
|
||||
function validNode(node) {
|
||||
|
|
@ -1270,7 +1255,7 @@
|
|||
}
|
||||
|
||||
/**
|
||||
* BreakToken
|
||||
* Layout
|
||||
* @class
|
||||
*/
|
||||
class BreakToken {
|
||||
|
|
@ -1295,30 +1280,6 @@
|
|||
return true;
|
||||
}
|
||||
|
||||
toJSON(hash) {
|
||||
let node;
|
||||
let index = 0;
|
||||
if (!this.node) {
|
||||
return {};
|
||||
}
|
||||
if (isElement(this.node) && this.node.dataset.ref) {
|
||||
node = this.node.dataset.ref;
|
||||
} else if (hash) {
|
||||
node = this.node.parentElement.dataset.ref;
|
||||
}
|
||||
|
||||
if (this.node.parentElement) {
|
||||
const children = Array.from(this.node.parentElement.childNodes);
|
||||
index = children.indexOf(this.node);
|
||||
}
|
||||
|
||||
return JSON.stringify({
|
||||
"node": node,
|
||||
"index" : index,
|
||||
"offset": this.offset
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1352,15 +1313,6 @@
|
|||
this.element = element;
|
||||
|
||||
this.bounds = this.element.getBoundingClientRect();
|
||||
this.parentBounds = this.element.offsetParent.getBoundingClientRect();
|
||||
let gap = parseFloat(window.getComputedStyle(this.element).columnGap);
|
||||
|
||||
if (gap) {
|
||||
let leftMargin = this.bounds.left - this.parentBounds.left;
|
||||
this.gap = gap - leftMargin;
|
||||
} else {
|
||||
this.gap = 0;
|
||||
}
|
||||
|
||||
if (hooks) {
|
||||
this.hooks = hooks;
|
||||
|
|
@ -1417,9 +1369,6 @@
|
|||
console.warn("Unable to layout item: ", prevNode);
|
||||
return new RenderResult(undefined, new OverflowContentError("Unable to layout item", [prevNode]));
|
||||
}
|
||||
|
||||
this.rebuildTableFromBreakToken(newBreakToken, wrapper);
|
||||
|
||||
return new RenderResult(newBreakToken);
|
||||
}
|
||||
|
||||
|
|
@ -1438,18 +1387,11 @@
|
|||
|
||||
if (!newBreakToken) {
|
||||
newBreakToken = this.breakAt(node);
|
||||
} else {
|
||||
this.rebuildTableFromBreakToken(newBreakToken, wrapper);
|
||||
}
|
||||
|
||||
if (newBreakToken && newBreakToken.equals(prevBreakToken)) {
|
||||
console.warn("Unable to layout item: ", node);
|
||||
let after = newBreakToken.node && nodeAfter(newBreakToken.node);
|
||||
if (after) {
|
||||
newBreakToken = new BreakToken(after);
|
||||
} else {
|
||||
return new RenderResult(undefined, new OverflowContentError("Unable to layout item", [node]));
|
||||
}
|
||||
return new RenderResult(undefined, new OverflowContentError("Unable to layout item", [node]));
|
||||
}
|
||||
|
||||
length = 0;
|
||||
|
|
@ -1457,17 +1399,6 @@
|
|||
break;
|
||||
}
|
||||
|
||||
if (node.dataset && node.dataset.page) {
|
||||
let named = node.dataset.page;
|
||||
let page = this.element.closest(".pagedjs_page");
|
||||
page.classList.add("pagedjs_named_page");
|
||||
page.classList.add("pagedjs_" + named + "_page");
|
||||
|
||||
if (!node.dataset.splitFrom) {
|
||||
page.classList.add("pagedjs_" + named + "_first_page");
|
||||
}
|
||||
}
|
||||
|
||||
// Should the Node be a shallow or deep clone
|
||||
let shallow = isContainer(node);
|
||||
|
||||
|
|
@ -1492,8 +1423,6 @@
|
|||
|
||||
if (!newBreakToken) {
|
||||
newBreakToken = this.breakAt(node);
|
||||
} else {
|
||||
this.rebuildTableFromBreakToken(newBreakToken, wrapper);
|
||||
}
|
||||
|
||||
length = 0;
|
||||
|
|
@ -1514,19 +1443,13 @@
|
|||
|
||||
newBreakToken = this.findBreakToken(wrapper, source, bounds, prevBreakToken);
|
||||
|
||||
if (newBreakToken) {
|
||||
length = 0;
|
||||
this.rebuildTableFromBreakToken(newBreakToken, wrapper);
|
||||
}
|
||||
|
||||
if (newBreakToken && newBreakToken.equals(prevBreakToken)) {
|
||||
console.warn("Unable to layout item: ", node);
|
||||
let after = newBreakToken.node && nodeAfter(newBreakToken.node);
|
||||
if (after) {
|
||||
newBreakToken = new BreakToken(after);
|
||||
} else {
|
||||
return new RenderResult(undefined, new OverflowContentError("Unable to layout item", [node]));
|
||||
}
|
||||
return new RenderResult(undefined, new OverflowContentError("Unable to layout item", [node]));
|
||||
}
|
||||
|
||||
if (newBreakToken) {
|
||||
length = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1611,13 +1534,6 @@
|
|||
dest.appendChild(clone);
|
||||
}
|
||||
|
||||
if (clone.dataset && clone.dataset.ref) {
|
||||
if (!dest.indexOfRefs) {
|
||||
dest.indexOfRefs = {};
|
||||
}
|
||||
dest.indexOfRefs[clone.dataset.ref] = clone;
|
||||
}
|
||||
|
||||
let nodeHooks = this.hooks.renderNode.triggerSync(clone, node, this);
|
||||
nodeHooks.forEach((newNode) => {
|
||||
if (typeof newNode != "undefined") {
|
||||
|
|
@ -1628,23 +1544,6 @@
|
|||
return clone;
|
||||
}
|
||||
|
||||
rebuildTableFromBreakToken(breakToken, dest) {
|
||||
if (!breakToken || !breakToken.node) {
|
||||
return;
|
||||
}
|
||||
let node = breakToken.node;
|
||||
let td = isElement(node) ? node.closest("td") : node.parentElement.closest("td");
|
||||
if (td) {
|
||||
let rendered = findElement(td, dest, true);
|
||||
if (!rendered) {
|
||||
return;
|
||||
}
|
||||
while ((td = td.nextElementSibling)) {
|
||||
this.append(td, dest, null, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async waitForImages(imgs) {
|
||||
let results = Array.from(imgs).map(async (img) => {
|
||||
return this.awaitImageLoaded(img);
|
||||
|
|
@ -1824,20 +1723,16 @@
|
|||
|
||||
hasOverflow(element, bounds = this.bounds) {
|
||||
let constrainingElement = element && element.parentNode; // this gets the element, instead of the wrapper for the width workaround
|
||||
let {width, height} = element.getBoundingClientRect();
|
||||
let {width} = element.getBoundingClientRect();
|
||||
let scrollWidth = constrainingElement ? constrainingElement.scrollWidth : 0;
|
||||
let scrollHeight = constrainingElement ? constrainingElement.scrollHeight : 0;
|
||||
return Math.max(Math.floor(width), scrollWidth) > Math.round(bounds.width) ||
|
||||
Math.max(Math.floor(height), scrollHeight) > Math.round(bounds.height);
|
||||
return Math.max(Math.floor(width), scrollWidth) > Math.round(bounds.width);
|
||||
}
|
||||
|
||||
findOverflow(rendered, bounds = this.bounds, gap = this.gap) {
|
||||
findOverflow(rendered, bounds = this.bounds) {
|
||||
if (!this.hasOverflow(rendered, bounds)) return;
|
||||
|
||||
let start = Math.floor(bounds.left);
|
||||
let end = Math.round(bounds.right + gap);
|
||||
let vStart = Math.round(bounds.top);
|
||||
let vEnd = Math.round(bounds.bottom);
|
||||
let start = Math.round(bounds.left);
|
||||
let end = Math.round(bounds.right);
|
||||
let range;
|
||||
|
||||
let walker = walk$2(rendered.firstChild, rendered);
|
||||
|
|
@ -1857,10 +1752,8 @@
|
|||
let pos = getBoundingClientRect(node);
|
||||
let left = Math.round(pos.left);
|
||||
let right = Math.floor(pos.right);
|
||||
let top = Math.round(pos.top);
|
||||
let bottom = Math.floor(pos.bottom);
|
||||
|
||||
if (!range && (left >= end || top >= vEnd)) {
|
||||
if (!range && left >= end) {
|
||||
// Check if it is a float
|
||||
let isFloat = false;
|
||||
|
||||
|
|
@ -1868,8 +1761,7 @@
|
|||
const insideTableCell = parentOf(node, "TD", rendered);
|
||||
if (insideTableCell && window.getComputedStyle(insideTableCell)["break-inside"] === "avoid") {
|
||||
// breaking inside a table cell produces unexpected result, as a workaround, we forcibly avoid break inside in a cell.
|
||||
// But we take the whole row, not just the cell that is causing the break.
|
||||
prev = insideTableCell.parentElement;
|
||||
prev = insideTableCell;
|
||||
} else if (isElement(node)) {
|
||||
let styles = window.getComputedStyle(node);
|
||||
isFloat = styles.getPropertyValue("float") !== "none";
|
||||
|
|
@ -1895,24 +1787,23 @@
|
|||
|
||||
// Check if the node is inside a row with a rowspan
|
||||
const table = parentOf(tableRow, "TABLE", rendered);
|
||||
const rowspan = table.querySelector("[colspan]");
|
||||
if (table && rowspan) {
|
||||
if (table) {
|
||||
let columnCount = 0;
|
||||
for (const cell of Array.from(table.rows[0].cells)) {
|
||||
columnCount += parseInt(cell.getAttribute("colspan") || "1");
|
||||
columnCount += parseInt(cell.getAttribute("COLSPAN") || "1");
|
||||
}
|
||||
if (tableRow.cells.length !== columnCount) {
|
||||
let previousRow = tableRow.previousElementSibling;
|
||||
let previousRow = tableRow.previousSibling;
|
||||
let previousRowColumnCount;
|
||||
while (previousRow !== null) {
|
||||
previousRowColumnCount = 0;
|
||||
for (const cell of Array.from(previousRow.cells)) {
|
||||
previousRowColumnCount += parseInt(cell.getAttribute("colspan") || "1");
|
||||
previousRowColumnCount += parseInt(cell.getAttribute("COLSPAN") || "1");
|
||||
}
|
||||
if (previousRowColumnCount === columnCount) {
|
||||
break;
|
||||
}
|
||||
previousRow = previousRow.previousElementSibling;
|
||||
previousRow = previousRow.previousSibling;
|
||||
}
|
||||
if (previousRowColumnCount === columnCount) {
|
||||
prev = previousRow;
|
||||
|
|
@ -1948,20 +1839,16 @@
|
|||
let rects = getClientRects(node);
|
||||
let rect;
|
||||
left = 0;
|
||||
top = 0;
|
||||
for (var i = 0; i != rects.length; i++) {
|
||||
rect = rects[i];
|
||||
if (rect.width > 0 && (!left || rect.left > left)) {
|
||||
left = rect.left;
|
||||
}
|
||||
if (rect.height > 0 && (!top || rect.top > top)) {
|
||||
top = rect.top;
|
||||
}
|
||||
}
|
||||
|
||||
if (left >= end || top >= vEnd) {
|
||||
if (left >= end) {
|
||||
range = document.createRange();
|
||||
offset = this.textBreak(node, start, end, vStart, vEnd);
|
||||
offset = this.textBreak(node, start, end);
|
||||
if (!offset) {
|
||||
range = undefined;
|
||||
} else {
|
||||
|
|
@ -1972,7 +1859,7 @@
|
|||
}
|
||||
|
||||
// Skip children
|
||||
if (skip || (right <= end && bottom <= vEnd)) {
|
||||
if (skip || right <= end) {
|
||||
next = nodeAfter(node, rendered);
|
||||
if (next) {
|
||||
walker = walk$2(next, rendered);
|
||||
|
|
@ -1991,7 +1878,7 @@
|
|||
|
||||
}
|
||||
|
||||
findEndToken(rendered, source) {
|
||||
findEndToken(rendered, source, bounds = this.bounds) {
|
||||
if (rendered.childNodes.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -2033,12 +1920,10 @@
|
|||
return this.breakAt(after);
|
||||
}
|
||||
|
||||
textBreak(node, start, end, vStart, vEnd) {
|
||||
textBreak(node, start, end) {
|
||||
let wordwalker = words(node);
|
||||
let left = 0;
|
||||
let right = 0;
|
||||
let top = 0;
|
||||
let bottom = 0;
|
||||
let word, next, done, pos;
|
||||
let offset;
|
||||
while (!done) {
|
||||
|
|
@ -2054,15 +1939,13 @@
|
|||
|
||||
left = Math.floor(pos.left);
|
||||
right = Math.floor(pos.right);
|
||||
top = Math.floor(pos.top);
|
||||
bottom = Math.floor(pos.bottom);
|
||||
|
||||
if (left >= end || top >= vEnd) {
|
||||
if (left >= end) {
|
||||
offset = word.startOffset;
|
||||
break;
|
||||
}
|
||||
|
||||
if (right > end || bottom > vEnd) {
|
||||
if (right > end) {
|
||||
let letterwalker = letters(word);
|
||||
let letter, nextLetter, doneLetter;
|
||||
|
||||
|
|
@ -2077,9 +1960,8 @@
|
|||
|
||||
pos = getBoundingClientRect(letter);
|
||||
left = Math.floor(pos.left);
|
||||
top = Math.floor(pos.top);
|
||||
|
||||
if (left >= end || top >= vEnd) {
|
||||
if (left >= end) {
|
||||
offset = letter.startOffset;
|
||||
done = true;
|
||||
|
||||
|
|
@ -2178,7 +2060,7 @@
|
|||
|
||||
|
||||
area.style.columnWidth = Math.round(size.width) + "px";
|
||||
area.style.columnGap = "calc(var(--pagedjs-margin-right) + var(--pagedjs-margin-left) + var(--pagedjs-bleed-right) + var(--pagedjs-bleed-left) + var(--pagedjs-column-gap-offset))";
|
||||
area.style.columnGap = "calc(var(--pagedjs-margin-right) + var(--pagedjs-margin-left))";
|
||||
// area.style.overflow = "scroll";
|
||||
|
||||
this.width = Math.round(size.width);
|
||||
|
|
@ -2795,7 +2677,6 @@
|
|||
this.hooks.afterOverflowRemoved = new Hook(this);
|
||||
this.hooks.onBreakToken = new Hook();
|
||||
this.hooks.afterPageLayout = new Hook(this);
|
||||
this.hooks.finalizePage = new Hook(this);
|
||||
this.hooks.afterRendered = new Hook(this);
|
||||
|
||||
this.pages = [];
|
||||
|
|
@ -3002,14 +2883,12 @@
|
|||
this.emit("page", page);
|
||||
// await this.hooks.layout.trigger(page.element, page, undefined, this);
|
||||
await this.hooks.afterPageLayout.trigger(page.element, page, undefined, this);
|
||||
await this.hooks.finalizePage.trigger(page.element, page, undefined, this);
|
||||
this.emit("renderedPage", page);
|
||||
}
|
||||
}
|
||||
|
||||
async *layout(content, startAt) {
|
||||
let breakToken = startAt || false;
|
||||
let tokens = [];
|
||||
|
||||
while (breakToken !== undefined && (true)) {
|
||||
|
||||
|
|
@ -3027,20 +2906,7 @@
|
|||
// Layout content in the page, starting from the breakToken
|
||||
breakToken = await page.layout(content, breakToken, this.maxChars);
|
||||
|
||||
if (breakToken) {
|
||||
let newToken = breakToken.toJSON(true);
|
||||
if (tokens.lastIndexOf(newToken) > -1) {
|
||||
// loop
|
||||
let err = new OverflowContentError("Layout repeated", [breakToken.node]);
|
||||
console.error("Layout repeated at: ", breakToken.node);
|
||||
return err;
|
||||
} else {
|
||||
tokens.push(newToken);
|
||||
}
|
||||
}
|
||||
|
||||
await this.hooks.afterPageLayout.trigger(page.element, page, breakToken, this);
|
||||
await this.hooks.finalizePage.trigger(page.element, page, undefined, this);
|
||||
this.emit("renderedPage", page);
|
||||
|
||||
this.recoredCharLength(page.wrapper.textContent.length);
|
||||
|
|
@ -3211,7 +3077,6 @@
|
|||
}
|
||||
|
||||
await this.hooks.afterPageLayout.trigger(page.element, page, undefined, this);
|
||||
await this.hooks.finalizePage.trigger(page.element, page, undefined, this);
|
||||
this.emit("renderedPage", page);
|
||||
}
|
||||
|
||||
|
|
@ -26434,10 +26299,9 @@
|
|||
|
||||
insertRule(rule) {
|
||||
let inserted = this.ast.children.appendData(rule);
|
||||
|
||||
this.declarations(rule);
|
||||
|
||||
return inserted;
|
||||
inserted.forEach((item) => {
|
||||
this.declarations(item);
|
||||
});
|
||||
}
|
||||
|
||||
urls(ast) {
|
||||
|
|
@ -26478,6 +26342,7 @@
|
|||
lib.walk(ast, {
|
||||
visit: "Rule",
|
||||
enter: (ruleNode, ruleItem, rulelist) => {
|
||||
// console.log("rule", ruleNode);
|
||||
|
||||
this.hooks.onRule.trigger(ruleNode, ruleItem, rulelist);
|
||||
this.declarations(ruleNode, ruleItem, rulelist);
|
||||
|
|
@ -26491,6 +26356,7 @@
|
|||
lib.walk(ruleNode, {
|
||||
visit: "Declaration",
|
||||
enter: (declarationNode, dItem, dList) => {
|
||||
// console.log(declarationNode);
|
||||
|
||||
this.hooks.onDeclaration.trigger(declarationNode, dItem, dList, {ruleNode, ruleItem, rulelist});
|
||||
|
||||
|
|
@ -26717,7 +26583,6 @@
|
|||
--pagedjs-page-count: 0;
|
||||
--pagedjs-page-counter-increment: 1;
|
||||
--pagedjs-footnotes-count: 0;
|
||||
--pagedjs-column-gap-offset: 1000px;
|
||||
}
|
||||
|
||||
@page {
|
||||
|
|
@ -27116,20 +26981,13 @@
|
|||
counter-reset: unset;
|
||||
}
|
||||
|
||||
[data-footnote-marker] {
|
||||
[data-footnote-marker]:not([data-split-from]) {
|
||||
counter-increment: footnote-marker;
|
||||
text-indent: 0;
|
||||
display: list-item;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
[data-footnote-marker][data-split-from] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[data-footnote-marker]:not([data-split-from]) {
|
||||
counter-increment: footnote-marker;
|
||||
}
|
||||
|
||||
[data-footnote-marker]::marker {
|
||||
content: counter(footnote-marker) ". ";
|
||||
}
|
||||
|
|
@ -27749,8 +27607,7 @@
|
|||
backgroundOrigin: undefined,
|
||||
block: {},
|
||||
marks: undefined,
|
||||
notes: undefined,
|
||||
added: false
|
||||
notes: undefined
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -27778,8 +27635,6 @@
|
|||
page = this.pages[selector];
|
||||
marginalia = this.replaceMarginalia(node);
|
||||
needsMerge = true;
|
||||
// Mark page for getting classes added again
|
||||
page.added = false;
|
||||
} else {
|
||||
page = this.pageModel(selector);
|
||||
marginalia = this.replaceMarginalia(node);
|
||||
|
|
@ -27899,11 +27754,9 @@
|
|||
*/
|
||||
|
||||
afterTreeWalk(ast, sheet) {
|
||||
let dirtyPage = "*" in this.pages && this.pages["*"].added === false;
|
||||
|
||||
this.addPageClasses(this.pages, ast, sheet);
|
||||
|
||||
if (dirtyPage) {
|
||||
if ("*" in this.pages) {
|
||||
let width = this.pages["*"].width;
|
||||
let height = this.pages["*"].height;
|
||||
let format = this.pages["*"].format;
|
||||
|
|
@ -28349,48 +28202,41 @@
|
|||
|
||||
addPageClasses(pages, ast, sheet) {
|
||||
// First add * page
|
||||
if ("*" in pages && pages["*"].added === false) {
|
||||
if ("*" in pages) {
|
||||
let p = this.createPage(pages["*"], ast.children, sheet);
|
||||
sheet.insertRule(p);
|
||||
pages["*"].added = true;
|
||||
}
|
||||
// Add :left & :right
|
||||
if (":left" in pages && pages[":left"].added === false) {
|
||||
if (":left" in pages) {
|
||||
let left = this.createPage(pages[":left"], ast.children, sheet);
|
||||
sheet.insertRule(left);
|
||||
pages[":left"].added = true;
|
||||
}
|
||||
if (":right" in pages && pages[":right"].added === false) {
|
||||
if (":right" in pages) {
|
||||
let right = this.createPage(pages[":right"], ast.children, sheet);
|
||||
sheet.insertRule(right);
|
||||
pages[":right"].added = true;
|
||||
}
|
||||
// Add :first & :blank
|
||||
if (":first" in pages && pages[":first"].added === false) {
|
||||
if (":first" in pages) {
|
||||
let first = this.createPage(pages[":first"], ast.children, sheet);
|
||||
sheet.insertRule(first);
|
||||
pages[":first"].added = true;
|
||||
}
|
||||
if (":blank" in pages && pages[":blank"].added === false) {
|
||||
if (":blank" in pages) {
|
||||
let blank = this.createPage(pages[":blank"], ast.children, sheet);
|
||||
sheet.insertRule(blank);
|
||||
pages[":blank"].added = true;
|
||||
}
|
||||
// Add nth pages
|
||||
for (let pg in pages) {
|
||||
if (pages[pg].nth && pages[pg].added === false) {
|
||||
if (pages[pg].nth) {
|
||||
let nth = this.createPage(pages[pg], ast.children, sheet);
|
||||
sheet.insertRule(nth);
|
||||
pages[pg].added = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Add named pages
|
||||
for (let pg in pages) {
|
||||
if (pages[pg].name && pages[pg].added === false) {
|
||||
if (pages[pg].name) {
|
||||
let named = this.createPage(pages[pg], ast.children, sheet);
|
||||
sheet.insertRule(named);
|
||||
pages[pg].added = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29374,20 +29220,15 @@
|
|||
}
|
||||
|
||||
addPageAttributes(page, start, pages) {
|
||||
let namedPages = [start.dataset.page];
|
||||
let named = start.dataset.page;
|
||||
|
||||
if (namedPages && namedPages.length) {
|
||||
for (const named of namedPages) {
|
||||
if (!named) {
|
||||
continue;
|
||||
}
|
||||
page.name = named;
|
||||
page.element.classList.add("pagedjs_named_page");
|
||||
page.element.classList.add("pagedjs_" + named + "_page");
|
||||
if (named) {
|
||||
page.name = named;
|
||||
page.element.classList.add("pagedjs_named_page");
|
||||
page.element.classList.add("pagedjs_" + named + "_page");
|
||||
|
||||
if (!start.dataset.splitFrom) {
|
||||
page.element.classList.add("pagedjs_" + named + "_first_page");
|
||||
}
|
||||
if (!start.dataset.splitFrom) {
|
||||
page.element.classList.add("pagedjs_" + named + "_first_page");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -29433,7 +29274,7 @@
|
|||
// page.element.querySelector('.paged_area').style.color = red;
|
||||
}
|
||||
|
||||
finalizePage(fragment, page, breakToken, chunker) {
|
||||
afterPageLayout(fragment, page, breakToken, chunker) {
|
||||
for (let m in this.marginalia) {
|
||||
let margin = this.marginalia[m];
|
||||
let sels = m.split(" ");
|
||||
|
|
@ -30067,45 +29908,21 @@
|
|||
onAtMedia(node, item, list) {
|
||||
let media = this.getMediaName(node);
|
||||
let rules;
|
||||
if (media.includes("print")) {
|
||||
|
||||
if (media === "print") {
|
||||
rules = node.block.children;
|
||||
|
||||
// Append rules to the end of main rules list
|
||||
// TODO: this isn't working right, needs to check what is in the prelude
|
||||
/*
|
||||
rules.forEach((selectList) => {
|
||||
if (selectList.prelude) {
|
||||
selectList.prelude.children.forEach((rule) => {
|
||||
|
||||
rule.children.prependData({
|
||||
type: "Combinator",
|
||||
name: " "
|
||||
});
|
||||
|
||||
rule.children.prependData({
|
||||
type: "ClassSelector",
|
||||
name: "pagedjs_page"
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
list.insertList(rules, item);
|
||||
*/
|
||||
// Remove rules from the @media block
|
||||
node.block.children = new lib.List();
|
||||
|
||||
// Append rules to the end of main rules list
|
||||
list.appendList(rules);
|
||||
|
||||
// Remove rules from the @media block
|
||||
list.remove(item);
|
||||
} else if (!media.includes("all") && !media.includes("pagedjs-ignore")) {
|
||||
list.remove(item);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getMediaName(node) {
|
||||
let media = [];
|
||||
let media = "";
|
||||
|
||||
if (typeof node.prelude === "undefined" ||
|
||||
node.prelude.type !== "AtrulePrelude" ) {
|
||||
|
|
@ -30115,7 +29932,7 @@
|
|||
lib.walk(node.prelude, {
|
||||
visit: "Identifier",
|
||||
enter: (identNode, iItem, iList) => {
|
||||
media.push(identNode.name);
|
||||
media = identNode.name;
|
||||
}
|
||||
});
|
||||
return media;
|
||||
|
|
@ -31326,9 +31143,9 @@
|
|||
}
|
||||
|
||||
var pagedMediaHandlers = [
|
||||
PrintMedia,
|
||||
AtPage,
|
||||
Breaks,
|
||||
PrintMedia,
|
||||
Splits,
|
||||
Counters,
|
||||
Lists,
|
||||
|
|
@ -31425,16 +31242,18 @@
|
|||
afterPageLayout(fragment) {
|
||||
for (let name of Object.keys(this.runningSelectors)) {
|
||||
let set = this.runningSelectors[name];
|
||||
let selected = fragment.querySelector(set.selector);
|
||||
if (selected) {
|
||||
// let cssVar;
|
||||
if (set.identifier === "running") {
|
||||
// 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}"`);
|
||||
set.first = selected;
|
||||
} else {
|
||||
console.warn(set.value + "needs css replacement");
|
||||
if (!set.first) {
|
||||
let selected = fragment.querySelector(set.selector);
|
||||
if (selected) {
|
||||
// let cssVar;
|
||||
if (set.identifier === "running") {
|
||||
// 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}"`);
|
||||
set.first = selected;
|
||||
} else {
|
||||
console.warn(set.value + "needs css replacement");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31585,7 +31404,7 @@
|
|||
|
||||
this.stringSetSelectors = {};
|
||||
this.type;
|
||||
// pageLastString = last string variable defined on the page
|
||||
// pageLastString = last string variable defined on the page
|
||||
this.pageLastString;
|
||||
|
||||
}
|
||||
|
|
@ -31594,35 +31413,21 @@
|
|||
if (declaration.property === "string-set") {
|
||||
let selector = lib.generate(rule.ruleNode.prelude);
|
||||
|
||||
let identifiers = [];
|
||||
let functions = [];
|
||||
let values = [];
|
||||
let identifier = declaration.value.children.first().name;
|
||||
|
||||
declaration.value.children.forEach((child) => {
|
||||
if (child.type === "Identifier") {
|
||||
identifiers.push(child.name);
|
||||
}
|
||||
if (child.type === "Function") {
|
||||
functions.push(child.name);
|
||||
child.children.forEach((subchild) => {
|
||||
if (subchild.type === "Identifier") {
|
||||
values.push(subchild.name);
|
||||
}
|
||||
});
|
||||
let value;
|
||||
lib.walk(declaration, {
|
||||
visit: "Function",
|
||||
enter: (node, item, list) => {
|
||||
value = lib.generate(node);
|
||||
}
|
||||
});
|
||||
|
||||
identifiers.forEach((identifier, index) => {
|
||||
let func = functions[index];
|
||||
let value = values[index];
|
||||
this.stringSetSelectors[identifier] = {
|
||||
identifier,
|
||||
func,
|
||||
value,
|
||||
selector
|
||||
};
|
||||
});
|
||||
|
||||
this.stringSetSelectors[identifier] = {
|
||||
identifier,
|
||||
value,
|
||||
selector
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -31662,13 +31467,11 @@
|
|||
{
|
||||
this.pageLastString = {};
|
||||
}
|
||||
|
||||
|
||||
|
||||
for (let name of Object.keys(this.stringSetSelectors)) {
|
||||
|
||||
let set = this.stringSetSelectors[name];
|
||||
let value = set.value;
|
||||
let func = set.func;
|
||||
let selected = fragment.querySelectorAll(set.selector);
|
||||
|
||||
// Get the last found string for the current identifier
|
||||
|
|
@ -31686,36 +31489,18 @@
|
|||
|
||||
selected.forEach((sel) => {
|
||||
// push each content into the array to define in the variable the first and the last element of the page.
|
||||
if (func === "content") {
|
||||
this.pageLastString[name] = selected[selected.length - 1].textContent;
|
||||
}
|
||||
|
||||
if (func === "attr") {
|
||||
this.pageLastString[name] = selected[selected.length - 1].getAttribute(value) || "";
|
||||
}
|
||||
|
||||
this.pageLastString[name] = selected[selected.length - 1].textContent;
|
||||
|
||||
});
|
||||
|
||||
/* FIRST */
|
||||
|
||||
if (func === "content") {
|
||||
varFirst = selected[0].textContent;
|
||||
}
|
||||
|
||||
if (func === "attr") {
|
||||
varFirst = selected[0].getAttribute(value) || "";
|
||||
}
|
||||
varFirst = selected[0].textContent;
|
||||
|
||||
|
||||
/* LAST */
|
||||
|
||||
if (func === "content") {
|
||||
varLast = selected[selected.length - 1].textContent;
|
||||
}
|
||||
|
||||
if (func === "attr") {
|
||||
varLast = selected[selected.length - 1].getAttribute(value) || "";
|
||||
}
|
||||
varLast = selected[selected.length - 1].textContent;
|
||||
|
||||
|
||||
/* START */
|
||||
|
|
@ -32918,9 +32703,9 @@
|
|||
|
||||
removeStyles(doc=document) {
|
||||
// Get all stylesheets
|
||||
const stylesheets = Array.from(doc.querySelectorAll("link[rel='stylesheet']:not([data-pagedjs-ignore], [media~='screen'])"));
|
||||
const stylesheets = Array.from(doc.querySelectorAll("link[rel='stylesheet']"));
|
||||
// Get inline styles
|
||||
const inlineStyles = Array.from(doc.querySelectorAll("style:not([data-pagedjs-inserted-styles], [data-pagedjs-ignore], [media~='screen'])"));
|
||||
const inlineStyles = Array.from(doc.querySelectorAll("style:not([data-pagedjs-inserted-styles])"));
|
||||
const elements = [...stylesheets, ...inlineStyles];
|
||||
return elements
|
||||
// preserve order
|
||||
|
|
@ -32994,7 +32779,6 @@
|
|||
Polisher: Polisher,
|
||||
Previewer: Previewer,
|
||||
Handler: Handler,
|
||||
registeredHandlers: registeredHandlers,
|
||||
registerHandlers: registerHandlers,
|
||||
initializeHandlers: initializeHandlers
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue