plexora 0.0.1__py3-none-any.whl

plexora/client/src/js/views/navbarControls.js

@@ -0,0 +1,178 @@
+/**
+ * navbarControls.js
+ *
+ * Wires the unified File/Edit/Tools/View navbar (base.html) to existing
+ * viewer functionality. Plain global script (not a module), loaded on every
+ * page -- every handler below is written with optional chaining so it
+ * no-ops cleanly on pages that don't have a viewer/sidebar at all (quick-look
+ * home, upload wizard, datasource config).
+ */
+(function () {
+    function onReady(fn) {
+        if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", fn);
+        } else {
+            fn();
+        }
+    }
+
+    onReady(() => {
+        // File > Add Image -- opens a native file picker, then registers the
+        // picked image the same way the home page's Quick Look flow does.
+        document.getElementById("nav_add_image")?.addEventListener("click", async () => {
+            await browseForPath({
+                mode: "file",
+                filter: "image",
+                onPicked: async (path) => {
+                    try {
+                        const response = await fetch(plexoraUrl("quick_view"), {
+                            method: "POST",
+                            headers: {"Content-Type": "application/json"},
+                            body: JSON.stringify({path}),
+                        });
+                        const result = await response.json();
+                        if (result.success) {
+                            window.location.href = result.redirect;
+                        } else {
+                            alert(result.error || "Could not load that image.");
+                        }
+                    } catch (error) {
+                        alert("Could not load that image.");
+                    }
+                },
+                onUnavailable: () => alert("Automatic file browsing isn't available on this machine."),
+            });
+        });
+
+        // File > Export Image submenu -- hover/focus reveals it via CSS
+        // (see main.css); this click handler is only the touch/keyboard
+        // fallback for devices without hover. Ignore clicks that originated
+        // on the PNG/PDF buttons themselves, so they run their own handler
+        // below and close the dropdown normally instead of re-toggling.
+        const exportMenu = document.getElementById("nav_export_menu");
+        exportMenu?.addEventListener("click", (event) => {
+            if (event.target.closest(".nav-submenu")) return;
+            exportMenu.classList.toggle("open");
+        });
+        document.getElementById("nav_export_image_png")?.addEventListener("click", () => {
+            window.__plexora?.seaDragonViewer?.downloadCurrentView?.("png");
+        });
+        document.getElementById("nav_export_image_pdf")?.addEventListener("click", () => {
+            window.__plexora?.seaDragonViewer?.downloadCurrentView?.("pdf");
+        });
+
+        // File > Quit -- terminates the local server process (see
+        // system_routes.py); the fetch is expected to error out as the
+        // process exits mid-response, so that's swallowed rather than surfaced.
+        document.getElementById("nav_quit")?.addEventListener("click", async () => {
+            const confirmed = confirm("Quit Plexora? This will close the local server and this page will stop working.");
+            if (!confirmed) return;
+            try {
+                await fetch(plexoraUrl("shutdown"), { method: "POST", keepalive: true });
+            } catch (error) {
+                // Expected.
+            }
+            document.body.innerHTML = `
+                <div class="plexora-quit-overlay">
+                    <span class="fas fa-power-off plexora-quit-icon"></span>
+                    <h1>Plexora has quit</h1>
+                    <p>The local server has stopped. You can close this tab.</p>
+                </div>`;
+        });
+
+        const sidebarToggle = document.getElementById("nav_toggle_sidebar");
+        const scalebarToggle = document.getElementById("nav_toggle_scalebar");
+        const hdToggle = document.getElementById("nav_toggle_hd");
+
+        const sidebarShell = document.getElementById("bodyDiv");
+        const sidebarCollapseButton = document.getElementById("sidebar_collapse_button");
+        const hdEl = document.getElementById("viewer_controls_hd");
+
+        // View > Show Sidebar -- reuses the existing collapse/expand toggle
+        // (viewerSidebar.js) rather than duplicating the collapse logic; synced
+        // from the shell's class each time the View menu opens, since the
+        // sidebar has no change event of its own to listen for.
+        sidebarToggle?.addEventListener("change", () => sidebarCollapseButton?.click());
+        document.getElementById("navbarViewDropdown")?.addEventListener("show.bs.dropdown", () => {
+            if (sidebarToggle && sidebarShell) {
+                sidebarToggle.checked = !sidebarShell.classList.contains("sidebar-collapsed");
+            }
+        });
+
+        // View > Show Scalebar -- sole owner of this state, no sidebar counterpart.
+        scalebarToggle?.addEventListener("change", (e) => {
+            window.__plexora?.seaDragonViewer?.setScalebarVisible?.(e.target.checked);
+        });
+
+        // View > HD Mode -- two-way mirror against the sidebar checkbox. The
+        // write direction sets the sidebar checkbox and dispatches "change" on
+        // it, so all the real work (setHdMode) stays in viewerControls.js --
+        // nothing is duplicated here. The read direction listens for the
+        // plexora:*-changed event that handler dispatches.
+        function wireMirror(navEl, sidebarEl, eventName) {
+            if (!navEl || !sidebarEl) return;
+            navEl.addEventListener("change", () => {
+                sidebarEl.checked = navEl.checked;
+                sidebarEl.dispatchEvent(new Event("change", { bubbles: true }));
+            });
+            window.addEventListener(eventName, (e) => {
+                navEl.checked = Boolean(e.detail?.enabled);
+            });
+        }
+        wireMirror(hdToggle, hdEl, "plexora:hd-mode-changed");
+
+        // View > Cells -- the same one-of-four choice the sidebar offers, and
+        // the same single implementation behind it: this hands the mode to
+        // ViewerControls rather than reproducing any of the loading work.
+        //
+        // Which options are usable is a property of the project (is there a
+        // mask? does it store whole labels? are there coordinates?), which lives
+        // in the config the viewer holds. Read on open rather than pushed here,
+        // because this script binds on DOMContentLoaded and the config arrives
+        // later -- an availability event fired at init would land before anyone
+        // is listening.
+        const cellModeRadios = Array.from(
+            document.querySelectorAll('input[name="nav_cell_mode"]'));
+
+        cellModeRadios.forEach((radio) => {
+            radio.addEventListener("change", () => {
+                if (!radio.checked) return;
+                const controls = window.__plexora?.viewerControls;
+                if (!controls) return;
+                // A menu click is as much a decision as a sidebar click, and
+                // must equally outrank whatever the automatic fallback chose.
+                if (window.__plexora?.seaDragonViewer) {
+                    window.__plexora.seaDragonViewer.centroidsFromFallback = false;
+                }
+                controls.selectMode(radio.value);
+            });
+        });
+
+        // Mirrors what the sidebar control OFFERS, not merely what the project
+        // can draw: with a plugin layer active the choice is narrowed to the
+        // modes that plugin uses, and "No Cells" goes away entirely -- the
+        // plugin's own card is what turns its layer off. A menu that kept
+        // offering the full four would be a second, disagreeing answer to the
+        // same question.
+        function syncCellMode() {
+            const controls = window.__plexora?.viewerControls;
+            if (!controls || !cellModeRadios.length) return;
+            const offered = controls.offeredModes();
+            const available = controls.availability();
+            cellModeRadios.forEach((radio) => {
+                const usable = Boolean(offered[radio.value]);
+                radio.checked = radio.value === controls.mode;
+                radio.disabled = !usable;
+                // Same rule as the sidebar buttons: a mode this PROJECT cannot
+                // draw stays visible and disabled (that is a fact worth seeing),
+                // a mode the active PLUGIN does not use is hidden.
+                const item = radio.closest(".nav-check-item");
+                if (item) item.hidden = !usable && Boolean(available[radio.value]);
+            });
+        }
+
+        window.addEventListener("plexora:cell-mode-changed", syncCellMode);
+        document.getElementById("navbarViewDropdown")
+            ?.addEventListener("show.bs.dropdown", syncCellMode);
+    });
+})();

plexora/client/src/js/views/openProjectPage.js

@@ -0,0 +1,239 @@
+/**
+ * openProjectPage.js
+ *
+ * Drives the Open Project page (open_project.html): fetches the project
+ * list once, then does search/sort/grid-list rendering entirely client-side.
+ * Loaded only on that page (not globally, unlike navbarControls.js).
+ */
+(function () {
+    function onReady(fn) {
+        if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", fn);
+        } else {
+            fn();
+        }
+    }
+
+    function escapeHtml(value) {
+        return String(value).replace(/[&<>"']/g, (c) => ({
+            "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
+        }[c]));
+    }
+
+    function timeAgo(iso) {
+        if (!iso) return "";
+        const then = new Date(iso).getTime();
+        if (Number.isNaN(then)) return "";
+        const diffSec = Math.round((Date.now() - then) / 1000);
+        if (diffSec < 60) return "just now";
+        const diffMin = Math.round(diffSec / 60);
+        if (diffMin < 60) return diffMin + (diffMin === 1 ? " minute ago" : " minutes ago");
+        const diffHour = Math.round(diffMin / 60);
+        if (diffHour < 24) return diffHour + (diffHour === 1 ? " hour ago" : " hours ago");
+        const diffDay = Math.round(diffHour / 24);
+        if (diffDay < 30) return diffDay + (diffDay === 1 ? " day ago" : " days ago");
+        return new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+    }
+
+    onReady(() => {
+        const resultsEl = document.getElementById("project-results");
+        if (!resultsEl) return; // Not on the Open Project page.
+
+        const searchInput = document.getElementById("project-search");
+        const sortSelect = document.getElementById("project-sort");
+        const gridButton = document.getElementById("project-view-grid");
+        const listButton = document.getElementById("project-view-list");
+        const countEl = document.getElementById("project-count");
+        const emptyStateEl = document.getElementById("project-empty-state");
+        const noResultsEl = document.getElementById("project-no-results");
+
+        const state = {
+            projects: [],
+            query: "",
+            sort: "lastOpenedAt",
+            view: localStorage.getItem("plexora.openProjectView") === "list" ? "list" : "grid",
+        };
+
+        function dateCaption(project) {
+            if (state.sort === "createdAt") {
+                return project.createdAt ? "Created " + timeAgo(project.createdAt) : "";
+            }
+            return project.lastOpenedAt ? "Opened " + timeAgo(project.lastOpenedAt) : "Never opened";
+        }
+
+        function thumbMarkup(project) {
+            const thumbUrl = plexoraUrl("project_thumbnail/" + encodeURIComponent(project.name));
+            return `<span class="project-thumb">
+                <img src="${thumbUrl}" alt="" loading="lazy" onerror="this.parentElement.classList.add('project-thumb-fallback');this.remove();">
+                <span class="fas fa-image project-thumb-icon"></span>
+            </span>`;
+        }
+
+        function sharedMarkup(project) {
+            // Only on shared projects, so an install with no shared roots --
+            // which is every single-user one -- looks exactly as it did.
+            if (!project.shared) return "";
+            return `<span class="project-shared" title="On a shared data directory: open and explore it, but it cannot be edited or deleted here."><span class="fas fa-users"></span>Shared</span>`;
+        }
+
+        function actionsMarkup(project) {
+            const editUrl = plexoraUrl("edit_config/" + encodeURIComponent(project.name));
+            const name = escapeHtml(project.name);
+            // A shared project belongs to whoever provisioned the root it sits
+            // on. The server refuses both of these with a 403 regardless; not
+            // offering them is what stops the user finding that out only after
+            // confirming a delete dialog.
+            if (project.shared) return "";
+            // Delete carries only the project name -- the request itself is
+            // built and sent as a POST when the modal is confirmed. It used to
+            // be a plain link to GET /delete/<name>, an irreversible rmtree any
+            // crawler, prefetcher or stale bookmark could follow.
+            return `<span class="project-actions">
+                <a href="${editUrl}" class="project-action" title="Edit"><span class="fas fa-pencil"></span></a>
+                <a href="#" class="project-action project-action-danger" title="Delete"
+                   data-bs-toggle="modal" data-bs-target="#deleteProjectModal"
+                   data-project-name="${name}"><span class="fas fa-trash"></span></a>
+            </span>`;
+        }
+
+        function cardMarkup(project) {
+            const href = plexoraUrl(encodeURIComponent(project.name));
+            const name = escapeHtml(project.name);
+            const caption = escapeHtml(dateCaption(project));
+            return `<div class="project-card">
+                <a class="project-card-link" href="${href}" title="${name}">
+                    ${thumbMarkup(project)}
+                    <span class="project-card-name">${name}</span>
+                    <span class="project-card-date">${caption}${sharedMarkup(project)}</span>
+                </a>
+                ${actionsMarkup(project)}
+            </div>`;
+        }
+
+        function rowMarkup(project) {
+            const href = plexoraUrl(encodeURIComponent(project.name));
+            const name = escapeHtml(project.name);
+            const caption = escapeHtml(dateCaption(project));
+            return `<div class="project-row">
+                <a class="project-row-link" href="${href}" title="${name}">
+                    ${thumbMarkup(project)}
+                    <span class="project-row-name">${name}</span>
+                    <span class="project-row-date">${caption}${sharedMarkup(project)}</span>
+                </a>
+                ${actionsMarkup(project)}
+            </div>`;
+        }
+
+        function filteredSorted() {
+            const query = state.query.trim().toLowerCase();
+            let list = query
+                ? state.projects.filter((p) => p.name.toLowerCase().includes(query))
+                : state.projects.slice();
+
+            if (state.sort === "name") {
+                list.sort((a, b) => a.name.localeCompare(b.name));
+            } else {
+                list.sort((a, b) => {
+                    const aTime = a[state.sort] ? new Date(a[state.sort]).getTime() : 0;
+                    const bTime = b[state.sort] ? new Date(b[state.sort]).getTime() : 0;
+                    return bTime - aTime;
+                });
+            }
+            return list;
+        }
+
+        function render() {
+            const total = state.projects.length;
+            countEl.textContent = total === 1 ? "1 project" : total + " projects";
+
+            if (total === 0) {
+                resultsEl.innerHTML = "";
+                emptyStateEl.hidden = false;
+                noResultsEl.hidden = true;
+                return;
+            }
+            emptyStateEl.hidden = true;
+
+            const list = filteredSorted();
+            resultsEl.className = "project-results " + (state.view === "grid" ? "project-grid" : "project-list");
+
+            if (list.length === 0) {
+                resultsEl.innerHTML = "";
+                noResultsEl.hidden = false;
+                return;
+            }
+            noResultsEl.hidden = true;
+            resultsEl.innerHTML = list.map(state.view === "grid" ? cardMarkup : rowMarkup).join("");
+        }
+
+        function updateViewButtons() {
+            gridButton.classList.toggle("active", state.view === "grid");
+            listButton.classList.toggle("active", state.view === "list");
+        }
+
+        function setView(view) {
+            state.view = view;
+            localStorage.setItem("plexora.openProjectView", view);
+            updateViewButtons();
+            render();
+        }
+
+        searchInput.addEventListener("input", () => {
+            state.query = searchInput.value;
+            render();
+        });
+        sortSelect.addEventListener("change", () => {
+            state.sort = sortSelect.value;
+            render();
+        });
+        gridButton.addEventListener("click", () => setView("grid"));
+        listButton.addEventListener("click", () => setView("list"));
+
+        const deleteModalName = document.getElementById("deleteProjectModalName");
+        const deleteModalConfirm = document.getElementById("deleteProjectModalConfirm");
+        let pendingDelete = null;
+
+        document.getElementById("deleteProjectModal")?.addEventListener("show.bs.modal", (event) => {
+            pendingDelete = event.relatedTarget.dataset.projectName;
+            deleteModalName.textContent = pendingDelete;
+        });
+
+        // The dialog closes on its own -- the button carries data-bs-dismiss, so
+        // bootstrap's data API handles it and this never has to reach for a
+        // global that the ES-module build does not define. Closing on the click
+        // rather than on the response is also what the old code meant to do: it
+        // hid in a `finally`, so the outcome never gated it either way. The
+        // status chip is where success and failure are reported.
+        deleteModalConfirm?.addEventListener("click", async () => {
+            if (!pendingDelete) return;
+            const name = pendingDelete;
+            pendingDelete = null;
+            const task = window.PlexoraStatus?.begin("Deleting");
+            try {
+                const response = await fetch(
+                    plexoraUrl(`project/${encodeURIComponent(name)}/delete`),
+                    { method: "POST" },
+                );
+                if (!response.ok) throw new Error("delete failed");
+                task?.done();
+                state.projects = state.projects.filter((p) => p.name !== name);
+                render();
+            } catch (e) {
+                task?.fail("Delete failed");
+            }
+        });
+
+        updateViewButtons();
+
+        fetch(plexoraUrl("projects"))
+            .then((response) => response.json())
+            .then((data) => {
+                state.projects = Array.isArray(data) ? data : [];
+                render();
+            })
+            .catch(() => {
+                state.projects = [];
+                render();
+            });
+    });
+})();