domma-cms 1.6.14 → 1.6.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/admin/js/app.js +1 -1
- package/admin/js/lib/effect-defs.js +1 -1
- package/admin/js/lib/layouts-arrange.js +1 -1
- package/admin/js/lib/project-page-arrange.js +1 -1
- package/admin/js/lib/scribe-composer.js +1 -4
- package/admin/js/lib/scribe-model.js +4 -0
- package/admin/js/lib/shortcode-registry.js +1 -1
- package/admin/js/lib/sidebar-grouping.js +1 -1
- package/admin/js/lib/sidebar-renderer.js +2 -2
- package/admin/js/templates/docs/usage-navigation.html +4 -2
- package/admin/js/templates/layouts.html +7 -1
- package/admin/js/views/layouts.js +57 -15
- package/package.json +1 -1
- package/public/css/site.css +1 -1
- package/public/js/site.js +1 -1
- package/server/routes/api/layouts.js +3 -0
- package/server/services/markdown.js +33 -6
- package/server/services/pageContents.js +122 -0
- package/server/services/permissionRegistry.js +1 -1
- package/server/services/renderer.js +14 -2
- package/server/services/sidebar-migration.js +14 -1
- package/server/templates/page.html +14 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{api as g,getUser as L}from"../api.js";import{isPathAllowed as ue}from"./admin-scope.js";import{colourToCss as V,applyFloat as fe,applyHighlight as me,itemHighlightAttrs as pe}from"/public/js/menu-decor.mjs?v=20261009-hover-darken";import{placeTools as he,ensureLockedTools as ge,managePluginsItem as be,stripItemByUrl as ye,insertFoldersBeforeSystem as ve,pruneEmptyToolsFolder as xe,sidebarStateKey as X,canAny as O,filterByPermission as $e,MANAGE_PLUGINS_URL as Z}from"./sidebar-grouping.js";import{arrangeButtonMarkup as we,canArrange as ke,startArrange as Se}from"./sidebar-arrange.js";import{collapseButtonMarkup as qe,wireSidebarSize as Ce,COLLAPSED_WIDTH as Ae}from"./sidebar-size.js";import{FREQUENT_MAX as Y,addFrequent as Fe,frequentFolder as Le,moveFrequent as J,readFrequent as z,readFrequentHidden as Ee,removeFrequent as Te,saveFrequent as
|
|
1
|
+
import{api as g,getUser as L}from"../api.js";import{isPathAllowed as ue}from"./admin-scope.js";import{colourToCss as V,applyFloat as fe,applyHighlight as me,itemHighlightAttrs as pe}from"/public/js/menu-decor.mjs?v=20261009-hover-darken";import{placeTools as he,ensureLockedTools as ge,managePluginsItem as be,stripItemByUrl as ye,insertFoldersBeforeSystem as ve,pruneEmptyToolsFolder as xe,sidebarStateKey as X,canAny as O,filterByPermission as $e,MANAGE_PLUGINS_URL as Z}from"./sidebar-grouping.js";import{arrangeButtonMarkup as we,canArrange as ke,startArrange as Se}from"./sidebar-arrange.js";import{collapseButtonMarkup as qe,wireSidebarSize as Ce,COLLAPSED_WIDTH as Ae}from"./sidebar-size.js";import{FREQUENT_MAX as Y,addFrequent as Fe,frequentFolder as Le,moveFrequent as J,readFrequent as z,readFrequentHidden as Ee,removeFrequent as Te,saveFrequent as He,syncFrequent as Me,writeFrequent as Ne,writeFrequentHidden as Q}from"./sidebar-frequent.js";import{hotkeyFor as ee,hotkeyTitle as je,setHotkeyTree as Be}from"./hotkeys-ui.js";import{hotkeyLabel as Pe}from"./hotkeys.js";function m(e){return String(e??"").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}const Re=[{text:"Dashboard",url:"#/",icon:"home"},{text:"Site menus",url:"#/menus",icon:"menu",permission:"menus"}];async function _e(e){if(!O(e,"projects"))return[];let n=[];try{n=await g.projects.listWithCounts()}catch{return[]}if(!Array.isArray(n))return[];const s=[{key:"pages",text:"Pages",icon:"file-text",path:"/pages"},{key:"collections",text:"Collections",icon:"database",path:"/collections"},{key:"forms",text:"Forms",icon:"layout",path:"/forms"},{key:"actions",text:"Actions",icon:"zap",path:"/actions"},{key:"menus",text:"Site menus",icon:"menu",path:"/menus"},{key:"blocks",text:"Blocks",icon:"box",path:"/blocks"},{key:"components",text:"Components",icon:"component",path:"/components"},{key:"views",text:"Views",icon:"eye",path:"/views"},{key:"roles",text:"Roles",icon:"shield",path:"/roles"},{key:"users",text:"Users",icon:"users",path:"/users"},{key:"apis",text:"APIs",icon:"code",path:"/apis"}];return n.map(t=>{const o="#/projects/"+encodeURIComponent(t.slug),a=t.counts||{},d=[{text:"Overview",url:o,icon:t.icon||"folder"}];for(const c of s){const r=Number(a[c.key])||0;r<=0||d.push({text:`${c.text} (${r})`,url:o+c.path,icon:c.icon})}d.push({text:"Settings",url:o+"/settings",icon:"settings"});const u=t.enabled===!1;return{text:t.name||t.slug,key:`project.${t.slug}`,icon:t.icon||"folder",items:d,...u&&{colour:"neutral",badge:{text:"off"}}}})}function Ie(e,n){for(const s of e)if(!s.hidden&&(s.key==="projects"||!s.key&&(s.text||"").toLowerCase()==="projects")){s.items=Array.isArray(s.items)?s.items.slice():[],s.items.push(...n);return}}function te(e,n){const s=se.includes(n.tone)?n.tone:"info",t=n.label||String(n.count);n.details?j.set(e,n.details):j.delete(e);const i=!n.inventory&&A.some(o=>o.url===e&&!o.inventory)?" data-live":"";return`<span class="sidebar-badge sidebar-badge--${s}" data-count-for="${m(e)}"${i} data-badge-label="${m(t)}" aria-label="${m(t)}">${m(String(n.count))}</span>`}function ne(e){for(const n of e.querySelectorAll("details")){const s=n.querySelector(":scope > summary");if(!s)continue;let t=0,i=!1;const o=[];for(const r of n.querySelectorAll(":scope > .sidebar-children .sidebar-badge[data-live]")){const f=Number(r.textContent)||0;f&&(t+=f,i||(i=r.classList.contains("sidebar-badge--danger")),o.push({text:r.closest("a")?.querySelector(".sidebar-text")?.textContent.trim()??"",meta:r.dataset.badgeLabel,tone:r.classList.contains("sidebar-badge--danger")?"danger":void 0}))}const a=`folder:${n.dataset.stateKey||s.textContent.trim()}`;let d=s.querySelector(":scope > .sidebar-badge--sum");if(!t){d?.remove(),j.delete(a);continue}d||(d=document.createElement("span"),s.querySelector(".sidebar-text")?.after(d));const u=s.querySelector(".sidebar-text")?.textContent.trim()||"This folder",c=o.map(r=>`${r.text}: ${r.meta}`).join(" \xB7 ");d.className=`sidebar-badge sidebar-badge--sum sidebar-badge--${i?"danger":"info"}`,d.dataset.countFor=a,d.dataset.badgeLabel=c,d.setAttribute("aria-label",c),d.textContent=String(t),j.set(a,{title:u,items:o})}}const j=new Map;function Oe(e,n){if(!e.url||!n)return"";const s=n[e.url];return!s||!(s.count>0)&&!s.showZero?"":te(e.url,s)}const se=["info","attention","danger","live"],Ue={"#/pages":["page","pages"],"#/media":["file in the media library","files in the media library"],"#/menus":["menu","menus"],"#/context-menus":["context menu","context menus"],"#/theme":["element override in the theme","element overrides in the theme"],"#/collections":["collection","collections"],"#/forms":["form","forms"],"#/views":["view","views"],"#/actions":["action","actions"],"#/blocks":["block","blocks"],"#/components":["component","components"],"#/users":["user","users"],"#/plugins":["plugin installed","plugins installed"],"#/system/notifications":["unread notification","unread notifications"]};function W(e,{fallbackLabel:n="",tone:s="info"}={}){const t=Number(typeof e=="object"&&e!==null?e.count:e);if(!Number.isFinite(t)||t<0)return null;const i=typeof e?.label=="string"&&e.label||(n?`${t} - ${n}`:String(t)),o={count:Math.round(t),label:i,tone:se.includes(e?.tone)?e.tone:s};return e?.details&&typeof e.details=="object"&&(o.details=e.details),e?.inventory===!0&&(o.inventory=!0),e?.showZero===!0&&(o.showZero=!0),o}function oe(e,n,s=null,{inFrequent:t=!1}={}){if(e&&e.type==="separator")return'<hr class="sidebar-divider">';if(e&&e.type==="theme-switcher")return"";if(e&&e.type==="spacer"){const y=["xs","sm","md","lg","xl","flex"].includes(e.size)?e.size:"md";return`<div class="sidebar-spacer sidebar-spacer--${m(y)}" aria-hidden="true"></div>`}const i=String(e.text||"?").trim().charAt(0).toUpperCase()||"?",o=e.icon?`<span data-icon="${m(e.icon)}"></span>`:`<span class="sidebar-initial" aria-hidden="true">${m(i)}</span>`,a=m(e.text||""),d=e.url?m(e.url):"",u=Array.isArray(e.items)&&e.items.length>0,c=e.colour?V(e.colour):"",r=pe(e),f=[r.hover&&` data-menu-item-hover="${m(r.hover)}"`,r.active&&` data-menu-item-active="${m(r.active)}"`].filter(Boolean).join(""),x=[c&&`color:${m(c)}`,r.accent&&`--dm-menu-highlight:${m(r.accent)}`].filter(Boolean).join(";"),w=x?` style="${x}"`:"",k=e.url?je(e.url,e.text||"",{inFrequent:t}):"",q=k?` title="${m(k)}"`:"";let F="";if(e.badge&&e.badge.text!=null&&e.badge.text!==""){const y=e.badge.variant?V(e.badge.variant):"";F=`<span class="dm-menu-badge"${y?` style="background:${m(y)};color:var(--dm-text-inverse,#fff)"`:""}>${m(String(e.badge.text))}</span>`}if(e.frequent&&e.empty){const y=X(e,s),C=S.get(y)!==!1;return`<details data-state-key="${m(y)}"${C?" open":""} data-frequent data-frequent-empty>
|
|
2
2
|
<summary${w}>${o} <span class="sidebar-text">${a}</span></summary>
|
|
3
3
|
<div class="sidebar-children"><p class="sidebar-frequent-empty">Right-click any Tool and choose <strong>Add to Frequent</strong> to keep it here.</p></div>
|
|
4
4
|
</details>`}if(u){const y=X(e,s),C=S.get(y)!==!1,B=e.items.map(T=>oe(T,n,y,{inFrequent:!!e.frequent})).join(""),P=e.frequent?' data-frequent title="Your Frequent Tools - right-click any Tool to add or remove it"':"";return`<details data-state-key="${m(y)}"${C?" open":""}${P}>
|
|
5
5
|
<summary${w}${q}>${o} <span class="sidebar-text">${a}</span>${F}</summary>
|
|
6
6
|
<div class="sidebar-children">${B}</div>
|
|
7
|
-
</details>`}return`<a href="${d}" class="sidebar-link" data-url="${d}"${w}${f}${q}>${o} <span class="sidebar-text">${a}</span>${Oe(e,n)}${F}</a>`}async function ze(e=[],n=[],s=null){const t=p=>p.then(b=>Array.isArray(b)?b.length:Array.isArray(b?.entries)?b.entries.length:0).catch(()=>0);A=Ge(e,s);const i=new Set(A.map(p=>p.url)),o={pages:"#/pages",media:"#/media",menus:"#/menus","context-menus":"#/context-menus",theme:"#/theme",collections:"#/collections",forms:"#/forms",views:"#/views",actions:"#/actions",blocks:"#/blocks",components:"#/components",users:"#/users",plugins:"#/plugins",notifications:"#/system/notifications"},a=(p,b)=>O(n,p)&&!i.has(o[p])?b():Promise.resolve(0),[d,u,c,r,f,x,w,k,q,F,y,C,B,P]=await Promise.all([a("pages",()=>t(g.pages.list())),a("media",()=>t(g.media.list())),a("menus",()=>t(g.menus.list())),a("context-menus",()=>t(g.contextMenus.list())),a("theme",()=>g.theme.get().then(p=>(p?.overrides||[]).length).catch(()=>0)),a("collections",()=>t(g.collections.list())),a("forms",()=>t(g.forms.list())),a("views",()=>t(g.views.list())),a("actions",()=>t(g.actions.list())),a("blocks",()=>t(g.blocks.list())),a("components",()=>t(g.components.list())),a("users",()=>t(g.users.list())),a("plugins",()=>t(g.plugins.list())),a("notifications",()=>g.system?.notifications?.unreadCount?.().then(p=>p?.count??0).catch(()=>0)??Promise.resolve(0))]),T={};await Promise.all(A.map(async p=>{const b=await ie(p);b&&(T[p.url]=b)}));const U={"#/pages":d,"#/media":u,"#/menus":c,"#/context-menus":r,"#/theme":f,"#/collections":x,"#/forms":w,"#/views":k,"#/actions":q,"#/blocks":F,"#/components":y,"#/users":C,"#/plugins":B,"#/system/notifications":P},R={};for(const[p,b]of Object.entries(U)){if(i.has(p))continue;const[I,l]=Ue[p]??["item","items"],v=W(b);v&&(R[p]={...v,label:`${v.count} ${v.count===1?I:l}`})}return{...R,...T}}let A=[];const We="dm:sidebar-count",De=6e4;function Ge(e=[],n=null){const s=[],t=i=>{if(i&&!(n&&typeof i.url=="string"&&i.url.startsWith("#/")&&!ue(n,i.url.slice(1)))){i.url&&typeof i.countUrl=="string"&&i.countUrl&&s.push({url:i.url,countUrl:i.countUrl,text:i.text||"",countLabel:i.countLabel||"",inventory:i.inventory===!0});for(const o of[...i.children||[],...i.items||[]])t(o)}};for(const i of e??[])t(i?.item??i);return s}async function ie(e){try{const n=new Date,s=`${n.getFullYear()}-${String(n.getMonth()+1).padStart(2,"0")}-${String(n.getDate()).padStart(2,"0")}`,t=e.countUrl+(e.countUrl.includes("?")?"&":"?")+`today=${s}`;return W(await H.get(t),{fallbackLabel:e.countLabel||e.text})}catch{return null}}function ae(e,n,s){const t=[...e.querySelectorAll("a.sidebar-link")].filter(i=>i.dataset.url===n);if(t.length){for(const i of t){const o=i.querySelector(".sidebar-badge[data-count-for]");if(!s||!(s.count>0)&&!s.showZero)o?.remove();else{const a=document.createRange();a.selectNodeContents(i);const d=a.createContextualFragment(te(n,s)).firstElementChild;o?o.replaceWith(d):i.querySelector(".sidebar-text")?.after(d)}}D.set(n,s),ne(e)}}const D=new Map;async function G(e,n=null){const s=n?A.filter(t=>t.url===n):A;await Promise.all(s.map(async t=>{const i=await ie(t),o=D.get(t.url);JSON.stringify(o??null)!==JSON.stringify(i)&&ae(e,t.url,i)}))}function Ke(e){e.dataset.liveCounts||(e.dataset.liveCounts="1",window.addEventListener(We,n=>{const s=n.detail||{};if(s.url)if(s.count!==void 0){const t=A.find(i=>i.url===s.url);ae(e,s.url,W(s,{fallbackLabel:t?.countLabel||t?.text||""}))}else G(e,s.url)}),setInterval(()=>{!document.hidden&&document.body.contains(e)&&G(e)},De),document.addEventListener("visibilitychange",()=>{document.hidden||G(e)}),Ve(e))}function re(e,n,s){const t=(a,d,u)=>{const c=document.createElement(a);return d&&(c.className=d),u!=null&&(c.textContent=String(u)),c};if(!s){e.textContent=n;return}e.appendChild(t("strong","dm-badge-pop-title",s.title||n)),(s.rows?.length||!s.items?.length)&&e.appendChild(t("p","dm-badge-pop-sub",n));const i=Array.isArray(s.rows)?s.rows.slice(0,6):[];if(i.length){const a=t("dl","dm-badge-pop-rows");for(const d of i)a.appendChild(t("dt",null,d.label)),a.appendChild(t("dd",d.tone==="danger"?"is-danger":null,d.value));e.appendChild(a)}const o=Array.isArray(s.items)?s.items.slice(0,6):[];if(o.length){const a=t("ul","dm-badge-pop-items");for(const d of o){const u=t("li",d.tone==="danger"?"is-danger":null);u.appendChild(t("span","dm-badge-pop-text",d.text)),d.meta&&u.appendChild(t("span","dm-badge-pop-meta",d.meta)),a.appendChild(u)}e.appendChild(a)}else s.empty&&e.appendChild(t("p","dm-badge-pop-empty",s.empty))}function Ve(e){let n=null,s=null;const t=()=>e.classList.contains("is-collapsed"),i=()=>{clearTimeout(s),n?.remove(),n=null},o=(c,r)=>{i(),s=setTimeout(()=>{n=document.createElement("div"),n.className="dm-help-pop dm-badge-pop",n.setAttribute("role","tooltip"),r(n),document.body.appendChild(n);const f=c.getBoundingClientRect(),x=n.getBoundingClientRect(),w=Math.min(f.right+10,innerWidth-x.width-8);n.style.left=`${Math.max(8,w)}px`,n.style.top=`${Math.max(8,Math.min(f.top+f.height/2-x.height/2,innerHeight-x.height-8))}px`},150)},a=c=>{const r=c?.dataset.badgeLabel;if(!r)return i();o(c,f=>re(f,r,j.get(c.dataset.countFor)))},d=c=>{const r=c.querySelector(":scope > .sidebar-text")?.textContent.trim()||"",f=c.querySelector(":scope > .sidebar-badge[data-badge-label]:not([hidden])");o(c,x=>{const w=f&&j.get(f.dataset.countFor);if(w)return re(x,f.dataset.badgeLabel,{...w,title:w.title||r});if(!f){x.textContent=r;return}const k=document.createElement("strong");k.className="dm-badge-pop-title",k.textContent=r;const q=document.createElement("p");q.className="dm-badge-pop-sub",q.textContent=f.dataset.badgeLabel,x.append(k,q)})},u=c=>{const r=c.closest?.("a.sidebar-link, summary");return r&&e.contains(r)?r:null};e.addEventListener("mouseover",c=>{if(t()){const f=u(c.target);f&&!f.contains(c.relatedTarget)&&d(f);return}const r=c.target.closest?.(".sidebar-badge[data-badge-label]");r&&a(r)}),e.addEventListener("mouseout",c=>{if(t()){const r=u(c.target);r&&!r.contains(c.relatedTarget)&&i();return}c.target.closest?.(".sidebar-badge[data-badge-label]")&&i()}),e.addEventListener("focusin",c=>{const r=c.target.closest?.("a, summary");if(t()&&r&&e.contains(r)&&r.querySelector(":scope > .sidebar-text"))return d(r);const f=r?.querySelector(":scope > .sidebar-badge[data-badge-label]:not([hidden])");f?a(f):i()}),e.addEventListener("focusout",i),e.addEventListener("click",i),window.addEventListener("scroll",i,!0),window.addEventListener("hashchange",i)}async function Xe(e=[]){if(!O(e,"settings"))return"Admin";try{const n=await g.settings.get();return n?.adminBrand?.title||n?.title||"Admin"}catch{return"Admin"}}export async function renderAdminSidebar({mount:e,permissions:n,adminScope:s=null}){const t=$(e).get(0);if(!t)return;const i=He(g,L()).catch(()=>{});let o,a=null,d=null,u=null,c=null,r=null;try{const l=await g.get("/sidebar/menu");o=Array.isArray(l?.items)?l.items:null,a=l?.variant||null,d=l?.position||null,u=l?.style||null,c=l?.float||null,r=l?.highlight||null}catch{o=null}(!o||!o.some(l=>l&&(!l.hidden||l.restricted)))&&(console.warn("[admin-sidebar] No admin-sidebar menu found; using fallback tree"),o=Re.slice());let f=[];try{f=await H.get("/api/sidebar/registered-items")||[]}catch{}o=ye(o,Z),o=he(o,f.filter(l=>(l?.item??l)?.url!==Z)),o=ge(o),o=ve(o,[be()]);const x=await _e(n);x.length&&Ie(o,x),o=$e(o,n,s),o=xe(o),await i;const w=Le(o,z(L()),{hidden:Ee(L())});w&&(o=[w,...o]),Be(o);const[k,q]=await Promise.all([ze(f.filter(l=>O(n,l?.item?.permission)),n,s).catch(()=>({})),Xe(n)]),F=a?` dm-admin-sidebar--${m(a)}`:"";function y(l,v="px"){if(l==null)return l;const h=String(l).trim();return/^\d+(\.\d+)?$/.test(h)?`${h}${v}`:h}let C="";if(u){const l=[];u.fontFamily&&l.push(`font-family: ${u.fontFamily}, sans-serif`),u.fontSize&&l.push(`font-size: ${y(u.fontSize)}`),u.fontWeight&&l.push(`font-weight: ${u.fontWeight}`),u.letterSpacing&&l.push(`letter-spacing: ${y(u.letterSpacing,"em")}`);const v=[];if(l.length&&v.push(`#admin-sidebar .dm-admin-sidebar, #admin-sidebar .dm-admin-sidebar .sidebar-link, #admin-sidebar .dm-admin-sidebar summary, #admin-sidebar .dm-admin-sidebar .sidebar-text { ${l.join("; ")} }`),u.iconSize){const h=y(u.iconSize);v.push(`#admin-sidebar .dm-admin-sidebar [data-icon], #admin-sidebar .dm-admin-sidebar [data-icon] svg { width: ${h} !important; height: ${h} !important; }`)}v.length&&(C=`<style data-admin-sidebar-style>${v.join(" ")}</style>`)}const B=ke(n)?we():"",P=`<div class="dm-admin-sidebar-header"><span data-icon="layout"></span><span class="dm-admin-sidebar-title">${m(q)}</span>${B}${qe()}</div>`,T=o.some(l=>l&&l.type==="spacer"&&l.size==="flex")?" dm-admin-sidebar--has-flex-spacer":"",U=`${C}<nav class="dm-admin-sidebar${F}${T}">${P}${o.map(l=>oe(l,k)).join("")}</nav>`,R=document.createRange();R.selectNodeContents(t);const p=R.createContextualFragment(U);t.replaceChildren(p),Domma.icons.scan(t),t.querySelector(".dm-admin-sidebar-arrange")?.addEventListener("click",()=>Se(t));for(const l of A)D.set(l.url,k[l.url]??null);ne(t),Ke(t),t.removeAttribute("data-menu-hover"),t.removeAttribute("data-menu-active"),t.style.removeProperty("--dm-menu-highlight"),me(t,{highlight:r});const b=document.querySelector(".dashboard-wrapper");["position","top","bottom","left","right","zIndex","maxHeight","transform"].forEach(l=>{t.style[l]=""}),t.classList.remove("dm-menu-floating"),b&&(b.style.paddingLeft="",b.style.paddingRight=""),t.__dmGutter=()=>{if(d!=="floating"||!b)return;const l=c&&c.anchor||"TL",v=Number.isFinite(Number(c?.offsetX))?Number(c.offsetX):16,h=t.classList.contains("is-collapsed")?Ae:parseInt(t.style.width,10)||t.getBoundingClientRect().width||260,N=Math.round(h+v*2)+"px";l==="R"||l==="TR"||l==="BR"?b.style.paddingRight=N:b.style.paddingLeft=N},d==="floating"&&fe(t,{position:"floating",float:c||{}}),t.querySelectorAll("details").forEach(l=>{l.addEventListener("toggle",function(){const v=this.getAttribute("data-state-key");v&&S.set(v,this.open);const h=this.querySelector(":scope > .sidebar-children");if(h)if(this.open){const N=h.scrollHeight;h.style.maxHeight="0",requestAnimationFrame(()=>{h.style.maxHeight=N+"px",h.addEventListener("transitionend",function de(){h.style.maxHeight="none",h.removeEventListener("transitionend",de)})})}else{const N=h.scrollHeight;h.style.maxHeight=N+"px",requestAnimationFrame(()=>{h.style.maxHeight="0"})}})}),Ce(t),Qe(t),t.dataset.routeWired||(t.dataset.routeWired="1",M.subscribe("router:afterChange",()=>t.__dmSetActive?.()));function I(){const l=/^#\/(dashboards|my-dashboard)\b/.test(location.hash)?"#/":location.hash||"#/";$(t).find(".sidebar-link").removeClass("active"),$(t).find(`.sidebar-link[data-url="${l}"]`).addClass("active")}I(),t.__dmSetActive=I}function le(){try{document.dispatchEvent(new CustomEvent("dm:sidebar-rebuild"))}catch{}}function K(e){return`${location.origin}${location.pathname}${e}`}function _(e,n){const s=L(),t=e(z(s));if(!Ne(s,t)){E.toast("Frequent could not be saved - this browser is blocking storage.",{type:"error"});return}t.length&&Q(s,!1),ce(s),n&&E.toast(n,{type:"success",duration:2500}),le()}function ce(e){Me(g,e).catch(()=>E.toast("Frequent is saved in this browser only - the server could not keep it.",{type:"warning"}))}function Ze(e){if(!Q(L(),e)){E.toast("Frequent could not be saved - this browser is blocking storage.",{type:"error"});return}ce(L()),E.toast(e?"Frequent hidden. Add a Tool to it from its right-click menu to bring it back.":"Frequent shown.",{type:"success",duration:3500}),le()}function Ye(e){const n=e.dataset.url;if(!n)return[];const s=e.querySelector(".sidebar-text")?.textContent.trim()||n,t=z(L()),i=t.includes(n),o=!!e.closest("details[data-frequent]"),a=t.indexOf(n),d=!i&&t.length>=Y;return[{header:s},{label:"Open",icon:"arrow-right",...ee(n)&&{shortcut:Pe(ee(n))},action:()=>{location.hash=n}},{label:"Open in a new tab",icon:"external-link",action:()=>window.open(K(n),"_blank","noopener")},{type:"divider"},i?{label:"Remove from Frequent",icon:"star",action:()=>_(u=>Te(u,n),`${s} removed from Frequent.`)}:{label:d?`Frequent is full (${Y})`:"Add to Frequent",icon:"star",disabled:d,action:()=>_(u=>Fe(u,n),`${s} added to Frequent.`)},...o?[{label:"Move up",icon:"arrow-up",disabled:a<=0,action:()=>_(u=>J(u,n,-1))},{label:"Move down",icon:"arrow-down",disabled:a<0||a>=t.length-1,action:()=>_(u=>J(u,n,1))}]:[],{type:"divider"},{label:"Copy link",icon:"link",action:async()=>{try{await navigator.clipboard.writeText(K(n)),E.toast("Link copied.",{type:"success",duration:2e3})}catch{E.toast(K(n),{type:"info",duration:8e3})}}}]}function Je(e,n){const s=e.closest("details"),t=e.querySelector(".sidebar-text")?.textContent.trim()||"Folder",i=o=>n.querySelectorAll("details").forEach(a=>{a.open!==o&&(a.open=o)});return[{header:t},{label:s?.open?"Close":"Open",icon:s?.open?"chevron-up":"chevron-down",action:()=>{s&&(s.open=!s.open)}},{label:"Open every folder",icon:"chevrons-down",action:()=>i(!0)},{label:"Close every folder",icon:"chevrons-up",action:()=>i(!1)},...s?.hasAttribute("data-frequent-empty")?[{type:"divider"},{label:"Hide Frequent until I add a Tool",icon:"eye-off",action:()=>Ze(!0)}]:s?.hasAttribute("data-frequent")?[{type:"divider"},{label:"Clear Frequent",icon:"x",action:()=>_(()=>[],"Frequent cleared.")}]:[]]}function Qe(e){e.dataset.ctxWired||typeof E>"u"||!E.contextMenu||(e.dataset.ctxWired="1",E.contextMenu(e,{match:"a.sidebar-link, details > summary",inherit:!1,density:"compact",items:n=>n.matches("summary")?Je(n,e):Ye(n)}))}
|
|
7
|
+
</details>`}return`<a href="${d}" class="sidebar-link" data-url="${d}"${w}${f}${q}>${o} <span class="sidebar-text">${a}</span>${Oe(e,n)}${F}</a>`}async function ze(e=[],n=[],s=null){const t=p=>p.then(b=>Array.isArray(b)?b.length:Array.isArray(b?.entries)?b.entries.length:0).catch(()=>0);A=Ge(e,s);const i=new Set(A.map(p=>p.url)),o={pages:"#/pages",media:"#/media",menus:"#/menus","context-menus":"#/context-menus",theme:"#/theme",collections:"#/collections",forms:"#/forms",views:"#/views",actions:"#/actions",blocks:"#/blocks",components:"#/components",users:"#/users",plugins:"#/plugins",notifications:"#/system/notifications"},a=(p,b)=>O(n,p)&&!i.has(o[p])?b():Promise.resolve(0),[d,u,c,r,f,x,w,k,q,F,y,C,B,P]=await Promise.all([a("pages",()=>t(g.pages.list())),a("media",()=>t(g.media.list())),a("menus",()=>t(g.menus.list())),a("context-menus",()=>t(g.contextMenus.list())),a("theme",()=>g.theme.get().then(p=>(p?.overrides||[]).length).catch(()=>0)),a("collections",()=>t(g.collections.list())),a("forms",()=>t(g.forms.list())),a("views",()=>t(g.views.list())),a("actions",()=>t(g.actions.list())),a("blocks",()=>t(g.blocks.list())),a("components",()=>t(g.components.list())),a("users",()=>t(g.users.list())),a("plugins",()=>t(g.plugins.list())),a("notifications",()=>g.system?.notifications?.unreadCount?.().then(p=>p?.count??0).catch(()=>0)??Promise.resolve(0))]),T={};await Promise.all(A.map(async p=>{const b=await ie(p);b&&(T[p.url]=b)}));const U={"#/pages":d,"#/media":u,"#/menus":c,"#/context-menus":r,"#/theme":f,"#/collections":x,"#/forms":w,"#/views":k,"#/actions":q,"#/blocks":F,"#/components":y,"#/users":C,"#/plugins":B,"#/system/notifications":P},R={};for(const[p,b]of Object.entries(U)){if(i.has(p))continue;const[I,l]=Ue[p]??["item","items"],v=W(b);v&&(R[p]={...v,label:`${v.count} ${v.count===1?I:l}`})}return{...R,...T}}let A=[];const We="dm:sidebar-count",De=6e4;function Ge(e=[],n=null){const s=[],t=i=>{if(i&&!(n&&typeof i.url=="string"&&i.url.startsWith("#/")&&!ue(n,i.url.slice(1)))){i.url&&typeof i.countUrl=="string"&&i.countUrl&&s.push({url:i.url,countUrl:i.countUrl,text:i.text||"",countLabel:i.countLabel||"",inventory:i.inventory===!0});for(const o of[...i.children||[],...i.items||[]])t(o)}};for(const i of e??[])t(i?.item??i);return s}async function ie(e){try{const n=new Date,s=`${n.getFullYear()}-${String(n.getMonth()+1).padStart(2,"0")}-${String(n.getDate()).padStart(2,"0")}`,t=e.countUrl+(e.countUrl.includes("?")?"&":"?")+`today=${s}`;return W(await H.get(t),{fallbackLabel:e.countLabel||e.text})}catch{return null}}function ae(e,n,s){const t=[...e.querySelectorAll("a.sidebar-link")].filter(i=>i.dataset.url===n);if(t.length){for(const i of t){const o=i.querySelector(".sidebar-badge[data-count-for]");if(!s||!(s.count>0)&&!s.showZero)o?.remove();else{const a=document.createRange();a.selectNodeContents(i);const d=a.createContextualFragment(te(n,s)).firstElementChild;o?o.replaceWith(d):i.querySelector(".sidebar-text")?.after(d)}}D.set(n,s),ne(e)}}const D=new Map;async function G(e,n=null){const s=n?A.filter(t=>t.url===n):A;await Promise.all(s.map(async t=>{const i=await ie(t),o=D.get(t.url);JSON.stringify(o??null)!==JSON.stringify(i)&&ae(e,t.url,i)}))}function Ke(e){e.dataset.liveCounts||(e.dataset.liveCounts="1",window.addEventListener(We,n=>{const s=n.detail||{};if(s.url)if(s.count!==void 0){const t=A.find(i=>i.url===s.url);ae(e,s.url,W(s,{fallbackLabel:t?.countLabel||t?.text||""}))}else G(e,s.url)}),setInterval(()=>{!document.hidden&&document.body.contains(e)&&G(e)},De),document.addEventListener("visibilitychange",()=>{document.hidden||G(e)}),Ve(e))}function re(e,n,s){const t=(a,d,u)=>{const c=document.createElement(a);return d&&(c.className=d),u!=null&&(c.textContent=String(u)),c};if(!s){e.textContent=n;return}e.appendChild(t("strong","dm-badge-pop-title",s.title||n)),(s.rows?.length||!s.items?.length)&&e.appendChild(t("p","dm-badge-pop-sub",n));const i=Array.isArray(s.rows)?s.rows.slice(0,6):[];if(i.length){const a=t("dl","dm-badge-pop-rows");for(const d of i)a.appendChild(t("dt",null,d.label)),a.appendChild(t("dd",d.tone==="danger"?"is-danger":null,d.value));e.appendChild(a)}const o=Array.isArray(s.items)?s.items.slice(0,6):[];if(o.length){const a=t("ul","dm-badge-pop-items");for(const d of o){const u=t("li",d.tone==="danger"?"is-danger":null);u.appendChild(t("span","dm-badge-pop-text",d.text)),d.meta&&u.appendChild(t("span","dm-badge-pop-meta",d.meta)),a.appendChild(u)}e.appendChild(a)}else s.empty&&e.appendChild(t("p","dm-badge-pop-empty",s.empty))}function Ve(e){let n=null,s=null;const t=()=>e.classList.contains("is-collapsed"),i=()=>{clearTimeout(s),n?.remove(),n=null},o=(c,r)=>{i(),s=setTimeout(()=>{n=document.createElement("div"),n.className="dm-help-pop dm-badge-pop",n.setAttribute("role","tooltip"),r(n),document.body.appendChild(n);const f=c.getBoundingClientRect(),x=n.getBoundingClientRect(),w=Math.min(f.right+10,innerWidth-x.width-8);n.style.left=`${Math.max(8,w)}px`,n.style.top=`${Math.max(8,Math.min(f.top+f.height/2-x.height/2,innerHeight-x.height-8))}px`},150)},a=c=>{const r=c?.dataset.badgeLabel;if(!r)return i();o(c,f=>re(f,r,j.get(c.dataset.countFor)))},d=c=>{const r=c.querySelector(":scope > .sidebar-text")?.textContent.trim()||"",f=c.querySelector(":scope > .sidebar-badge[data-badge-label]:not([hidden])");o(c,x=>{const w=f&&j.get(f.dataset.countFor);if(w)return re(x,f.dataset.badgeLabel,{...w,title:w.title||r});if(!f){x.textContent=r;return}const k=document.createElement("strong");k.className="dm-badge-pop-title",k.textContent=r;const q=document.createElement("p");q.className="dm-badge-pop-sub",q.textContent=f.dataset.badgeLabel,x.append(k,q)})},u=c=>{const r=c.closest?.("a.sidebar-link, summary");return r&&e.contains(r)?r:null};e.addEventListener("mouseover",c=>{if(t()){const f=u(c.target);f&&!f.contains(c.relatedTarget)&&d(f);return}const r=c.target.closest?.(".sidebar-badge[data-badge-label]");r&&a(r)}),e.addEventListener("mouseout",c=>{if(t()){const r=u(c.target);r&&!r.contains(c.relatedTarget)&&i();return}c.target.closest?.(".sidebar-badge[data-badge-label]")&&i()}),e.addEventListener("focusin",c=>{const r=c.target.closest?.("a, summary");if(t()&&r&&e.contains(r)&&r.querySelector(":scope > .sidebar-text"))return d(r);const f=r?.querySelector(":scope > .sidebar-badge[data-badge-label]:not([hidden])");f?a(f):i()}),e.addEventListener("focusout",i),e.addEventListener("click",i),window.addEventListener("scroll",i,!0),window.addEventListener("hashchange",i)}async function Xe(e=[]){if(!O(e,"settings"))return"Admin";try{const n=await g.settings.get();return n?.adminBrand?.title||n?.title||"Admin"}catch{return"Admin"}}export async function renderAdminSidebar({mount:e,permissions:n,adminScope:s=null}){const t=$(e).get(0);if(!t)return;const i=Me(g,L()).catch(()=>{});let o,a=null,d=null,u=null,c=null,r=null;try{const l=await g.get("/sidebar/menu");o=Array.isArray(l?.items)?l.items:null,a=l?.variant||null,d=l?.position||null,u=l?.style||null,c=l?.float||null,r=l?.highlight||null}catch{o=null}(!o||!o.some(l=>l&&(!l.hidden||l.restricted)))&&(console.warn("[admin-sidebar] No admin-sidebar menu found; using fallback tree"),o=Re.slice());let f=[];try{f=await H.get("/api/sidebar/registered-items")||[]}catch{}o=ye(o,Z),o=he(o,f.filter(l=>(l?.item??l)?.url!==Z)),o=ge(o),o=ve(o,[be()]);const x=await _e(n);x.length&&Ie(o,x),o=$e(o,n,s),o=xe(o),await i;const w=Le(o,z(L()),{hidden:Ee(L())});w&&(o=[w,...o]),Be(o);const[k,q]=await Promise.all([ze(f.filter(l=>O(n,l?.item?.permission)),n,s).catch(()=>({})),Xe(n)]),F=a?` dm-admin-sidebar--${m(a)}`:"";function y(l,v="px"){if(l==null)return l;const h=String(l).trim();return/^\d+(\.\d+)?$/.test(h)?`${h}${v}`:h}let C="";if(u){const l=[];u.fontFamily&&l.push(`font-family: ${u.fontFamily}, sans-serif`),u.fontSize&&l.push(`font-size: ${y(u.fontSize)}`),u.fontWeight&&l.push(`font-weight: ${u.fontWeight}`),u.letterSpacing&&l.push(`letter-spacing: ${y(u.letterSpacing,"em")}`);const v=[];if(l.length&&v.push(`#admin-sidebar .dm-admin-sidebar, #admin-sidebar .dm-admin-sidebar .sidebar-link, #admin-sidebar .dm-admin-sidebar summary, #admin-sidebar .dm-admin-sidebar .sidebar-text { ${l.join("; ")} }`),u.iconSize){const h=y(u.iconSize);v.push(`#admin-sidebar .dm-admin-sidebar [data-icon], #admin-sidebar .dm-admin-sidebar [data-icon] svg { width: ${h} !important; height: ${h} !important; }`)}v.length&&(C=`<style data-admin-sidebar-style>${v.join(" ")}</style>`)}const B=ke(n)?we():"",P=`<div class="dm-admin-sidebar-header"><span data-icon="layout"></span><span class="dm-admin-sidebar-title">${m(q)}</span>${B}${qe()}</div>`,T=o.some(l=>l&&l.type==="spacer"&&l.size==="flex")?" dm-admin-sidebar--has-flex-spacer":"",U=`${C}<nav class="dm-admin-sidebar${F}${T}">${P}${o.map(l=>oe(l,k)).join("")}</nav>`,R=document.createRange();R.selectNodeContents(t);const p=R.createContextualFragment(U);t.replaceChildren(p),Domma.icons.scan(t),t.querySelector(".dm-admin-sidebar-arrange")?.addEventListener("click",()=>Se(t));for(const l of A)D.set(l.url,k[l.url]??null);ne(t),Ke(t),t.removeAttribute("data-menu-hover"),t.removeAttribute("data-menu-active"),t.style.removeProperty("--dm-menu-highlight"),me(t,{highlight:r});const b=document.querySelector(".dashboard-wrapper");["position","top","bottom","left","right","zIndex","maxHeight","transform"].forEach(l=>{t.style[l]=""}),t.classList.remove("dm-menu-floating"),b&&(b.style.paddingLeft="",b.style.paddingRight=""),t.__dmGutter=()=>{if(d!=="floating"||!b)return;const l=c&&c.anchor||"TL",v=Number.isFinite(Number(c?.offsetX))?Number(c.offsetX):16,h=t.classList.contains("is-collapsed")?Ae:parseInt(t.style.width,10)||t.getBoundingClientRect().width||260,N=Math.round(h+v*2)+"px";l==="R"||l==="TR"||l==="BR"?b.style.paddingRight=N:b.style.paddingLeft=N},d==="floating"&&fe(t,{position:"floating",float:c||{}}),t.querySelectorAll("details").forEach(l=>{l.addEventListener("toggle",function(){const v=this.getAttribute("data-state-key");v&&S.set(v,this.open);const h=this.querySelector(":scope > .sidebar-children");if(h)if(this.open){const N=h.scrollHeight;h.style.maxHeight="0",requestAnimationFrame(()=>{h.style.maxHeight=N+"px",h.addEventListener("transitionend",function de(){h.style.maxHeight="none",h.removeEventListener("transitionend",de)})})}else{const N=h.scrollHeight;h.style.maxHeight=N+"px",requestAnimationFrame(()=>{h.style.maxHeight="0"})}})}),Ce(t),Qe(t),t.dataset.routeWired||(t.dataset.routeWired="1",M.subscribe("router:afterChange",()=>t.__dmSetActive?.()));function I(){const l=/^#\/(dashboards|my-dashboard)\b/.test(location.hash)?"#/":location.hash||"#/";$(t).find(".sidebar-link").removeClass("active"),$(t).find(`.sidebar-link[data-url="${l}"]`).addClass("active")}I(),t.__dmSetActive=I}function le(){try{document.dispatchEvent(new CustomEvent("dm:sidebar-rebuild"))}catch{}}function K(e){return`${location.origin}${location.pathname}${e}`}function _(e,n){const s=L(),t=e(z(s));if(!Ne(s,t)){E.toast("Frequent could not be saved - this browser is blocking storage.",{type:"error"});return}t.length&&Q(s,!1),ce(s),n&&E.toast(n,{type:"success",duration:2500}),le()}function ce(e){He(g,e).catch(()=>E.toast("Frequent is saved in this browser only - the server could not keep it.",{type:"warning"}))}function Ze(e){if(!Q(L(),e)){E.toast("Frequent could not be saved - this browser is blocking storage.",{type:"error"});return}ce(L()),E.toast(e?"Frequent hidden. Add a Tool to it from its right-click menu to bring it back.":"Frequent shown.",{type:"success",duration:3500}),le()}function Ye(e){const n=e.dataset.url;if(!n)return[];const s=e.querySelector(".sidebar-text")?.textContent.trim()||n,t=z(L()),i=t.includes(n),o=!!e.closest("details[data-frequent]"),a=t.indexOf(n),d=!i&&t.length>=Y;return[{header:s},{label:"Open",icon:"arrow-right",...ee(n)&&{shortcut:Pe(ee(n))},action:()=>{location.hash=n}},{label:"Open in a new tab",icon:"external-link",action:()=>window.open(K(n),"_blank","noopener")},{type:"divider"},i?{label:"Remove from Frequent",icon:"star",action:()=>_(u=>Te(u,n),`${s} removed from Frequent.`)}:{label:d?`Frequent is full (${Y})`:"Add to Frequent",icon:"star",disabled:d,action:()=>_(u=>Fe(u,n),`${s} added to Frequent.`)},...o?[{label:"Move up",icon:"arrow-up",disabled:a<=0,action:()=>_(u=>J(u,n,-1))},{label:"Move down",icon:"arrow-down",disabled:a<0||a>=t.length-1,action:()=>_(u=>J(u,n,1))}]:[],{type:"divider"},{label:"Copy link",icon:"link",action:async()=>{try{await navigator.clipboard.writeText(K(n)),E.toast("Link copied.",{type:"success",duration:2e3})}catch{E.toast(K(n),{type:"info",duration:8e3})}}}]}function Je(e,n){const s=e.closest("details"),t=e.querySelector(".sidebar-text")?.textContent.trim()||"Folder",i=o=>n.querySelectorAll("details").forEach(a=>{a.open!==o&&(a.open=o)});return[{header:t},{label:s?.open?"Close":"Open",icon:s?.open?"chevron-up":"chevron-down",action:()=>{s&&(s.open=!s.open)}},{label:"Open every folder",icon:"chevrons-down",action:()=>i(!0)},{label:"Close every folder",icon:"chevrons-up",action:()=>i(!1)},...s?.hasAttribute("data-frequent-empty")?[{type:"divider"},{label:"Hide Frequent until I add a Tool",icon:"eye-off",action:()=>Ze(!0)}]:s?.hasAttribute("data-frequent")?[{type:"divider"},{label:"Clear Frequent",icon:"x",action:()=>_(()=>[],"Frequent cleared.")}]:[]]}function Qe(e){e.dataset.ctxWired||typeof E>"u"||!E.contextMenu||(e.dataset.ctxWired="1",E.contextMenu(e,{match:"a.sidebar-link, details > summary",inherit:!1,density:"compact",items:n=>n.matches("summary")?Je(n,e):Ye(n)}))}
|
|
@@ -7,8 +7,10 @@
|
|
|
7
7
|
<div class="col-12">
|
|
8
8
|
<div class="docs-body">
|
|
9
9
|
|
|
10
|
-
<p>The site's navigation is made of <strong>menus</strong>, edited at <strong>Content >
|
|
11
|
-
|
|
10
|
+
<p>The site's navigation is made of <strong>site menus</strong>, edited at <strong>Content >
|
|
11
|
+
Site menus</strong>. (Not to be confused with <strong>page contents</strong> - the list a layout
|
|
12
|
+
with a sidebar builds from a page's own headings, set up in <strong>Layouts</strong> and per page
|
|
13
|
+
with <code>[contents]</code>.) A menu is a list of links; a <strong>location</strong> (a slot) is where one is
|
|
12
14
|
shown. Each menu is a file in <code>config/menus/</code>, and the slot map is
|
|
13
15
|
<code>config/menu-locations.json</code>. Pages have no "show in navigation" switch - a page
|
|
14
16
|
appears in the navbar when a menu links to it.</p>
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
<!-- Layouts -->
|
|
12
12
|
<div class="tab-panel active">
|
|
13
|
-
<p class="lyx-note">A layout sets a page's width, background, and whether it has the navbar, footer and
|
|
13
|
+
<p class="lyx-note">A layout sets a page's width, background, and whether it has the navbar, footer and page contents (the list of the page's sections).
|
|
14
14
|
Pages choose one in the page editor; a page that names none uses Default.
|
|
15
15
|
<span data-help-title="Layouts" data-help="The built-in layouts can be edited but not deleted. A layout you make gets a key from its name (Dark Landing becomes dark-landing) - that key is what a page's layout: line names, and it does not change if you rename the layout later. Deleting a layout that pages use leaves those pages on Default."></span></p>
|
|
16
16
|
|
|
@@ -119,6 +119,12 @@
|
|
|
119
119
|
.lyx-form { display: flex; flex-direction: column; gap: .85rem; }
|
|
120
120
|
.lyx-form .form-label { display: flex; align-items: center; gap: .3rem; }
|
|
121
121
|
.lyx-switches { display: flex; flex-wrap: wrap; gap: 1.25rem; }
|
|
122
|
+
.lyx-contents { margin-top: 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid var(--dm-border); border-radius: 8px; }
|
|
123
|
+
.lyx-contents > summary { cursor: pointer; font-weight: 600; }
|
|
124
|
+
.lyx-contents[open] > summary { margin-bottom: 0.75rem; }
|
|
125
|
+
.lyx-contents > .lyx-switches { margin-top: 0.75rem; }
|
|
126
|
+
.lyx-contents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem 1rem; }
|
|
127
|
+
.lyx-contents-grid > label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
|
|
122
128
|
.lyx-switches label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
|
|
123
129
|
.lyx-colour { display: flex; align-items: center; gap: .5rem; }
|
|
124
130
|
.lyx-colour input[type="color"] { width: 2.4rem; height: 2rem; padding: 2px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); background: transparent; cursor: pointer; }
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import{api as
|
|
2
|
-
<span class="lyx-shape" aria-hidden="true" data-bind-style-background-color="bg${
|
|
3
|
-
<span class="lyx-shape-nav" data-bind-hidden="!hasNav${
|
|
4
|
-
<span class="lyx-shape-body"><span class="lyx-shape-col" data-bind-style-width="share${
|
|
5
|
-
<span class="lyx-shape-foot" data-bind-hidden="!hasFoot${
|
|
6
|
-
</span>`,
|
|
1
|
+
import{api as O,apiRequest as Qe}from"../api.js";import{HIGHLIGHT_HOVER as Xe,HIGHLIGHT_ACTIVE as Ze,HIGHLIGHT_HOVER_LABELS as et,HIGHLIGHT_ACTIVE_LABELS as tt}from"/public/js/menu-decor.mjs?v=20261009-hover-darken";import{addBannerAction as at}from"../lib/plugin-chrome.js";import{helpPopovers as Me}from"../lib/help-popover.js";import{onceClosed as Te,openMenuAt as He,sidebarCount as lt}from"../lib/tool-kit.js";import{FILTERS as st,WIDTHS as ot,WIDTH_HINTS as nt,WIDTH_LABELS as it,WIDTH_SHARE as $e,arrangeLayouts as ct,checkLayout as rt,checkOptions as dt,formFromPreset as ut}from"../lib/layouts-arrange.js";const ae=/^\/layouts\/?(\?.*)?$/,Le="#/layouts",le="layouts.draft",z="layouts.options.draft",se="layouts.filter",Oe=(l="")=>`
|
|
2
|
+
<span class="lyx-shape" aria-hidden="true" data-bind-style-background-color="bg${l}">
|
|
3
|
+
<span class="lyx-shape-nav" data-bind-hidden="!hasNav${l}"></span>
|
|
4
|
+
<span class="lyx-shape-body"><span class="lyx-shape-col" data-bind-style-width="share${l}"></span><span class="lyx-shape-side" data-bind-hidden="!hasSide${l}" data-bind-class="sideRight${l} && 'is-right'"></span></span>
|
|
5
|
+
<span class="lyx-shape-foot" data-bind-hidden="!hasFoot${l}"></span>
|
|
6
|
+
</span>`,pt=`
|
|
7
7
|
<div class="lyx-row" data-key="{{key}}" tabindex="0">
|
|
8
|
-
${
|
|
8
|
+
${Oe()}
|
|
9
9
|
<span class="lyx-main"><strong>{{label}}</strong><small>{{meta}}</small></span>
|
|
10
10
|
<span class="lyx-chips">
|
|
11
11
|
<span class="lyx-chip" data-bind-hidden="!builtin" title="Built in - can be edited, not deleted">Built in</span>
|
|
@@ -13,13 +13,13 @@ import{api as L,apiRequest as Qe}from"../api.js";import{addBannerAction as Xe}fr
|
|
|
13
13
|
<span class="lyx-chip" data-bind-class="usedTone" title="Pages that use this layout">{{usedText}}</span>
|
|
14
14
|
</span>
|
|
15
15
|
<button type="button" class="lyx-kebab" aria-label="Actions for {{label}}" title="Actions">\u22EE</button>
|
|
16
|
-
</div>`,
|
|
16
|
+
</div>`,G=l=>String(l??"").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""");function Be(l){const c=document.createElement("template");return c.innerHTML=l.trim(),c.content.firstElementChild}const De=(l,c,i=`${c}s`)=>`${l} ${l===1?c:i}`,bt=l=>`#/pages/edit${l}`;let m=null,Ae=!1;function ht(){Ae||!window.R?.use||(Ae=!0,R.use((l,c,i)=>!(ae.test(c?.path||"")&&!ae.test(l?.path||""))||!m?.dirty()?i():E.confirm("You have unsaved layout changes. Leave anyway? They are kept as a draft for your next visit.").then(u=>{u?i():history.replaceState(null,"",Le)})),M.subscribe("router:afterChange",({to:l}={})=>{if(m&&!ae.test(l?.path||"")){const c=m;m=null,c.dispose()}}))}export const layoutsView={templateUrl:"/admin/js/templates/layouts.html",async onMount(l){if(ht(),m){const e=m;m=null,e.dispose()}const c=[],i=e=>(c.push(e),e);let V=!1;const u=l.get(0).querySelector(".lyx")||l.get(0),p=()=>!V&&u.isConnected,b=M.observable({}),F=M.observable({byKey:{},missing:[]}),oe=M.observable(!0),Y=M.observable("");let ne="all";try{ne=st.includes(S.get(se))?S.get(se):"all"}catch{}const k=M.observable(ne),ie=M.observable("");i(M.effect(()=>{const e=k.value;try{S.set(se,e)}catch{}}));const ce=M.observable([]);i(M.effect(()=>{ce.value=ct(b.value,F.value,{filter:k.value,query:ie.value})}));const Ie=M.computed(()=>{const e=Object.values(b.value),t=e.filter(o=>o.builtin).length;return{all:e.length,builtin:t,custom:e.length-t}}),U=M.computed(()=>F.value.missing||[]),Pe=M.computed(()=>{const e=U.value.length;return`${De(e,"page")} name${e===1?"s":""} a layout that no longer exists and show${e===1?"s":""} as Default.`}),j=M.observable({spacerSize:"8",spacerClass:""}),f=M.observable("8"),g=M.observable(""),J=M.observable(!1),re=()=>({spacerSize:String(f.value??""),spacerClass:String(g.value??"")}),N=M.computed(()=>dt(re())),x=M.computed(()=>{const e=j.value;return String(f.value??"")!==e.spacerSize||String(g.value??"")!==e.spacerClass}),de=M.computed(()=>J.value||!x.value||Object.keys(N.value.errors).length>0),ze=M.computed(()=>x.value?"Unsaved changes - Ctrl+S saves.":"Saved."),B=e=>({...b.peek()[e]||{},key:e}),Q=e=>(F.peek().byKey||{})[e]||[];async function X(){try{const[e,t]=await Promise.all([O.layouts.get(),Qe("/layouts/_usage",{method:"GET"}).catch(()=>({byKey:{},missing:[]}))]);if(!p())return;b.value=e&&typeof e=="object"?e:{},F.value=t&&typeof t=="object"?t:{byKey:{},missing:[]},Y.value=""}catch(e){Y.value=`Could not load the layouts: ${e.message||e}`}finally{oe.value=!1}}async function Fe(){const e=await O.layouts.getOptions().catch(()=>({spacerSize:8,spacerClass:""}));if(!p())return;const t={spacerSize:String(e?.spacerSize??8),spacerClass:String(e?.spacerClass??"")};j.value=t,f.value=t.spacerSize,g.value=t.spacerClass}async function ue(){if(de.peek())return;J.value=!0;const{payload:e}=N.peek();try{await O.layouts.saveOptions(e),j.value={spacerSize:String(e.spacerSize),spacerClass:e.spacerClass},f.value=String(e.spacerSize),g.value=e.spacerClass;try{S.remove?S.remove(z):S.set(z,null)}catch{}E.toast("Layout options saved.",{type:"success"})}catch(t){E.toast(`Not saved: ${t.message||t}`,{type:"error"})}finally{J.value=!1}}function Re(){const e=j.peek();f.value=e.spacerSize,g.value=e.spacerClass}const pe=()=>lt(Le);async function je(e){const t=B(e);if(t.builtin)return;const o=Q(e).length,r=o?` ${De(o,"page")} use${o===1?"s":""} it and will show as Default.`:" No page uses it.";if(await E.confirm(`Delete the layout "${G(t.label||e)}"?${r}`))try{await O.layouts.remove(e),E.toast(`Deleted "${t.label||e}".`,{type:"success"}),pe(),p()&&await X()}catch(n){E.toast(`Not deleted: ${n.message||n}`,{type:"error"})}}async function Ne(e){const t=`layout: ${e}`;try{await navigator.clipboard.writeText(t),E.toast(`Copied "${t}" - paste it into a page's frontmatter.`,{type:"success"})}catch{E.toast(`Copy this into a page's frontmatter: ${t}`,{type:"info",duration:7e3})}}const C=new Set;let h=null,be=!1;function he(e){const t=e===null,o=t?U.peek():Q(e),r=t?null:B(e),n=E.slideover({title:t?"Pages on a missing layout":`Pages using ${G(r.label||e)}`,size:"sm",position:"right"}),D=Be(`
|
|
17
17
|
<div class="lyx-form">
|
|
18
18
|
<p class="lyx-note"></p>
|
|
19
19
|
<div class="lyx-pages"></div>
|
|
20
|
-
</div>`);
|
|
20
|
+
</div>`);D.querySelector(".lyx-note").textContent=t?"These pages name a layout that no longer exists, so they show as Default. Open one and choose a layout for it.":o.length?"Click a page to open it in the editor.":"No page uses this layout.";const W=D.querySelector(".lyx-pages");for(const s of o){const w=document.createElement("a");w.href=bt(s.urlPath);const A=document.createElement("span");A.textContent=s.title||s.urlPath;const _=document.createElement("small");_.textContent=[s.urlPath,t?`"${s.layout}"`:"",s.status==="draft"?"draft":""].filter(Boolean).join(" \xB7 "),w.append(A,_),w.addEventListener("click",()=>n.close()),W.appendChild(w)}n.element.appendChild(D),C.add(n),Te(n,()=>C.delete(n)),n.open()}function T(e=null,{from:t=null,draft:o=null}={}){const r=e?B(e):null;if(e&&!b.peek()[e]){E.toast(`There is no layout "${e}".`,{type:"warning"});return}const n=!r,D=r||(t?{...B(t),label:`${B(t).label||t} copy`,builtin:!1}:{}),W={...ut(D),...o||{}},s=Object.fromEntries(Object.entries(W).map(([a,y])=>[a,M.observable(y)])),w=()=>Object.fromEntries(Object.keys(s).map(a=>[a,s[a].peek()])),A=a=>JSON.stringify(Object.fromEntries(Object.entries(a).map(([y,te])=>[y,typeof te=="boolean"?te:String(te??"")]))),_=A(W),Se=()=>A(w())!==_||!!o||!!(t&&n),K=M.observable(!1),P=M.computed(()=>rt(Object.fromEntries(Object.keys(s).map(a=>[a,s[a].value])),{isNew:n,taken:Object.keys(b.value)})),q=a=>M.computed(()=>P.value.errors[a]||""),qe={hasNav:M.computed(()=>s.navbar.value!==!1),hasFoot:M.computed(()=>s.footer.value!==!1),hasSide:M.computed(()=>s.sidebar.value===!0),sideRight:M.computed(()=>s.sidebar.value===!0&&s.sidebarSide.value==="right"),share:M.computed(()=>$e[s.width.value]||$e.normal),bg:M.computed(()=>s.useBg.value?s.bgColor.value:"")},Ee={...s,...qe,saving:K,labelErr:q("label"),bgErr:q("bgColor"),classErr:q("cssClass"),cWidthErr:q("cWidth"),hoverOptions:[{value:"",label:"The theme's"},...Xe.map(a=>({value:a,label:et[a]||a}))],selectedOptions:[{value:"",label:"The theme's"},...Ze.map(a=>({value:a,label:tt[a]||a}))],keyHint:M.computed(()=>n?P.value.key?`Pages will name it "layout: ${P.value.key}".`:"":`Pages name it "layout: ${r.key}" - renaming does not change that.`),widthHint:M.computed(()=>nt[s.width.value]||""),builtinNote:!n&&r.builtin===!0,noBg:M.computed(()=>!s.useBg.value),cannot:M.computed(()=>K.value||Object.keys(P.value.errors).length>0),saveText:n?"Create layout":"Save"},Ge=n?t?"Duplicate layout":"New layout":`Edit ${G(r.label||r.key)}`,d=E.slideover({title:Ge,size:"md",position:"right"}),L=Be(`
|
|
21
21
|
<div class="lyx-form">
|
|
22
|
-
<div class="lyx-preview">${
|
|
22
|
+
<div class="lyx-preview">${Oe(".value")}
|
|
23
23
|
<small class="lyx-hint" data-bind-text="keyHint.value"></small></div>
|
|
24
24
|
<p class="lyx-note" data-bind-hidden="!builtinNote">A built-in layout: you can change it, but not delete it.</p>
|
|
25
25
|
<div class="lyx-grid">
|
|
@@ -32,7 +32,7 @@ import{api as L,apiRequest as Qe}from"../api.js";import{addBannerAction as Xe}fr
|
|
|
32
32
|
<label class="form-label" for="lyx-f-width">Width
|
|
33
33
|
<span data-help="How wide the page's content column is. The navbar and footer are not affected."></span></label>
|
|
34
34
|
<select id="lyx-f-width" class="form-input" data-model="width.value">
|
|
35
|
-
${
|
|
35
|
+
${ot.map(a=>`<option value="${a}">${it[a]}</option>`).join("")}
|
|
36
36
|
</select>
|
|
37
37
|
<small class="lyx-hint" data-bind-text="widthHint.value"></small>
|
|
38
38
|
</div>
|
|
@@ -42,16 +42,58 @@ import{api as L,apiRequest as Qe}from"../api.js";import{addBannerAction as Xe}fr
|
|
|
42
42
|
</div>
|
|
43
43
|
<div class="lyx-wide">
|
|
44
44
|
<span class="form-label">Around the content
|
|
45
|
-
<span data-help="Whether pages on this layout show the site's navbar and footer, and the
|
|
45
|
+
<span data-help="Whether pages on this layout show the site's navbar and footer, and the page contents - a list of the page's own sections, built from its headings."></span></span>
|
|
46
46
|
<div class="lyx-switches">
|
|
47
47
|
<label><input type="checkbox" class="form-switch" data-model="navbar.value"> Navbar</label>
|
|
48
48
|
<label><input type="checkbox" class="form-switch" data-model="footer.value"> Footer</label>
|
|
49
|
-
<label><input type="checkbox" class="form-switch" data-model="sidebar.value">
|
|
49
|
+
<label><input type="checkbox" class="form-switch" data-model="sidebar.value"> Page contents</label>
|
|
50
50
|
</div>
|
|
51
51
|
<div class="lyx-switches" data-if="sidebar.value">
|
|
52
|
-
<label><input type="radio" name="lyx-side" value="left" data-model="sidebarSide.value">
|
|
52
|
+
<label><input type="radio" name="lyx-side" value="left" data-model="sidebarSide.value"> Page contents on the left</label>
|
|
53
53
|
<label><input type="radio" name="lyx-side" value="right" data-model="sidebarSide.value"> on the right</label>
|
|
54
54
|
</div>
|
|
55
|
+
<details class="lyx-contents" data-if="sidebar.value">
|
|
56
|
+
<summary>Page contents settings <span data-help="Page contents lists the page's own headings. These are the defaults for every page on the layout; a page can change any of them for itself with the [contents] tag."></span></summary>
|
|
57
|
+
<div class="lyx-contents-grid">
|
|
58
|
+
<label>Width (px) <input type="number" class="form-input" min="160" max="480" step="10" placeholder="260" data-model="cWidth.value"></label>
|
|
59
|
+
<label>Headings
|
|
60
|
+
<select class="form-input" data-model="cHeadings.value">
|
|
61
|
+
<option value="auto">Sections (H2s, else H3s)</option><option value="h2">H2 only</option>
|
|
62
|
+
<option value="h3">H3 only</option><option value="h2h3">H2 and H3</option>
|
|
63
|
+
</select></label>
|
|
64
|
+
<label>Title <input type="text" class="form-input" maxlength="80" placeholder="On this page" data-model="cTitle.value"></label>
|
|
65
|
+
<label>Leave out <input type="text" class="form-input" placeholder="Headings, comma separated" data-model="cExclude.value"></label>
|
|
66
|
+
<label>Hover effect
|
|
67
|
+
<select class="form-input" data-options="hoverOptions" data-options-text="label" data-options-value="value" data-model="cHover.value"></select></label>
|
|
68
|
+
<label>When selected
|
|
69
|
+
<select class="form-input" data-options="selectedOptions" data-options-text="label" data-options-value="value" data-model="cSelected.value"></select></label>
|
|
70
|
+
<label>Accent <input type="text" class="form-input" placeholder="primary or #rrggbb" data-model="cAccent.value"></label>
|
|
71
|
+
<label>Font <input type="text" class="form-input" placeholder="Theme font" data-model="cFont.value"></label>
|
|
72
|
+
<label>Font size <input type="text" class="form-input" placeholder="0.9rem" data-model="cFontSize.value"></label>
|
|
73
|
+
<label>Font weight <input type="text" class="form-input" placeholder="400" data-model="cFontWeight.value"></label>
|
|
74
|
+
</div>
|
|
75
|
+
<div class="lyx-switches">
|
|
76
|
+
<label><input type="checkbox" class="form-switch" data-model="cSticky.value"> Stays in view</label>
|
|
77
|
+
<label><input type="checkbox" class="form-switch" data-model="cScrollSpy.value"> Marks the section being read</label>
|
|
78
|
+
<label><input type="checkbox" class="form-switch" data-model="cNumbered.value"> Numbered</label>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="lyx-switches">
|
|
81
|
+
<label><input type="checkbox" class="form-switch" data-model="cCollapsible.value"> Collapsible to a button</label>
|
|
82
|
+
<label data-if="cCollapsible.value"><input type="checkbox" class="form-switch" data-model="cCollapsed.value"> Start collapsed</label>
|
|
83
|
+
<label><input type="checkbox" class="form-switch" data-model="cAutohide.value"> Autohide off its edge</label>
|
|
84
|
+
<label><input type="checkbox" class="form-switch" data-model="cFloating.value"> Floating panel</label>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="lyx-switches" data-if="cFloating.value">
|
|
87
|
+
<label>Anchor
|
|
88
|
+
<select class="form-input" data-model="cFloatAnchor.value">
|
|
89
|
+
<option value="TL">Top left</option><option value="TR">Top right</option><option value="BL">Bottom left</option>
|
|
90
|
+
<option value="BR">Bottom right</option><option value="L">Left, centred</option><option value="R">Right, centred</option>
|
|
91
|
+
</select></label>
|
|
92
|
+
<label><input type="checkbox" class="form-switch" data-model="cMovable.value"> Visitors can move it</label>
|
|
93
|
+
</div>
|
|
94
|
+
<small class="lyx-hint">Floating wins over autohide, and both over collapse - the list leaves its column for them.</small>
|
|
95
|
+
<small class="lyx-err" data-bind-hidden="!cWidthErr.value" data-bind-text="cWidthErr.value"></small>
|
|
96
|
+
</details>
|
|
55
97
|
</div>
|
|
56
98
|
<div>
|
|
57
99
|
<span class="form-label">Background colour
|
|
@@ -82,4 +124,4 @@ import{api as L,apiRequest as Qe}from"../api.js";import{addBannerAction as Xe}fr
|
|
|
82
124
|
<button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value">
|
|
83
125
|
<span data-icon="check" data-icon-size="13"></span> <span data-bind-text="saveText"></span></button>
|
|
84
126
|
</div>
|
|
85
|
-
</div>`);async function ke(){if(Ee.cannot.peek())return;
|
|
127
|
+
</div>`);async function ke(){if(Ee.cannot.peek())return;K.value=!0;const{payload:a}=P.peek();try{n?await O.layouts.create(a):await O.layouts.update(r.key,a),E.toast(n?`Created "${a.label}".`:"Saved.",{type:"success"}),Z=!0,d.close(),pe(),p()&&await X()}catch(y){E.toast(`Not saved: ${y.message||y}`,{type:"error"})}finally{K.value=!1}}d.element.appendChild(L);const Ve=Me(L),Ye=M.applyBindings(Ee,L,{methods:{save:ke,cancel:()=>d.close()}}),Ue=a=>{(a.ctrlKey||a.metaKey)&&a.key==="Enter"&&(a.preventDefault(),ke())};L.addEventListener("keydown",Ue);const Ce={key:r?.key??null,dirty:Se,values:w};h=Ce,C.add(d),Te(d,()=>{Ye.dispose(),Ve(),C.delete(d),h===Ce&&(h=null)});const Je=d.close.bind(d);let Z=!1,ee=!1;d.close=async a=>{if(!Z&&!be&&a!==!0&&Se()){if(ee)return;ee=!0;const y=await E.confirm("Discard the changes you have not saved?");if(ee=!1,!y)return}return Z=!0,Je()},I.scan(L),d.open(),L.querySelector("#lyx-f-label")?.focus()}function We(e){const t=b.peek()[e];if(!t)return[];const o=Q(e).length;return[{header:t.label||e},{label:"Edit\u2026",icon:"edit",action:()=>T(e)},{label:o?`Pages using it (${o})\u2026`:"Pages using it",icon:"file-text",disabled:!o,action:()=>he(e)},{label:"Duplicate\u2026",icon:"copy",action:()=>T(null,{from:e})},{label:"Copy frontmatter line",icon:"clipboard",action:()=>Ne(e)},...t.builtin?[]:[{type:"divider"},{label:"Delete\u2026",icon:"trash",danger:!0,action:()=>je(e)}]]}const H=u.querySelector(".lyx-list");H.innerHTML=pt;const ve=E.tabs(u.querySelector(".lyx-tabs"),{tabSelector:".tab-item",panelSelector:".tab-panel"}),_e=M.applyBindings({loading:oe,loadError:Y,filter:k,query:ie,rows:ce,counts:Ie,missing:U,missingText:Pe,spacerSize:f,spacerClass:g,optDirty:x,optCannot:de,optStatus:ze,optErrSize:M.computed(()=>N.value.errors.spacerSize||""),optErrClass:M.computed(()=>N.value.errors.spacerClass||"")},u,{methods:{showAll:()=>{k.value="all"},showBuiltin:()=>{k.value="builtin"},showCustom:()=>{k.value="custom"},showMissing:()=>he(null),saveOptions:()=>ue(),resetOptions:()=>Re()}});i(()=>_e.dispose()),i(Me(u,{position:"bottom"}));const Ke=E.contextMenu(H,{cursor:"glyph",match:".lyx-row",inherit:!1,density:"compact",items:e=>We(e.dataset.key)});i(()=>Ke?.destroy?.());const ye=e=>{const t=e.target.closest(".lyx-row");if(!t)return;const o=e.target.closest(".lyx-kebab");if(o){He(o);return}T(t.dataset.key)},me=e=>{const t=e.target.closest(".lyx-row");t&&(e.key==="F10"&&e.shiftKey?(e.preventDefault(),He(t)):e.key==="Enter"&&e.target===t&&T(t.dataset.key))};H.addEventListener("click",ye),H.addEventListener("keydown",me),i(()=>{H.removeEventListener("click",ye),H.removeEventListener("keydown",me)});const fe=e=>{!(e.ctrlKey||e.metaKey)||e.key!=="s"||!p()||C.size||(e.preventDefault(),x.peek()&&ue())};document.addEventListener("keydown",fe,!0),i(()=>document.removeEventListener("keydown",fe,!0)),at(l,{id:"layouts-new",icon:"plus",title:"New layout",onClick:()=>{ve.activate?.(0),T()}});const ge=e=>{(x.peek()||h?.dirty())&&(xe(),e.preventDefault(),e.returnValue="")};window.addEventListener("beforeunload",ge),i(()=>window.removeEventListener("beforeunload",ge));function xe(){try{h?.dirty()&&S.set(le,{key:h.key,values:h.values(),at:new Date().toISOString()}),x.peek()&&S.set(z,{...re(),at:new Date().toISOString()})}catch{}}if(m={dirty:()=>x.peek()||!!h?.dirty(),dispose(){V=!0,xe(),be=!0,[...C].forEach(e=>{try{e.close(!0)}catch{}}),c.splice(0).forEach(e=>{try{e()}catch{}})}},I.scan(u),await Promise.all([X(),Fe()]),!p())return;I.scan(u);let $=null,v=null;try{$=S.get(z),v=S.get(le)}catch{}const we=e=>{try{S.remove?S.remove(e):S.set(e,null)}catch{}};if($&&typeof $=="object"&&"spacerSize"in $&&(we(z),await E.confirm("You left unsaved spacer options. Put them back?")&&p()&&(f.value=String($.spacerSize??""),g.value=String($.spacerClass??""),ve.activate?.(1))),v?.values&&p()){we(le);const e=v.key&&b.peek()[v.key],t=e?`your changes to "${G(b.peek()[v.key].label||v.key)}"`:"the new layout you started";await E.confirm(`You left ${t} unsaved. Pick up where you left off?`)&&p()&&T(e?v.key:null,{draft:v.values})}}};
|