83 lines
2.2 KiB
JavaScript
83 lines
2.2 KiB
JavaScript
import { iframeSrc, showEditor } from "./state.js";
|
|
import { van } from "./van.js";
|
|
const { button, iframe, div, img, span, dialog, form } = van.tags;
|
|
|
|
export function ShapeFlowEditor() {
|
|
return div(
|
|
{
|
|
class: "w-full h-full relative",
|
|
},
|
|
button(
|
|
{
|
|
class: () =>
|
|
"ml-2 mt-2 btn btn-circle flex flex-row btn-ghost normal-case absolute px-4 rounded-md left-0 top-0 z-[200] w-fit pointer-events-auto bg-black " +
|
|
(showEditor.val ? "" : "hidden"),
|
|
onclick: () => {
|
|
console.log("close");
|
|
document.getElementById("alert-dialog").showModal();
|
|
},
|
|
},
|
|
span({
|
|
class: "iconify text-lg",
|
|
"data-icon": "ic:baseline-arrow-back",
|
|
"data-inline": "false",
|
|
}),
|
|
div("Back & Save")
|
|
),
|
|
iframe({
|
|
id: "avatech-editor-iframe",
|
|
title: "avatech-editor-iframe",
|
|
name: "avatech-editor-iframe",
|
|
allow: "cross-origin-isolated; clipboard-read; clipboard-write",
|
|
class: () =>
|
|
"w-full h-full pointer-events-auto " + (showEditor.val ? "" : "hidden"),
|
|
src: iframeSrc,
|
|
}),
|
|
dialog(
|
|
{
|
|
id: "alert-dialog",
|
|
class: "modal modal-bottom sm:modal-middle",
|
|
},
|
|
div(
|
|
{
|
|
class: "modal-box",
|
|
},
|
|
div({ class: "text-black" }, "This is a dialog"),
|
|
div(
|
|
{ class: "modal-action" },
|
|
form(
|
|
{ method: "dialog", class: "flex flex-row gap-4" },
|
|
button(
|
|
{
|
|
class: "btn",
|
|
onclick: () => {
|
|
showEditor.val = false;
|
|
},
|
|
},
|
|
"Discard"
|
|
),
|
|
button(
|
|
{
|
|
class: "btn",
|
|
onclick: () => {
|
|
const editor = document.getElementById(
|
|
"avatech-editor-iframe"
|
|
);
|
|
editor.contentWindow.postMessage(
|
|
{
|
|
method: "back",
|
|
},
|
|
"*"
|
|
);
|
|
showEditor.val = false;
|
|
},
|
|
},
|
|
"Save & Close"
|
|
)
|
|
)
|
|
)
|
|
)
|
|
)
|
|
);
|
|
}
|