fix: add minimal zotero modal lifecycle
This commit is contained in:
parent
0e62d0fc4e
commit
d52a52b574
@ -28,6 +28,9 @@
|
||||
linear-gradient(180deg, #f7f2e8, var(--bg));
|
||||
color: var(--ink);
|
||||
}
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 20rem 1fr 26rem;
|
||||
@ -389,6 +392,10 @@
|
||||
projectForm: document.getElementById("create-project-form"),
|
||||
projectStatus: document.getElementById("project-status"),
|
||||
projectList: document.getElementById("project-list"),
|
||||
importModal: document.getElementById("import-modal"),
|
||||
importModalOverlay: document.getElementById("import-modal-overlay"),
|
||||
openImportModalButton: document.getElementById("open-import-modal-button"),
|
||||
closeImportModalButton: document.getElementById("close-import-modal-button"),
|
||||
currentProjectLabel: document.getElementById("current-project-label"),
|
||||
cardList: document.getElementById("card-list"),
|
||||
cardDetail: document.getElementById("card-detail"),
|
||||
@ -520,6 +527,22 @@
|
||||
`).join("");
|
||||
}
|
||||
|
||||
function syncImportModalVisibility() {
|
||||
elements.importModal.hidden = !state.isImportModalOpen;
|
||||
elements.importModal.setAttribute("aria-hidden", state.isImportModalOpen ? "false" : "true");
|
||||
document.body.classList.toggle("modal-open", state.isImportModalOpen);
|
||||
}
|
||||
|
||||
function openImportModal() {
|
||||
state.isImportModalOpen = true;
|
||||
syncImportModalVisibility();
|
||||
}
|
||||
|
||||
function closeImportModal() {
|
||||
state.isImportModalOpen = false;
|
||||
syncImportModalVisibility();
|
||||
}
|
||||
|
||||
async function loadProjects() {
|
||||
const projects = await api("/api/projects");
|
||||
state.projects = projects;
|
||||
@ -577,6 +600,15 @@
|
||||
|
||||
elements.refreshProjectsButton.addEventListener("click", loadProjects);
|
||||
|
||||
elements.openImportModalButton.addEventListener("click", openImportModal);
|
||||
elements.closeImportModalButton.addEventListener("click", closeImportModal);
|
||||
elements.importModalOverlay.addEventListener("click", closeImportModal);
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape" && state.isImportModalOpen) {
|
||||
closeImportModal();
|
||||
}
|
||||
});
|
||||
|
||||
elements.recommendForm.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
if (!state.currentProjectId) {
|
||||
@ -628,6 +660,7 @@
|
||||
elements.recommendTab.addEventListener("click", () => activateTab("recommend"));
|
||||
elements.planTab.addEventListener("click", () => activateTab("plan"));
|
||||
|
||||
syncImportModalVisibility();
|
||||
loadProjects().catch((error) => {
|
||||
setStatus(elements.projectStatus, error.message, true);
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user