domma-cms 0.6.12 → 0.6.13
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.
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
function z(){I.register("bold",{viewBox:"0 0 24 24",path:"M7 5H14a3 3 0 0 1 0 6H7V5zM7 11H15a3 3 0 0 1 0 6H7V11z",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("italic",{viewBox:"0 0 24 24",path:"M11 5h4M9 19h4M13 5l-2 14",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("strikethrough",{viewBox:"0 0 24 24",path:"M16 4H9a3 3 0 0 0 0 6h6a3 3 0 0 1 0 6H6M3 12h18",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("quote",{viewBox:"0 0 24 24",path:"M3 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1zM15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("eye",{viewBox:"0 0 24 24",path:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("expand",{viewBox:"0 0 24 24",path:"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("columns",{viewBox:"0 0 24 24",path:"M3 4h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM12 4v16",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("card",{viewBox:"0 0 24 24",paths:["M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z","M3 9h18"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("help-circle",{viewBox:"0 0 24 24",path:"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 17h.01M12 13a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("spacer-insert",{viewBox:"0 0 24 24",paths:["M3 8h18","M3 16h18","M12 8v8"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("icon-pick",{viewBox:"0 0 24 24",paths:["M4 4h6v6H4z","M14 4h6v6h-6z","M4 14h6v6H4z","M14 14h6v6h-6z"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("btn-insert",{viewBox:"0 0 24 24",paths:["M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z","M8 12h8M12 9v6"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("link-shortcode",{viewBox:"0 0 24 24",paths:["M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71","M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("layout-list",{viewBox:"0 0 24 24",paths:["M3 5h18M3 9h18","M3 14h4v6H3zM9 14h12M9 17h8"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("sparkles",{viewBox:"0 0 24 24",paths:["M12 3L13.5 8.5H19L14.5 11.5L16 17L12 14L8 17L9.5 11.5L5 8.5H10.5L12 3Z","M19 3L19.7 5.3H22L20.2 6.6L20.9 9L19 7.7L17.1 9L17.8 6.6L16 5.3H18.3L19 3Z","M5 13L5.5 14.7H7L5.8 15.5L6.3 17.2L5 16.3L3.7 17.2L4.2 15.5L3 14.7H4.5L5 13Z"],stroke:"currentColor",fill:"none",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})}export function wrapSelection(e,
|
|
1
|
+
function z(){I.register("bold",{viewBox:"0 0 24 24",path:"M7 5H14a3 3 0 0 1 0 6H7V5zM7 11H15a3 3 0 0 1 0 6H7V11z",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("italic",{viewBox:"0 0 24 24",path:"M11 5h4M9 19h4M13 5l-2 14",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("strikethrough",{viewBox:"0 0 24 24",path:"M16 4H9a3 3 0 0 0 0 6h6a3 3 0 0 1 0 6H6M3 12h18",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("quote",{viewBox:"0 0 24 24",path:"M3 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1zM15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("eye",{viewBox:"0 0 24 24",path:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("expand",{viewBox:"0 0 24 24",path:"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("columns",{viewBox:"0 0 24 24",path:"M3 4h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM12 4v16",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("card",{viewBox:"0 0 24 24",paths:["M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z","M3 9h18"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("help-circle",{viewBox:"0 0 24 24",path:"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 17h.01M12 13a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2",stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("spacer-insert",{viewBox:"0 0 24 24",paths:["M3 8h18","M3 16h18","M12 8v8"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("icon-pick",{viewBox:"0 0 24 24",paths:["M4 4h6v6H4z","M14 4h6v6h-6z","M4 14h6v6H4z","M14 14h6v6h-6z"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("btn-insert",{viewBox:"0 0 24 24",paths:["M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z","M8 12h8M12 9v6"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("link-shortcode",{viewBox:"0 0 24 24",paths:["M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71","M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("layout-list",{viewBox:"0 0 24 24",paths:["M3 5h18M3 9h18","M3 14h4v6H3zM9 14h12M9 17h8"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("sparkles",{viewBox:"0 0 24 24",paths:["M12 3L13.5 8.5H19L14.5 11.5L16 17L12 14L8 17L9.5 11.5L5 8.5H10.5L12 3Z","M19 3L19.7 5.3H22L20.2 6.6L20.9 9L19 7.7L17.1 9L17.8 6.6L16 5.3H18.3L19 3Z","M5 13L5.5 14.7H7L5.8 15.5L6.3 17.2L5 16.3L3.7 17.2L4.2 15.5L3 14.7H4.5L5 13Z"],stroke:"currentColor",fill:"none",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),I.register("accordion-insert",{viewBox:"0 0 24 24",paths:["M3 4h18","M3 8h18","M8 11l4 4 4-4","M3 16h18","M3 20h18"],stroke:"currentColor",fill:"none",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})}export function wrapSelection(t,e,p){const i=t.selectionStart,s=t.selectionEnd,n=t.value,l=n.substring(i,s);l?(t.value=n.substring(0,i)+e+l+p+n.substring(s),t.selectionStart=i+e.length,t.selectionEnd=s+e.length):(t.value=n.substring(0,i)+e+p+n.substring(i),t.selectionStart=t.selectionEnd=i+e.length),t.dispatchEvent(new Event("input",{bubbles:!0})),t.focus()}export function insertAtCursor(t,e){const p=t.selectionStart,i=t.value;t.value=i.substring(0,p)+e+i.substring(p),t.selectionStart=t.selectionEnd=p+e.length,t.dispatchEvent(new Event("input",{bubbles:!0})),t.focus()}export function insertLine(t,e){const p=t.selectionStart,i=t.value,s=i.lastIndexOf(`
|
|
2
2
|
`,p-1)+1,n=i.indexOf(`
|
|
3
|
-
`,s),
|
|
4
|
-
${
|
|
5
|
-
[/reveal]`},{label:"Reveal (slide up)",snippet:
|
|
6
|
-
${
|
|
7
|
-
[/reveal]`},{label:"Reveal (zoom)",snippet:
|
|
8
|
-
${
|
|
9
|
-
[/reveal]`},{category:"Animation"},{label:"Breathe",snippet:
|
|
10
|
-
${
|
|
11
|
-
[/breathe]`},{label:"Pulse",snippet:
|
|
12
|
-
${
|
|
13
|
-
[/pulse]`},{label:"Shake",snippet:
|
|
14
|
-
${
|
|
15
|
-
[/shake]`},{label:"CSS Animate",snippet:
|
|
16
|
-
${
|
|
17
|
-
[/animate]`},{category:"Text"},{label:"Typewriter",snippet:
|
|
18
|
-
${
|
|
19
|
-
[/scribe]`},{label:"Scramble",snippet:
|
|
20
|
-
${
|
|
21
|
-
[/scramble]`},{label:"Counter",snippet:()=>'[counter to="100" /]',insert:!0},{category:"Visual"},{label:"Ripple",snippet:
|
|
22
|
-
${
|
|
23
|
-
[/ripple]`},{label:"Twinkle",snippet:
|
|
24
|
-
${
|
|
25
|
-
[/twinkle]`},{label:"Ambient bg",snippet:
|
|
26
|
-
${
|
|
27
|
-
[/ambient]`},{category:"Celebrations"},{label:"Firework (burst)",snippet:()=>'[firework type="burst" colour="rainbow" /]',insert:!0},{label:"Firework (sparkle)",snippet:()=>'[firework type="sparkle" colour="primary" /]',insert:!0},{label:"Firework (wrap)",snippet:
|
|
28
|
-
${
|
|
3
|
+
`,s),l=i.substring(s,n===-1?i.length:n);if(l.startsWith(e)){const r=n===-1?"":i.substring(n);t.value=i.substring(0,s)+l.substring(e.length)+r,t.selectionStart=t.selectionEnd=Math.max(s,p-e.length)}else t.value=i.substring(0,s)+e+i.substring(s),t.selectionStart=t.selectionEnd=p+e.length;t.dispatchEvent(new Event("input",{bubbles:!0})),t.focus()}const B=[{category:"Entrance"},{label:"Reveal (fade)",snippet:t=>`[reveal animation="fade"]
|
|
4
|
+
${t||"Content"}
|
|
5
|
+
[/reveal]`},{label:"Reveal (slide up)",snippet:t=>`[reveal animation="slide-up"]
|
|
6
|
+
${t||"Content"}
|
|
7
|
+
[/reveal]`},{label:"Reveal (zoom)",snippet:t=>`[reveal animation="zoom"]
|
|
8
|
+
${t||"Content"}
|
|
9
|
+
[/reveal]`},{category:"Animation"},{label:"Breathe",snippet:t=>`[breathe]
|
|
10
|
+
${t||"Content"}
|
|
11
|
+
[/breathe]`},{label:"Pulse",snippet:t=>`[pulse]
|
|
12
|
+
${t||"Content"}
|
|
13
|
+
[/pulse]`},{label:"Shake",snippet:t=>`[shake]
|
|
14
|
+
${t||"Content"}
|
|
15
|
+
[/shake]`},{label:"CSS Animate",snippet:t=>`[animate type="fade-in-up"]
|
|
16
|
+
${t||"Content"}
|
|
17
|
+
[/animate]`},{category:"Text"},{label:"Typewriter",snippet:t=>`[scribe speed="50" cursor="true"]
|
|
18
|
+
${t||"Content"}
|
|
19
|
+
[/scribe]`},{label:"Scramble",snippet:t=>`[scramble]
|
|
20
|
+
${t||"Content"}
|
|
21
|
+
[/scramble]`},{label:"Counter",snippet:()=>'[counter to="100" /]',insert:!0},{category:"Visual"},{label:"Ripple",snippet:t=>`[ripple]
|
|
22
|
+
${t||"Content"}
|
|
23
|
+
[/ripple]`},{label:"Twinkle",snippet:t=>`[twinkle count="80" shape="star"]
|
|
24
|
+
${t||"Content"}
|
|
25
|
+
[/twinkle]`},{label:"Ambient bg",snippet:t=>`[ambient type="float-blobs" speed="slow"]
|
|
26
|
+
${t||"Content"}
|
|
27
|
+
[/ambient]`},{category:"Celebrations"},{label:"Firework (burst)",snippet:()=>'[firework type="burst" colour="rainbow" /]',insert:!0},{label:"Firework (sparkle)",snippet:()=>'[firework type="sparkle" colour="primary" /]',insert:!0},{label:"Firework (wrap)",snippet:t=>`[firework type="burst" colour="rainbow"]
|
|
28
|
+
${t||"Content"}
|
|
29
29
|
[/firework]`},{label:"Fireworks show",snippet:()=>`[fireworks]
|
|
30
30
|
[firework type="burst" colour="rainbow" /]
|
|
31
31
|
[firework type="sparkle" colour="primary" /]
|
|
32
|
-
[/fireworks]`,insert:!0},{label:"Celebrate",snippet:()=>'[celebrate theme="auto" intensity="medium" /]',insert:!0}];function N(e
|
|
33
|
-
`)});const o=
|
|
34
|
-
${
|
|
35
|
-
[/card]`;
|
|
32
|
+
[/fireworks]`,insert:!0},{label:"Celebrate",snippet:()=>'[celebrate theme="auto" intensity="medium" /]',insert:!0}];function N(t,e){const p=document.querySelector(".editor-effects-dropdown-menu");if(p){p.remove();return}const i=document.createElement("div");i.className="editor-effects-dropdown-menu",B.forEach(function(r){if(r.category){const d=document.createElement("div");d.className="editor-effects-category",d.textContent=r.category,i.appendChild(d)}else{const d=document.createElement("button");d.type="button",d.className="editor-effects-item",d.textContent=r.label,d.addEventListener("click",function(){if(i.remove(),r.insert)insertAtCursor(t,r.snippet(""));else{const c=t.selectionStart,m=t.selectionEnd,o=t.value.substring(c,m),a=r.snippet(o);t.value=t.value.substring(0,c)+a+t.value.substring(m),t.selectionStart=c,t.selectionEnd=c+a.length,t.dispatchEvent(new Event("input",{bubbles:!0})),t.focus()}}),i.appendChild(d)}});const s=e.getBoundingClientRect(),n=e.closest(".editor-toolbar").getBoundingClientRect();i.style.top=s.bottom-n.top+4+"px",i.style.left=s.left-n.left+"px",e.closest(".editor-toolbar").appendChild(i);function l(r){!i.contains(r.target)&&r.target!==e&&(i.remove(),document.removeEventListener("click",l,!0))}setTimeout(function(){document.addEventListener("click",l,!0)},0)}const L=["activity","airpods","airport","alert-circle","alert-warning","ambulance","angry","annoyed","apartment","arch","archive","arrow-down","arrow-down-left","arrow-down-right","arrow-left","arrow-right","arrow-up","arrow-up-left","arrow-up-right","astonished","at-sign","attachment","award","badge","ban","bandage","bank","banknote","barbell","barcode","barn","baseball","basketball","battery","battery-charging","bauble","bell","bell-off","bells","bicycle","bitcoin","blood-drop","blush","bold","bone","book","book-closed","book-open","bookmark","bookmark-filled","bowling","box","boxing-glove","brain","bridge","briefcase","building","bus","cabin","cake","calculator","calendar","camera","camera-off","candy-cane","capsule","car","cart","cart-add","cash","cast","castle","chart-area","chart-bar","chart-bar-horizontal","chart-candlestick","chart-line","chart-pie","chat","chat-alt","check","check-circle","check-circle-filled","check-square","chevron-down","chevron-left","chevron-right","chevron-up","chevrons-down","chevrons-left","chevrons-right","chevrons-up","church","circle","circle-filled","clear-format","clipboard","clipboard-check","clipboard-list","clock","close","cloud","cloud-download","cloud-drizzle","cloud-lightning","cloud-off","cloud-rain","cloud-sun","cloud-upload","code","code-block","code-inline","cog","coins","columns","comment","compass","component","confused","cool","copy","corner-down-left","corner-down-right","corner-up-left","corner-up-right","court","cpu","credit-card","crown","crutch","cry","currency-dollar","currency-euro","currency-pound","cycling","database","dead","desktop","disappointed","dna","document","document-add","document-check","document-remove","document-text","dollar-sign","dome","dot","dots-horizontal","dots-vertical","download","droplet","droplets","dumbbell","edit","embed","emoji-happy","emoji-sad","euro-sign","exclamation","expand","expressionless","external-link","eye","eye-medical","eye-off","factory","fast-forward","feather","file-code","file-text","file-zip","fill","film","filter","fire","first-aid","fishing","flag","fog","folder","folder-add","folder-minus","folder-open","folder-plus","folder-remove","football","fortress","fuel","gamepad","garage","gauge","gift","git-branch","github","globe","golf","grid","grin","growth","hard-drive","hash","haze","heading-1","heading-2","heading-3","headphones","heart","heart-eyes","heart-filled","heart-pulse","heartbeat","help-circle","holly","home","hospital","hotel","house","image","image-add","images","inbox","indent","info","info-filled","investment","invoice","italic","joy","joystick","key","kettlebell","keyboard","laptop","laugh","layers","layout","library","lighthouse","lightning","link","link-2","link-add","linkedin","list","list-bullet","list-numbered","loader","loading","lock","log-in","log-out","lungs","mail","mail-open","map","map-pin","mask","maximize","medal","medical-cross","menu","menu-alt","message-circle","message-square","mic","mic-off","microscope","minimize","minus","minus-circle","minus-square","monitor","monument","moon","moon-star","more-horizontal","more-vertical","mosque","motorcycle","mountain","mouse","mouse-pointer","move","museum","music","nerd","neutral","notification","obelisk","office","outdent","package","palette","panel-bottom","panel-left","panel-right","panel-top","paperclip","parking","pause","pause-filled","percent","phone","phone-call","phone-incoming","phone-off","phone-outgoing","piggy-bank","pill","pill-bottle","pin","play","play-circle","play-filled","plug","plus","plus-circle","plus-square","podium","pound-sign","printer","pulse","pyramid","qrcode","question","quote","racket","radio","rage","rain","rainbow","receipt","redo","refresh","refresh-cw","reindeer","rewind","road","rotate-ccw","rotate-cw","router","rss","running","sad","safe","save","scale","scale-weight","school","search","send","server","settings","share","share-2","share-alt","shield","shield-alert","shield-check","shield-x","shipping","shocked","shopping-bag","shrink","sick","sidebar-left","sidebar-right","silly","skate","ski","skip-back","skip-forward","skyscraper","sleepy","sleigh","sliders","smartphone","smartwatch","smile","snow","snowflake","snowman","sob","soccer","sort","sparkles","speaker","spinner","square","stadium","star","star-decoration","star-eyes","star-filled","stethoscope","stop","stop-filled","stopwatch","store","strikethrough","sun","sunrise","sunset","surfboard","surprised","swimming","sync","syringe","tablet","tablet-smartphone","tag","tags","target","taxi","temple","tennis","tent","terminal","test-tube","text-center","text-left","text-right","thermometer","thermometer-medical","thermometer-sun","thinking","thumb-down","thumb-up","tongue","tool","tooth","tower","train-station","trash","tree","trending-down","trending-neutral","trending-up","trophy","truck","tv","tv-minimal","twitter","type","umbrella","underline","undo","university","unlink","unlock","upload","usb","user","user-add","user-check","user-group","user-plus","user-remove","users","vaccine","van","vault","video","video-off","volleyball","volume","volume-down","volume-mute","volume-off","volume-up","wallet","warehouse","warning","warning-filled","watch","webcam","wheelchair","whistle","wifi","wifi-off","wind","windmill","wink","wreath","x","x-circle","x-circle-filled","yoga","youtube","zany","zap"];function H(t,e,p){const i=document.querySelector(".editor-spacer-picker");if(i){i.remove();return}const s=document.createElement("div");s.className="editor-spacer-picker";const n=document.createElement("div");n.className="editor-spacer-picker-label",n.textContent="Spacer height",s.appendChild(n);const l=document.createElement("div");l.className="editor-spacer-picker-row";const r=document.createElement("input");r.type="range",r.className="editor-spacer-slider",r.min="4",r.max="200",r.step="4",r.value=p;const d=document.createElement("span");d.className="editor-spacer-slider-value",d.textContent=p+"px",r.addEventListener("input",function(){d.textContent=this.value+"px"}),l.appendChild(r),l.appendChild(d),s.appendChild(l);const c=document.createElement("button");c.type="button",c.className="btn btn-primary btn-sm editor-spacer-insert-btn",c.textContent="Insert",s.appendChild(c);function m(b){!s.contains(b.target)&&b.target!==e&&(s.remove(),document.removeEventListener("click",m,!0))}c.addEventListener("click",function(){s.remove(),document.removeEventListener("click",m,!0),insertAtCursor(t,`[spacer size="${r.value}" /]
|
|
33
|
+
`)});const o=e.getBoundingClientRect(),a=e.closest(".editor-toolbar").getBoundingClientRect();s.style.top=o.bottom-a.top+4+"px";const u=o.left-a.left;s.style.left=Math.min(u,a.width-240-8)+"px",e.closest(".editor-toolbar").appendChild(s),setTimeout(function(){document.addEventListener("click",m,!0)},0)}function A(t,e){const p=document.querySelector(".editor-icon-picker");if(p){p.remove();return}const i=document.createElement("div");i.className="editor-icon-picker";const s=document.createElement("input");s.type="text",s.className="form-input editor-icon-picker-search",s.placeholder="Search icons\u2026",i.appendChild(s);const n=document.createElement("div");n.className="editor-icon-picker-size-row";const l=document.createElement("label");l.textContent="Size (px)";const r=document.createElement("input");r.type="number",r.className="form-input editor-icon-picker-size",r.placeholder="default",r.min="8",r.max="256",n.appendChild(l),n.appendChild(r),i.appendChild(n);const d=document.createElement("div");d.className="editor-icon-picker-grid",i.appendChild(d);function c(g){!i.contains(g.target)&&g.target!==e&&(i.remove(),document.removeEventListener("click",c,!0))}function m(g){d.textContent="";const k=g?L.filter(f=>f.includes(g.toLowerCase())):L;if(k.length===0){const f=document.createElement("div");f.className="editor-icon-picker-empty",f.textContent="No icons found",d.appendChild(f);return}k.forEach(function(f){const v=document.createElement("button");v.type="button",v.className="editor-icon-picker-item";const w=document.createElement("span");w.setAttribute("data-icon",f);const y=document.createElement("span");y.textContent=f,v.appendChild(w),v.appendChild(y),v.addEventListener("click",function(){i.remove(),document.removeEventListener("click",c,!0);const C=r.value.trim(),M=C?`[icon name="${f}" size="${C}" /]`:`[icon name="${f}" /]`;insertAtCursor(t,M)}),d.appendChild(v)}),Domma.icons.scan(d)}m(""),s.addEventListener("input",function(){m(this.value.trim())});const o=e.getBoundingClientRect(),a=e.closest(".editor-toolbar").getBoundingClientRect();i.style.top=o.bottom-a.top+4+"px";const u=o.left-a.left,b=320,h=a.width;i.style.left=Math.min(u,h-b-8)+"px",e.closest(".editor-toolbar").appendChild(i),requestAnimationFrame(function(){s.focus()}),setTimeout(function(){document.addEventListener("click",c,!0)},0)}function j(t,e,p,i){const s=document.querySelector(".editor-toolbar-dropdown");if(s){s.remove();return}const n=document.createElement("div");n.className="editor-toolbar-dropdown",p.forEach(function(m){const o=document.createElement("button");if(o.type="button",o.className="editor-toolbar-dropdown-item",m.icon){const u=document.createElement("span");u.setAttribute("data-icon",m.icon),o.appendChild(u)}const a=document.createElement("span");a.textContent=m.label,o.appendChild(a),o.addEventListener("click",function(){n.remove(),document.removeEventListener("click",c,!0),x(m.action,t,e,i)}),n.appendChild(o)});const l=e.getBoundingClientRect(),r=e.closest(".editor-toolbar").getBoundingClientRect();n.style.top=l.bottom-r.top+4+"px";const d=l.left-r.left;n.style.left=Math.min(d,r.width-180-8)+"px",e.closest(".editor-toolbar").appendChild(n),Domma.icons.scan(n);function c(m){!n.contains(m.target)&&m.target!==e&&(n.remove(),document.removeEventListener("click",c,!0))}setTimeout(function(){document.addEventListener("click",c,!0)},0)}function x(t,e,p,i){const{spacerDefault:s,handlers:n}=i;if(typeof t=="function")t(e);else if(t==="button")if(n.button)n.button(e);else{const l=e.selectionStart,r=e.selectionEnd,c=`[button href="" variant="primary"]${e.value.substring(l,r)||"Click me"}[/button]`;e.value=e.value.substring(0,l)+c+e.value.substring(r),e.selectionStart=e.selectionEnd=l+14,e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()}else if(t==="linksc")if(n.linksc)n.linksc(e);else{const l=e.selectionStart,r=e.selectionEnd,c=`[link href=""]${e.value.substring(l,r)||"Link text"}[/link]`;e.value=e.value.substring(0,l)+c+e.value.substring(r),e.selectionStart=e.selectionEnd=l+12,e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()}else if(t==="link")n.link&&n.link(e);else if(t==="image")n.image&&n.image(e);else if(t==="card")if(n.card)n.card(e);else{const l=e.selectionStart,r=e.selectionEnd,c=`[card title="Card Title"]
|
|
34
|
+
${e.value.substring(l,r)||"Content here"}
|
|
35
|
+
[/card]`;e.value=e.value.substring(0,l)+c+e.value.substring(r),e.selectionStart=l+13,e.selectionEnd=l+23,e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()}else if(t==="grid")if(n.grid)n.grid(e);else{const l=e.selectionStart,r=`[grid cols="2" gap="4"]
|
|
36
36
|
[col]
|
|
37
37
|
Column 1
|
|
38
38
|
[/col]
|
|
@@ -40,7 +40,7 @@ Column 1
|
|
|
40
40
|
Column 2
|
|
41
41
|
[/col]
|
|
42
42
|
[/grid]
|
|
43
|
-
`;
|
|
43
|
+
`;e.value=e.value.substring(0,l)+r+e.value.substring(l),e.selectionStart=e.selectionEnd=l+r.length,e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()}else if(t==="badge"){const l=e.selectionStart,r=e.selectionEnd,c=`[badge variant="primary"]${e.value.substring(l,r)||"New"}[/badge]`;e.value=e.value.substring(0,l)+c+e.value.substring(r),e.selectionStart=l+16,e.selectionEnd=l+23,e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()}else if(t==="timeline"){const l=e.selectionStart,r=`[timeline layout="vertical"]
|
|
44
44
|
[event title="First Event" date="${new Date().toISOString().slice(0,10)}" status="completed"]
|
|
45
45
|
Describe this event.
|
|
46
46
|
[/event]
|
|
@@ -48,7 +48,11 @@ Describe this event.
|
|
|
48
48
|
Describe this event.
|
|
49
49
|
[/event]
|
|
50
50
|
[/timeline]
|
|
51
|
-
`;
|
|
51
|
+
`;e.value=e.value.substring(0,l)+r+e.value.substring(l),e.selectionStart=e.selectionEnd=l+r.length,e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()}else if(t==="effects")n.effects?n.effects(e):N(e,p);else if(t==="spacerpick")H(e,p,s);else if(t==="iconpick")A(e,p);else if(t==="collection")n.collection?n.collection(e):insertAtCursor(e,'[collection slug="" display="table" /]');else if(t==="view")n.view&&n.view(e);else if(t==="cta")n.cta&&n.cta(e);else if(t==="form")n.form?n.form(e):insertAtCursor(e,'[form slug="" /]');else if(t==="tabs")n.tabs&&n.tabs(e);else if(t==="accordion")if(n.accordion)n.accordion(e);else{const l=e.selectionStart,r=`[accordion]
|
|
52
|
+
[item title="Item 1"]Content here.[/item]
|
|
53
|
+
[item title="Item 2"]Content here.[/item]
|
|
54
|
+
[/accordion]
|
|
55
|
+
`;e.value=e.value.substring(0,l)+r+e.value.substring(l),e.selectionStart=e.selectionEnd=l+r.length,e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()}else t==="help"&&n.help&&n.help(e)}const S=[{icon:"bold",title:"Bold (Ctrl+B)",action:t=>wrapSelection(t,"**","**")},{icon:"italic",title:"Italic (Ctrl+I)",action:t=>wrapSelection(t,"_","_")},{icon:"strikethrough",title:"Strikethrough",action:t=>wrapSelection(t,"~~","~~")},"|",{type:"dropdown",icon:"heading-1",title:"Headings",items:[{label:"Heading 1",icon:"heading-1",action:t=>insertLine(t,"# ")},{label:"Heading 2",icon:"heading-2",action:t=>insertLine(t,"## ")},{label:"Heading 3",icon:"heading-3",action:t=>insertLine(t,"### ")}]},"|",{icon:"list-bullet",title:"Bullet list",action:t=>insertLine(t,"- ")},{icon:"list-numbered",title:"Numbered list",action:t=>insertLine(t,"1. ")},"|",{type:"dropdown",icon:"quote",title:"Paragraph",items:[{label:"Blockquote",icon:"quote",action:t=>insertLine(t,"> ")},{label:"Horizontal rule",icon:"minus-circle",action:t=>insertAtCursor(t,`
|
|
52
56
|
---
|
|
53
|
-
`)}]},"|",{type:"dropdown",icon:"code-inline",title:"Code",items:[{label:"Inline code",icon:"code-inline",action:
|
|
54
|
-
`,n.selectionStart-1)+1,b=n.value.substring(u),h=b.match(/^ {1,4}/);if(h){const g=n.value.substring(0,u),k=n.value.substring(u+h[0].length);n.value=g+b.substring(h[0].length),n.selectionStart=n.selectionEnd=Math.max(u,n.selectionStart-h[0].length),n.dispatchEvent(new Event("input",{bubbles:!0}))}}else insertAtCursor(n," ")}),{$toolbar:
|
|
57
|
+
`)}]},"|",{type:"dropdown",icon:"code-inline",title:"Code",items:[{label:"Inline code",icon:"code-inline",action:t=>wrapSelection(t,"`","`")},{label:"Code block",icon:"code-block",action:t=>wrapSelection(t,"\n```\n","\n```\n")}]},"|",{type:"dropdown",icon:"plus-circle",title:"Insert",items:[{label:"Image",icon:"image-add",action:"image"},{label:"Card",icon:"card",action:"card"},{label:"Grid",icon:"columns",action:"grid"},{label:"Badge",icon:"badge",action:"badge"},{label:"Timeline",icon:"activity",action:"timeline"},{label:"Spacer",icon:"spacer-insert",action:"spacerpick"},{label:"Icon",icon:"icon-pick",action:"iconpick"},{label:"Collection",icon:"database",action:"collection"},{label:"View",icon:"eye",action:"view"},{label:"Button",icon:"btn-insert",action:"button"},{label:"Link",icon:"link-shortcode",action:"linksc"},{label:"Tabs",icon:"layout-list",action:"tabs"},{label:"Accordion",icon:"accordion-insert",action:"accordion"},{label:"CTA Button",icon:"mouse-pointer",action:"cta"},{label:"Form",icon:"file-text",action:"form"}]},"|",{icon:"sparkles",title:"Effects",action:"effects"},{icon:"help-circle",title:"Editor help",action:"help"}];export function createToolbar(t,e,p={}){z();const i={link:null,image:null,card:null,grid:null,help:null,effects:null,collection:null,view:null,cta:null,form:null,button:null,linksc:null,tabs:null,accordion:null},s=p.spacerDefault??40,n=t.get(0),l=e.get(0);l.textContent="",S.forEach((o,a)=>{if(o==="|"){const u=document.createElement("span");u.className="editor-toolbar-sep",l.appendChild(u)}else{const u=document.createElement("button");u.className=o.type==="dropdown"?"editor-toolbar-btn editor-toolbar-dropdown-trigger":"editor-toolbar-btn",u.setAttribute("data-tooltip",o.title),u.setAttribute("data-idx",String(a)),u.type="button";const b=document.createElement("span");if(b.setAttribute("data-icon",o.icon),u.appendChild(b),o.type==="dropdown"){const h=document.createElement("span");h.className="editor-toolbar-caret",h.textContent="\u25BE",u.appendChild(h)}l.appendChild(u)}});const r=document.createElement("div");r.className="editor-toolbar-right",[{mode:"split",icon:"columns",label:"Split view",active:!0},{mode:"write",icon:"file-text",label:"Write only",active:!1},{mode:"preview",icon:"eye",label:"Preview only",active:!1}].forEach(o=>{const a=document.createElement("button");a.className="editor-view-btn"+(o.active?" active":""),a.setAttribute("data-mode",o.mode),a.setAttribute("data-tooltip",o.label),a.type="button";const u=document.createElement("span");u.setAttribute("data-icon",o.icon),a.appendChild(u),r.appendChild(a)});const d=document.createElement("span");d.className="editor-toolbar-sep",r.appendChild(d);const c=document.createElement("button");c.id="fullscreen-btn",c.className="editor-toolbar-btn",c.setAttribute("data-tooltip","Toggle fullscreen"),c.type="button";const m=document.createElement("span");return m.setAttribute("data-icon","expand"),c.appendChild(m),r.appendChild(c),l.appendChild(r),Domma.icons.scan(),l.querySelectorAll("[data-tooltip]").forEach(o=>{E.tooltip(o,{content:o.getAttribute("data-tooltip"),position:"top"})}),e.on("click",".editor-toolbar-btn[data-idx]",function(){const o=parseInt($(this).data("idx"),10),a=S[o];if(!a||a==="|")return;const u=e.get(0).querySelector(`[data-idx="${o}"]`),b={spacerDefault:s,handlers:i};a.type==="dropdown"?j(n,u,a.items,b):x(a.action,n,u,b)}),t.on("keydown",function(o){const a=o.key.toLowerCase();if(o.ctrlKey||o.metaKey)a==="b"?(o.preventDefault(),wrapSelection(n,"**","**")):a==="i"?(o.preventDefault(),wrapSelection(n,"_","_")):a==="k"&&(o.preventDefault(),i.link&&i.link(n));else if(o.key==="Tab")if(o.preventDefault(),o.shiftKey){const u=n.value.lastIndexOf(`
|
|
58
|
+
`,n.selectionStart-1)+1,b=n.value.substring(u),h=b.match(/^ {1,4}/);if(h){const g=n.value.substring(0,u),k=n.value.substring(u+h[0].length);n.value=g+b.substring(h[0].length),n.selectionStart=n.selectionEnd=Math.max(u,n.selectionStart-h[0].length),n.dispatchEvent(new Event("input",{bubbles:!0}))}}else insertAtCursor(n," ")}),{$toolbar:e,onLink(o){i.link=o},onImage(o){i.image=o},onCard(o){i.card=o},onGrid(o){i.grid=o},onHelp(o){i.help=o},onEffects(o){i.effects=o},onCollection(o){i.collection=o},onView(o){i.view=o},onCta(o){i.cta=o},onForm(o){i.form=o},onButton(o){i.button=o},onLinkShortcode(o){i.linksc=o},onTabs(o){i.tabs=o},onAccordion(o){i.accordion=o}}}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import{api as
|
|
1
|
+
import{api as W}from"../api.js";import{createToolbar as Te,insertAtCursor as fe}from"../lib/markdown-toolbar.js";import{populateThemeSelect as Se}from"../lib/themes.js";function Le(){const d=E.slideover({title:"Editor Reference",size:"md",position:"right"}),ie="background:var(--dm-surface-subtle,#1a1a2e);padding:.2rem .4rem;border-radius:3px;font-size:.85em;font-family:monospace;",ye="margin:1rem 0 .5rem;font-size:1rem;";function B(r){const t=document.createElement("code");return t.style.cssText=ie,t.textContent=r,t}function q(r){const t=document.createElement("h3");return t.style.cssText=ye,t.textContent=r,t}const xe=document.createElement("div");xe.style.cssText="padding:1rem;";const se=document.createElement("div");se.className="tabs";const Ee=document.createElement("div");Ee.className="tab-list",["Basics","Layout","Components","Data","Advanced"].forEach((r,t)=>{const e=document.createElement("button");e.className="tab-item"+(t===0?" active":""),e.textContent=r,Ee.appendChild(e)});const re=document.createElement("div");re.className="tab-content";const O="display:flex;flex-direction:column;gap:1rem;",ce=document.createElement("div");ce.className="tab-panel active",ce.style.cssText=O;const ne=document.createElement("div");ne.className="tab-panel",ne.style.cssText=O;const _=document.createElement("div");_.className="tab-panel",_.style.cssText=O;const pe=document.createElement("div");pe.className="tab-panel",pe.style.cssText=O;const ue=document.createElement("div");ue.className="tab-panel",ue.style.cssText=O,re.appendChild(ce),re.appendChild(ne),re.appendChild(_),re.appendChild(pe),re.appendChild(ue),se.appendChild(Ee),se.appendChild(re),xe.appendChild(se);const he=document.createElement("div");he.appendChild(q("Markdown Basics"));const X=document.createElement("table");X.style.cssText="width:100%;border-collapse:collapse;font-size:.9em;";const V=document.createElement("thead"),K=document.createElement("tr");["Syntax","Result"].forEach(r=>{const t=document.createElement("th");t.style.cssText="text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--dm-border,#333);",t.textContent=r,K.appendChild(t)}),V.appendChild(K),X.appendChild(V);const Y=document.createElement("tbody");[["**bold**","bold (rendered bold)"],["_italic_","italic (rendered italic)"],["## Heading","Heading (h2)"],["[text](url)","Link"],["","Image"],["- item","Bullet list"],["`code`","Inline code"],["---","Divider"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.35rem .5rem;vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.35rem .5rem;vertical-align:top;color:var(--dm-text-muted,#aaa);font-size:.85em;",c.textContent=t,e.appendChild(n),e.appendChild(c),Y.appendChild(e)}),X.appendChild(Y),he.appendChild(X),ce.appendChild(he);const Z=document.createElement("div");Z.appendChild(q("Grid & Columns"));function L(r){const t=document.createElement("p");return t.style.cssText="margin:.3rem 0 .6rem;font-size:.82em;color:var(--dm-text-muted,#aaa);",t.textContent=r,t}function h(r,t,e){const n=document.createElement("p");n.style.cssText="margin:.75rem 0 .25rem;font-size:.85em;font-weight:600;",n.textContent=r;const c=document.createElement("pre");c.style.cssText=ie+"display:block;padding:.5rem .75rem;white-space:pre;overflow-x:auto;margin:0;",c.textContent=t;const ge=document.createDocumentFragment();return ge.appendChild(n),ge.appendChild(c),e&&ge.appendChild(L(e)),ge}const j=document.createElement("table");j.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['cols="N"',"[grid] only","Number of columns (1\u201312)"],['gap="N"',"[grid], [row]","Gap between columns/rows (1\u20136)"],['span="N"',"[col] only","How many columns this cell spans"],['fullwidth="true"',"[grid] only","Break out of page container to span full viewport"],['class="x"',"all","Add extra CSS classes"]].forEach(([r,t,e])=>{const n=document.createElement("tr");[r,t,e].forEach((c,ge)=>{const ve=document.createElement("td");ve.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",ge===0?ve.appendChild(B(r)):(ve.style.color="var(--dm-text-muted,#aaa)",ve.textContent=c),n.appendChild(ve)}),j.appendChild(n)}),Z.appendChild(j),Z.appendChild(h("Equal columns",`[grid cols="3" gap="4"]
|
|
2
2
|
[col]One[/col]
|
|
3
3
|
[col]Two[/col]
|
|
4
4
|
[col]Three[/col]
|
|
5
|
-
[/grid]`,"cols sets the track count; each [col] fills one track.")),
|
|
5
|
+
[/grid]`,"cols sets the track count; each [col] fills one track.")),Z.appendChild(h("Column spanning (12-col base)",`[grid cols="12" gap="3"]
|
|
6
6
|
[col span="8"]Main content[/col]
|
|
7
7
|
[col span="4"]Sidebar[/col]
|
|
8
|
-
[/grid]`,"span values must add up to cols. Common splits: 8/4, 6/6, 9/3.")),
|
|
8
|
+
[/grid]`,"span values must add up to cols. Common splits: 8/4, 6/6, 9/3.")),Z.appendChild(h("Row (flexbox, equal-width)",`[row gap="4"]
|
|
9
9
|
[col]Left[/col]
|
|
10
10
|
[col]Right[/col]
|
|
11
|
-
[/row]`,"Use [row] when you want equal-width columns without specifying a count.")),
|
|
11
|
+
[/row]`,"Use [row] when you want equal-width columns without specifying a count.")),Z.appendChild(h("Card in a grid",`[grid cols="3" gap="4"]
|
|
12
12
|
[col]
|
|
13
13
|
[card title="One"]Content[/card]
|
|
14
14
|
[/col]
|
|
@@ -18,21 +18,21 @@ import{api as _}from"../api.js";import{createToolbar as ke,insertAtCursor as he}
|
|
|
18
18
|
[col]
|
|
19
19
|
[card title="Three"]Content[/card]
|
|
20
20
|
[/col]
|
|
21
|
-
[/grid]`,null)),
|
|
21
|
+
[/grid]`,null)),ne.appendChild(Z);const Q=document.createElement("div");Q.appendChild(q("Cards")),Q.appendChild(h("Basic card",`[card title="Optional Title"]
|
|
22
22
|
Markdown **works** here.
|
|
23
|
-
[/card]`,"Omit title for a card with no header.")),
|
|
23
|
+
[/card]`,"Omit title for a card with no header.")),Q.appendChild(h("Icon \u2014 inline (default)",`[card title="Feature" icon="star"]
|
|
24
24
|
Icon sits left of the title in a flex row.
|
|
25
|
-
[/card]`,"icon accepts any Domma icon name. Default layout when icon is set.")),
|
|
25
|
+
[/card]`,"icon accepts any Domma icon name. Default layout when icon is set.")),Q.appendChild(h("Icon \u2014 stacked (centred)",`[card title="Feature" icon="star" icon-layout="stacked" hover]
|
|
26
26
|
Icon is centred above the title. Great for feature tiles.
|
|
27
|
-
[/card]`,'icon-layout="stacked" centres the icon above the title. Combine with hover for a lift effect.')),
|
|
27
|
+
[/card]`,'icon-layout="stacked" centres the icon above the title. Combine with hover for a lift effect.')),Q.appendChild(h("Icon with subtitle",`[card title="Feature" subtitle="Tagline here" icon="star" icon-layout="stacked"]
|
|
28
28
|
Body content.
|
|
29
|
-
[/card]`,"subtitle adds a secondary line beneath the title in both layouts.")),
|
|
29
|
+
[/card]`,"subtitle adds a secondary line beneath the title in both layouts.")),Q.appendChild(h("Collapsible card",`[card title="Click to expand" collapsible="true"]
|
|
30
30
|
Hidden by default.
|
|
31
|
-
[/card]`,null)),
|
|
31
|
+
[/card]`,null)),Q.appendChild(h("Full attribute reference",`[card title="Title" subtitle="Sub" icon="star" icon-layout="stacked"
|
|
32
32
|
variant="primary" hover footer="Footer text"
|
|
33
33
|
collapsible="true" class="extra" id="my-card"]
|
|
34
34
|
Body content.
|
|
35
|
-
[/card]`,'All attributes are optional. variant accepts "primary". icon-layout accepts "inline" (default) or "stacked".')),
|
|
35
|
+
[/card]`,'All attributes are optional. variant accepts "primary". icon-layout accepts "inline" (default) or "stacked".')),Q.appendChild(h("Rich header / footer sub-tags",`[card]
|
|
36
36
|
[header]
|
|
37
37
|
### Custom Title with **bold** and [a link](/about)
|
|
38
38
|
[/header]
|
|
@@ -42,43 +42,45 @@ Body content here.
|
|
|
42
42
|
[footer]
|
|
43
43
|
[Read more](/about) | [icon name="arrow-right" /]
|
|
44
44
|
[/footer]
|
|
45
|
-
[/card]`,"Use [header] and [footer] sub-tags for Markdown-rendered header/footer regions. Sub-tags override the title/subtitle/icon and footer attributes when both are present.")),
|
|
45
|
+
[/card]`,"Use [header] and [footer] sub-tags for Markdown-rendered header/footer regions. Sub-tags override the title/subtitle/icon and footer attributes when both are present.")),_.appendChild(Q);const a=document.createElement("div");a.appendChild(q("Badge")),a.appendChild(L("Inline badge/label elements. Self-closing renders an empty coloured dot."));const m=document.createElement("table");m.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['variant="..."',"primary (default), secondary, success, danger, warning, info, light, dark"],["pill","Flag: rounded pill shape (.badge-pill)"],["outline","Flag: outlined style (.badge-outline)"],['size="small|large"',"Reduced or enlarged badge"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),m.appendChild(e)}),a.appendChild(m),a.appendChild(h("Basic badge",'[badge variant="success"]New[/badge]',null)),a.appendChild(h("Pill outline badge",'[badge variant="danger" outline pill]Deprecated[/badge]',null)),_.appendChild(a);const o=document.createElement("div");o.appendChild(q("Button")),o.appendChild(L("Renders a styled anchor as a Domma button. Use the Insert \u2192 Button toolbar item for a guided dialog."));const l=document.createElement("table");l.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['href="..."',"Link destination (required)"],['label="..."',"Button text (self-closing form)"],['variant="..."',"primary (default), secondary, success, danger, warning, info, outline, ghost, link, outline-*"],['size="sm|lg"',"Button size modifier"],['icon="..."',"Domma icon name before the label"],['icon-after="..."',"Domma icon name after the label"],['target="..."','Link target, e.g. "_blank"'],['class="..."',"Extra CSS classes"],['id="..."',"Element id"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),l.appendChild(e)}),o.appendChild(l),o.appendChild(h("Primary button",'[button href="/contact" variant="primary"]Get in touch[/button]',null)),o.appendChild(h("Self-closing with icon",'[button href="/download" variant="success" icon="download" size="sm" label="Download" /]',null)),o.appendChild(h("Opens in new tab",'[button href="https://example.com" variant="outline" target="_blank"]Visit site[/button]',null)),_.appendChild(o);const C=document.createElement("div");C.appendChild(q("Link (shortcode)")),C.appendChild(L("Renders a plain anchor with optional icon, target, and class. Use Insert \u2192 Link for a guided dialog. For simple inline links, standard Markdown [text](url) is fine."));const p=document.createElement("table");p.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['href="..."',"Link destination (required)"],['label="..."',"Link text (self-closing form)"],['target="..."','Link target, e.g. "_blank"'],['class="..."',"CSS classes on the <a>"],['icon="..."',"Domma icon name before the text"],['icon-after="..."',"Domma icon name after the text"],['id="..."',"Element id"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),p.appendChild(e)}),C.appendChild(p),C.appendChild(h("External link in new tab",'[link href="https://example.com" target="_blank" icon-after="external-link"]Visit site[/link]',null)),C.appendChild(h("Self-closing with icon",'[link href="/about" icon="arrow-right" label="About us" /]',null)),_.appendChild(C);const u=document.createElement("div");u.appendChild(q("Spacer")),u.appendChild(L("Self-closing shortcode that inserts a fixed-height blank gap."));const v=document.createElement("table");v.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['size="N"',"Height in px (default: 8)"],['class="..."',"Extra CSS class on the spacer div"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),v.appendChild(e)}),u.appendChild(v),u.appendChild(h("32px gap",'[spacer size="32" /]',null)),ne.appendChild(u);const f=document.createElement("div");f.appendChild(q("Icon")),f.appendChild(L("Self-closing shortcode that renders any Domma icon inline."));const g=document.createElement("table");g.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['name="..."',"Domma icon name (required). Also accepted as src=."],['size="N"',"Width and height in px"],['color="..."',"CSS colour applied via style"],['class="..."',"Extra CSS classes"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),g.appendChild(e)}),f.appendChild(g),f.appendChild(h("Coloured icon",'[icon name="star" size="24" color="#f5a623" /]',null)),_.appendChild(f);const w=document.createElement("div");w.appendChild(q("Center")),w.appendChild(L("Wraps content in a centred div. Works with any content including cards, grids, and text.")),w.appendChild(h("Example","[center]Centred content here[/center]",'Accepts an optional class="..." attribute for extra styling.')),ne.appendChild(w);const S=document.createElement("div");S.appendChild(q("Hero")),S.appendChild(L("Full-width hero sections \u2014 no plugin required. Uses Domma's built-in Hero CSS component."));const N=document.createElement("table");N.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['title="..."',"Heading text"],['tagline="..."',"Subtitle text"],['size="sm|lg|full"',"Height variant (default: normal)"],['variant="dark|primary|gradient-blue|gradient-purple|gradient-sunset|gradient-ocean"',"Colour / gradient preset"],['image="url"',"Background image URL (adds cover mode)"],['overlay="light|dark|darker|gradient|gradient-reverse"',"Image overlay style"],['align="center|left"',"Content alignment (default: center)"],['fullwidth="true"',"Break out of the page container to span full viewport width"],['bg="..."',"Background colour CSS value"],["twinkle","Flag: adds particle overlay (requires Effects plugin)"],['twinkle-count="N"',"Number of particles"],['twinkle-colour="..."',"Particle colour CSS value"],["blobs","Flag: adds ambient blob background"],['blobs-type="..."',"Blob animation type (default: float-blobs)"],['class="..."',"Extra CSS classes"],['id="..."',"Element id"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),N.appendChild(e)}),S.appendChild(N),S.appendChild(h("Basic hero",'[hero title="Welcome" tagline="Build something great"][/hero]',null)),S.appendChild(h("Gradient with body content",`[hero title="Get Started" tagline="Everything you need." size="lg" variant="gradient-blue" align="center"]
|
|
46
46
|
Some introductory **Markdown** content here.
|
|
47
|
-
[/hero]`,null)),
|
|
47
|
+
[/hero]`,null)),S.appendChild(h("Background image with overlay",'[hero title="Our Story" image="/media/hero.jpg" overlay="dark" size="full"][/hero]',"Combine image + overlay for text legibility over photos.")),ne.appendChild(S);const T=document.createElement("div");T.appendChild(q("Interactive Components")),T.appendChild(L("Tabs, accordion, carousel, and countdown \u2014 no plugin required.")),T.appendChild(h("Tabs",`[tabs]
|
|
48
48
|
[tab title="First"]Content **A**[/tab]
|
|
49
49
|
[tab title="Second"]Content **B**[/tab]
|
|
50
|
-
[/tabs]`,'Add style="pills" for pill-style navigation.')),T.appendChild(
|
|
50
|
+
[/tabs]`,'Add style="pills" for pill-style navigation.')),T.appendChild(h("Accordion",`[accordion]
|
|
51
51
|
[item title="Question 1"]Answer here.[/item]
|
|
52
52
|
[item title="Question 2"]Answer here.[/item]
|
|
53
|
-
[/accordion]`,'Add multiple="true" to allow several panels open at once.')),T.appendChild(
|
|
53
|
+
[/accordion]`,'Add multiple="true" to allow several panels open at once.')),T.appendChild(h("Accordion \u2014 collection-bound",'[collection slug="faq" display="accordion" title-field="title" body-field="description" /]',"Renders collection entries as accordion items. Use Insert \u2192 Accordion for a guided dialog.")),T.appendChild(h("Carousel",`[carousel autoplay="true" interval="5000"]
|
|
54
54
|
[slide title="Slide 1"]Description[/slide]
|
|
55
55
|
[slide image="/media/photo.jpg" title="Slide 2"]Caption[/slide]
|
|
56
|
-
[/carousel]`,'Omit autoplay for a manual carousel. loop="false" disables wrapping.')),T.appendChild(
|
|
56
|
+
[/carousel]`,'Omit autoplay for a manual carousel. loop="false" disables wrapping.')),T.appendChild(h("Countdown (to date)",'[countdown to="2026-12-31" format="DD:HH:mm:ss" /]',null)),T.appendChild(h("Countdown (duration)",'[countdown duration="300" format="mm:ss" /]',"duration is in seconds. format options: mm:ss \xB7 HH:mm:ss \xB7 DD:HH:mm:ss")),_.appendChild(T);const k=document.createElement("div");k.appendChild(q("Timeline")),k.appendChild(L("Renders a Domma Progression component with event items."));const F=document.createElement("table");F.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['layout="vertical|centred|horizontal"',"[timeline] \u2014 layout orientation (default: vertical)"],['theme="minimal|corporate|modern"',"[timeline] \u2014 visual theme (default: minimal)"],['mode="timeline|roadmap"',"[timeline] \u2014 display mode (default: timeline)"],['class="..."',"[timeline] \u2014 extra CSS classes"],['id="..."',"[timeline] \u2014 element id"],['title="..."',"[event] \u2014 event heading"],['date="..."',"[event] \u2014 display date string"],['status="planned|in-progress|completed|blocked"',"[event] \u2014 progress status"],['icon="..."',"[event] \u2014 Domma icon name"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),F.appendChild(e)}),k.appendChild(F),k.appendChild(h("Vertical timeline",`[timeline layout="vertical" theme="modern"]
|
|
57
57
|
[event title="Kickoff" date="Jan 2025" status="completed" icon="flag"]
|
|
58
58
|
Project launched.
|
|
59
59
|
[/event]
|
|
60
60
|
[event title="Beta" date="Jun 2025" status="in-progress" icon="rocket"]
|
|
61
61
|
In active development.
|
|
62
62
|
[/event]
|
|
63
|
-
[/timeline]`,null)),
|
|
63
|
+
[/timeline]`,null)),_.appendChild(k);const i=document.createElement("div");i.appendChild(q("Embedding a Form"));const x=document.createElement("table");x.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['name="..."',"Form slug (required). Also accepted as slug=."],['class="..."',"Extra CSS classes on the wrapper div"],['id="..."',"id attribute on the wrapper div"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),x.appendChild(e)}),i.appendChild(x),i.appendChild(h("Basic",'[form name="contact" /]',"Forms are managed under Forms in the sidebar.")),i.appendChild(h("With wrapper styling",'[form name="newsletter" class="mt-4" id="newsletter-form" /]',null)),pe.appendChild(i);const s=document.createElement("div");s.appendChild(q("Displaying a Collection"));const y=document.createElement("pre");y.style.cssText=ie+"display:block;padding:.5rem .75rem;white-space:pre;overflow-x:auto;",y.textContent='[collection slug="enquiries" display="table" /]',s.appendChild(y);const b=[["slug","Required. The collection slug."],["display","table (default), cards, or list."],["fields","Comma-separated field keys to show. Defaults to all."],["limit","Maximum number of entries to display."],["sort","Field key to sort by."],["order","asc or desc (default asc)."],["title-field","Field used as the card/list title (cards + list)."],["columns","Grid columns for cards display (2\u20134, default 3)."],["search","true/false \u2014 enable search in table mode (default true)."],["sortable","true/false \u2014 enable column sorting in table mode (default true)."],["exportable","true/false \u2014 show CSV export button in table mode (default false)."],["page-size","Rows per page in table mode (default 25)."],["empty","Text shown when there are no entries."],["cta","Action slug: enables per-entry CTA buttons."],["cta-label",'CTA button label (default: "Run").'],["cta-icon","CTA button icon name."],["cta-style","CTA button variant (default: primary)."],["cta-confirm","CTA confirmation prompt text."]],z=document.createElement("table");z.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",b.forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;width:35%;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),z.appendChild(e)}),s.appendChild(z),s.appendChild(L("Table display uses Domma Table \u2014 search, sort, pagination, column selector, and CSV export are all built in. Cards and lists are static.")),pe.appendChild(s);const A=document.createElement("div");A.appendChild(q("View \u2014 Pro")),A.appendChild(L("Renders a Collection with full filtering, pagination, and display options. Requires a Pro MongoDB collection."));const H=document.createElement("table");H.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[["slug","Required. The collection slug."],["display","table (default), cards, or list."],["limit","Maximum number of entries to display."],["fields","Comma-separated field keys to show."],["title-field","Field used as the card/list title."],["columns","Grid columns for cards display (2\u20134, default 3)."],["empty","Text shown when there are no entries."]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;width:35%;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),H.appendChild(e)}),A.appendChild(H),A.appendChild(h("Table display",'[view slug="products" display="table" limit="50" /]',null)),A.appendChild(h("Cards display",'[view slug="team" display="cards" columns="3" title-field="name" /]',null)),pe.appendChild(A);const M=document.createElement("div");M.appendChild(q("CTA \u2014 Pro")),M.appendChild(L("Renders an action button that triggers a Pro Action against an entry. Requires the Pro Actions feature."));const le=document.createElement("table");le.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[["action","Required. The action slug."],["entry","Required. The entry id to act on."],["style","Button variant (default: primary)."],["icon","Domma icon name for the button."],["size","Button size (sm, lg)."],["confirm","Confirmation prompt text before running."],["label","Self-closing only: button label text."]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;width:35%;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),le.appendChild(e)}),M.appendChild(le),M.appendChild(h("Wrapping form",'[cta action="approve" entry="abc123" style="success" confirm="Approve this entry?"]Approve[/cta]',null)),M.appendChild(h("Self-closing",'[cta action="archive" entry="abc123" icon="archive" label="Archive" /]',null)),pe.appendChild(M);const ee=document.createElement("div");ee.appendChild(q("Effects")),ee.appendChild(L("Shortcodes for scroll-triggered animations, counters, typewriter text, and more. Requires the Domma Effects plugin."));const be=[['[reveal animation="fade"]...[/reveal]',"Fade/slide/zoom on scroll"],["[breathe]...[/breathe]","Continuous gentle scale loop"],["[pulse]...[/pulse]","Repeating scale pulse"],["[shake]...[/shake]","One-shot shake"],['[scribe speed="50"]...[/scribe]',"Typewriter \u2014 simple mode (text typed letter by letter)"],['[scribe loop="true"][render]Text[/render][wait]1500[/wait][undo /][/scribe]',"Typewriter \u2014 script mode (sequenced render/wait/undo actions)"],["[scramble]...[/scramble]","Character-scramble reveal"],['[counter to="100" /]',"Animated number counter (self-closing)"],["[ripple]...[/ripple]","Click-triggered ripple"],['[twinkle count="50"]...[/twinkle]',"Particle/star overlay"],['[animate type="fade-in-up"]...[/animate]',"CSS-only animation (no plugin needed)"],['[ambient type="aurora"]...[/ambient]',"CSS-only animated background"],['[firework type="burst" colour="rainbow" /]',"CSS firework (self-closing)"],["[fireworks]...[/fireworks]","Fireworks display container"],['[celebrate theme="auto" /]',"Seasonal canvas celebration"]],oe=document.createElement("table");oe.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",be.forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),oe.appendChild(e)}),ee.appendChild(oe),ee.appendChild(h("Scribe script \u2014 looping multi-phrase typewriter",`[scribe loop="true" loop-delay="2000" delete-speed="20"]
|
|
64
64
|
[render]We build things that matter.[/render]
|
|
65
65
|
[wait]1200[/wait]
|
|
66
66
|
[undo all="true" /]
|
|
67
67
|
[render]We design for humans.[/render]
|
|
68
68
|
[wait]1200[/wait]
|
|
69
69
|
[undo all="true" /]
|
|
70
|
-
[/scribe]`,'Use [render]...[/render] to type text, [wait]Ms[/wait] to pause, and [undo /] to delete. loop="true" replays the sequence. Only [render], [wait], and [undo] shortcodes are parsed \u2014 plain text between actions is ignored.')),
|
|
70
|
+
[/scribe]`,'Use [render]...[/render] to type text, [wait]Ms[/wait] to pause, and [undo /] to delete. loop="true" replays the sequence. Only [render], [wait], and [undo] shortcodes are parsed \u2014 plain text between actions is ignored.')),ee.appendChild(L("Enable the Domma Effects plugin to activate these shortcodes on your site.")),ue.appendChild(ee);const J=document.createElement("div");J.appendChild(q("Tables")),J.appendChild(L("Wrap a standard Markdown (GFM) table with Domma CSS classes and responsive horizontal scrolling."));const me=document.createElement("table");me.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['striped="true"',"Alternate row background (.table-striped)"],['bordered="true"',"Borders on all cells (.table-bordered)"],['compact="true"',"Reduced cell padding (.table-compact)"],['caption="..."',"Caption text above the table"],['class="..."',"Extra CSS classes appended to .table"],['id="..."',"id attribute on the <table> element"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),me.appendChild(e)}),J.appendChild(me),J.appendChild(h("Striped + bordered table",`[table striped="true" bordered="true" caption="Product Pricing"]
|
|
71
71
|
| Product | Price |
|
|
72
72
|
| ------- | ----: |
|
|
73
73
|
| Widget | $9.99 |
|
|
74
74
|
| Gadget | $14.99 |
|
|
75
|
-
[/table]`,"The inner content must be a valid GFM Markdown table. The shortcode adds Domma CSS classes and wraps in a responsive scroll container.")),
|
|
75
|
+
[/table]`,"The inner content must be a valid GFM Markdown table. The shortcode adds Domma CSS classes and wraps in a responsive scroll container.")),_.appendChild(J);const te=document.createElement("div");te.appendChild(q("Slideover")),te.appendChild(L("A trigger button that opens a slide-in panel with Markdown content. No plugin required."));const de=document.createElement("table");de.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['title="..."',"Panel header text"],['trigger="..."','Button label (default: "Open")'],['size="sm|md|lg"',"Panel width (default: md)"],['position="right|left"',"Slide direction (default: right)"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),de.appendChild(e)}),te.appendChild(de),te.appendChild(h("Example",`[slideover title="More Info" trigger="Read more" size="md"]
|
|
76
76
|
## Details
|
|
77
77
|
Markdown content here.
|
|
78
|
-
[/slideover]`,"Nested [card] and [grid] shortcodes work inside the slideover body.")),
|
|
78
|
+
[/slideover]`,"Nested [card] and [grid] shortcodes work inside the slideover body.")),_.appendChild(te);const P=document.createElement("div");P.appendChild(q("DConfig \u2014 Declarative Behaviour")),P.appendChild(L("Define click handlers and class toggles without writing JavaScript. Use the DConfig section above or embed inline with [dconfig]...[/dconfig] in the content body. Inline shortcodes win on selector conflict.")),P.appendChild(h("Toggle a class on click",'{ "#my-btn": { "events": { "click": { "target": "#panel", "toggleClass": "hidden" } } } }','Selector keys use standard CSS selectors. "target" is optional \u2014 defaults to the element itself.')),P.appendChild(h("Inline shortcode syntax",`[dconfig]
|
|
79
79
|
{ "#my-btn": { "events": { "click": { "target": "#panel", "toggleClass": "hidden" } } } }
|
|
80
|
-
[/dconfig]`,null)),
|
|
81
|
-
`).length;
|
|
82
|
-
`),Z.scrollTop=V.scrollTop};K(),V.addEventListener("input",K),V.addEventListener("scroll",()=>{Z.scrollTop=V.scrollTop});let k=null;const s=()=>{clearTimeout(k),k=setTimeout(async()=>{try{const{html:e}=await _.pages.preview(O.val());J.html(e,{safe:!1}),I.scan(J.get(0)),J.get(0).querySelectorAll(".tabs").forEach(c=>Domma.elements.tabs(c))}catch{window.marked&&J.html(marked.parse(O.val()))}},400)},Y=ke(O,n.find("#editor-toolbar"),{spacerDefault:X});Y.onLink(async e=>{const t=(await _.pages.list().catch(()=>[])).map(l=>({label:l.title||l.urlPath,value:l.urlPath})),i=document.createElement("div");i.style.cssText="padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;";const y=document.createElement("label");y.className="form-label",y.textContent="URL";const p=document.createElement("input");p.type="text",p.className="form-input",p.placeholder="/about or https://example.com";const m=e.value.substring(e.selectionStart,e.selectionEnd);m&&m.startsWith("/")&&(p.value=m),i.appendChild(y),i.appendChild(p);const C=document.createElement("label");C.className="form-label",C.textContent="Link text";const v=document.createElement("input");v.type="text",v.className="form-input",v.placeholder="Display text",m&&!m.startsWith("/")&&(v.value=m),i.appendChild(C),i.appendChild(v);const f=document.createElement("label");f.className="form-label",f.style.cssText="display:flex;align-items:center;gap:.5rem;cursor:pointer;";const b=document.createElement("input");b.type="checkbox",b.style.cssText="width:1rem;height:1rem;cursor:pointer;",f.appendChild(b),f.appendChild(document.createTextNode("Display as button")),i.appendChild(f);const L=document.createElement("label");L.className="form-label",L.textContent="Button colour",L.style.display="none";const P=document.createElement("select");P.className="form-select",P.style.display="none",[["primary","Primary"],["secondary","Secondary"],["success","Success (Green)"],["danger","Danger (Red)"],["warning","Warning (Orange)"],["info","Info (Blue)"],["outline","Outline"],["outline-success","Outline Success"],["outline-danger","Outline Danger"],["ghost","Ghost"]].forEach(([l,x])=>{const r=document.createElement("option");r.value=l,r.textContent=x,P.appendChild(r)}),i.appendChild(L),i.appendChild(P),b.addEventListener("change",()=>{const l=b.checked;L.style.display=l?"":"none",P.style.display=l?"":"none"});const S=document.createElement("button");S.type="button",S.className="btn btn-primary",S.textContent="Insert Link",i.appendChild(S);const q=E.modal({title:"Insert Link",size:"sm"});q.element.appendChild(i),q.open(),requestAnimationFrame(()=>{E.autocomplete(p,{data:t,minChars:1,onSelect:l=>{p.value=l.value,v.value||(v.value=l.label)}}),p.focus()}),S.addEventListener("click",()=>{const l=p.value.trim(),x=v.value.trim();if(!l)return;q.close();const r=b.checked?`[button href="${l}" variant="${P.value}"]${x||l}[/button]`:`[${x||l}](${l})`,g=e.selectionStart,u=e.selectionEnd;e.value=e.value.substring(0,g)+r+e.value.substring(u),e.selectionStart=e.selectionEnd=g+r.length,e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()})}),Y.onImage(async e=>{const t=(await _.media.list().catch(()=>[])).filter(p=>/\.(png|jpe?g|gif|webp|svg)$/i.test(p.name)),i=document.createElement("div");if(i.className="media-picker-grid",t.length)t.forEach(p=>{const m=document.createElement("div");m.className="media-picker-item",m.dataset.url=p.url;const C=document.createElement("img");C.src=p.url,C.alt=p.name;const v=document.createElement("span");v.textContent=p.name,m.appendChild(C),m.appendChild(v),i.appendChild(m)});else{const p=document.createElement("p");p.className="text-muted p-3",p.textContent="No images uploaded yet.",i.appendChild(p)}const y=E.modal({title:"Insert Image",size:"lg"});y.element.appendChild(i),$(y.element).on("click",".media-picker-item",function(){const p=$(this).data("url"),m=$(this).find("span").text();he(e,``),y.close(),O.get(0).dispatchEvent(new Event("input",{bubbles:!0}))}),y.open()}),Y.onCollection(async e=>{const c=await _.collections.list().catch(()=>[]),t=document.createElement("div");t.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const i="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",y="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;",p=document.createElement("div"),m=document.createElement("label");m.style.cssText=i,m.textContent="Collection";const C=document.createElement("select");if(C.style.cssText=y,c.length)c.forEach(H=>{const G=document.createElement("option");G.value=H.slug,G.textContent=H.title||H.slug,C.appendChild(G)});else{const H=document.createElement("option");H.value="",H.textContent="No collections found",C.appendChild(H)}p.appendChild(m),p.appendChild(C),t.appendChild(p);const v=document.createElement("div"),f=document.createElement("label");f.style.cssText=i,f.textContent="Display";const b=document.createElement("select");b.style.cssText=y,["table","cards","list"].forEach(H=>{const G=document.createElement("option");G.value=H,G.textContent=H.charAt(0).toUpperCase()+H.slice(1),b.appendChild(G)}),v.appendChild(f),v.appendChild(b),t.appendChild(v);const L=document.createElement("div");L.style.display="none";const P=document.createElement("label");P.style.cssText=i,P.textContent="Columns (2\u20134)";const T=document.createElement("input");T.type="number",T.min="2",T.max="4",T.value="3",T.style.cssText=y,L.appendChild(P),L.appendChild(T),t.appendChild(L);const S=document.createElement("div"),q=document.createElement("label");q.style.cssText="display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;";const l=document.createElement("input");l.type="checkbox",l.checked=!0,q.appendChild(l),q.appendChild(document.createTextNode("Enable search")),S.appendChild(q),t.appendChild(S);const x=document.createElement("div"),r=document.createElement("label");r.style.cssText="display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;";const g=document.createElement("input");g.type="checkbox",g.checked=!0,r.appendChild(g),r.appendChild(document.createTextNode("Sortable columns")),x.appendChild(r),t.appendChild(x);const u=document.createElement("div"),B=document.createElement("label");B.style.cssText="display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;";const A=document.createElement("input");A.type="checkbox",A.checked=!1,B.appendChild(A),B.appendChild(document.createTextNode("CSV export")),u.appendChild(B),t.appendChild(u);const M=document.createElement("div"),W=document.createElement("label");W.style.cssText=i,W.textContent="Rows per page";const ee=document.createElement("input");ee.type="number",ee.min="5",ee.max="100",ee.value="25",ee.style.cssText=y,M.appendChild(W),M.appendChild(ee),t.appendChild(M);const ce=document.createElement("div"),ye=document.createElement("label");ye.style.cssText=i,ye.textContent="Limit (optional)";const pe=document.createElement("input");pe.type="number",pe.placeholder="All",pe.style.cssText=y,ce.appendChild(ye),ce.appendChild(pe),t.appendChild(ce);const ie=document.createElement("button");ie.type="button",ie.className="btn btn-primary",ie.textContent="Insert",t.appendChild(ie);const xe=[S,x,u,M],ue=()=>{const H=b.value==="table";xe.forEach(G=>{G.style.display=H?"":"none"}),L.style.display=b.value==="cards"?"":"none"};b.addEventListener("change",ue),ue();const Ce=E.modal({title:"Insert Collection",size:"sm"});Ce.element.appendChild(t),Ce.open(),ie.addEventListener("click",()=>{const H=C.value;if(!H)return;const G=b.value;let te=`[collection slug="${H}" display="${G}"`;G==="cards"&&(te+=` columns="${T.value}"`),G==="table"&&!l.checked&&(te+=' search="false"'),G==="table"&&!g.checked&&(te+=' sortable="false"'),G==="table"&&A.checked&&(te+=' exportable="true"'),G==="table"&&ee.value!=="25"&&(te+=` page-size="${ee.value}"`);const w=pe.value.trim();w&&(te+=` limit="${w}"`),te+=" /]",Ce.close(),he(e,te),e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()})}),Y.onForm(async e=>{const c=await _.forms.list().catch(()=>[]),t=document.createElement("div");t.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const i="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",y="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;",p=document.createElement("div"),m=document.createElement("label");m.style.cssText=i,m.textContent="Form";const C=document.createElement("select");if(C.style.cssText=y,c.length)c.forEach(b=>{const L=document.createElement("option");L.value=b.slug,L.textContent=b.title||b.slug,C.appendChild(L)});else{const b=document.createElement("option");b.value="",b.textContent="No forms found",C.appendChild(b)}p.appendChild(m),p.appendChild(C),t.appendChild(p);const v=document.createElement("button");v.className="btn btn-primary btn-sm",v.style.cssText="align-self:flex-end;margin-top:.5rem;",v.textContent="Insert Form",t.appendChild(v);const f=E.modal({title:"Insert Form",size:"sm"});f.element.appendChild(t),f.open(),v.addEventListener("click",()=>{const b=C.value;b&&(he(e,`[form slug="${b}" /]`),f.close(),O.get(0).dispatchEvent(new Event("input",{bubbles:!0})))})}),Y.onView(async e=>{const c=await _.views.list().catch(()=>[]),t=document.createElement("div");t.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const i="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",y="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;",p=document.createElement("div"),m=document.createElement("label");m.style.cssText=i,m.textContent="View";const C=document.createElement("select");if(C.style.cssText=y,c.length)c.forEach(T=>{const S=document.createElement("option");S.value=T.slug,S.textContent=T.title||T.slug,C.appendChild(S)});else{const T=document.createElement("option");T.value="",T.textContent="No Views configured yet \u2014 create one under Data \u2192 Views",C.appendChild(T)}p.appendChild(m),p.appendChild(C),t.appendChild(p);const v=document.createElement("div"),f=document.createElement("label");f.style.cssText=i,f.textContent="Display";const b=document.createElement("select");b.style.cssText=y,["table","cards","list"].forEach(T=>{const S=document.createElement("option");S.value=T,S.textContent=T.charAt(0).toUpperCase()+T.slice(1),b.appendChild(S)}),v.appendChild(f),v.appendChild(b),t.appendChild(v);const L=document.createElement("button");L.type="button",L.className="btn btn-primary",L.textContent="Insert",t.appendChild(L);const P=E.modal({title:"Insert View",size:"sm"});P.element.appendChild(t),P.open(),L.addEventListener("click",()=>{const T=C.value;if(!T)return;const S=`[view slug="${T}" display="${b.value}" /]`;P.close(),he(e,S),e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()})}),Y.onCta(async e=>{const c=await _.actions.list().catch(()=>[]),t=document.createElement("div");t.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const i="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",y="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;";function p(l,x){const r=document.createElement("div"),g=document.createElement("label");return g.style.cssText=i,g.textContent=l,r.appendChild(g),r.appendChild(x),r}function m(l){const x=document.createElement("select");return x.style.cssText=y,l.forEach(([r,g])=>{const u=document.createElement("option");u.value=r,u.textContent=g,x.appendChild(u)}),x}function C(l,x,r){const g=document.createElement("input");return g.type=l,g.placeholder=x||"",g.value=r||"",g.style.cssText=y,g}const v=m(c.length?c.map(l=>[l.slug,l.title||l.slug]):[["","No Actions configured yet \u2014 create one under Data \u2192 Actions"]]);t.appendChild(p("Action",v));const f=C("text","Button label","Run");if(t.appendChild(p("Label",f)),v.addEventListener("change",()=>{const l=c.find(x=>x.slug===v.value);l?.trigger?.label&&(f.value=l.trigger.label)}),c.length){const l=c[0];l?.trigger?.label&&(f.value=l.trigger.label)}const b=C("text","Paste entry UUID\u2026","");t.appendChild(p("Entry ID",b));const L=m([["primary","Primary"],["secondary","Secondary"],["ghost","Ghost"],["danger","Danger"]]);t.appendChild(p("Style",L));const P=C("text","e.g. check, zap, send (optional)","");t.appendChild(p("Icon",P));const T=C("text","Confirmation message (optional)","");t.appendChild(p("Confirm prompt",T));const S=document.createElement("button");S.type="button",S.className="btn btn-primary",S.textContent="Insert",t.appendChild(S);const q=E.modal({title:"Insert CTA Button",size:"sm"});q.element.appendChild(t),q.open(),S.addEventListener("click",()=>{const l=v.value;if(!l)return;const x=b.value.trim(),r=(f.value.trim()||"Run").replace(/\[\/cta\]/gi,""),g=L.value,u=P.value.trim().replace(/"/g,""),B=T.value.trim().replace(/"/g,""),A=x.replace(/"/g,"");let M=`action="${l}" style="${g}"`;A&&(M+=` entry="${A}"`),u&&(M+=` icon="${u}"`),B&&(M+=` confirm="${B}"`);const W=`[cta ${M}]${r}[/cta]`;q.close(),he(e,W),e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()})}),Y.onButton(async e=>{const t=(await _.pages.list().catch(()=>[])).map(u=>({label:u.title||u.urlPath,value:u.urlPath})),i=document.createElement("div");i.style.cssText="padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;";const y="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",p="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;";function m(u,B){const A=document.createElement("div"),M=document.createElement("label");return M.style.cssText=y,M.textContent=u,A.appendChild(M),A.appendChild(B),A}function C(u,B){const A=document.createElement("input");return A.type="text",A.placeholder=u,A.value=B||"",A.style.cssText=p,A}function v(u){const B=document.createElement("select");return B.style.cssText=p,u.forEach(([A,M])=>{const W=document.createElement("option");W.value=A,W.textContent=M,B.appendChild(W)}),B}const f=e.value.substring(e.selectionStart,e.selectionEnd),b=C("/about or https://example.com",f.startsWith("/")?f:"");i.appendChild(m("URL",b));const L=C("Button label",f&&!f.startsWith("/")?f:"");i.appendChild(m("Label",L));const P=v([["primary","Primary"],["secondary","Secondary"],["success","Success (Green)"],["danger","Danger (Red)"],["warning","Warning (Orange)"],["info","Info (Blue)"],["outline","Outline"],["ghost","Ghost"],["link","Link"],["outline-success","Outline Success"],["outline-danger","Outline Danger"]]);i.appendChild(m("Variant",P));const T=v([["","Default"],["sm","Small"],["lg","Large"]]);i.appendChild(m("Size",T));const S=C("e.g. arrow-right, star (optional)","");i.appendChild(m("Icon (before label)",S));const q=C("e.g. arrow-right (optional)","");i.appendChild(m("Icon (after label)",q));const l=document.createElement("label");l.style.cssText="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9em;";const x=document.createElement("input");x.type="checkbox",x.style.cssText="width:1rem;height:1rem;",l.appendChild(x),l.appendChild(document.createTextNode("Open in new tab")),i.appendChild(l);const r=document.createElement("button");r.type="button",r.className="btn btn-primary",r.textContent="Insert Button",i.appendChild(r);const g=E.modal({title:"Insert Button",size:"sm"});g.element.appendChild(i),g.open(),requestAnimationFrame(()=>{E.autocomplete(b,{data:t,minChars:1,onSelect:u=>{b.value=u.value,L.value||(L.value=u.label)}}),b.focus()}),r.addEventListener("click",()=>{const u=b.value.trim();if(!u)return;g.close();const B=L.value.trim()||u;let A=`href="${u}" variant="${P.value}"`;T.value&&(A+=` size="${T.value}"`);const M=S.value.trim().replace(/"/g,"");M&&(A+=` icon="${M}"`);const W=q.value.trim().replace(/"/g,"");W&&(A+=` icon-after="${W}"`),x.checked&&(A+=' target="_blank"');const ee=`[button ${A}]${B}[/button]`;he(e,ee)})}),Y.onLinkShortcode(async e=>{const t=(await _.pages.list().catch(()=>[])).map(r=>({label:r.title||r.urlPath,value:r.urlPath})),i=document.createElement("div");i.style.cssText="padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;";const y="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",p="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;";function m(r,g){const u=document.createElement("div"),B=document.createElement("label");return B.style.cssText=y,B.textContent=r,u.appendChild(B),u.appendChild(g),u}function C(r,g){const u=document.createElement("input");return u.type="text",u.placeholder=r,u.value=g||"",u.style.cssText=p,u}const v=e.value.substring(e.selectionStart,e.selectionEnd),f=C("/about or https://example.com",v.startsWith("/")?v:"");i.appendChild(m("URL",f));const b=C("Link text",v&&!v.startsWith("/")?v:"");i.appendChild(m("Link text",b));const L=C("e.g. text-primary, fw-bold (optional)","");i.appendChild(m("CSS class",L));const P=C("e.g. arrow-right (optional)","");i.appendChild(m("Icon (before text)",P));const T=C("e.g. external-link (optional)","");i.appendChild(m("Icon (after text)",T));const S=document.createElement("label");S.style.cssText="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9em;";const q=document.createElement("input");q.type="checkbox",q.style.cssText="width:1rem;height:1rem;",S.appendChild(q),S.appendChild(document.createTextNode("Open in new tab")),i.appendChild(S);const l=document.createElement("button");l.type="button",l.className="btn btn-primary",l.textContent="Insert Link",i.appendChild(l);const x=E.modal({title:"Insert Link Shortcode",size:"sm"});x.element.appendChild(i),x.open(),requestAnimationFrame(()=>{E.autocomplete(f,{data:t,minChars:1,onSelect:r=>{f.value=r.value,b.value||(b.value=r.label)}}),f.focus()}),l.addEventListener("click",()=>{const r=f.value.trim();if(!r)return;x.close();const g=b.value.trim()||r;let u=`href="${r}"`;const B=L.value.trim().replace(/"/g,"");B&&(u+=` class="${B}"`);const A=P.value.trim().replace(/"/g,"");A&&(u+=` icon="${A}"`);const M=T.value.trim().replace(/"/g,"");M&&(u+=` icon-after="${M}"`),q.checked&&(u+=' target="_blank"');const W=`[link ${u}]${g}[/link]`;he(e,W)})}),Y.onTabs(e=>{const c=document.createElement("div");c.style.cssText="padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;";const t="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",i="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;";function y(l,x){const r=document.createElement("div"),g=document.createElement("label");return g.style.cssText=t,g.textContent=l,r.appendChild(g),r.appendChild(x),r}function p(l){const x=document.createElement("select");return x.style.cssText=i,l.forEach(([r,g])=>{const u=document.createElement("option");u.value=r,u.textContent=g,x.appendChild(u)}),x}const m=p([["","Default (underline)"],["pills","Pills"]]);c.appendChild(y("Style",m));const C=p([["","Left"],["center","Centre"]]);c.appendChild(y("Alignment",C));const v=document.createElement("div");v.style.cssText="display:flex;flex-direction:column;gap:.4rem;";const f=[];function b(){f.forEach(l=>{l.removeBtn.disabled=f.length<=2,l.removeBtn.style.opacity=f.length<=2?"0.3":"1"})}function L(l){const x=document.createElement("div");x.style.cssText="display:flex;gap:.4rem;align-items:center;";const r=document.createElement("input");r.type="text",r.placeholder="Tab title",r.value=l||"",r.style.cssText=i+"flex:1;";const g=document.createElement("button");g.type="button",g.textContent="\u2715",g.style.cssText="padding:.3rem .5rem;background:transparent;border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text-muted,#aaa);cursor:pointer;font-size:.85em;flex-shrink:0;";const u={row:x,input:r,removeBtn:g};f.push(u),x.appendChild(r),x.appendChild(g),v.appendChild(x),g.addEventListener("click",()=>{if(f.length<=2)return;const B=f.indexOf(u);f.splice(B,1),v.removeChild(x),b()}),b()}L("Overview"),L("Details");const P=document.createElement("div");P.style.cssText=t,P.textContent="Tabs",c.appendChild(P),c.appendChild(v);const T=document.createElement("button");T.type="button",T.textContent="+ Add Tab",T.style.cssText="padding:.35rem .75rem;background:transparent;border:1px dashed var(--dm-border,#555);border-radius:4px;color:var(--dm-text-muted,#aaa);cursor:pointer;font-size:.85em;align-self:flex-start;",T.addEventListener("click",()=>{f.length>=10||(L(""),f[f.length-1].input.focus())}),c.appendChild(T);const S=document.createElement("button");S.type="button",S.className="btn btn-primary",S.textContent="Insert Tabs",c.appendChild(S);const q=E.modal({title:"Insert Tabs",size:"sm"});q.element.appendChild(c),q.open(),requestAnimationFrame(()=>f[0].input.focus()),S.addEventListener("click",()=>{q.close();const l=m.value,x=C.value;let r=l?` style="${l}"`:"";x&&(r+=` align="${x}"`);let g=`[tabs${r}]
|
|
83
|
-
`;
|
|
84
|
-
`}),
|
|
80
|
+
[/dconfig]`,null)),ue.appendChild(P);const U=document.createElement("div");U.appendChild(q("Tips"));const G=document.createElement("table");G.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['class="text-center"',"Centre text and inline elements on any shortcode"],['class="mx-auto"',"Centre a block element horizontally"],["[center]...[/center]","Shorthand wrapper for centred content"]].forEach(([r,t])=>{const e=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(B(r));const c=document.createElement("td");c.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",c.textContent=t,e.appendChild(n),e.appendChild(c),G.appendChild(e)}),U.appendChild(G),U.appendChild(L("Most shortcodes accept a class attribute for custom styling.")),ce.appendChild(U),d.setContent(xe),d.open(),E.tabs(se)}function ze(d,ie){const ye=d.find("#history-tab").get(0),B=d.find("#version-list").get(0),q=d.find("#version-compare").get(0),xe=d.find("#version-compare-old").get(0),se=d.find("#version-compare-new").get(0),Ee=d.find("#version-compare-label").get(0),re=d.find("#version-compare-back-btn").get(0),O=d.find("#version-restore-btn").get(0),ce=d.find("#history-save-named-btn").get(0);let ne=!1,_=null;function pe(){B.style.display="",q.style.display="none",_=null}function ue(){B.style.display="none",q.style.display=""}async function he(){B.textContent="";const X=document.createElement("p");X.style.color="var(--dm-text-muted)",X.textContent="Loading\u2026",B.appendChild(X);let V;try{V=(await W.versions.list(ie)).versions||[]}catch(L){B.textContent="";const h=document.createElement("p");h.style.color="var(--dm-text-danger,#e55)",h.textContent="Failed to load versions: "+L.message,B.appendChild(h);return}if(B.textContent="",!V.length){const L=document.createElement("p");L.style.color="var(--dm-text-muted)",L.textContent="No versions saved yet. Versions are created automatically on each save.",B.appendChild(L);return}const K=document.createElement("table");K.style.cssText="width:100%;border-collapse:collapse;font-size:.875rem;";const Y=document.createElement("thead"),ae=document.createElement("tr");["Date","Author","Type","Label","Actions"].forEach(L=>{const h=document.createElement("th");h.style.cssText="text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--dm-border);font-size:.8rem;color:var(--dm-text-muted);",h.textContent=L,ae.appendChild(h)}),Y.appendChild(ae),K.appendChild(Y);const Z=document.createElement("tbody");V.forEach(L=>{const h=document.createElement("tr");h.style.borderBottom="1px solid var(--dm-border)";const j=document.createElement("td");j.style.padding=".5rem .75rem",j.textContent=D(L.createdAt).format("D MMM YYYY, HH:mm");const Q=document.createElement("td");Q.style.padding=".5rem .75rem",Q.textContent=L.author||"\u2014";const a=document.createElement("td");a.style.padding=".5rem .75rem";const m=document.createElement("span");m.className="badge badge-"+(L.type==="manual"?"primary":"secondary"),m.style.cssText="font-size:.75rem;padding:.2rem .5rem;border-radius:4px;",m.textContent=L.type,a.appendChild(m);const o=document.createElement("td");o.style.cssText="padding:.5rem .75rem;color:var(--dm-text-muted);",o.textContent=L.label||"\u2014";const l=document.createElement("td");l.style.padding=".5rem .75rem";const C=document.createElement("button");C.className="btn btn-ghost btn-xs",C.style.marginRight=".4rem",C.textContent="Compare",C.addEventListener("click",async()=>{try{const u=await W.versions.get(ie,L.filename);xe.textContent=u.content,se.textContent=d.find("#markdown-editor").get(0).value,Ee.textContent=D(L.createdAt).format("D MMM YYYY, HH:mm")+(L.label?` \u2014 ${L.label}`:""),_=L.filename,ue()}catch(u){E.toast("Failed to load version: "+u.message,{type:"error"})}});const p=document.createElement("button");p.className="btn btn-ghost btn-xs",p.style.color="var(--dm-text-danger,#e55)",p.textContent="Delete",p.addEventListener("click",async()=>{if(await E.confirm("Delete this version? This cannot be undone."))try{await W.versions.delete(ie,L.filename),E.toast("Version deleted.",{type:"success"}),await he()}catch(v){E.toast("Failed to delete: "+v.message,{type:"error"})}}),l.appendChild(C),l.appendChild(p),h.appendChild(j),h.appendChild(Q),h.appendChild(a),h.appendChild(o),h.appendChild(l),Z.appendChild(h)}),K.appendChild(Z),B.appendChild(K)}ye.addEventListener("click",async()=>{ne||(ne=!0,await he())}),re.addEventListener("click",()=>{pe()}),O.addEventListener("click",async()=>{if(!(!_||!await E.confirm("Restore this version? The current page content will be overwritten (a pre-restore snapshot will be saved automatically).")))try{await W.versions.restore(ie,_),E.toast("Page restored. Reloading editor\u2026",{type:"success"}),R.navigate("/pages"),setTimeout(()=>R.navigate(`/pages/edit${ie}`),300)}catch(V){E.toast("Restore failed: "+V.message,{type:"error"})}}),ce.addEventListener("click",()=>{const X=E.modal({title:"Save Named Version"}),V=document.createElement("div");V.style.padding="1rem";const K=document.createElement("label");K.className="form-label",K.textContent="Version Label";const Y=document.createElement("input");Y.type="text",Y.className="form-input",Y.placeholder="e.g. Initial design, Before restructure",Y.style.marginBottom=".75rem";const ae=document.createElement("button");ae.className="btn btn-primary",ae.textContent="Save Version",ae.addEventListener("click",async()=>{const Z=Y.value.trim();try{await W.versions.create(ie,Z||null),E.toast("Named version saved.",{type:"success"}),X.close(),ne=!1,ye.classList.contains("active")&&(ne=!0,await he())}catch(L){E.toast("Failed to save version: "+L.message,{type:"error"})}}),V.appendChild(K),V.appendChild(Y),V.appendChild(ae),X.element.appendChild(V),X.open(),setTimeout(()=>Y.focus(),100)})}let Ce=!1,we=null,ke=!1;export const pageEditorView={templateUrl:"/admin/js/templates/page-editor.html",async onMount(d){const ye=window.location.hash.match(/#\/pages\/edit(\/.*)/),B=ye?ye[1]:null,q=!!B,xe=E.loader(d.get(0),{type:"dots"}),se=[W.layouts.get().catch(()=>({})),W.settings.get().catch(()=>({}))];q&&(se.push(W.pages.get(B).catch(()=>null)),se.push(W.pages.list().catch(()=>[])));const[Ee,re,O,ce]=await Promise.all(se);xe.destroy(),Se(d.find("#field-theme").get(0),{includeDefault:!0});const ne=re?.layoutOptions?.spacerSize??40;if(q&&!O){E.toast("Page not found.",{type:"error"}),R.navigate("/pages");return}d.find("#editor-title").text(q?`Edit Page \u2014 ${O.title||B}`:"New Page"),q&&d.find("#page-url-path").val(B),O&&(d.find("#field-title").val(O.title||""),d.find("#field-description").val(O.description||""),d.find("#field-status").val(O.status||"draft"),d.find("#field-sort-order").val(O.sortOrder??99),d.find("#field-show-in-nav").prop("checked",!!O.showInNav),d.find("#field-sidebar").prop("checked",!!O.sidebar),d.find("#field-show-breadcrumbs").prop("checked",O.breadcrumbs!==!1),d.find("#field-category").val(O.category||""),d.find("#field-visibility").val(O.visibility||"public"),d.find("#field-theme").val(O.theme||""),d.find("#field-seo-title").val(O.seo?.title||""),d.find("#field-seo-desc").val(O.seo?.description||""),O.dconfig&&d.find("#field-dconfig").val(JSON.stringify(O.dconfig,null,2)));const _=d.find("#quick-switch");q&&Array.isArray(ce)&&ce.length&&([...ce].sort((m,o)=>(m.title||m.urlPath).localeCompare(o.title||o.urlPath)).forEach(m=>{const o=document.createElement("option");o.value=m.urlPath,o.textContent=`${m.title||"Untitled"} (${m.urlPath})`,m.urlPath===B&&(o.selected=!0),_.get(0).appendChild(o)}),_.css("display",""),_.on("change",function(){const m=this.value;m&&R.navigate("/pages/edit"+m)}));const pe=await W.pages.tags().catch(()=>[]),ue=d.find("#field-tags").get(0),he=ue?E.pillbox(ue,{data:pe,value:O?.tags||[],creatable:!0,searchable:!0,placeholder:"Add tag\u2026"}):null,X=d.find("#field-layout").empty();if(Object.entries(Ee).forEach(([a,m])=>{const o=(O?.layout||"default")===a?"selected":"";X.append(`<option value="${a}" ${o}>${m.label||a}</option>`)}),q){const a=d.find("#view-page-btn").get(0);a.href=B,a.style.display="";const m=d.find("#live-preview-tab").get(0);m.style.display="";const o=d.find("#history-tab").get(0);o.style.display=""}if(E.tabs(d.find("#editor-meta-tabs").get(0)),q){const a=d.find("#live-preview-tab").get(0),m=d.find("#live-preview-frame").get(0);let o=!1;a.addEventListener("click",function(){o||(m.src=B,o=!0)}),ze(d,B)}const V=d.find("#markdown-editor"),K=d.find("#markdown-preview");O&&V.val(O.content||"");const Y=V.get(0),ae=document.createElement("div");ae.className="editor-line-numbers",Y.parentElement.insertBefore(ae,Y);const Z=()=>{const a=Y.value.split(`
|
|
81
|
+
`).length;ae.textContent=Array.from({length:a},(m,o)=>o+1).join(`
|
|
82
|
+
`),ae.scrollTop=Y.scrollTop};Z(),Y.addEventListener("input",Z),Y.addEventListener("scroll",()=>{ae.scrollTop=Y.scrollTop});let L=null;const h=()=>{clearTimeout(L),L=setTimeout(async()=>{try{const{html:a}=await W.pages.preview(V.val());K.html(a,{safe:!1}),I.scan(K.get(0)),K.get(0).querySelectorAll(".tabs").forEach(m=>Domma.elements.tabs(m))}catch{window.marked&&K.html(marked.parse(V.val()))}},400)},j=Te(V,d.find("#editor-toolbar"),{spacerDefault:ne});j.onLink(async a=>{const o=(await W.pages.list().catch(()=>[])).map(i=>({label:i.title||i.urlPath,value:i.urlPath})),l=document.createElement("div");l.style.cssText="padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;";const C=document.createElement("label");C.className="form-label",C.textContent="URL";const p=document.createElement("input");p.type="text",p.className="form-input",p.placeholder="/about or https://example.com";const u=a.value.substring(a.selectionStart,a.selectionEnd);u&&u.startsWith("/")&&(p.value=u),l.appendChild(C),l.appendChild(p);const v=document.createElement("label");v.className="form-label",v.textContent="Link text";const f=document.createElement("input");f.type="text",f.className="form-input",f.placeholder="Display text",u&&!u.startsWith("/")&&(f.value=u),l.appendChild(v),l.appendChild(f);const g=document.createElement("label");g.className="form-label",g.style.cssText="display:flex;align-items:center;gap:.5rem;cursor:pointer;";const w=document.createElement("input");w.type="checkbox",w.style.cssText="width:1rem;height:1rem;cursor:pointer;",g.appendChild(w),g.appendChild(document.createTextNode("Display as button")),l.appendChild(g);const S=document.createElement("label");S.className="form-label",S.textContent="Button colour",S.style.display="none";const N=document.createElement("select");N.className="form-select",N.style.display="none",[["primary","Primary"],["secondary","Secondary"],["success","Success (Green)"],["danger","Danger (Red)"],["warning","Warning (Orange)"],["info","Info (Blue)"],["outline","Outline"],["outline-success","Outline Success"],["outline-danger","Outline Danger"],["ghost","Ghost"]].forEach(([i,x])=>{const s=document.createElement("option");s.value=i,s.textContent=x,N.appendChild(s)}),l.appendChild(S),l.appendChild(N),w.addEventListener("change",()=>{const i=w.checked;S.style.display=i?"":"none",N.style.display=i?"":"none"});const k=document.createElement("button");k.type="button",k.className="btn btn-primary",k.textContent="Insert Link",l.appendChild(k);const F=E.modal({title:"Insert Link",size:"sm"});F.element.appendChild(l),F.open(),requestAnimationFrame(()=>{E.autocomplete(p,{data:o,minChars:1,onSelect:i=>{p.value=i.value,f.value||(f.value=i.label)}}),p.focus()}),k.addEventListener("click",()=>{const i=p.value.trim(),x=f.value.trim();if(!i)return;F.close();const s=w.checked?`[button href="${i}" variant="${N.value}"]${x||i}[/button]`:`[${x||i}](${i})`,y=a.selectionStart,b=a.selectionEnd;a.value=a.value.substring(0,y)+s+a.value.substring(b),a.selectionStart=a.selectionEnd=y+s.length,a.dispatchEvent(new Event("input",{bubbles:!0})),a.focus()})}),j.onImage(async a=>{const o=(await W.media.list().catch(()=>[])).filter(p=>/\.(png|jpe?g|gif|webp|svg)$/i.test(p.name)),l=document.createElement("div");if(l.className="media-picker-grid",o.length)o.forEach(p=>{const u=document.createElement("div");u.className="media-picker-item",u.dataset.url=p.url;const v=document.createElement("img");v.src=p.url,v.alt=p.name;const f=document.createElement("span");f.textContent=p.name,u.appendChild(v),u.appendChild(f),l.appendChild(u)});else{const p=document.createElement("p");p.className="text-muted p-3",p.textContent="No images uploaded yet.",l.appendChild(p)}const C=E.modal({title:"Insert Image",size:"lg"});C.element.appendChild(l),$(C.element).on("click",".media-picker-item",function(){const p=$(this).data("url"),u=$(this).find("span").text();fe(a,``),C.close(),V.get(0).dispatchEvent(new Event("input",{bubbles:!0}))}),C.open()}),j.onCollection(async a=>{const[m,o]=await Promise.all([W.collections.list().catch(()=>[]),W.blocks.list().catch(()=>[])]),l=document.createElement("div");l.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const C="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",p="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;",u=document.createElement("div"),v=document.createElement("label");v.style.cssText=C,v.textContent="Collection";const f=document.createElement("select");if(f.style.cssText=p,m.length)m.forEach(t=>{const e=document.createElement("option");e.value=t.slug,e.textContent=t.title||t.slug,f.appendChild(e)});else{const t=document.createElement("option");t.value="",t.textContent="No collections found",f.appendChild(t)}u.appendChild(v),u.appendChild(f),l.appendChild(u);const g=document.createElement("div"),w=document.createElement("label");w.style.cssText=C,w.textContent="Display";const S=document.createElement("select");S.style.cssText=p,["table","cards","list","block"].forEach(t=>{const e=document.createElement("option");e.value=t,e.textContent=t.charAt(0).toUpperCase()+t.slice(1),S.appendChild(e)}),g.appendChild(w),g.appendChild(S),l.appendChild(g);const N=document.createElement("div");N.style.display="none";const T=document.createElement("label");T.style.cssText=C,T.textContent="Columns (2\u20134)";const k=document.createElement("input");k.type="number",k.min="2",k.max="4",k.value="3",k.style.cssText=p,N.appendChild(T),N.appendChild(k),l.appendChild(N);const F=document.createElement("div");F.style.display="none";const i=document.createElement("label");i.style.cssText=C,i.textContent="Block template";const x=document.createElement("select");if(x.style.cssText=p,o.length)o.forEach(t=>{const e=document.createElement("option");e.value=t.name??t,e.textContent=t.name??t,x.appendChild(e)});else{const t=document.createElement("option");t.value="",t.textContent="No block templates found",x.appendChild(t)}F.appendChild(i),F.appendChild(x),l.appendChild(F);const s=document.createElement("div"),y=document.createElement("label");y.style.cssText="display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;";const b=document.createElement("input");b.type="checkbox",b.checked=!0,y.appendChild(b),y.appendChild(document.createTextNode("Enable search")),s.appendChild(y),l.appendChild(s);const z=document.createElement("div"),A=document.createElement("label");A.style.cssText="display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;";const H=document.createElement("input");H.type="checkbox",H.checked=!0,A.appendChild(H),A.appendChild(document.createTextNode("Sortable columns")),z.appendChild(A),l.appendChild(z);const M=document.createElement("div"),le=document.createElement("label");le.style.cssText="display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;";const ee=document.createElement("input");ee.type="checkbox",ee.checked=!1,le.appendChild(ee),le.appendChild(document.createTextNode("CSV export")),M.appendChild(le),l.appendChild(M);const be=document.createElement("div"),oe=document.createElement("label");oe.style.cssText=C,oe.textContent="Rows per page";const J=document.createElement("input");J.type="number",J.min="5",J.max="100",J.value="25",J.style.cssText=p,be.appendChild(oe),be.appendChild(J),l.appendChild(be);const me=document.createElement("div"),te=document.createElement("label");te.style.cssText=C,te.textContent="Limit (optional)";const de=document.createElement("input");de.type="number",de.placeholder="All",de.style.cssText=p,me.appendChild(te),me.appendChild(de),l.appendChild(me);const P=document.createElement("button");P.type="button",P.className="btn btn-primary",P.textContent="Insert",l.appendChild(P);const U=[s,z,M,be],G=()=>{const t=S.value,e=t==="table";U.forEach(n=>{n.style.display=e?"":"none"}),N.style.display=t==="cards"||t==="block"?"":"none",F.style.display=t==="block"?"":"none"};S.addEventListener("change",G),G();const r=E.modal({title:"Insert Collection",size:"sm"});r.element.appendChild(l),r.open(),P.addEventListener("click",()=>{const t=f.value;if(!t)return;const e=S.value;let n=`[collection slug="${t}" display="${e}"`;if(e==="cards"&&(n+=` columns="${k.value}"`),e==="block"){const ge=x.value;ge&&(n+=` block="${ge}"`);const ve=k.value.trim();ve&&(n+=` cols="${ve}"`)}e==="table"&&!b.checked&&(n+=' search="false"'),e==="table"&&!H.checked&&(n+=' sortable="false"'),e==="table"&&ee.checked&&(n+=' exportable="true"'),e==="table"&&J.value!=="25"&&(n+=` page-size="${J.value}"`);const c=de.value.trim();c&&(n+=` limit="${c}"`),n+=" /]",r.close(),fe(a,n),a.dispatchEvent(new Event("input",{bubbles:!0})),a.focus()})}),j.onForm(async a=>{const m=await W.forms.list().catch(()=>[]),o=document.createElement("div");o.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const l="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",C="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;",p=document.createElement("div"),u=document.createElement("label");u.style.cssText=l,u.textContent="Form";const v=document.createElement("select");if(v.style.cssText=C,m.length)m.forEach(w=>{const S=document.createElement("option");S.value=w.slug,S.textContent=w.title||w.slug,v.appendChild(S)});else{const w=document.createElement("option");w.value="",w.textContent="No forms found",v.appendChild(w)}p.appendChild(u),p.appendChild(v),o.appendChild(p);const f=document.createElement("button");f.className="btn btn-primary btn-sm",f.style.cssText="align-self:flex-end;margin-top:.5rem;",f.textContent="Insert Form",o.appendChild(f);const g=E.modal({title:"Insert Form",size:"sm"});g.element.appendChild(o),g.open(),f.addEventListener("click",()=>{const w=v.value;w&&(fe(a,`[form slug="${w}" /]`),g.close(),V.get(0).dispatchEvent(new Event("input",{bubbles:!0})))})}),j.onView(async a=>{const m=await W.views.list().catch(()=>[]),o=document.createElement("div");o.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const l="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",C="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;",p=document.createElement("div"),u=document.createElement("label");u.style.cssText=l,u.textContent="View";const v=document.createElement("select");if(v.style.cssText=C,m.length)m.forEach(T=>{const k=document.createElement("option");k.value=T.slug,k.textContent=T.title||T.slug,v.appendChild(k)});else{const T=document.createElement("option");T.value="",T.textContent="No Views configured yet \u2014 create one under Data \u2192 Views",v.appendChild(T)}p.appendChild(u),p.appendChild(v),o.appendChild(p);const f=document.createElement("div"),g=document.createElement("label");g.style.cssText=l,g.textContent="Display";const w=document.createElement("select");w.style.cssText=C,["table","cards","list"].forEach(T=>{const k=document.createElement("option");k.value=T,k.textContent=T.charAt(0).toUpperCase()+T.slice(1),w.appendChild(k)}),f.appendChild(g),f.appendChild(w),o.appendChild(f);const S=document.createElement("button");S.type="button",S.className="btn btn-primary",S.textContent="Insert",o.appendChild(S);const N=E.modal({title:"Insert View",size:"sm"});N.element.appendChild(o),N.open(),S.addEventListener("click",()=>{const T=v.value;if(!T)return;const k=`[view slug="${T}" display="${w.value}" /]`;N.close(),fe(a,k),a.dispatchEvent(new Event("input",{bubbles:!0})),a.focus()})}),j.onCta(async a=>{const m=await W.actions.list().catch(()=>[]),o=document.createElement("div");o.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const l="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",C="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;";function p(i,x){const s=document.createElement("div"),y=document.createElement("label");return y.style.cssText=l,y.textContent=i,s.appendChild(y),s.appendChild(x),s}function u(i){const x=document.createElement("select");return x.style.cssText=C,i.forEach(([s,y])=>{const b=document.createElement("option");b.value=s,b.textContent=y,x.appendChild(b)}),x}function v(i,x,s){const y=document.createElement("input");return y.type=i,y.placeholder=x||"",y.value=s||"",y.style.cssText=C,y}const f=u(m.length?m.map(i=>[i.slug,i.title||i.slug]):[["","No Actions configured yet \u2014 create one under Data \u2192 Actions"]]);o.appendChild(p("Action",f));const g=v("text","Button label","Run");if(o.appendChild(p("Label",g)),f.addEventListener("change",()=>{const i=m.find(x=>x.slug===f.value);i?.trigger?.label&&(g.value=i.trigger.label)}),m.length){const i=m[0];i?.trigger?.label&&(g.value=i.trigger.label)}const w=v("text","Paste entry UUID\u2026","");o.appendChild(p("Entry ID",w));const S=u([["primary","Primary"],["secondary","Secondary"],["ghost","Ghost"],["danger","Danger"]]);o.appendChild(p("Style",S));const N=v("text","e.g. check, zap, send (optional)","");o.appendChild(p("Icon",N));const T=v("text","Confirmation message (optional)","");o.appendChild(p("Confirm prompt",T));const k=document.createElement("button");k.type="button",k.className="btn btn-primary",k.textContent="Insert",o.appendChild(k);const F=E.modal({title:"Insert CTA Button",size:"sm"});F.element.appendChild(o),F.open(),k.addEventListener("click",()=>{const i=f.value;if(!i)return;const x=w.value.trim(),s=(g.value.trim()||"Run").replace(/\[\/cta\]/gi,""),y=S.value,b=N.value.trim().replace(/"/g,""),z=T.value.trim().replace(/"/g,""),A=x.replace(/"/g,"");let H=`action="${i}" style="${y}"`;A&&(H+=` entry="${A}"`),b&&(H+=` icon="${b}"`),z&&(H+=` confirm="${z}"`);const M=`[cta ${H}]${s}[/cta]`;F.close(),fe(a,M),a.dispatchEvent(new Event("input",{bubbles:!0})),a.focus()})}),j.onButton(async a=>{const o=(await W.pages.list().catch(()=>[])).map(b=>({label:b.title||b.urlPath,value:b.urlPath})),l=document.createElement("div");l.style.cssText="padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;";const C="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",p="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;";function u(b,z){const A=document.createElement("div"),H=document.createElement("label");return H.style.cssText=C,H.textContent=b,A.appendChild(H),A.appendChild(z),A}function v(b,z){const A=document.createElement("input");return A.type="text",A.placeholder=b,A.value=z||"",A.style.cssText=p,A}function f(b){const z=document.createElement("select");return z.style.cssText=p,b.forEach(([A,H])=>{const M=document.createElement("option");M.value=A,M.textContent=H,z.appendChild(M)}),z}const g=a.value.substring(a.selectionStart,a.selectionEnd),w=v("/about or https://example.com",g.startsWith("/")?g:"");l.appendChild(u("URL",w));const S=v("Button label",g&&!g.startsWith("/")?g:"");l.appendChild(u("Label",S));const N=f([["primary","Primary"],["secondary","Secondary"],["success","Success (Green)"],["danger","Danger (Red)"],["warning","Warning (Orange)"],["info","Info (Blue)"],["outline","Outline"],["ghost","Ghost"],["link","Link"],["outline-success","Outline Success"],["outline-danger","Outline Danger"]]);l.appendChild(u("Variant",N));const T=f([["","Default"],["sm","Small"],["lg","Large"]]);l.appendChild(u("Size",T));const k=v("e.g. arrow-right, star (optional)","");l.appendChild(u("Icon (before label)",k));const F=v("e.g. arrow-right (optional)","");l.appendChild(u("Icon (after label)",F));const i=document.createElement("label");i.style.cssText="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9em;";const x=document.createElement("input");x.type="checkbox",x.style.cssText="width:1rem;height:1rem;",i.appendChild(x),i.appendChild(document.createTextNode("Open in new tab")),l.appendChild(i);const s=document.createElement("button");s.type="button",s.className="btn btn-primary",s.textContent="Insert Button",l.appendChild(s);const y=E.modal({title:"Insert Button",size:"sm"});y.element.appendChild(l),y.open(),requestAnimationFrame(()=>{E.autocomplete(w,{data:o,minChars:1,onSelect:b=>{w.value=b.value,S.value||(S.value=b.label)}}),w.focus()}),s.addEventListener("click",()=>{const b=w.value.trim();if(!b)return;y.close();const z=S.value.trim()||b;let A=`href="${b}" variant="${N.value}"`;T.value&&(A+=` size="${T.value}"`);const H=k.value.trim().replace(/"/g,"");H&&(A+=` icon="${H}"`);const M=F.value.trim().replace(/"/g,"");M&&(A+=` icon-after="${M}"`),x.checked&&(A+=' target="_blank"');const le=`[button ${A}]${z}[/button]`;fe(a,le)})}),j.onLinkShortcode(async a=>{const o=(await W.pages.list().catch(()=>[])).map(s=>({label:s.title||s.urlPath,value:s.urlPath})),l=document.createElement("div");l.style.cssText="padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;";const C="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",p="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;";function u(s,y){const b=document.createElement("div"),z=document.createElement("label");return z.style.cssText=C,z.textContent=s,b.appendChild(z),b.appendChild(y),b}function v(s,y){const b=document.createElement("input");return b.type="text",b.placeholder=s,b.value=y||"",b.style.cssText=p,b}const f=a.value.substring(a.selectionStart,a.selectionEnd),g=v("/about or https://example.com",f.startsWith("/")?f:"");l.appendChild(u("URL",g));const w=v("Link text",f&&!f.startsWith("/")?f:"");l.appendChild(u("Link text",w));const S=v("e.g. text-primary, fw-bold (optional)","");l.appendChild(u("CSS class",S));const N=v("e.g. arrow-right (optional)","");l.appendChild(u("Icon (before text)",N));const T=v("e.g. external-link (optional)","");l.appendChild(u("Icon (after text)",T));const k=document.createElement("label");k.style.cssText="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9em;";const F=document.createElement("input");F.type="checkbox",F.style.cssText="width:1rem;height:1rem;",k.appendChild(F),k.appendChild(document.createTextNode("Open in new tab")),l.appendChild(k);const i=document.createElement("button");i.type="button",i.className="btn btn-primary",i.textContent="Insert Link",l.appendChild(i);const x=E.modal({title:"Insert Link Shortcode",size:"sm"});x.element.appendChild(l),x.open(),requestAnimationFrame(()=>{E.autocomplete(g,{data:o,minChars:1,onSelect:s=>{g.value=s.value,w.value||(w.value=s.label)}}),g.focus()}),i.addEventListener("click",()=>{const s=g.value.trim();if(!s)return;x.close();const y=w.value.trim()||s;let b=`href="${s}"`;const z=S.value.trim().replace(/"/g,"");z&&(b+=` class="${z}"`);const A=N.value.trim().replace(/"/g,"");A&&(b+=` icon="${A}"`);const H=T.value.trim().replace(/"/g,"");H&&(b+=` icon-after="${H}"`),F.checked&&(b+=' target="_blank"');const M=`[link ${b}]${y}[/link]`;fe(a,M)})}),j.onTabs(a=>{const m=document.createElement("div");m.style.cssText="padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;";const o="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",l="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;";function C(i,x){const s=document.createElement("div"),y=document.createElement("label");return y.style.cssText=o,y.textContent=i,s.appendChild(y),s.appendChild(x),s}function p(i){const x=document.createElement("select");return x.style.cssText=l,i.forEach(([s,y])=>{const b=document.createElement("option");b.value=s,b.textContent=y,x.appendChild(b)}),x}const u=p([["","Default (underline)"],["pills","Pills"]]);m.appendChild(C("Style",u));const v=p([["","Left"],["center","Centre"]]);m.appendChild(C("Alignment",v));const f=document.createElement("div");f.style.cssText="display:flex;flex-direction:column;gap:.4rem;";const g=[];function w(){g.forEach(i=>{i.removeBtn.disabled=g.length<=2,i.removeBtn.style.opacity=g.length<=2?"0.3":"1"})}function S(i){const x=document.createElement("div");x.style.cssText="display:flex;gap:.4rem;align-items:center;";const s=document.createElement("input");s.type="text",s.placeholder="Tab title",s.value=i||"",s.style.cssText=l+"flex:1;";const y=document.createElement("button");y.type="button",y.textContent="\u2715",y.style.cssText="padding:.3rem .5rem;background:transparent;border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text-muted,#aaa);cursor:pointer;font-size:.85em;flex-shrink:0;";const b={row:x,input:s,removeBtn:y};g.push(b),x.appendChild(s),x.appendChild(y),f.appendChild(x),y.addEventListener("click",()=>{if(g.length<=2)return;const z=g.indexOf(b);g.splice(z,1),f.removeChild(x),w()}),w()}S("Overview"),S("Details");const N=document.createElement("div");N.style.cssText=o,N.textContent="Tabs",m.appendChild(N),m.appendChild(f);const T=document.createElement("button");T.type="button",T.textContent="+ Add Tab",T.style.cssText="padding:.35rem .75rem;background:transparent;border:1px dashed var(--dm-border,#555);border-radius:4px;color:var(--dm-text-muted,#aaa);cursor:pointer;font-size:.85em;align-self:flex-start;",T.addEventListener("click",()=>{g.length>=10||(S(""),g[g.length-1].input.focus())}),m.appendChild(T);const k=document.createElement("button");k.type="button",k.className="btn btn-primary",k.textContent="Insert Tabs",m.appendChild(k);const F=E.modal({title:"Insert Tabs",size:"sm"});F.element.appendChild(m),F.open(),requestAnimationFrame(()=>g[0].input.focus()),k.addEventListener("click",()=>{F.close();const i=u.value,x=v.value;let s=i?` style="${i}"`:"";x&&(s+=` align="${x}"`);let y=`[tabs${s}]
|
|
83
|
+
`;g.forEach((b,z)=>{const A=b.input.value.trim()||`Tab ${z+1}`;y+=`[tab title="${A}"]Tab content here.[/tab]
|
|
84
|
+
`}),y+="[/tabs]",fe(a,y),a.dispatchEvent(new Event("input",{bubbles:!0})),a.focus()})}),j.onAccordion(async a=>{const m=await W.collections.list().catch(()=>[]),o=document.createElement("div");o.style.cssText="padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;";const l="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",C="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;",p=document.createElement("div");p.style.cssText="display:flex;gap:.5rem;";const u=document.createElement("button");u.type="button",u.className="btn btn-sm btn-primary",u.textContent="Static";const v=document.createElement("button");v.type="button",v.className="btn btn-sm btn-ghost",v.textContent="Collection",p.appendChild(u),p.appendChild(v),o.appendChild(p);let f="static";const g=document.createElement("div");g.style.cssText="display:flex;flex-direction:column;gap:.5rem;";const w=[];function S(P){const U=document.createElement("div");U.style.cssText="display:flex;align-items:center;gap:.5rem;";const G=document.createElement("label");G.style.cssText="font-size:.85em;color:var(--dm-text-muted,#aaa);white-space:nowrap;",G.textContent=`Item ${P}`;const r=document.createElement("input");return r.type="text",r.placeholder="Item title",r.style.cssText=C,U.appendChild(G),U.appendChild(r),{row:U,input:r}}[1,2].forEach(P=>{const U=S(P);w.push(U),g.appendChild(U.row)});const N=document.createElement("button");N.type="button",N.className="btn btn-ghost btn-sm",N.textContent="+ Add Item",N.addEventListener("click",()=>{const P=S(w.length+1);w.push(P),g.insertBefore(P.row,N)}),g.appendChild(N);const T=document.createElement("label");T.style.cssText="display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;";const k=document.createElement("input");k.type="checkbox",T.appendChild(k),T.appendChild(document.createTextNode("Allow multiple open")),g.appendChild(T),o.appendChild(g);const F=document.createElement("div");F.style.cssText="display:none;flex-direction:column;gap:.5rem;";const i=document.createElement("div"),x=document.createElement("label");x.style.cssText=l,x.textContent="Collection";const s=document.createElement("select");if(s.style.cssText=C,m.length)m.forEach(P=>{const U=document.createElement("option");U.value=P.slug,U.textContent=P.title||P.slug,s.appendChild(U)});else{const P=document.createElement("option");P.value="",P.textContent="No collections found",s.appendChild(P)}i.appendChild(x),i.appendChild(s),F.appendChild(i);const y=document.createElement("div"),b=document.createElement("label");b.style.cssText=l,b.textContent="Title field";const z=document.createElement("select");z.style.cssText=C,y.appendChild(b),y.appendChild(z),F.appendChild(y);const A=document.createElement("div"),H=document.createElement("label");H.style.cssText=l,H.textContent="Body field";const M=document.createElement("select");M.style.cssText=C,A.appendChild(H),A.appendChild(M),F.appendChild(A);async function le(P){z.textContent="",M.textContent="";try{const G=(await W.collections.get(P)).fields||[];if(!G.length){const r=document.createElement("option");r.value="",r.textContent="\u2014 none \u2014",z.appendChild(r.cloneNode(!0)),M.appendChild(r);return}G.forEach((r,t)=>{const e=()=>{const n=document.createElement("option");return n.value=r.name,n.textContent=r.label||r.name,n};z.appendChild(e()),M.appendChild(e()),r.name==="title"&&(z.value="title"),r.name==="description"&&(M.value="description")}),!z.value&&G[0]&&(z.value=G[0].name),!M.value&&G[1]&&(M.value=G[1].name)}catch{const U=document.createElement("option");U.value="",U.textContent="\u2014 unknown \u2014",z.appendChild(U.cloneNode(!0)),M.appendChild(U)}}m.length&&le(m[0].slug),s.addEventListener("change",()=>le(s.value));const ee=document.createElement("div"),be=document.createElement("label");be.style.cssText=l,be.textContent="Limit (optional)";const oe=document.createElement("input");oe.type="number",oe.placeholder="All",oe.style.cssText=C,ee.appendChild(be),ee.appendChild(oe),F.appendChild(ee);const J=document.createElement("label");J.style.cssText="display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;";const me=document.createElement("input");me.type="checkbox",J.appendChild(me),J.appendChild(document.createTextNode("Allow multiple open")),F.appendChild(J),o.appendChild(F),u.addEventListener("click",()=>{f="static",u.className="btn btn-sm btn-primary",v.className="btn btn-sm btn-ghost",g.style.display="flex",F.style.display="none"}),v.addEventListener("click",()=>{f="collection",v.className="btn btn-sm btn-primary",u.className="btn btn-sm btn-ghost",F.style.display="flex",g.style.display="none"});const te=document.createElement("button");te.type="button",te.className="btn btn-primary",te.textContent="Insert Accordion",o.appendChild(te);const de=E.modal({title:"Insert Accordion",size:"sm"});de.element.appendChild(o),de.open(),requestAnimationFrame(()=>w[0].input.focus()),te.addEventListener("click",()=>{if(f==="collection"&&!s.value)return;de.close();let P;if(f==="static")P=`[accordion${k.checked?' multiple="true"':""}]
|
|
85
|
+
`,w.forEach((G,r)=>{const t=G.input.value.trim()||`Item ${r+1}`;P+=`[item title="${t}"]Content here.[/item]
|
|
86
|
+
`}),P+="[/accordion]";else{const U=s.value;if(!U)return;const G=z.value,r=M.value;let t=`slug="${U}" display="accordion"`;G&&(t+=` title-field="${G}"`),r&&(t+=` body-field="${r}"`);const e=oe.value.trim();e&&(t+=` limit="${e}"`),me.checked&&(t+=' multiple="true"'),P=`[collection ${t} /]`}fe(a,P),a.dispatchEvent(new Event("input",{bubbles:!0})),a.focus()})}),j.onHelp(()=>{Le()}),d.find(".editor-view-btn").on("click",function(){const a=$(this).data("mode");d.find(".editor-view-btn").removeClass("active"),$(this).addClass("active"),d.find("#editor-body").removeClass("editor-mode-split editor-mode-write editor-mode-preview").addClass(`editor-mode-${a}`)}),d.find("#fullscreen-btn").on("click",function(){d.find(".editor-card").toggleClass("editor-fullscreen")}),Ce=!1,d.find("#quick-switch").prop("disabled",!1),we&&window.removeEventListener("beforeunload",we),we=a=>{Ce&&a.preventDefault()},window.addEventListener("beforeunload",we),ke||(ke=!0,R.use((a,m,o)=>{const l=window.location.hash.startsWith("#/pages/edit")||window.location.hash==="#/pages/new";if(!Ce||!l)return o();E.confirm("You have unsaved changes. Leave this page?").then(C=>{C&&(Ce=!1,o())})})),V.on("input",()=>{Ce=!0,d.find("#quick-switch").prop("disabled",!0),h()});const Q=d.find("#editor-meta-tabs").get(0);Q&&(Q.addEventListener("input",()=>{Ce=!0,d.find("#quick-switch").prop("disabled",!0)}),Q.addEventListener("change",a=>{a.target.id!=="quick-switch"&&(Ce=!0,d.find("#quick-switch").prop("disabled",!0))})),h(),d.find("#save-btn").on("click",async()=>{const a=d.find("#page-url-path").val().trim();if(!a){E.toast("URL path is required.",{type:"warning"});return}const m=d.find("#field-dconfig").val().trim();let o=null;if(m)try{o=JSON.parse(m)}catch{E.toast("DConfig JSON is invalid. Please check the format before saving.",{type:"warning"});return}const l={title:d.find("#field-title").val().trim()||"Untitled",description:d.find("#field-description").val().trim(),layout:d.find("#field-layout").val(),status:d.find("#field-status").val(),sortOrder:parseInt(d.find("#field-sort-order").val(),10)||99,showInNav:d.find("#field-show-in-nav").is(":checked"),sidebar:d.find("#field-sidebar").is(":checked"),...d.find("#field-show-breadcrumbs").is(":checked")?{}:{breadcrumbs:!1},tags:he?he.getValue():[],category:d.find("#field-category").val().trim()||null,visibility:d.find("#field-visibility").val()||"public",seo:{title:d.find("#field-seo-title").val().trim(),description:d.find("#field-seo-desc").val().trim()},dconfig:o,...d.find("#field-theme").val()?{theme:d.find("#field-theme").val()}:{}};try{if(d.find("#save-btn").prop("disabled",!0).text("Saving\u2026"),q){const C={frontmatter:l,body:V.val()};a!==B&&(C.newUrlPath=a),await W.pages.update(B,C),E.toast("Page saved successfully.",{type:"success"}),Ce=!1,d.find("#quick-switch").prop("disabled",!1),a!==B&&R.navigate(`/pages/edit${a}`)}else await W.pages.create({urlPath:a,frontmatter:l,body:V.val()}),E.toast("Page saved successfully.",{type:"success"}),Ce=!1,R.navigate("/pages")}catch(C){E.toast(`Save failed: ${C.message||"Unknown error"}`,{type:"error"})}finally{d.find("#save-btn").prop("disabled",!1).text("Save")}}),d.find("#cancel-btn").on("click",()=>R.navigate("/pages")),Domma.icons.scan()}};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "domma-cms",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.13",
|
|
4
4
|
"description": "File-based CMS powered by Domma and Fastify. Run npx domma-cms my-site to create a new project.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "server/server.js",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"@fastify/rate-limit": "^10.3.0",
|
|
72
72
|
"@fastify/static": "^8.1.0",
|
|
73
73
|
"bcryptjs": "^3.0.3",
|
|
74
|
-
"domma-js": "^0.
|
|
74
|
+
"domma-js": "^0.21.0",
|
|
75
75
|
"dotenv": "^17.2.3",
|
|
76
76
|
"fastify": "5.8.1",
|
|
77
77
|
"gray-matter": "^4.0.3",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"/":
|
|
2
|
+
"/": 140,
|
|
3
3
|
"/about": 71,
|
|
4
4
|
"/blog": 36,
|
|
5
5
|
"/contact": 30,
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"/resources/dependencies": 2,
|
|
17
17
|
"/resources/components": 6,
|
|
18
18
|
"/gdpr": 3,
|
|
19
|
-
"/scratch":
|
|
19
|
+
"/scratch": 69,
|
|
20
20
|
"/getting-started": 3,
|
|
21
21
|
"/resources/pro": 1,
|
|
22
22
|
"/todo": 23,
|
|
@@ -174,6 +174,37 @@ function renderCollectionList(entries, visibleFields, titleField, emptyMsg, ctaO
|
|
|
174
174
|
return `<div class="dm-collection-display dm-collection-list">\n${items}\n</div>`;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
|
+
/**
|
|
178
|
+
* Render a collection as a Domma accordion.
|
|
179
|
+
* @param {object[]} entries
|
|
180
|
+
* @param {string} titleField - entry data field to use as header text
|
|
181
|
+
* @param {string} bodyField - entry data field to use as body content (Markdown)
|
|
182
|
+
* @param {boolean} multiple - allow multiple panels open simultaneously
|
|
183
|
+
* @param {string} emptyMsg
|
|
184
|
+
* @returns {string}
|
|
185
|
+
*/
|
|
186
|
+
function renderCollectionAccordion(entries, titleField, bodyField, multiple, emptyMsg) {
|
|
187
|
+
if (!entries.length) {
|
|
188
|
+
return `<div class="dm-collection-display dm-collection-empty"><p>${escapeHtmlText(emptyMsg)}</p></div>`;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
const multiAttr = multiple ? ' data-multi="true"' : '';
|
|
192
|
+
const items = entries.map(e => {
|
|
193
|
+
const title = escapeHtmlText(String(e.data?.[titleField] ?? e.id ?? '(untitled)'));
|
|
194
|
+
const bodyVal = String(e.data?.[bodyField] ?? '');
|
|
195
|
+
const bodyHtml = marked.parse(bodyVal);
|
|
196
|
+
return (
|
|
197
|
+
`<div class="accordion-item">\n` +
|
|
198
|
+
` <h3 class="accordion-header"><button class="accordion-button" type="button">${title}` +
|
|
199
|
+
`<span class="accordion-icon" data-icon="chevron-down"></span></button></h3>\n` +
|
|
200
|
+
` <div class="accordion-body"><div class="accordion-content">${bodyHtml}</div></div>\n` +
|
|
201
|
+
`</div>`
|
|
202
|
+
);
|
|
203
|
+
}).join('\n');
|
|
204
|
+
|
|
205
|
+
return `<div class="dm-collection-display accordion"${multiAttr}>\n${items}\n</div>`;
|
|
206
|
+
}
|
|
207
|
+
|
|
177
208
|
/**
|
|
178
209
|
* Process [view slug="..." display="table|cards|list" /] shortcodes.
|
|
179
210
|
* Executes the View's aggregation pipeline and renders results using the
|
|
@@ -244,6 +275,11 @@ async function processViewBlocks(markdown) {
|
|
|
244
275
|
replacement = renderCollectionCards(entries, fields, titleField, columns, emptyMsg, ctaOpts);
|
|
245
276
|
} else if (display === 'list') {
|
|
246
277
|
replacement = renderCollectionList(entries, fields, titleField, emptyMsg, ctaOpts);
|
|
278
|
+
} else if (display === 'accordion') {
|
|
279
|
+
const accordionTitleField = attrs['title-field'] || 'title';
|
|
280
|
+
const bodyField = attrs['body-field'] || 'description';
|
|
281
|
+
const multiple = attrs.multiple === 'true';
|
|
282
|
+
replacement = renderCollectionAccordion(entries, accordionTitleField, bodyField, multiple, emptyMsg);
|
|
247
283
|
} else if (display === 'block') {
|
|
248
284
|
const blockName = attrs.block || viewConfig?.display?.block || '';
|
|
249
285
|
if (blockName) {
|
|
@@ -333,6 +369,11 @@ async function processCollectionBlocks(markdown) {
|
|
|
333
369
|
replacement = renderCollectionCards(entries, fields, titleField, columns, emptyMsg, ctaOpts);
|
|
334
370
|
} else if (display === 'list') {
|
|
335
371
|
replacement = renderCollectionList(entries, fields, titleField, emptyMsg, ctaOpts);
|
|
372
|
+
} else if (display === 'accordion') {
|
|
373
|
+
const accordionTitleField = attrs['title-field'] || 'title';
|
|
374
|
+
const bodyField = attrs['body-field'] || 'description';
|
|
375
|
+
const multiple = attrs.multiple === 'true';
|
|
376
|
+
replacement = renderCollectionAccordion(entries, accordionTitleField, bodyField, multiple, emptyMsg);
|
|
336
377
|
} else if (display === 'block') {
|
|
337
378
|
const blockName = attrs.block || '';
|
|
338
379
|
if (blockName) {
|