domma-cms 0.54.2 → 0.66.0

package/admin/js/templates/theme.html

@@ -0,0 +1,173 @@
+<div class="page-header">
+    <h1 id="theme-title"><span data-icon="droplet"></span> Theme</h1>
+    <div style="display:flex;gap:.5rem;align-items:center;">
+        <a href="/" target="_blank" rel="noopener" class="btn btn-ghost btn-sm">
+            <span data-icon="external-link"></span> View site
+        </a>
+        <button id="theme-save-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
+    </div>
+</div>
+
+<div id="theme-errors" class="alert alert-danger mb-3" style="display:none;"></div>
+
+<div class="tabs" id="theme-tabs">
+    <div class="tab-list">
+        <button class="tab-item active">Themes</button>
+        <button class="tab-item">Element Overrides</button>
+    </div>
+
+    <!-- ------------------------------------------------------------------ -->
+    <!-- Themes                                                              -->
+    <!-- ------------------------------------------------------------------ -->
+    <div class="tab-panel active">
+        <div class="card mb-4">
+            <div class="card-header"><h2>Site &amp; Admin</h2></div>
+            <div class="card-body">
+                <div class="row mb-3">
+                    <div class="col-6">
+                        <label class="form-label">Front-end Theme</label>
+                        <select id="theme-frontend" class="form-select"></select>
+                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">
+                            Applied to every public page.</p>
+                    </div>
+                    <div class="col-6">
+                        <label class="form-label">Admin Theme</label>
+                        <select id="theme-admin" class="form-select"></select>
+                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">
+                            Applied to this admin panel. Takes effect as soon as you save.</p>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col">
+                        <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                            <input id="theme-auto-enabled" type="checkbox" class="form-check">
+                            Switch automatically between a day and a night theme
+                        </label>
+                        <p id="theme-auto-roller-hint" class="form-hint text-muted"
+                           style="display:none;margin-top:.35rem;font-size:.8rem;">
+                            Custom themes (Theme Roller) do not support auto-switching.</p>
+                    </div>
+                </div>
+                <div id="theme-auto-fields" class="row mt-3" style="display:none;">
+                    <div class="col-6">
+                        <label class="form-label">Day Theme</label>
+                        <select id="theme-day" class="form-select"></select>
+                    </div>
+                    <div class="col-6">
+                        <label class="form-label">Night Theme</label>
+                        <select id="theme-night" class="form-select"></select>
+                    </div>
+                    <div class="col-3 mt-3">
+                        <label class="form-label">Day Starts At</label>
+                        <input id="theme-day-start" type="time" class="form-input" value="07:00">
+                    </div>
+                    <div class="col-3 mt-3">
+                        <label class="form-label">Night Starts At</label>
+                        <input id="theme-night-start" type="time" class="form-input" value="19:00">
+                    </div>
+                    <div class="col-12 mt-2">
+                        <p class="form-hint text-muted" style="font-size:.8rem;">Themes switch on each visitor's local
+                            time. They need not be a light/dark pair.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header"><h2>Typography</h2></div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        <label class="form-label">Font Family</label>
+                        <select id="theme-font-family" class="form-select">
+                            <optgroup label="Sans-serif">
+                                <option value="Roboto">Roboto (default)</option>
+                                <option value="Inter">Inter</option>
+                                <option value="Open Sans">Open Sans</option>
+                                <option value="Lato">Lato</option>
+                                <option value="Nunito">Nunito</option>
+                                <option value="Poppins">Poppins</option>
+                                <option value="Source Sans 3">Source Sans 3</option>
+                                <option value="Montserrat">Montserrat</option>
+                                <option value="Raleway">Raleway</option>
+                                <option value="DM Sans">DM Sans</option>
+                                <option value="Work Sans">Work Sans</option>
+                            </optgroup>
+                            <optgroup label="Serif">
+                                <option value="Merriweather">Merriweather</option>
+                                <option value="Playfair Display">Playfair Display</option>
+                                <option value="Lora">Lora</option>
+                                <option value="Roboto Slab">Roboto Slab</option>
+                            </optgroup>
+                            <optgroup label="Dyslexia-friendly">
+                                <option value="Lexend">Lexend</option>
+                                <option value="Atkinson Hyperlegible">Atkinson Hyperlegible</option>
+                                <option value="Andika">Andika</option>
+                            </optgroup>
+                            <optgroup label="System">
+                                <option value="system-ui">System UI (no web font)</option>
+                            </optgroup>
+                        </select>
+                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">Public site body text.
+                            The dyslexia-friendly group uses wider letterforms and spacing.</p>
+                    </div>
+                    <div class="col-3">
+                        <label class="form-label">Font Size</label>
+                        <select id="theme-font-size" class="form-select">
+                            <option value="13">13px - Compact</option>
+                            <option value="14">14px - Small</option>
+                            <option value="15">15px - Slightly small</option>
+                            <option value="16">16px - Default</option>
+                            <option value="17">17px - Slightly large</option>
+                            <option value="18">18px - Large</option>
+                            <option value="20">20px - Extra large</option>
+                        </select>
+                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">Root font size. Every
+                            rem value scales with it.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ------------------------------------------------------------------ -->
+    <!-- Element overrides                                                   -->
+    <!-- ------------------------------------------------------------------ -->
+    <div class="tab-panel">
+        <div class="card mb-4">
+            <div class="card-body">
+                <p class="text-muted" style="margin:0 0 .75rem;">
+                    An override re-themes one region of the page. Give it a CSS selector, then either adopt another
+                    theme wholesale or set individual design tokens. Everything inside that region follows - including
+                    components rendered later - because a Domma theme is nothing but a block of
+                    <code>--dm-*</code> values.
+                </p>
+                <button id="theme-add-override" class="btn btn-ghost btn-sm" type="button">
+                    <span data-icon="plus"></span> Add override
+                </button>
+            </div>
+        </div>
+
+        <div id="theme-overrides"></div>
+        <p id="theme-overrides-empty" class="text-muted" style="text-align:center;padding:2rem 0;">
+            No overrides yet. The whole site uses the front-end theme.
+        </p>
+
+        <div class="card mt-4">
+            <div class="card-header">
+                <h2>Generated CSS</h2>
+                <button id="theme-refresh-css" class="btn btn-ghost btn-sm" type="button">
+                    <span data-icon="refresh-cw"></span> Refresh
+                </button>
+            </div>
+            <div class="card-body">
+                <p class="text-muted" style="margin-top:0;font-size:.85rem;">
+                    Exactly what is injected into every public page, ahead of your custom CSS.
+                </p>
+                <pre id="theme-css-preview" class="p-3"
+                     style="max-height:320px;overflow:auto;background:var(--dm-surface-raised);border-radius:var(--dm-radius-md);font-size:.8rem;margin:0;">(nothing yet)</pre>
+            </div>
+        </div>
+    </div>
+</div>

package/admin/js/views/context-menu-editor.js

@@ -0,0 +1,55 @@
+import{api as v}from"../api.js";import{makeIconInput as B}from"/admin/js/lib/shortcode-modal.js";import{makePageInput as L}from"/admin/js/lib/page-picker.js";const C=[{label:"This page",actions:{navigate:"Go to a URL",reload:"Reload the page",back:"Back",forward:"Forward",print:"Print","copy-link":"Copy link to this view","site-search":"Open site search"}},{label:"Clipboard and selection",actions:{copy:"Copy the selection",cut:"Cut",paste:"Paste","select-all":"Select all"}},{label:"Collection displays",actions:{filter:"Filter the display",search:"Search this display",sort:"Sort the display",export:"Export the display","mark-as-spam":"Mark as spam"}},{label:"This site",actions:{"open-modal":"Open a block in a modal","run-action":"Run an Action"}}],q=Object.assign({},...C.map(c=>c.actions)),I={back:"greys out when there is no history behind the page",forward:"greys out unless you have gone back",copy:"greys out with nothing selected",cut:"greys out outside an editable field, or with nothing selected",paste:"greys out outside an editable field","site-search":"greys out on a site where search is unavailable",search:"greys out unless the click lands in a collection display",filter:"greys out unless the click lands in a collection display",sort:"greys out unless the click lands in a collection display",export:"greys out unless the click lands in a collection display"},M={"mark-as-spam":"needs a right-click on an entry inside a collection display"},O={navigate:{key:"url",label:"URL",placeholder:"/shop"},"run-action":{key:"slug",label:"Action slug",placeholder:"archive-entry"},"open-modal":{key:"block",label:"Block name",placeholder:"contact-card"},export:{key:"format",label:"Format",placeholder:"csv"},sort:{key:"field",label:"Field",placeholder:"price"},filter:{key:"field",label:"Field",placeholder:"category"},"mark-as-spam":{key:"field",label:"Flag field (optional)",placeholder:"spam"}};function d(c){return String(c??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function R(c){return String(c||"").toLowerCase().trim().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"").slice(0,64)}let g=null;function b(){if(g){try{g.destroy()}catch{}g=null}const c=document.getElementById("ctx-preview");if(c&&E.contextMenu&&E.contextMenu.registry)for(const m of E.contextMenu.registry(c))try{m.destroy()}catch{}}function j(c){return String(c||"").split(",").map(m=>m.trim()).filter(Boolean)}export const contextMenuEditorView={templateUrl:"/admin/js/templates/context-menu-editor.html",async onMount(c){E.tabs&&E.tabs(c.find("#ctx-tabs").get(0)),b();const m=location.hash.match(/^#\/context-menus\/edit\/([^?#]+)/),y=m?decodeURIComponent(m[1]):null,x=!y;let a=[];if(!x)try{const t=await v.contextMenus.get(y);document.getElementById("ctx-title").textContent=`Edit: ${t.name||t.slug}`,$("#ctx-name").val(t.name||""),$("#ctx-slug").val(t.slug).prop("disabled",!0),$("#ctx-selector").val(t.target?.selector||""),$("#ctx-match").val(t.target?.match||""),$("#ctx-exclude").val(t.target?.exclude||""),$("#ctx-inherit").val(String(t.inherit===!1?"false":t.inherit||"append")),$("#ctx-enabled").prop("checked",t.enabled!==!1),$("#ctx-accent").val(t.theme?.accent||""),$("#ctx-transition").val(t.theme?.transition||""),$("#ctx-density").val(t.theme?.density||""),$("#ctx-radius").val(t.theme?.radius||""),$("#ctx-shadow").val(t.theme?.shadow||""),$("#ctx-opacity").val(t.theme?.opacity??""),$("#ctx-pages").val((t.binding?.pages||[]).join(", ")),$("#ctx-projects").val((t.binding?.projects||[]).join(", ")),a=Array.isArray(t.items)?t.items:[]}catch(t){E.toast(`Could not load "${y}": ${t.message||t}`,{type:"error"});return}let f=!x;$("#ctx-slug").on("input",()=>{f=!0}),$("#ctx-name").on("input",function(){f||$("#ctx-slug").val(R(this.value))});function u(){const t=document.getElementById("ctx-items"),s=document.getElementById("ctx-items-empty");s.style.display=a.length?"none":"",t.replaceChildren(),a.forEach((e,i)=>{const n=e.type||"item",o=O[e.action?.type],r=document.createElement("div");r.className="card mb-2",r.innerHTML=`
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-4">
+                                <label class="form-label">Type</label>
+                                <select class="form-select ctx-item-type" data-i="${i}">
+                                    <option value="item"${n==="item"?" selected":""}>Item</option>
+                                    <option value="divider"${n==="divider"?" selected":""}>Divider</option>
+                                    <option value="header"${n==="header"?" selected":""}>Heading</option>
+                                </select>
+                            </div>
+                            ${n==="divider"?"":`
+                            <div class="col-8">
+                                <label class="form-label">Text</label>
+                                <input class="form-input ctx-item-text" data-i="${i}" type="text" value="${d(e.text)}">
+                            </div>`}
+                        </div>
+                        ${n==="item"?`
+                        <div class="row mt-2">
+                            <div class="col-4">
+                                <label class="form-label">Icon</label>
+                                <div class="ctx-icon-slot" data-i="${i}"></div>
+                            </div>
+                            <div class="col-4">
+                                <label class="form-label">Does</label>
+                                <select class="form-select ctx-item-action" data-i="${i}">
+                                    ${C.map(l=>`
+                                    <optgroup label="${d(l.label)}">
+                                        ${Object.entries(l.actions).map(([S,T])=>`<option value="${S}"${e.action?.type===S?" selected":""}>${d(T)}</option>`).join("")}
+                                    </optgroup>`).join("")}
+                                </select>
+                                ${I[e.action?.type]?`<small class="text-muted">${d(I[e.action.type])}</small>`:""}
+                                ${M[e.action?.type]?`<small class="text-muted">${d(M[e.action.type])}</small>`:""}
+                            </div>
+                            ${o?`
+                            <div class="col-4">
+                                <label class="form-label">${d(o.label)}</label>
+                                ${o.key==="url"?`<div class="ctx-url-slot" data-i="${i}"></div>`:`<input class="form-input ctx-item-arg" data-i="${i}" data-key="${o.key}"
+                                       type="text" value="${d(e.action?.[o.key])}" placeholder="${d(o.placeholder)}">`}
+                            </div>`:""}
+                        </div>
+                        <div class="row mt-2">
+                            <div class="col-6">
+                                <label class="form-check">
+                                    <input type="checkbox" class="ctx-item-danger" data-i="${i}"${e.danger?" checked":""}>
+                                    Destructive (red)
+                                </label>
+                            </div>
+                        </div>`:""}
+                        <div class="mt-2 text-right">
+                            <button class="btn btn-sm btn-ghost ctx-item-up" data-i="${i}" ${i===0?"disabled":""}>Up</button>
+                            <button class="btn btn-sm btn-ghost ctx-item-down" data-i="${i}" ${i===a.length-1?"disabled":""}>Down</button>
+                            <button class="btn btn-sm btn-ghost ctx-item-remove" data-i="${i}">Remove</button>
+                        </div>
+                    </div>`;const w=r.querySelector(".ctx-icon-slot");if(w){const l=B("edit",e.icon||"");l.input.className+=" ctx-item-icon",l.input.dataset.i=String(i),w.appendChild(l.el)}const N=r.querySelector(".ctx-url-slot");if(N){const l=L(o.placeholder,e.action?.url||"");l.input.className+=" ctx-item-arg",l.input.dataset.i=String(i),l.input.dataset.key="url",N.appendChild(l.el)}t.appendChild(r)}),Domma.icons.scan("#ctx-items"),p()}c.on("change",".ctx-item-type",function(){const t=Number(this.dataset.i);a[t].type=this.value,this.value!=="item"?delete a[t].action:a[t].action||(a[t].action={type:"navigate"}),u()}),c.on("input",".ctx-item-text",function(){a[Number(this.dataset.i)].text=this.value,p()}),c.on("input",".ctx-item-icon",function(){a[Number(this.dataset.i)].icon=this.value,p()}),c.on("change",".ctx-item-action",function(){const t=Number(this.dataset.i);a[t].action={type:this.value},u()}),c.on("input",".ctx-item-arg",function(){const t=Number(this.dataset.i);a[t].action=a[t].action||{},a[t].action[this.dataset.key]=this.value,p()}),c.on("change",".ctx-item-danger",function(){a[Number(this.dataset.i)].danger=this.checked,p()}),c.on("click",".ctx-item-remove",function(){a.splice(Number(this.dataset.i),1),u()}),c.on("click",".ctx-item-up",function(){const t=Number(this.dataset.i);[a[t-1],a[t]]=[a[t],a[t-1]],u()}),c.on("click",".ctx-item-down",function(){const t=Number(this.dataset.i);[a[t+1],a[t]]=[a[t],a[t+1]],u()}),$("#ctx-add-item").on("click",()=>{a.push({type:"item",text:"New item",action:{type:"navigate",url:""}}),u()});function k(){const t={},s=$("#ctx-accent").val(),e=$("#ctx-transition").val(),i=$("#ctx-density").val(),n=$("#ctx-radius").val(),o=$("#ctx-shadow").val(),r=$("#ctx-opacity").val();return s&&(t.accent=s),e&&(t.transition=e),i&&(t.density=i),n&&(t.radius=n),o&&(t.shadow=o),r!==""&&r!=null&&(t.opacity=Number(r)),t}function A(){const t=$("#ctx-inherit").val(),s=j($("#ctx-pages").val()),e=j($("#ctx-projects").val()),i={slug:$("#ctx-slug").val().trim(),name:$("#ctx-name").val().trim(),enabled:$("#ctx-enabled").is(":checked"),target:{selector:$("#ctx-selector").val().trim(),match:$("#ctx-match").val().trim(),exclude:$("#ctx-exclude").val().trim()},inherit:t==="false"?!1:t,items:a},n=k();return Object.keys(n).length&&(i.theme=n),(s.length||e.length)&&(i.binding={},s.length&&(i.binding.pages=s),e.length&&(i.binding.projects=e)),i}E.tooltip&&E.tooltip(".ctx-help",{trigger:"click",position:"right"});function p(){b();const t=a.map(e=>{const i=e.type||"item";return i==="divider"?{type:"divider"}:i==="header"?{type:"header",header:e.text||""}:{label:e.text||"(no text)",icon:e.icon||void 0,danger:!!e.danger}});if(!t.some(e=>e.label))return;const s=k();g=E.contextMenu("#ctx-preview",{items:t,inherit:!1,accent:s.accent,transition:s.transition,density:s.density,radius:s.radius,shadow:s.shadow,opacity:s.opacity})}c.on("change","#ctx-accent, #ctx-transition, #ctx-density, #ctx-radius, #ctx-shadow",p),c.on("input","#ctx-opacity",p);function h(t){const s=document.getElementById("ctx-errors");if(!t){s.style.display="none";return}s.style.display="",s.innerHTML=String(t).split("; ").map(e=>`<div>${d(e)}</div>`).join(""),s.scrollIntoView({behavior:"smooth",block:"nearest"})}$("#ctx-save").on("click",async function(){h(null);const t=A();if(!t.slug)return h("Slug is required");if(!t.name)return h("Name is required");if(!t.target.selector)return h("Container selector is required");this.disabled=!0;try{x?(await v.contextMenus.create(t),E.toast("Context menu created.",{type:"success"}),location.hash="#/context-menus"):(await v.contextMenus.update(y,t),E.toast("Context menu saved.",{type:"success"}))}catch(s){h(s.message||String(s))}finally{this.disabled=!1}}),u(),Domma.icons.scan(c.get(0))},onUnmount(){E.contextMenu&&E.contextMenu.closeAll&&E.contextMenu.closeAll(),b()}};

package/admin/js/views/context-menus.js

@@ -0,0 +1,5 @@
+import{api as l}from"../api.js";import{filterByProject as u,getProjectFromHash as g}from"../lib/project-context.js";import{keepTableIconsAlive as m}from"../lib/table-icons.js";function o(s){return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}export const contextMenusView={templateUrl:"/admin/js/templates/context-menus.html",async onMount(s){const r=E.loader(s.get(0),{type:"dots"});let c;try{c=await l.contextMenus.list().catch(()=>[])}finally{r.destroy()}const i=g(),d=i?u(c,i):c;T.create("#context-menus-table",{pageSize:25,data:d,emptyMessage:'No context menus yet. Click "New context menu" to create one.',columns:[{key:"slug",title:"Slug",sortable:!0,render:e=>`<code>${o(e)}</code>`},{key:"name",title:"Name",sortable:!0,render:(e,t)=>`<a href="#/context-menus/edit/${encodeURIComponent(t.slug)}" style="font-weight:600;">${o(e||t.slug)}</a>`},{key:"selector",title:"Binds to",render:(e,t)=>{const n=t.selector?`<code>${o(t.selector)}</code>`:'<span class="text-muted">-</span>',a=t.match?` &rarr; <code>${o(t.match)}</code>`:"";return n+a}},{key:"itemsCount",title:"Items",render:(e,t)=>String(t.itemsCount??0)},{key:"binding",title:"Scope",render:(e,t)=>{const n=t.binding;if(!n)return'<span class="badge badge-secondary">site-wide</span>';const a=[...(n.projects||[]).map(p=>`project:${p}`),...n.pages||[]];return a.length?`<span class="badge badge-info" data-tooltip="${o(a.join(", "))}">${a.length} rule${a.length===1?"":"s"}</span>`:'<span class="badge badge-warning" data-tooltip="Binding matches nothing, so this menu never appears">never matches</span>'}},{key:"enabled",title:"Enabled",render:(e,t)=>t.enabled===!1?'<span class="badge badge-secondary">off</span>':'<span class="badge badge-success">on</span>'},{key:"_actions",title:"Actions",render:(e,t)=>{const n=o(t.slug);return`
+                            <a class="btn btn-sm btn-ghost" href="#/context-menus/edit/${encodeURIComponent(t.slug)}" data-tooltip="Edit"><span data-icon="edit" data-icon-size="14"></span></a>
+                            <button class="btn btn-sm btn-ghost btn-duplicate" data-slug="${n}" data-tooltip="Duplicate"><span data-icon="copy" data-icon-size="14"></span></button>
+                            <button class="btn btn-sm btn-ghost btn-delete" data-slug="${n}" data-tooltip="Delete"><span data-icon="trash" data-icon-size="14"></span></button>
+                        `}}]}),Domma.icons.scan("#context-menus-table"),m(s.get(0)),document.querySelectorAll("#context-menus-table [data-tooltip]").forEach(e=>{E.tooltip(e,{content:e.getAttribute("data-tooltip"),position:"top"})}),s.off("click",".btn-duplicate").on("click",".btn-duplicate",async function(){const e=$(this).data("slug");try{const t=await l.contextMenus.duplicate(e);E.toast(`Duplicated as "${t.slug}".`,{type:"success"}),location.reload()}catch(t){E.toast(`Duplicate failed: ${t.message||t}`,{type:"error"})}}),s.off("click",".btn-delete").on("click",".btn-delete",async function(){const e=$(this).data("slug");if(await E.confirm(`Delete context menu "${e}"? This cannot be undone.`))try{await l.contextMenus.remove(e),E.toast("Context menu deleted.",{type:"success"}),location.reload()}catch(n){E.toast(`Delete failed: ${n.message||n}`,{type:"error"})}})}};