domma-cms 0.55.1 → 0.69.3

package/plugins/_lib/admin/ui/resizable.js

@@ -0,0 +1,151 @@
+/**
+ * Making a slideover resizable.
+ *
+ * Domma's slideover takes a size from a fixed set, which suits a confirmation
+ * and not a settings panel - the width someone wants for a table of issuers or
+ * a folder list depends on their screen, and no preset is right for everyone.
+ * A drag handle on the leading edge, remembered per panel.
+ *
+ * This started life in `_lib/admin/mail`. It was never about mail, so it lives
+ * here and the mail copy is a thin wrapper that supplies its own handle class;
+ * the one thing a caller must bring is a stylesheet rule for that class, since
+ * a plugin's CSS is the only stylesheet the updater does not replace.
+ *
+ * @module _lib/admin/ui/resizable
+ */
+
+/** Never narrower than this, whatever the drag says. */
+const MIN_WIDTH = 360;
+
+/**
+ * Add a drag handle to a slideover and remember the width it is given.
+ *
+ * @param   {object} slideover - a Domma slideover instance
+ * @param   {{storageKey: string, defaultWidth?: number, handleClass?: string}} options
+ * @returns {() => void} a teardown for the listeners this adds
+ */
+export function makeResizable(slideover, {storageKey, defaultWidth = 640, handleClass = 'dm-ui-resizer'}) {
+    const panel = slideover?.element;
+    if (!panel) return () => {};
+
+    // A current admin fits EVERY slideover with a handle centrally, at the
+    // point E.slideover is called (admin/js/lib/slideover-resizable.js), so by
+    // the time a plugin gets here the panel is already resizable - under a key
+    // derived from its title. Adding a second handle would put two draggable
+    // edges 6px apart and have them fight over the stored width.
+    //
+    // The panel carries its state on `__dmResize` ({storageKey, defaultWidth,
+    // width, apply}), which is the whole contract between the two files: a
+    // plugin must not import from `admin/`, since the updater replaces it
+    // wholesale and a static import would take the view down on any CMS whose
+    // admin predates this. So the key is re-pointed in place instead.
+    const central = panel.__dmResize;
+    if (central) {
+        central.storageKey = storageKey;
+        central.defaultWidth = defaultWidth;
+        let width = defaultWidth;
+        try {
+            const stored = Number(S.get(storageKey));
+            if (Number.isFinite(stored) && stored >= MIN_WIDTH) width = stored;
+        } catch { /* Storage unavailable; the default is serviceable. */ }
+        central.width = width;
+        central.apply();
+        // The central handle outlives this caller and is torn down with the
+        // panel, so there is nothing here to undo.
+        return () => {};
+    }
+
+    // The panel is positioned from the right, so dragging its left edge
+    // leftwards makes it wider - the delta is inverted against the pointer.
+    let width = defaultWidth;
+    try {
+        const stored = Number(S.get(storageKey));
+        if (Number.isFinite(stored) && stored >= MIN_WIDTH) width = stored;
+    } catch {
+        // Storage unavailable; the default is serviceable.
+    }
+
+    /**
+     * @param   {number} value
+     * @returns {number}
+     */
+    const clamp = value => Math.min(
+        Math.max(MIN_WIDTH, Math.round(value)),
+        Math.max(MIN_WIDTH, window.innerWidth - 80)
+    );
+
+    // admin.css sizes every slideover with `width: … !important`, so an
+    // ordinary inline style loses the cascade - and `admin/` is replaced
+    // wholesale by the updater, which makes an important inline the only door.
+    const apply = () => {
+        panel.style.setProperty('width', `${width}px`, 'important');
+        panel.style.setProperty('min-width', `${MIN_WIDTH}px`, 'important');
+    };
+    apply();
+
+    // A span, not a div: admin.css pads every direct DIV child of a slideover
+    // with !important at a specificity this file cannot outrank, which would
+    // inflate a 6px handle into a 48px bar.
+    const handle = document.createElement('span');
+    handle.className = handleClass;
+    handle.setAttribute('role', 'separator');
+    handle.setAttribute('aria-orientation', 'vertical');
+    handle.title = 'Drag to resize · double-click to reset';
+    panel.appendChild(handle);
+
+    const onDown = event => {
+        event.preventDefault();
+        const startX = event.clientX;
+        const startWidth = width;
+        handle.setPointerCapture?.(event.pointerId);
+        panel.classList.add('is-resizing');
+
+        const move = moveEvent => {
+            width = clamp(startWidth - (moveEvent.clientX - startX));
+            apply();
+        };
+        const end = () => {
+            handle.removeEventListener('pointermove', move);
+            handle.removeEventListener('pointerup', end);
+            handle.removeEventListener('pointercancel', end);
+            panel.classList.remove('is-resizing');
+            try {
+                S.set(storageKey, width);
+            } catch {
+                // The drag still applies for this panel.
+            }
+        };
+
+        handle.addEventListener('pointermove', move);
+        handle.addEventListener('pointerup', end);
+        handle.addEventListener('pointercancel', end);
+    };
+
+    const onReset = () => {
+        width = defaultWidth;
+        apply();
+        try {
+            S.set(storageKey, width);
+        } catch { /* nothing to do */ }
+    };
+
+    const onWindowResize = () => {
+        // A window narrower than the remembered width would push the panel off
+        // screen; the clamp keeps it reachable without forgetting the
+        // preference for when the window grows again.
+        panel.style.setProperty('width', `${clamp(width)}px`, 'important');
+    };
+
+    handle.addEventListener('pointerdown', onDown);
+    handle.addEventListener('dblclick', onReset);
+    window.addEventListener('resize', onWindowResize);
+
+    return () => {
+        panel.style.removeProperty('width');
+        panel.style.removeProperty('min-width');
+        handle.removeEventListener('pointerdown', onDown);
+        handle.removeEventListener('dblclick', onReset);
+        window.removeEventListener('resize', onWindowResize);
+        handle.remove();
+    };
+}

package/plugins/_lib/dataStore.js

@@ -0,0 +1,117 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+/**
+ * Creates a JSON file-based data store.
+ *
+ * @param {string} filePath - Absolute path to the JSON file
+ * @returns {{ read: Function, write: Function, readArray: Function, appendItem: Function, updateItem: Function, deleteItem: Function }}
+ */
+export function createStore(filePath) {
+    /**
+     * Read and parse JSON file.
+     * Returns `{}` if file is missing or contains invalid JSON.
+     *
+     * @returns {Promise<object>}
+     */
+    async function read() {
+        try {
+            const raw = await fs.readFile(filePath, 'utf8');
+            return JSON.parse(raw);
+        } catch {
+            return {};
+        }
+    }
+
+    /**
+     * Atomically write data as formatted JSON.
+     * Writes to a `.tmp` file then renames to ensure atomicity.
+     *
+     * @param {*} data
+     * @returns {Promise<void>}
+     */
+    async function write(data) {
+        const dir = path.dirname(filePath);
+        await fs.mkdir(dir, { recursive: true });
+        const tmpPath = filePath + '.tmp';
+        await fs.writeFile(tmpPath, JSON.stringify(data, null, 2) + '\n', 'utf8');
+        await fs.rename(tmpPath, filePath);
+    }
+
+    /**
+     * Read and parse JSON file, expecting an array.
+     * Returns `[]` if file is missing, invalid JSON, or not an array.
+     *
+     * @returns {Promise<Array>}
+     */
+    async function readArray() {
+        try {
+            const raw = await fs.readFile(filePath, 'utf8');
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        } catch {
+            return [];
+        }
+    }
+
+    /**
+     * Append an item to the array stored in the file.
+     *
+     * @param {object} item
+     * @returns {Promise<Array>} Updated array
+     */
+    async function appendItem(item) {
+        const arr = await readArray();
+        arr.push(item);
+        await write(arr);
+        return arr;
+    }
+
+    /**
+     * Update an item in the stored array by its `id` property.
+     * Merges `updates` into the matched item.
+     *
+     * @param {string|number} id
+     * @param {object} updates
+     * @returns {Promise<object|null>} Updated item, or null if not found
+     */
+    async function updateItem(id, updates) {
+        const arr = await readArray();
+        let updated = null;
+
+        const next = arr.map((item) => {
+            if (item.id === id) {
+                updated = { ...item, ...updates };
+                return updated;
+            }
+            return item;
+        });
+
+        if (updated === null) {
+            return null;
+        }
+
+        await write(next);
+        return updated;
+    }
+
+    /**
+     * Delete an item from the stored array by its `id` property.
+     *
+     * @param {string|number} id
+     * @returns {Promise<boolean>} True if an item was removed, false if not found
+     */
+    async function deleteItem(id) {
+        const arr = await readArray();
+        const next = arr.filter((item) => item.id !== id);
+
+        if (next.length === arr.length) {
+            return false;
+        }
+
+        await write(next);
+        return true;
+    }
+
+    return { read, write, readArray, appendItem, updateItem, deleteItem };
+}