update lots of reader fixes

This commit is contained in:
2026-07-23 00:15:21 -07:00
parent 88aaab2e00
commit c6b95e23c7
10 changed files with 510 additions and 150 deletions
+72 -35
View File
@@ -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";
}
}
});