91 lines
2.3 KiB
JavaScript
91 lines
2.3 KiB
JavaScript
import { DomList } from "./dom-list.js";
|
|
import { addEventToElement, setText } from "./dom-utils.js";
|
|
import { awaitEvent, emitEvent, listenTo } from "./events.js";
|
|
import { registerLoadCallback } from "./main.js";
|
|
import { recall, save } from "./storage.js";
|
|
|
|
registerLoadCallback(() => {
|
|
welcomeDialog();
|
|
listenTo("dialogs:welcome", () => welcomeDialog(true));
|
|
listenTo("fileLoad:chooseDesign", designChoiceDialog);
|
|
listenTo("fileSave:nameDesign", designNameDialog);
|
|
});
|
|
|
|
function initializeDialog(dialogName, endEvent, { emptyValue, onDismiss } = {}) {
|
|
const dialog = document.querySelector(`[data-dialog="${dialogName}"]`);
|
|
|
|
const dismiss = (data) => {
|
|
dialog.classList.add("hidden");
|
|
console.log("dimiss > emit", data);
|
|
emitEvent(endEvent, data);
|
|
if (onDismiss) {
|
|
onDismiss();
|
|
}
|
|
}
|
|
|
|
addEventToElement(
|
|
"dialog-action", "cancel", "click",
|
|
() => dismiss(emptyValue),
|
|
{ element: dialog },
|
|
);
|
|
dialog.addEventListener("click", e => {
|
|
if (e.target !== e.currentTarget) return;
|
|
dismiss(emptyValue);
|
|
});
|
|
|
|
queueMicrotask(() => {
|
|
dialog.classList.remove("hidden");
|
|
});
|
|
|
|
return {
|
|
dialog,
|
|
dismiss,
|
|
};
|
|
}
|
|
|
|
function welcomeDialog(force = false) {
|
|
if (recall("hasSeenWelcome", false) && !force) {
|
|
return;
|
|
}
|
|
|
|
initializeDialog("welcome", "welcome:close", {
|
|
onDismiss: () => {
|
|
save("hasSeenWelcome", true);
|
|
}
|
|
});
|
|
}
|
|
|
|
function designChoiceDialog(e) {
|
|
const {
|
|
dialog, dismiss
|
|
} = initializeDialog("fileLoad:chooseDesign", "fileLoad:chooseDesign:choice", -1);
|
|
|
|
const list = new DomList(dialog.querySelector(":scope > section > main"));
|
|
list.clear();
|
|
|
|
for (const designIndex in e.detail.designs) {
|
|
const design = e.detail.designs[designIndex];
|
|
const button = list.makeItem();
|
|
setText("Name", design.modules["plannerator:metadata"].Name, { element: button });
|
|
setText("Author", design.modules["plannerator:metadata"].Author, { element: button });
|
|
button.addEventListener("click", () => dismiss(designIndex));
|
|
list.addItem(button);
|
|
}
|
|
}
|
|
|
|
function designNameDialog() {
|
|
const {
|
|
dismiss
|
|
} = initializeDialog(
|
|
"fileSave:nameDesign",
|
|
"fileSave:nameDesign:named",
|
|
{
|
|
emptyValue: null
|
|
}
|
|
);
|
|
|
|
awaitEvent("fileSave:nameDesign:submit").then(e => {
|
|
dismiss(new FormData(e.detail.target).get("name"));
|
|
});
|
|
}
|