domma-cms 1.8.32 → 1.8.34

package/plugins/theme-roller/admin/css/theme-roller.css

@@ -0,0 +1,43 @@
+/* Theme Roller admin screen - see admin/views/theme-roller-view.js. */
+.trx { display: flex; flex-direction: column; gap: .75rem; }
+.trx [hidden] { display: none !important; }
+.trx-alert { margin: 0; display: flex; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); }
+.trx-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
+.trx-editing { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; min-width: 0; }
+.trx-editing small { color: var(--dm-text-muted); }
+.trx-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
+.trx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.trx-more { font-size: var(--dm-text-lg); line-height: 1; }
+.trx-chips { display: inline-flex; gap: .3rem; }
+.trx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); white-space: nowrap; }
+.trx-chip.is-dirty { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.trx-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.trx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.trx-card-title { display: flex; align-items: center; gap: .3rem; font-weight: 600; }
+.trx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.trx-list { display: flex; flex-direction: column; }
+.trx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .25rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.trx-row:last-child { border-bottom: 0; }
+.trx-row:hover, .trx-row:focus-visible { background: var(--dm-surface-hover, rgba(127,127,127,.08)); outline: none; }
+.trx-row.is-editing { box-shadow: inset 3px 0 0 var(--dm-primary); }
+.trx-swatch { display: inline-flex; flex-shrink: 0; width: 2.2rem; height: 1.4rem; border-radius: var(--dm-radius-sm); overflow: hidden; border: 1px solid var(--dm-border); }
+.trx-swatch span { flex: 1; }
+.trx-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.trx-row-main strong, .trx-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.trx-row-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.trx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.trx-kebab:hover { color: var(--dm-primary); }
+.trx-css { width: 100%; min-height: 420px; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); }
+.trx-css-actions { display: flex; justify-content: flex-end; }
+@media (max-width: 640px) { .trx-row-main small { display: none; } }
+
+/* Saved themes: filter and search (1.2) */
+.trx-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
+.trx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.trx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.trx-seg button + button { border-left: 1px solid var(--dm-border); }
+.trx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.trx-seg small { font-size: var(--dm-text-xs); opacity: .75; margin-left: .2rem; }
+.trx-search { width: auto; flex: 0 1 14rem; padding: .25rem .5rem; font-size: var(--dm-text-sm); }

package/plugins/theme-roller/admin/lib/prompt.js

@@ -0,0 +1,22 @@
+/**
+ * E.prompt with a starting value that survives any character. Domma's
+ * `inputValue` is sanitised into a value="…" attribute, so a " in it cuts the
+ * text short (escaping does not help - it is decoded back). This sets the
+ * input's .value after the dialog is built instead. The same helper as the
+ * core admin's tool-kit promptWith (CMS 1.6.53), kept here so the plugin
+ * works on older cores too.
+ *
+ * @param {string} message
+ * @param {object} [options] - E.prompt options (without inputValue)
+ * @param {*} [value]        - the starting text
+ * @returns {Promise<string|null>}
+ */
+export function promptWith(message, options, value) {
+    const answer = E.prompt(message, options);
+    const input = [...document.querySelectorAll('.dm-dialog-input')].at(-1);
+    if (input) {
+        input.value = String(value ?? '');
+        setTimeout(() => { try { input.select(); } catch { /* gone */ } }, 60);
+    }
+    return answer;
+}

package/plugins/theme-roller/admin/lib/themes.js

@@ -0,0 +1,196 @@
+/**
+ * Theme Roller - the pure rules, shared by the server (plugin.js) and the admin
+ * screen. No I/O and no globals, so the tests run them directly.
+ *
+ * A saved theme is `{id, label, baseTheme, changes, createdAt, updatedAt}`:
+ * a built-in Domma theme plus the `--dm-*` tokens changed on top of it. The CMS
+ * applies it as the base's class plus `dm-custom-<id>` (see the core's
+ * themeSettings.js); this plugin only stores themes and offers them.
+ */
+
+/** A saved theme's id: what the CMS names its class and its config entries by. */
+export const ID_RE = /^[a-z0-9][a-z0-9-]{0,59}$/;
+const TOKEN_RE = /^--dm-[a-z0-9-]+$/;
+
+/**
+ * An id from a label: lowercase, hyphens, 60 characters at most.
+ *
+ * @param {string} label
+ * @returns {string} '' when nothing usable is left
+ */
+export function slugify(label) {
+    return String(label || '')
+        .toLowerCase()
+        .normalize('NFKD').replace(/[̀-ͯ]/g, '')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 60)
+        .replace(/-+$/, '');
+}
+
+/**
+ * An id for a new theme that collides with nothing: not a built-in theme (the
+ * CMS would ignore it) and not another saved theme (it would overwrite it).
+ *
+ * @param {string} label
+ * @param {{builtins?: string[], taken?: string[]}} known
+ * @returns {string} '' when the label has nothing usable in it
+ */
+export function uniqueId(label, {builtins = [], taken = []} = {}) {
+    const base = slugify(label);
+    if (!base) return '';
+    const used = new Set([...builtins, ...taken]);
+    if (!used.has(base)) return base;
+    for (let n = 2; n < 1000; n++) {
+        const id = `${base.slice(0, 55)}-${n}`;
+        if (!used.has(id)) return id;
+    }
+    return '';
+}
+
+/**
+ * A token value that cannot break out of its declaration - the same rule the
+ * CMS applies before it emits one. Refused, not escaped.
+ */
+export function isSafeValue(value) {
+    if (typeof value !== 'string') return false;
+    const v = value.trim();
+    if (!v || v.length > 200) return false;
+    if (/[{}<>;\\]|\/\*|\*\//.test(v)) return false;   // the core's rule: no comment, no escapes
+    return !/@import|javascript:|expression\s*\(|url\s*\(/i.test(v);
+}
+
+/**
+ * Keep only real `--dm-*` tokens with plain values.
+ *
+ * @param {object} changes
+ * @returns {{changes: Object<string,string>, dropped: string[]}}
+ */
+export function cleanChanges(changes) {
+    const out = {};
+    const dropped = [];
+    for (const [k, v] of Object.entries(changes && typeof changes === 'object' ? changes : {})) {
+        if (TOKEN_RE.test(k) && isSafeValue(v)) out[k] = v.trim();
+        else dropped.push(k);
+    }
+    return {changes: out, dropped};
+}
+
+/** A label for display: trimmed, 80 characters, never empty. */
+export function cleanLabel(label, fallback = 'Untitled theme') {
+    const s = String(label ?? '').replace(/\s+/g, ' ').trim().slice(0, 80);
+    return s || fallback;
+}
+
+/**
+ * Where a theme is in use, from the CMS's theme config (config/theme.json).
+ *
+ * @param {string} id
+ * @param {object} cfg
+ * @returns {string[]} any of 'site', 'admin', 'day', 'night', 'region'
+ */
+export function usageOf(id, cfg = {}) {
+    const where = [];
+    const auto = cfg.autoTheme || {};
+    if (!auto.enabled && cfg.theme === id) where.push('site');
+    if (cfg.adminTheme === id) where.push('admin');
+    if (auto.enabled && auto.dayTheme === id) where.push('day');
+    if (auto.enabled && auto.nightTheme === id) where.push('night');
+    if ((cfg.overrides || []).some(o => o && o.enabled !== false && o.theme === id)) where.push('region');
+    return where;
+}
+
+/** Human wording for usageOf's keys. */
+export const USAGE_LABEL = {site: 'Site', admin: 'Admin', day: 'Day', night: 'Night', region: 'Region'};
+
+/**
+ * The theme config with every use of `id` swapped for `replacement` - what
+ * deleting a theme in use does, so nothing is left pointing at nothing.
+ *
+ * @param {object} cfg
+ * @param {string} id
+ * @param {string} replacement - a built-in theme, normally the deleted theme's base
+ * @returns {object|null} a partial config to save, or null when nothing uses it
+ */
+export function withoutTheme(cfg, id, replacement) {
+    const patch = {};
+    if (cfg.theme === id) patch.theme = replacement;
+    if (cfg.adminTheme === id) patch.adminTheme = replacement;
+    const auto = cfg.autoTheme || {};
+    if (auto.dayTheme === id || auto.nightTheme === id) {
+        patch.autoTheme = {
+            ...auto,
+            ...(auto.dayTheme === id && {dayTheme: replacement}),
+            ...(auto.nightTheme === id && {nightTheme: replacement})
+        };
+    }
+    if ((cfg.overrides || []).some(o => o?.theme === id)) {
+        patch.overrides = cfg.overrides.map(o => (o?.theme === id ? {...o, theme: replacement} : o));
+    }
+    return Object.keys(patch).length ? patch : null;
+}
+
+/**
+ * A standalone stylesheet for a theme - what "Export CSS" downloads. Scoped to
+ * the class the CMS uses, plus a `:root` block commented out for anyone
+ * pasting it into a page that does not.
+ *
+ * @param {{id: string, label?: string, baseTheme: string, changes: object}} theme
+ * @param {string} [date] - YYYY-MM-DD
+ * @returns {string}
+ */
+export function themeCss(theme, date = new Date().toISOString().slice(0, 10)) {
+    const {changes} = cleanChanges(theme.changes);
+    const lines = Object.entries(changes).map(([k, v]) => `    ${k}: ${v};`);
+    // A character class, not a `*/` pattern: removing `*/` from `**//` leaves `*/`.
+    const label = cleanLabel(theme.label, theme.id).replace(/[*/<>]/g, '');
+    return [
+        '/**',
+        ` * ${label} - a Domma theme on ${theme.baseTheme}`,
+        ` * Exported ${date} from the Theme Roller.`,
+        ` * Apply alongside the base: <body class="dm-theme-${theme.baseTheme} dm-custom-${theme.id}">`,
+        ' */',
+        `.dm-custom-${theme.id} {`,
+        ...lines,
+        '}',
+        ''
+    ].join('\n');
+}
+
+/**
+ * The sidebar badge and its hover popover (the core's countUrl contract:
+ * {count, label, tone, details: {title, rows, items, empty}}, all plain text).
+ * Count = saved themes; the popover says what the site and the admin wear now,
+ * then each saved theme and where it is in use.
+ *
+ * @param {Array<{id, label, baseTheme, usage?: string[]}>} themes - with usage filled in
+ * @param {object} cfg - the CMS theme config
+ * @returns {object}
+ */
+export function badgeFor(themes, cfg = {}) {
+    const byId = new Map(themes.map(t => [t.id, t]));
+    const name = (id) => (id ? (byId.get(id)?.label ?? id) : '-');
+    const inUse = themes.filter(t => (t.usage || []).length).length;
+    const auto = cfg.autoTheme?.enabled ? cfg.autoTheme : null;
+    const n = themes.length;
+    return {
+        count: n,
+        label: n ? `${n} custom theme${n === 1 ? '' : 's'}${inUse ? `, ${inUse} in use` : ''}` : 'No custom themes yet',
+        tone: 'info',
+        details: {
+            title: 'Theme Roller',
+            rows: [
+                auto
+                    ? {label: 'Site (day / night)', value: `${name(auto.dayTheme)} / ${name(auto.nightTheme)}`}
+                    : {label: 'Site theme', value: name(cfg.theme)},
+                {label: 'Admin theme', value: name(cfg.adminTheme)}
+            ],
+            items: themes.slice(0, 8).map(t => ({
+                text: t.label,
+                meta: `On ${t.baseTheme}${(t.usage || []).length ? ` · ${(t.usage).map(u => USAGE_LABEL[u] || u).join(', ')}` : ''}`,
+                ...((t.usage || []).length && {tone: 'ok'})
+            })),
+            empty: 'No saved themes yet - make one and Save it.'
+        }
+    };
+}

package/plugins/theme-roller/admin/lib/view.js

@@ -0,0 +1,88 @@
+/**
+ * Theme Roller - the screen's pure decisions: the Saved themes filter and its
+ * counts, whether a save left newer changes unsaved, and whether a kept draft
+ * is older than what the server now holds. No DOM, no storage; tested in
+ * tests/view.test.js.
+ *
+ * @module theme-roller/admin/lib/view
+ */
+
+export const SHOWS = ['all', 'used', 'unused'];
+
+/** How many themes each filter shows. */
+export function listCounts(themes = []) {
+    const used = themes.filter(t => (t.usage || []).length).length;
+    return {all: themes.length, used, unused: themes.length - used};
+}
+
+/** The themes a filter (and a search) shows. */
+export function filterThemes(themes = [], show = 'all', query = '') {
+    const q = String(query || '').trim().toLowerCase();
+    return themes.filter(t => {
+        const used = (t.usage || []).length > 0;
+        if (show === 'used' && !used) return false;
+        if (show === 'unused' && used) return false;
+        return !q || `${t.label} ${t.id} ${t.baseTheme}`.toLowerCase().includes(q);
+    });
+}
+
+/** A stable text of a theme's changes, to compare one save with the next. */
+export function changesKey(changes = {}) {
+    return JSON.stringify(Object.keys(changes).sort().map(k => [k, changes[k]]));
+}
+
+/**
+ * After a save: is what is in the roller now still what was sent? Anything
+ * changed while the save was in flight stays unsaved.
+ * @param {string} sent - changesKey(…) + the base, as sent
+ * @param {string} now - the same, read after the save
+ */
+export const stillDirty = (sent, now) => sent !== now;
+
+/**
+ * What a kept draft is worth on restore, as a sentence to add to the question
+ * (or '' when nothing changed since): the theme it edits was saved again, or
+ * deleted, or the Custom CSS file changed.
+ * @param {object} draft - {theme?: {id, was}, css?, cssWas?}
+ * @param {object[]} themes - the saved themes now
+ * @param {string|null} cssNow - content/custom.css now (null = not loaded)
+ */
+export function staleNote(draft, themes = [], cssNow = null) {
+    const notes = [];
+    if (draft?.theme?.id) {
+        const t = themes.find(x => x.id === draft.theme.id);
+        if (!t) notes.push('The theme has been deleted since - keeping yours starts it again as a new theme.');
+        else if (draft.theme.was && t.updatedAt !== draft.theme.was) notes.push('The theme was saved again since - keeping yours puts your older changes over it once you Save.');
+    }
+    if (draft?.css != null && draft.cssWas != null && cssNow != null && cssNow !== draft.cssWas) {
+        notes.push('content/custom.css has changed since - keeping yours replaces the newer file once you Save.');
+    }
+    return notes.join(' ');
+}
+
+/**
+ * The question asked when a kept draft is offered back: OK throws it away,
+ * Cancel and Escape keep it (restore). Plain text - the caller escapes it.
+ * @param {object} draft - {theme?: {id, label}, css?}
+ * @param {string} [note] - staleNote()
+ */
+export function restoreQuestion(draft, note = '') {
+    const parts = [];
+    if (draft?.theme) parts.push(draft.theme.id ? `the theme "${draft.theme.label || draft.theme.id}"` : 'a new theme');
+    if (draft?.css != null) parts.push('the Custom CSS');
+    return `Throw away the changes you left unsaved to ${parts.join(' and ') || 'this screen'}?${note ? ` ${note}` : ''}`;
+}
+
+/** The answers that go with restoreQuestion: OK throws away, Cancel (and Escape) keeps. */
+export const RESTORE_ANSWERS = Object.freeze({confirmText: 'Throw away', cancelText: 'Keep them'});
+
+/**
+ * Where the kept draft lives: per signed-in person, so a shared browser never
+ * offers one person's work to another. No one signed in: null - keep nothing.
+ */
+export function draftKeyFor(uid) {
+    return uid ? `theme-roller.drafts.${uid}` : null;
+}
+
+/** The pre-1.2.1 key, shared by everyone on the browser - removed when found, never read. */
+export const OLD_DRAFT_KEY = 'theme-roller.draft';

package/plugins/theme-roller/admin/templates/theme-roller.html

@@ -0,0 +1,73 @@
+<!-- Theme Roller. Bound with M.applyBindings - see admin/views/theme-roller-view.js, which also
+     inserts the row template (the router renders a templateUrl through _.render, eating any {{…}}). -->
+<div class="trx">
+    <p class="trx-alert" data-bind-hidden="supported.value">
+        <span data-icon="alert-triangle" data-icon-size="16"></span>
+        This CMS cannot use custom themes yet - it needs Domma CMS 0.73 or later. Themes still save here.
+    </p>
+
+    <div class="tabs trx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Roller</button>
+            <button type="button" class="tab-item">Saved themes <span class="trx-count" data-bind-text="themes.value.length"></span></button>
+            <button type="button" class="tab-item">Custom CSS</button>
+        </div>
+
+        <!-- Roller -->
+        <div class="tab-panel active">
+            <div class="trx-bar">
+                <div class="trx-editing">
+                    <strong data-bind-text="editingLabel.value">New theme</strong>
+                    <small data-bind-text="editingMeta.value"></small>
+                    <span class="trx-chip is-dirty" data-bind-hidden="!dirty.value" title="Changes not saved yet">Unsaved</span>
+                    <span class="trx-chips" data-bind-hidden="!editingUsage.value.length">
+                        <span class="trx-chip" data-bind-text="editingUsageText.value"></span>
+                    </span>
+                </div>
+                <div class="trx-actions">
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="newTheme" title="Start a new theme">
+                        <span data-icon="plus" data-icon-size="14"></span> New</button>
+                    <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">
+                        <span data-icon="save" data-icon-size="14"></span> <span data-bind-text="saveText.value">Save</span></button>
+                    <button type="button" class="btn btn-sm btn-outline" data-on-click="saveAs" data-bind-hidden="!editingId.value" title="Save these settings as a new theme">
+                        Save as…</button>
+                    <button type="button" class="btn btn-sm btn-ghost trx-more" data-bind-hidden="!editingId.value" aria-label="More for this theme" title="More">⋮</button>
+                    <span data-help-title="Theme Roller" data-help="Pick a base theme in the roller, change any colour, font, spacing or border, and Save. A saved theme can be used on the site or in the admin - from here (⋮, or right-click it under Saved themes) or from Content › Theme, where it is listed with the built-in themes. Only what you change is stored; everything else comes from the base."></span>
+                </div>
+            </div>
+            <div class="trx-roller"></div>
+        </div>
+
+        <!-- Saved themes -->
+        <div class="tab-panel">
+            <div class="trx-card">
+                <div class="trx-card-title">Saved themes
+                    <span data-help-title="Saved themes" data-help="Click a theme to edit it in the roller. Right-click it (or ⋮, or Shift+F10) to use it on the site or in the admin, stop using it, duplicate, rename, export its CSS or delete it. Deleting a theme that is in use puts each place back on its base theme."></span></div>
+                <div class="trx-toolbar" hidden data-bind-hidden="loading.value || !themes.value.length">
+                    <div class="trx-seg" role="group" aria-label="Which themes">
+                        <button type="button" data-on-click="s_all" data-bind-class="show.value === 'all' && 'is-on'">All <small data-bind-text="counts.value.all"></small></button>
+                        <button type="button" data-on-click="s_used" data-bind-class="show.value === 'used' && 'is-on'">In use <small data-bind-text="counts.value.used"></small></button>
+                        <button type="button" data-on-click="s_unused" data-bind-class="show.value === 'unused' && 'is-on'">Not in use <small data-bind-text="counts.value.unused"></small></button>
+                    </div>
+                    <input type="search" class="form-input trx-search" placeholder="Name, base theme…" aria-label="Search saved themes" data-model="query.value">
+                </div>
+                <div class="trx-note trx-loading dm-loading-slot" data-bind-hidden="!loading.value">Loading…</div>
+                <p class="trx-note" hidden data-bind-hidden="loading.value || rows.value.length" data-bind-text="emptyText.value"></p>
+                <div class="trx-list" data-each="rows.value key=id"></div>
+            </div>
+        </div>
+
+        <!-- Custom CSS -->
+        <div class="tab-panel">
+            <div class="trx-card">
+                <div class="trx-card-title">Custom CSS
+                    <span data-help-title="Custom CSS" data-help="Hand-written CSS appended to every public page, after the theme - so it has the last word. Ctrl+S saves."></span></div>
+                <textarea class="form-input trx-css" spellcheck="false" placeholder="/* Add your custom CSS here */"></textarea>
+                <div class="trx-css-actions">
+                    <button type="button" class="btn btn-sm btn-primary" data-on-click="saveCss" data-bind-disabled="savingCss.value">
+                        <span data-icon="save" data-icon-size="14"></span> Save CSS</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>