domma-cms 1.6.55 → 1.6.57

package/plugins/blog/admin/views/kit.js

@@ -82,7 +82,14 @@ export function viewScope(name, route) {
         lifetimes.set(name, life);
     }
     life.reset();
-    return (fn) => { if (typeof fn === 'function') life.add(fn); };
+    // This mount's own flag: the next mount's reset (or leaving) turns it off,
+    // so work finishing after an await can ask whether its screen is still there.
+    let alive = true;
+    life.add(() => { alive = false; });
+    const add = (fn) => { if (typeof fn === 'function') life.add(fn); };
+    /** Is this mount still the one on screen? Check it after EVERY await. */
+    add.here = () => alive;
+    return add;
 }
 
 function localLifetime(pattern) {
@@ -176,6 +183,141 @@ export function takeHandOff(key) {
     }
 }
 
+/** Tell the sidebar the Blog badge may have changed (it re-asks the countUrl). */
+export function pokeSidebar() {
+    const url = '#/plugins/blog';
+    if (core?.sidebarCount) return core.sidebarCount(url);
+    try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url}})); } catch { /* no sidebar */ }
+}
+
+/**
+ * Shift+F10 on a focused row opens its context menu, as a right-click would.
+ * (The ContextMenu key is left alone: Chrome on Windows opens its own menu on
+ * key-up as well.)
+ *
+ * @param {HTMLElement} list
+ * @param {string} rowSel
+ * @returns {() => void} unhook
+ */
+export function menuKeys(list, rowSel) {
+    const onKey = (e) => {
+        const row = e.target.closest?.(rowSel);
+        if (!row || e.target !== row || !(e.shiftKey && e.key === 'F10')) return;
+        e.preventDefault();
+        openMenuFrom(row);
+    };
+    list.addEventListener('keydown', onKey);
+    return () => list.removeEventListener('keydown', onKey);
+}
+
+/**
+ * A skeleton in `slot` while `promise` runs; the data back once it has gone
+ * (rethrows). No slot, or an admin without loading.js: just the promise. The
+ * slot must be a BLOCK element.
+ */
+const loadingLib = await adminLib('loading.js');
+export function withSkeleton(slot, promise, shape = 'rows') {
+    if (!slot || !loadingLib?.whileLoading) return promise;
+    return loadingLib.whileLoading(slot, promise, loadingLib.SHAPES?.[shape] ?? loadingLib.SHAPES?.rows);
+}
+
+// ---------------------------------------------------------------------------
+// Unsaved work: kept drafts, the questions, saving without losing typing
+// ---------------------------------------------------------------------------
+
+/** The pure half (versions, how a draft stands, the wording) - admin/lib/drafts.js. */
+const KIT_V = new URL(import.meta.url).searchParams.get('v') ?? '1';
+export const draftLib = await import(`../lib/drafts.js?v=${KIT_V}`);
+
+/**
+ * One kept draft per key - never a map of them, so a late writer cannot put
+ * back a stale copy of the others. Never holds a secret (Blog has none).
+ */
+export const drafts = {
+    read(key) { try { const d = S.get(`blog.draft.${key}`); return d && d.values ? d : null; } catch { return null; } },
+    keep(key, draft) { try { S.set(`blog.draft.${key}`, {...draft, at: new Date().toISOString()}); } catch { /* storage blocked */ } },
+    drop(key) { try { if (S.remove) S.remove(`blog.draft.${key}`); else S.set(`blog.draft.${key}`, null); } catch { /* storage blocked */ } }
+};
+
+/**
+ * Ask whether to throw away a kept draft. OK ("Throw away") discards;
+ * Cancel, Escape and the backdrop all KEEP - Domma's confirm cannot tell
+ * them apart, so the safe answer has to be the one dismissing gives.
+ * `message` is plain text (escaped here).
+ *
+ * @param   {string} message
+ * @param   {{confirmText?: string, cancelText?: string}} [labels]
+ * @returns {Promise<boolean>} true = throw away
+ */
+export async function askThrowAway(message, labels = draftLib.RESTORE_ANSWERS) {
+    return Boolean(await E.confirm(escapeHtml(message), {...draftLib.RESTORE_ANSWERS, ...labels}));
+}
+
+/**
+ * Ask before a slideover with unsaved changes closes - Cancel, ×, Escape and
+ * the backdrop all go through close(). Wrap AFTER onceClosed. `close()` on
+ * the handle closes without asking (after a save, or when the screen is left
+ * and a draft has been kept).
+ *
+ * @param {object} so
+ * @param {{dirty: () => boolean, question?: string}} opts
+ * @returns {{close: () => void}}
+ */
+export function guardSlideover(so, {dirty, question = 'Discard your changes? They have not been saved.'}) {
+    const inner = so.close;
+    let asking = false;
+    let free = false;
+    so.close = (...args) => {
+        if (free || !dirty()) return inner(...args);
+        if (asking) return undefined;
+        asking = true;
+        Promise.resolve(E.confirm(question, {confirmText: 'Discard', cancelText: 'Keep editing'})).then((ok) => {
+            asking = false;
+            if (ok) { free = true; inner(...args); }
+        });
+        return undefined;
+    };
+    return {close() { free = true; try { inner(); } catch { /* already gone */ } }};
+}
+
+/**
+ * Lock a panel while it saves when it closes afterwards - anything typed
+ * meanwhile would go unsent. Returns the unlock (focus back where it was).
+ */
+export function lockWhileSaving(panel) {
+    const had = document.activeElement;
+    panel.inert = true;
+    return () => {
+        panel.inert = false;
+        if (had && panel.contains(had) && had.isConnected) had.focus();
+    };
+}
+
+/**
+ * Close a slideover the moment the address changes - a panel over the next
+ * screen catches its clicks. `close` is how (a guarded panel passes its
+ * guard's close, which does not ask). Returns the unhook.
+ */
+export function closeOnLeave(so, close = () => so.close()) {
+    const at = location.hash;
+    const onHash = () => { if (location.hash !== at) { try { close(); } catch { /* gone */ } } };
+    window.addEventListener('hashchange', onHash);
+    return () => window.removeEventListener('hashchange', onHash);
+}
+
+/**
+ * One panel of a kind at a time. `claim(name)` is false while it is open;
+ * the release must run if opening throws, or it could never open again
+ * until a reload.
+ */
+const openPanels = new Set();
+export function claim(name) {
+    if (openPanels.has(name)) return null;
+    openPanels.add(name);
+    let done = false;
+    return () => { if (!done) { done = true; openPanels.delete(name); } };
+}
+
 // ---------------------------------------------------------------------------
 // Settings
 // ---------------------------------------------------------------------------
@@ -262,26 +404,33 @@ const SETTINGS_PANEL = `
     </div>
 </div>`;
 
+/** The settings fields a draft is aged against. */
+const SETTING_KEYS = ['basePath', 'postsPerPage', 'feedLength', 'commentsEnabled', 'commentModeration',
+    'postLayout', 'listDisplay', 'displaySwitcher', 'interactive', 'relatedCount'];
+
 /**
  * The settings form as an element, bound to its own observables. Used by the
  * banner cog's slideover and by the old #/plugins/blog/settings page, so the
  * two can never drift apart.
  *
+ * A failed load leaves the form unable to save: saving defaults over settings
+ * that could not be read would wipe them.
+ *
  * @param   {{onClose?: Function}} [opts] - with onClose, a Cancel button closes the host
- * @returns {Promise<{el: HTMLElement, dispose: Function}>}
+ * @returns {Promise<{el: HTMLElement, dispose: Function, isDirty: () => boolean,
+ *          values: () => object, restore: (v: object) => void, was: string, failed: boolean}>}
  */
 export async function settingsPanel({onClose = null} = {}) {
     let stored = {};
-    try {
-        const res = await H.get(`${BASE}/settings`);
-        stored = res?.data ?? res ?? {};
-    } catch {
-        E.toast('Failed to load blog settings.', {type: 'error'});
+    let failed = false;
+    const [settingsRes, layoutsRes] = await Promise.allSettled([H.get(`${BASE}/settings`), H.get(`${BASE}/layouts`)]);
+    if (settingsRes.status === 'fulfilled' && settingsRes.value && !settingsRes.value.error) {
+        stored = settingsRes.value?.data ?? settingsRes.value ?? {};
+    } else {
+        failed = true;
     }
-    let layouts = {postLayouts: [], listDisplays: []};
-    try {
-        layouts = await H.get(`${BASE}/layouts`);
-    } catch { /* the selects fall back to the stored value alone */ }
+    // The selects fall back to the stored value alone.
+    const layouts = layoutsRes.status === 'fulfilled' && layoutsRes.value ? layoutsRes.value : {postLayouts: [], listDisplays: []};
     const initial = {
         basePath: stored.basePath ?? '/blog',
         postsPerPage: Number(stored.postsPerPage ?? 10),
@@ -300,7 +449,7 @@ export async function settingsPanel({onClose = null} = {}) {
 
     const f = Object.fromEntries(Object.entries(initial).map(([k, v]) => [k, M.observable(v)]));
     const saving = M.observable(false);
-    const status = M.observable('');
+    const status = M.observable(failed ? 'The settings could not be loaded - close this and try again.' : '');
     const current = () => ({
         basePath: String(f.basePath.value).trim() || '/blog',
         postsPerPage: Number(f.postsPerPage.value) || 10,
@@ -313,13 +462,15 @@ export async function settingsPanel({onClose = null} = {}) {
         interactive: Boolean(f.interactive.value),
         relatedCount: Math.max(0, Math.min(6, Number(f.relatedCount.value) || 0))
     });
+    const isDirty = () => !failed && JSON.stringify(current()) !== JSON.stringify(baseline.peek());
 
     const data = {
         ...f, saving, status,
         closable: Boolean(onClose),
+        failed,
         layoutOptions: M.observable(withCurrent(layouts.postLayouts ?? [], initial.postLayout)),
         displayOptions: M.observable(withCurrent(layouts.listDisplays ?? [], initial.listDisplay)),
-        dirty: M.computed(() => JSON.stringify(current()) !== JSON.stringify(baseline.value))
+        dirty: M.computed(() => !failed && JSON.stringify(current()) !== JSON.stringify(baseline.value))
     };
 
     const el = fragment(SETTINGS_PANEL);
@@ -332,6 +483,7 @@ export async function settingsPanel({onClose = null} = {}) {
                 R.navigate('#/blocks');
             },
             async save() {
+                if (failed) return;
                 const body = current();
                 if (!body.basePath.startsWith('/')) {
                     E.toast('Base path must start with /.', {type: 'error'});
@@ -341,9 +493,12 @@ export async function settingsPanel({onClose = null} = {}) {
                 try {
                     const res = await H.put(`${BASE}/settings`, body);
                     if (res?.error) throw new Error(res.error);
-                    // The server tidies the path ("/news/" is saved as "/news"); show what it kept.
+                    // The server tidies the path ("/news/" is saved as "/news"); show what it
+                    // kept - unless it was typed over while saving.
                     const savedBase = (res?.settings ?? res?.data?.settings)?.basePath;
-                    if (savedBase) f.basePath.value = body.basePath = savedBase;
+                    if (savedBase && String(f.basePath.peek()).trim() === body.basePath) f.basePath.value = savedBase;
+                    if (savedBase) body.basePath = savedBase;
+                    // What was SENT is the new baseline: anything typed meanwhile stays unsaved.
                     baseline.value = {...body};
                     basePathCache = null;
                     status.value = 'Saved.';
@@ -357,14 +512,69 @@ export async function settingsPanel({onClose = null} = {}) {
         }
     });
     if (typeof I !== 'undefined' && I.scan) I.scan(el);
-    return {el, dispose: () => { handle.dispose(); disposeHelp(); }};
+    return {
+        el,
+        failed,
+        was: failed ? '' : draftLib.versionOf(initial, SETTING_KEYS),
+        isDirty,
+        values: current,
+        restore(v) {
+            for (const k of SETTING_KEYS) if (k in (v ?? {})) f[k].value = v[k];
+        },
+        dispose: () => { handle.dispose(); disposeHelp(); }
+    };
 }
 
-/** The banner cog's slideover. Resizable, like every admin slideover. */
+/**
+ * A kept settings draft, offered back when the settings open: "Throw away"
+ * drops it; Cancel/Escape put the changes back in the form. Left alone when
+ * `stillHere()` turns false while asking - it is there for next time.
+ */
+export async function offerSettingsDraft(panel, stillHere) {
+    const draft = drafts.read('settings');
+    if (!draft || panel.failed) return;
+    const state = draft.was && draft.was !== panel.was ? 'changed' : 'same';
+    const throwAway = await askThrowAway(draftLib.restoreQuestion({what: 'settings', state}));
+    if (!stillHere()) return;
+    drafts.drop('settings');
+    if (!throwAway) panel.restore(draft.values);
+}
+
+/** Keep the settings form's unsaved changes for next time. */
+export function keepSettingsDraft(panel) {
+    if (!panel.isDirty()) return false;
+    drafts.keep('settings', {id: 'settings', name: '', values: panel.values(), was: panel.was});
+    return true;
+}
+
+/**
+ * The banner cog's slideover. Resizable, like every admin slideover. One at a
+ * time; closing with unsaved changes asks; leaving the screen keeps them as a
+ * draft, offered back next time.
+ */
 export async function openSettings() {
-    const so = E.slideover({title: 'Blog settings', size: 'sm', position: 'right'});
-    const {el, dispose} = await settingsPanel({onClose: () => so.close()});
-    so.element.appendChild(el);
-    onceClosed(so, dispose);
-    so.open();
+    const release = claim('settings');
+    if (!release) return;
+    let so = null;
+    try {
+        const panel = await settingsPanel({onClose: () => so?.close()});
+        // A kept draft is asked about BEFORE the panel opens, so the Escape
+        // that keeps it cannot also close the panel. Left while asked: kept.
+        const at = location.hash;
+        await offerSettingsDraft(panel, () => location.hash === at);
+        if (location.hash !== at) { panel.dispose(); release(); return; }
+        so = E.slideover({title: 'Blog settings', size: 'sm', position: 'right'});
+        so.element.appendChild(panel.el);
+        let unhook = () => {};
+        onceClosed(so, () => { unhook(); panel.dispose(); release(); });
+        const guard = guardSlideover(so, {dirty: panel.isDirty});
+        unhook = closeOnLeave(so, () => {
+            if (keepSettingsDraft(panel)) E.toast('Your unsaved settings are kept - open Blog settings again to pick them up.', {type: 'info'});
+            guard.close();
+        });
+        so.open();
+    } catch (err) {
+        release();
+        throw err;
+    }
 }