|
@@ -11,7 +11,7 @@ import {isMobile} from "../../util/functions";
|
|
|
import {Constants} from "../../constants";
|
|
|
import {highlightRender} from "../markdown/highlightRender";
|
|
|
import {processRender} from "../util/processCode";
|
|
|
-import {openByMobile} from "../util/compatibility";
|
|
|
+import {openByMobile, setStorageVal} from "../util/compatibility";
|
|
|
|
|
|
export const afterExport = (exportPath: string, msgId: string) => {
|
|
|
/// #if !BROWSER
|
|
@@ -27,27 +27,70 @@ export const afterExport = (exportPath: string, msgId: string) => {
|
|
|
|
|
|
export const exportImage = (id: string) => {
|
|
|
const exportDialog = new Dialog({
|
|
|
- title: window.siyuan.languages.exportAsImage,
|
|
|
+ title: `<div class="fn__flex">
|
|
|
+ ${window.siyuan.languages.exportAsImage}
|
|
|
+ <div class="fn__flex-1"></div>
|
|
|
+ <label class="fn__flex">
|
|
|
+ ${window.siyuan.languages.exportPDF5}
|
|
|
+ <span class="fn__space"></span>
|
|
|
+ <input id="keepFold" class="b3-switch fn__flex-center" type="checkbox" ${window.siyuan.storage[Constants.LOCAL_EXPORTIMG].keepFold ? "checked" : ""}>
|
|
|
+ </label>
|
|
|
+</div>
|
|
|
+`,
|
|
|
content: `<div class="b3-dialog__content" style="max-height: 70vh;overflow: auto;${isMobile() ? "padding:8px;" : ""};background-color: var(--b3-theme-background)">
|
|
|
- <div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview">
|
|
|
- <div class="fn__loading" style="left:0"><img height="128px" width="128px" src="stage/loading-pure.svg"></div>
|
|
|
- </div>
|
|
|
+ <div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="b3-dialog__exportimg protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview"></div>
|
|
|
<div class="ft__smaller ft__on-surface fn__flex"><img style="height: 18px;margin: 0 8px" src="stage/icon.png">${window.siyuan.languages.exportBySiYuan}</div>
|
|
|
<div class="fn__hr--b"></div>
|
|
|
<div class="fn__hr--b"></div>
|
|
|
</div>
|
|
|
<div class="b3-dialog__action">
|
|
|
- <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
|
|
|
- <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
|
|
|
-</div>`,
|
|
|
+ <button disabled class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
|
|
|
+ <button disabled class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
|
|
|
+</div>
|
|
|
+ <div class="fn__loading"><img height="128px" width="128px" src="stage/loading-pure.svg"></div>`,
|
|
|
width: isMobile() ? "90vw" : "990px",
|
|
|
});
|
|
|
- fetchPost("/api/export/exportPreviewHTML", {
|
|
|
- id,
|
|
|
- keepFold: false,
|
|
|
- image: true,
|
|
|
- }, (response) => {
|
|
|
- const previewElement = exportDialog.element.querySelector("#preview");
|
|
|
+ const btnsElement = exportDialog.element.querySelectorAll(".b3-button");
|
|
|
+ btnsElement[0].addEventListener("click", () => {
|
|
|
+ exportDialog.destroy();
|
|
|
+ });
|
|
|
+ btnsElement[1].addEventListener("click", () => {
|
|
|
+ const msgId = showMessage(window.siyuan.languages.exporting, 0);
|
|
|
+ previewElement.parentElement.style.maxHeight = "none";
|
|
|
+ setStorageVal(Constants.LOCAL_EXPORTIMG, window.siyuan.storage[Constants.LOCAL_EXPORTIMG]);
|
|
|
+ setTimeout(() => {
|
|
|
+ addScript("stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => {
|
|
|
+ window.html2canvas(previewElement.parentElement).then((canvas) => {
|
|
|
+ canvas.toBlob((blob: Blob) => {
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("file", blob, btnsElement[1].getAttribute("data-title"));
|
|
|
+ formData.append("type", "image/png");
|
|
|
+ fetchPost("/api/export/exportAsFile", formData, (response) => {
|
|
|
+ openByMobile(response.data.file);
|
|
|
+ });
|
|
|
+ hideMessage(msgId);
|
|
|
+ exportDialog.destroy();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }, Constants.TIMEOUT_TRANSITION);
|
|
|
+ });
|
|
|
+ const previewElement = exportDialog.element.querySelector("#preview") as HTMLElement;
|
|
|
+ const foldElement = (exportDialog.element.querySelector("#keepFold") as HTMLInputElement)
|
|
|
+ foldElement.addEventListener("change", () => {
|
|
|
+ btnsElement[0].setAttribute("disabled", "disabled");
|
|
|
+ btnsElement[1].setAttribute("disabled", "disabled");
|
|
|
+ btnsElement[1].parentElement.insertAdjacentHTML("afterend", `<div class="fn__loading"><img height="128px" width="128px" src="stage/loading-pure.svg"></div>`)
|
|
|
+ window.siyuan.storage[Constants.LOCAL_EXPORTIMG].keepFold = foldElement.checked;
|
|
|
+ fetchPost("/api/export/exportPreviewHTML", {
|
|
|
+ id,
|
|
|
+ keepFold: foldElement.checked,
|
|
|
+ image: true,
|
|
|
+ }, (response) => {
|
|
|
+ refreshPreview(response);
|
|
|
+ })
|
|
|
+ });
|
|
|
+ const refreshPreview = (response: IWebSocketData) => {
|
|
|
previewElement.innerHTML = response.data.content;
|
|
|
processRender(previewElement);
|
|
|
highlightRender(previewElement);
|
|
@@ -67,29 +110,16 @@ export const exportImage = (id: string) => {
|
|
|
item.setAttribute("viewBox", viewBox);
|
|
|
item.innerHTML = symbolElements[symbolElements.length - 1].innerHTML;
|
|
|
});
|
|
|
- const btnsElement = exportDialog.element.querySelectorAll(".b3-button");
|
|
|
- btnsElement[0].addEventListener("click", () => {
|
|
|
- exportDialog.destroy();
|
|
|
- });
|
|
|
- btnsElement[1].addEventListener("click", () => {
|
|
|
- const msgId = showMessage(window.siyuan.languages.exporting, 0);
|
|
|
- previewElement.parentElement.style.maxHeight = "none";
|
|
|
- setTimeout(() => {
|
|
|
- addScript("stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => {
|
|
|
- window.html2canvas(previewElement.parentElement).then((canvas) => {
|
|
|
- canvas.toBlob((blob: Blob) => {
|
|
|
- const formData = new FormData();
|
|
|
- formData.append("file", blob, response.data.name + ".png");
|
|
|
- formData.append("type", "image/png");
|
|
|
- fetchPost("/api/export/exportAsFile", formData, (response) => {
|
|
|
- openByMobile(response.data.file);
|
|
|
- });
|
|
|
- hideMessage(msgId);
|
|
|
- exportDialog.destroy();
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- }, Constants.TIMEOUT_TRANSITION);
|
|
|
- });
|
|
|
+ btnsElement[0].removeAttribute("disabled");
|
|
|
+ btnsElement[1].removeAttribute("disabled");
|
|
|
+ exportDialog.element.querySelector(".fn__loading").remove();
|
|
|
+ };
|
|
|
+ fetchPost("/api/export/exportPreviewHTML", {
|
|
|
+ id,
|
|
|
+ keepFold: foldElement.checked,
|
|
|
+ image: true,
|
|
|
+ }, (response) => {
|
|
|
+ refreshPreview(response);
|
|
|
+ btnsElement[1].setAttribute("data-title", response.data.name + ".png");
|
|
|
});
|
|
|
};
|