update lots of reader fixes
This commit is contained in:
+72
-35
@@ -488,62 +488,99 @@
|
||||
throw new Error("Detail pane is not ready to export.");
|
||||
}
|
||||
|
||||
exportClone.querySelectorAll(".detail-pane-export-controls").forEach((node) => node.remove());
|
||||
exportClone.querySelectorAll(".detail-sequence-btn:not(.detail-export-btn)").forEach((node) => { node.style.display = "none"; });
|
||||
exportClone.querySelectorAll(".detail-sequence-position").forEach((node) => { node.style.display = "none"; });
|
||||
exportClone.querySelectorAll(".alpha-text-reader-nav-btn").forEach((node) => { node.style.display = "none"; });
|
||||
exportClone.querySelectorAll(".alpha-text-reader-panel").forEach((node) => { node.style.display = "none"; });
|
||||
const exportStripSelectors = [
|
||||
".detail-sequence-nav",
|
||||
".detail-pane-export-controls",
|
||||
".alpha-text-reader-nav-btn",
|
||||
".alpha-text-reader-panel",
|
||||
".alpha-text-heading-tools",
|
||||
".alpha-text-search-controls",
|
||||
".alpha-text-controls--heading",
|
||||
".alpha-text-reader-toggle-control",
|
||||
".alpha-text-compare-toggle",
|
||||
".alpha-text-translation-select",
|
||||
".alpha-text-compare-select",
|
||||
".alpha-text-work-select",
|
||||
".alpha-text-section-select",
|
||||
".planet-detail-summary"
|
||||
];
|
||||
|
||||
const contentWidth = Math.max(
|
||||
320,
|
||||
Math.ceil(detailPanel.clientWidth || detailPanel.getBoundingClientRect().width || 0)
|
||||
);
|
||||
const contentHeight = Math.max(
|
||||
240,
|
||||
Math.ceil(detailPanel.scrollHeight || detailPanel.getBoundingClientRect().height || 0)
|
||||
);
|
||||
exportStripSelectors.forEach((selector) => {
|
||||
exportClone.querySelectorAll(selector).forEach((node) => node.remove());
|
||||
});
|
||||
|
||||
exportClone.querySelectorAll("*").forEach((node) => {
|
||||
if (node instanceof HTMLElement && node.hidden) {
|
||||
node.remove();
|
||||
}
|
||||
});
|
||||
|
||||
exportClone.style.position = "fixed";
|
||||
exportClone.style.left = "-100000px";
|
||||
exportClone.style.top = "0";
|
||||
exportClone.style.visibility = "hidden";
|
||||
exportClone.style.width = "max-content";
|
||||
exportClone.style.maxWidth = "900px";
|
||||
exportClone.style.minWidth = "280px";
|
||||
exportClone.style.height = "auto";
|
||||
exportClone.style.overflow = "visible";
|
||||
exportClone.style.padding = "24px";
|
||||
exportClone.style.boxSizing = "border-box";
|
||||
document.body.appendChild(exportClone);
|
||||
|
||||
const measureWidth = Math.ceil(exportClone.getBoundingClientRect().width || 280);
|
||||
document.body.removeChild(exportClone);
|
||||
|
||||
exportClone.style.position = "";
|
||||
exportClone.style.left = "";
|
||||
exportClone.style.top = "";
|
||||
exportClone.style.visibility = "";
|
||||
|
||||
sandboxEl = document.createElement("div");
|
||||
sandboxEl.style.position = "fixed";
|
||||
sandboxEl.style.left = "-100000px";
|
||||
sandboxEl.style.top = "0";
|
||||
sandboxEl.style.width = `${contentWidth}px`;
|
||||
sandboxEl.style.height = `${contentHeight}px`;
|
||||
sandboxEl.style.overflow = "hidden";
|
||||
sandboxEl.style.pointerEvents = "none";
|
||||
sandboxEl.style.opacity = "0";
|
||||
|
||||
exportClone.style.width = `${contentWidth}px`;
|
||||
exportClone.style.minWidth = `${contentWidth}px`;
|
||||
exportClone.style.maxWidth = `${contentWidth}px`;
|
||||
exportClone.style.height = `${contentHeight}px`;
|
||||
exportClone.style.minHeight = `${contentHeight}px`;
|
||||
exportClone.style.maxHeight = `${contentHeight}px`;
|
||||
exportClone.style.width = `${measureWidth}px`;
|
||||
exportClone.style.minWidth = "";
|
||||
exportClone.style.maxWidth = "";
|
||||
exportClone.style.height = "auto";
|
||||
exportClone.style.minHeight = "";
|
||||
exportClone.style.maxHeight = "";
|
||||
exportClone.style.overflow = "visible";
|
||||
exportClone.style.padding = "24px";
|
||||
exportClone.style.boxSizing = "border-box";
|
||||
|
||||
sandboxEl.appendChild(exportClone);
|
||||
document.body.appendChild(sandboxEl);
|
||||
|
||||
const exportScale = Math.max(2, Math.min(2.5, Number(window.devicePixelRatio) || 1));
|
||||
const exportScale = 2;
|
||||
const canvas = await html2canvas(exportClone, {
|
||||
backgroundColor: null,
|
||||
backgroundColor: "#0c0c12",
|
||||
scale: exportScale,
|
||||
useCORS: true,
|
||||
allowTaint: false,
|
||||
logging: false,
|
||||
width: contentWidth,
|
||||
height: contentHeight,
|
||||
windowWidth: contentWidth,
|
||||
windowHeight: contentHeight,
|
||||
scrollX: 0,
|
||||
scrollY: 0,
|
||||
imageTimeout: 12000,
|
||||
onclone(clonedDocument) {
|
||||
clonedDocument.querySelectorAll(".detail-pane-export-controls").forEach((node) => node.remove());
|
||||
clonedDocument.querySelectorAll(".detail-sequence-btn:not(.detail-export-btn)").forEach((node) => { node.style.display = "none"; });
|
||||
clonedDocument.querySelectorAll(".detail-sequence-position").forEach((node) => { node.style.display = "none"; });
|
||||
clonedDocument.querySelectorAll(".alpha-text-reader-nav-btn").forEach((node) => { node.style.display = "none"; });
|
||||
clonedDocument.querySelectorAll(".alpha-text-reader-panel").forEach((node) => { node.style.display = "none"; });
|
||||
clonedDocument.querySelectorAll(
|
||||
".detail-sequence-nav, .detail-pane-export-controls, .alpha-text-reader-nav-btn, .alpha-text-reader-panel, .alpha-text-heading-tools, .alpha-text-search-controls, .alpha-text-controls--heading, .alpha-text-reader-toggle-control, .alpha-text-compare-toggle, .planet-detail-summary"
|
||||
).forEach((node) => node.remove());
|
||||
clonedDocument.querySelectorAll("*").forEach((node) => {
|
||||
if (node instanceof HTMLElement && node.hidden) {
|
||||
node.remove();
|
||||
}
|
||||
});
|
||||
const detailClone = clonedDocument.querySelector(".planet-detail-panel, .tarot-detail-panel, .kab-detail-panel");
|
||||
if (detailClone instanceof HTMLElement) {
|
||||
detailClone.style.padding = "24px";
|
||||
detailClone.style.boxSizing = "border-box";
|
||||
detailClone.style.width = "max-content";
|
||||
detailClone.style.maxWidth = "900px";
|
||||
detailClone.style.minWidth = "280px";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user