domma-cms 0.66.0 → 0.69.4

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

@@ -0,0 +1,372 @@
+/**
+ * What the Blog screens share: the settings panel, and the small pieces every
+ * view on the Tool upgrade path needs (help popovers, teardown, slideover
+ * cleanup, a ⋮ that opens the row's context menu).
+ *
+ * Loaded by the views at run time with the loader's cache-busting token, the
+ * way settings-cog.js is, so an update is never served a stale copy.
+ *
+ * @module blog/admin/views/kit
+ */
+
+export const BASE = '/api/plugins/blog';
+
+export function escapeHtml(s) {
+    return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+/**
+ * The blog's public base path (`/blog` unless configured), for links to the
+ * live site. Read once per page load; a change needs a restart anyway.
+ *
+ * @returns {Promise<string>}
+ */
+let basePathCache = null;
+export async function sitePath() {
+    if (basePathCache) return basePathCache;
+    try {
+        const s = await H.get(`${BASE}/settings`);
+        basePathCache = String((s?.data ?? s)?.basePath || '/blog').replace(/\/+$/, '') || '/blog';
+    } catch {
+        return '/blog';
+    }
+    return basePathCache;
+}
+
+/**
+ * A shared admin helper, loaded at run time - a plugin must not import admin/
+ * statically, because an admin that predates the helper would take the whole
+ * view down with it. Null when it is not there.
+ *
+ * @param   {string} file - e.g. 'help-popover.js'
+ * @returns {Promise<object|null>}
+ */
+export async function adminLib(file) {
+    try { return await import(`/admin/js/lib/${file}`); } catch { return null; }
+}
+
+/**
+ * Give every `[data-help]` under `el` its (?) popover. Run it BEFORE
+ * M.applyBindings: a `data-if` lifts its element out of the document, and
+ * a marker scanned after that is never found.
+ *
+ * @param   {HTMLElement} el
+ * @returns {Promise<() => void>} dispose
+ */
+export async function scanHelp(el) {
+    const lib = await adminLib('help-popover.js');
+    return lib?.helpPopovers ? lib.helpPopovers(el, {position: 'bottom'}) : () => {};
+}
+
+/**
+ * The admin's shared Tool kit (admin/js/lib/tool-kit.js), loaded once at run
+ * time. Everything below prefers it, so the Blog behaves exactly like Notes,
+ * Todo and Analytics; the local copies are only for an admin that predates it.
+ */
+const core = await adminLib('tool-kit.js');
+
+/**
+ * Per-view teardown. Domma's router has no unmount hook, so a view's effects,
+ * bindings and listeners are dropped when the hash leaves its route - and on
+ * a remount, in case it never did.
+ *
+ * @param   {string} name - a key per view
+ * @param   {RegExp} route - the hashes this view owns
+ * @returns {(fn: Function) => void} add a disposer
+ */
+const lifetimes = new Map();
+export function viewScope(name, route) {
+    let life = lifetimes.get(name);
+    if (!life) {
+        life = core?.viewLifetime ? core.viewLifetime(route) : localLifetime(route);
+        lifetimes.set(name, life);
+    }
+    life.reset();
+    return (fn) => { if (typeof fn === 'function') life.add(fn); };
+}
+
+function localLifetime(pattern) {
+    let fns = [];
+    const run = () => { const list = fns; fns = []; list.forEach(fn => { try { fn(); } catch { /* gone */ } }); };
+    const onHash = () => { if (!pattern.test(location.hash)) run(); };
+    return {
+        add(fn) { fns.push(fn); },
+        reset() {
+            run();
+            window.addEventListener('hashchange', onHash);
+            fns.push(() => window.removeEventListener('hashchange', onHash));
+        }
+    };
+}
+
+/**
+ * Run `cleanup` once when the slideover closes, then take it out of the page -
+ * Domma hides a closed slideover rather than removing it.
+ *
+ * @param {object}   so
+ * @param {Function} [cleanup]
+ */
+export function onceClosed(so, cleanup = () => {}) {
+    if (core?.onceClosed) return core.onceClosed(so, cleanup);
+    const close = so.close.bind(so);
+    let done = false;
+    so.close = (...args) => {
+        const result = close(...args);
+        if (!done) {
+            done = true;
+            cleanup();
+            setTimeout(() => {
+                try { so.destroy?.(); } catch { /* already gone */ }
+                so.element?.remove();
+            }, 400);
+        }
+        return result;
+    };
+}
+
+/**
+ * Open the row's context menu from its ⋮, anchored under the button - the same
+ * menu a right-click opens, so there is one list of actions, not two.
+ *
+ * @param {HTMLElement} button
+ */
+export function openMenuFrom(button) {
+    if (core?.openMenuAt) return core.openMenuAt(button);
+    const r = button.getBoundingClientRect();
+    button.dispatchEvent(new MouseEvent('contextmenu', {
+        bubbles: true, cancelable: true, clientX: r.left, clientY: r.bottom, view: window
+    }));
+}
+
+/**
+ * Drop hidden items, and the dividers that hiding leaves doubled or dangling.
+ *
+ * @param   {object[]} items
+ * @returns {object[]}
+ */
+export function tidy(items) {
+    const shown = items.filter(i => i.visible !== false);
+    return shown.filter((i, n) => i.type !== 'divider'
+        || (n > 0 && n < shown.length - 1 && shown[n - 1].type !== 'divider'));
+}
+
+/** Build a small DOM tree from an HTML string that holds NO user data. */
+export function fragment(html) {
+    const t = document.createElement('template');
+    t.innerHTML = html.trim();
+    return t.content.firstElementChild;
+}
+
+/**
+ * A filter handed from one Blog screen to the next - "Show its posts" on a
+ * category lands on Posts already filtered. sessionStorage, because it is a
+ * one-shot hand-off rather than a preference.
+ */
+export function handOff(key, value) {
+    try { sessionStorage.setItem(`blog.handoff.${key}`, value); } catch { /* storage blocked */ }
+}
+
+export function takeHandOff(key) {
+    try {
+        const v = sessionStorage.getItem(`blog.handoff.${key}`);
+        sessionStorage.removeItem(`blog.handoff.${key}`);
+        return v;
+    } catch {
+        return null;
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Settings
+// ---------------------------------------------------------------------------
+
+const SETTINGS_PANEL = `
+<div class="blog-panel">
+    <div class="blog-field">
+        <label class="form-label" for="blog-set-base">Base path
+            <span data-help="The URL every blog page lives under - /blog gives /blog/my-post. Takes effect after a server restart."></span>
+        </label>
+        <input id="blog-set-base" type="text" class="form-input font-mono" placeholder="/blog" data-model="basePath.value">
+    </div>
+    <div class="blog-field">
+        <label class="form-label" for="blog-set-ppp">Posts per page
+            <span data-help="How many posts a listing page shows before paging. Takes effect after a server restart."></span>
+        </label>
+        <input id="blog-set-ppp" type="number" min="1" max="100" class="form-input" data-model="postsPerPage.value">
+    </div>
+    <div class="blog-field">
+        <label class="form-label" for="blog-set-feed">RSS feed length
+            <span data-help="The newest posts included in the RSS/Atom feed."></span>
+        </label>
+        <input id="blog-set-feed" type="number" min="1" max="200" class="form-input" data-model="feedLength.value">
+    </div>
+    <div class="blog-field blog-field-row">
+        <label class="form-label" for="blog-set-comments">Comments
+            <span data-help="Readers can leave a comment under each post. Off hides the form; existing comments stay in Comments."></span>
+        </label>
+        <input id="blog-set-comments" type="checkbox" class="form-switch" data-model="commentsEnabled.value">
+    </div>
+    <div class="blog-field blog-field-row">
+        <label class="form-label" for="blog-set-moderate">Hold comments for approval
+            <span data-help="New comments wait in Comments > Pending until approved. Off publishes them straight away."></span>
+        </label>
+        <input id="blog-set-moderate" type="checkbox" class="form-switch" data-model="commentModeration.value"
+               data-bind-disabled="!commentsEnabled.value">
+    </div>
+    <h4 class="blog-panel-heading">On the site
+        <span data-help-title="Layouts are blocks"
+              data-help="Every post layout and listing display is a block - blog-post-… for posts, blog-card-… for listings. Edit one under Blocks and every post using it changes. Copy one under a new name (say blog-post-long-read) and it appears here, and in the post editor, as a new choice."></span>
+    </h4>
+    <div class="blog-field">
+        <label class="form-label" for="blog-set-layout">Post layout
+            <span data-help="How a post looks unless it picks its own in the editor. Classic: title, image, story. Feature: a full-width hero. Minimal: just the words. Sidebar: contents list and details beside the story."></span>
+        </label>
+        <select id="blog-set-layout" class="form-select" data-model="postLayout.value"
+                data-options="layoutOptions.value" data-options-text="label" data-options-value="id"></select>
+    </div>
+    <div class="blog-field">
+        <label class="form-label" for="blog-set-display">Listing display
+            <span data-help="How the blog index and the category, tag and author pages show posts. Cards: a picture grid. List: one per row. Magazine: the newest large, the rest as cards. Compact: titles and dates."></span>
+        </label>
+        <select id="blog-set-display" class="form-select" data-model="listDisplay.value"
+                data-options="displayOptions.value" data-options-text="label" data-options-value="id"></select>
+    </div>
+    <div class="blog-field blog-field-row">
+        <label class="form-label" for="blog-set-switch">Readers can switch display
+            <span data-help="Shows the Cards / List / Magazine / Compact switch above listings. A reader's choice is remembered in their browser."></span>
+        </label>
+        <input id="blog-set-switch" type="checkbox" class="form-switch" data-model="displaySwitcher.value">
+    </div>
+    <div class="blog-field blog-field-row">
+        <label class="form-label" for="blog-set-live">Search and filter in the page
+            <span data-help="Listings get a search box, category pills, sorting and a right-click menu on each post (More in this category, More tagged…, More by this author), all without reloading. Off: plain pages of posts. Blogs with more than 300 posts always page on the server."></span>
+        </label>
+        <input id="blog-set-live" type="checkbox" class="form-switch" data-model="interactive.value">
+    </div>
+    <div class="blog-field">
+        <label class="form-label" for="blog-set-related">Related posts
+            <span data-help="How many posts sharing a category or tag are suggested under each post, in layouts that show them. 0 turns them off."></span>
+        </label>
+        <input id="blog-set-related" type="number" min="0" max="6" class="form-input" data-model="relatedCount.value">
+    </div>
+    <button type="button" class="btn btn-sm btn-ghost blog-panel-link" data-on-click="openBlocks">
+        <span data-icon="layout" data-icon-size="13"></span> Edit the layouts in Blocks
+    </button>
+    <p class="blog-panel-note" data-if="needsRestart.value">Base path and posts per page change after the server restarts.</p>
+    <div class="blog-panel-actions">
+        <span class="blog-panel-status" data-bind-text="status.value"></span>
+        <span class="blog-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel" data-if="closable">Cancel</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="!dirty.value || saving.value">
+            <span data-icon="save" data-icon-size="13"></span> Save
+        </button>
+    </div>
+</div>`;
+
+/**
+ * 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.
+ *
+ * @param   {{onClose?: Function}} [opts] - with onClose, a Cancel button closes the host
+ * @returns {Promise<{el: HTMLElement, dispose: Function}>}
+ */
+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 layouts = {postLayouts: [], listDisplays: []};
+    try {
+        layouts = await H.get(`${BASE}/layouts`);
+    } catch { /* the selects fall back to the stored value alone */ }
+    const initial = {
+        basePath: stored.basePath ?? '/blog',
+        postsPerPage: Number(stored.postsPerPage ?? 10),
+        feedLength: Number(stored.feedLength ?? 20),
+        commentsEnabled: stored.commentsEnabled ?? false,
+        commentModeration: stored.commentModeration ?? true,
+        postLayout: stored.postLayout ?? 'blog-post-classic',
+        listDisplay: stored.listDisplay ?? 'cards',
+        displaySwitcher: stored.displaySwitcher ?? true,
+        interactive: stored.interactive ?? true,
+        relatedCount: Number(stored.relatedCount ?? 3)
+    };
+    // A stored choice whose block has since gone still shows, rather than a blank select.
+    const withCurrent = (list, id) => (list.some(o => o.id === id) ? list : [...list, {id, label: `${id} (missing)`}]);
+    const baseline = M.observable({...initial});
+
+    const f = Object.fromEntries(Object.entries(initial).map(([k, v]) => [k, M.observable(v)]));
+    const saving = M.observable(false);
+    const status = M.observable('');
+    const current = () => ({
+        basePath: String(f.basePath.value).trim() || '/blog',
+        postsPerPage: Number(f.postsPerPage.value) || 10,
+        feedLength: Number(f.feedLength.value) || 20,
+        commentsEnabled: Boolean(f.commentsEnabled.value),
+        commentModeration: Boolean(f.commentModeration.value),
+        postLayout: String(f.postLayout.value),
+        listDisplay: String(f.listDisplay.value),
+        displaySwitcher: Boolean(f.displaySwitcher.value),
+        interactive: Boolean(f.interactive.value),
+        relatedCount: Math.max(0, Math.min(6, Number(f.relatedCount.value) || 0))
+    });
+
+    const data = {
+        ...f, saving, status,
+        closable: Boolean(onClose),
+        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)),
+        needsRestart: M.computed(() => {
+            const b = baseline.value;
+            return String(f.basePath.value).trim() !== b.basePath || Number(f.postsPerPage.value) !== b.postsPerPage;
+        })
+    };
+
+    const el = fragment(SETTINGS_PANEL);
+    const disposeHelp = await scanHelp(el);
+    const handle = M.applyBindings(data, el, {
+        methods: {
+            cancel: () => onClose?.(),
+            openBlocks() {
+                onClose?.();
+                R.navigate('#/blocks');
+            },
+            async save() {
+                const body = current();
+                if (!body.basePath.startsWith('/')) {
+                    E.toast('Base path must start with /.', {type: 'error'});
+                    return;
+                }
+                saving.value = true;
+                try {
+                    const res = await H.put(`${BASE}/settings`, body);
+                    if (res?.error) throw new Error(res.error);
+                    baseline.value = {...body};
+                    basePathCache = null;
+                    status.value = 'Saved.';
+                    E.toast('Blog settings saved. Display changes are live now.', {type: 'success'});
+                } catch (err) {
+                    E.toast(err?.message ?? 'Failed to save settings.', {type: 'error'});
+                } finally {
+                    saving.value = false;
+                }
+            }
+        }
+    });
+    if (typeof I !== 'undefined' && I.scan) I.scan(el);
+    return {el, dispose: () => { handle.dispose(); disposeHelp(); }};
+}
+
+/** The banner cog's slideover. Resizable, like every admin slideover. */
+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();
+}