@@ -86,79 +88,249 @@
const schema = @json($builderSchema);
let data;
try { data = JSON.parse(document.getElementById('data-json').value || '{}'); } catch (_) { data = {}; }
- let selectedKey = Object.keys(schema)[0] || null;
+
+ const layoutTemplates = {
+ section: { type: 'section', label: 'Section', children: [] },
+ container: { type: 'container', label: 'Container', children: [] },
+ columns2: { type: 'columns', label: 'Two columns', columns: [{ children: [] }, { children: [] }] },
+ columns3: { type: 'columns', label: 'Three columns', columns: [{ children: [] }, { children: [] }, { children: [] }] },
+ };
+
+ const uid = () => `node_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+ const clone = value => JSON.parse(JSON.stringify(value));
+ const escapeHtml = value => String(value ?? '').replace(/[&<>'"]/g, char => ({'&':'&','<':'<','>':'>',"'":''','"':'"'}[char]));
+ const titleFor = (key, definition = {}) => definition.label || key.replaceAll('_', ' ').replace(/\b\w/g, char => char.toUpperCase());
+ const controlFor = definition => definition.control || (definition.type === 'boolean' ? 'toggle' : definition.type === 'integer' ? 'number' : 'text');
+
+ function normaliseNode(node) {
+ node.id ||= uid();
+ node.type ||= 'field';
+ if (node.type === 'columns') {
+ node.columns ||= [{ children: [] }, { children: [] }];
+ node.columns.forEach(column => {
+ column.id ||= uid();
+ column.children ||= [];
+ column.children.forEach(normaliseNode);
+ });
+ } else {
+ node.children ||= [];
+ node.children.forEach(normaliseNode);
+ }
+ return node;
+ }
+
+ function defaultLayout() {
+ return [{ id: uid(), type: 'section', label: 'Content', children: Object.keys(schema).map(key => ({ id: uid(), type: 'field', key })) }];
+ }
+
+ let layout = Array.isArray(data._layout) ? data._layout : defaultLayout();
+ layout.forEach(normaliseNode);
+ let selectedId = layout[0]?.id || null;
+ let dragId = null;
const library = document.getElementById('builder-library');
+ const layoutLibrary = document.getElementById('layout-library');
const canvas = document.getElementById('builder-canvas');
const inspector = document.getElementById('builder-inspector');
const hidden = document.getElementById('data-json');
const jsonEditor = document.getElementById('json-editor');
const panel = document.getElementById('json-panel');
- const titleFor = (key, definition) => definition.label || key.replaceAll('_', ' ').replace(/\b\w/g, char => char.toUpperCase());
- const controlFor = definition => definition.control || (definition.type === 'boolean' ? 'toggle' : definition.type === 'integer' ? 'number' : 'text');
- const escapeHtml = value => String(value ?? '').replace(/[&<>'"]/g, char => ({'&':'&','<':'<','>':'>',"'":''','"':'"'}[char]));
- const sync = () => { hidden.value = JSON.stringify(data); jsonEditor.value = JSON.stringify(data, null, 2); };
+ const sync = () => {
+ data._layout = layout;
+ hidden.value = JSON.stringify(data);
+ jsonEditor.value = JSON.stringify(data, null, 2);
+ };
- function renderLibrary() {
- const entries = Object.entries(schema);
- library.innerHTML = entries.length ? entries.map(([key, definition]) => `
`).join('') : '
This content type has no schema yet. Use Advanced JSON to edit it.
';
- library.querySelectorAll('[data-select]').forEach(button => button.addEventListener('click', () => select(button.dataset.select)));
- }
-
- function renderCanvas() {
- const entries = Object.entries(schema);
- if (!entries.length) { canvas.innerHTML = '
No visual fields availableOpen Advanced JSON to edit this document.
'; return; }
- canvas.innerHTML = entries.map(([key, definition]) => {
- const value = data[key];
- const selected = selectedKey === key;
- const control = controlFor(definition);
- let preview = '';
- if (control === 'toggle') preview = `
${value ? 'Enabled' : 'Disabled'}`;
- else if (control === 'repeater') preview = `
${Array.isArray(value) ? value.length : 0} item${Array.isArray(value) && value.length === 1 ? '' : 's'}`;
- else preview = `
${escapeHtml(value || 'Click to add content')}
`;
- return `
`;
- }).join('');
- canvas.querySelectorAll('[data-canvas-key]').forEach(button => button.addEventListener('click', () => select(button.dataset.canvasKey)));
- }
-
- function renderInspector() {
- if (!selectedKey || !schema[selectedKey]) { inspector.innerHTML = '
Nothing selected.
'; return; }
- const definition = schema[selectedKey];
- const control = controlFor(definition);
- const label = titleFor(selectedKey, definition);
- document.getElementById('inspector-help').textContent = label;
- if (control === 'toggle') {
- inspector.innerHTML = `
`;
- } else if (control === 'textarea') {
- inspector.innerHTML = `
`;
- } else if (control === 'repeater') {
- const items = Array.isArray(data[selectedKey]) ? data[selectedKey] : [];
- inspector.innerHTML = `
${escapeHtml(label)}
${items.map((item, index) => `
`).join('') || '
No items.
'}
`;
- document.getElementById('add-repeat-item')?.addEventListener('click', () => { if (!Array.isArray(data[selectedKey])) data[selectedKey] = []; const itemSchema = definition.item || {}; const item = {}; Object.keys(itemSchema).forEach(key => item[key] = ''); data[selectedKey].push(item); update(); });
- inspector.querySelectorAll('[data-remove-item]').forEach(button => button.addEventListener('click', () => { data[selectedKey].splice(Number(button.dataset.removeItem), 1); update(); }));
- return;
- } else {
- const type = control === 'number' ? 'number' : control === 'url' ? 'url' : 'text';
- inspector.innerHTML = `
`;
+ function walk(nodes, callback, parent = null, slot = null) {
+ for (let index = 0; index < nodes.length; index++) {
+ const node = nodes[index];
+ if (callback(node, nodes, index, parent, slot) === false) return false;
+ if (node.type === 'columns') {
+ for (let columnIndex = 0; columnIndex < node.columns.length; columnIndex++) {
+ if (walk(node.columns[columnIndex].children, callback, node, `column:${columnIndex}`) === false) return false;
+ }
+ } else if (walk(node.children || [], callback, node, 'children') === false) return false;
}
- const controlElement = document.getElementById('inspector-control');
- controlElement?.addEventListener(control === 'toggle' ? 'change' : 'input', event => {
- data[selectedKey] = control === 'toggle' ? event.target.checked : control === 'number' ? Number(event.target.value) : event.target.value;
- sync(); renderCanvas(); renderLibrary();
+ }
+
+ function findNode(id) {
+ let found = null;
+ walk(layout, (node, collection, index, parent, slot) => {
+ if (node.id === id) { found = { node, collection, index, parent, slot }; return false; }
+ });
+ return found;
+ }
+
+ function detachNode(id) {
+ const found = findNode(id);
+ if (!found) return null;
+ return found.collection.splice(found.index, 1)[0];
+ }
+
+ function containsNode(node, id) {
+ if (node.id === id) return true;
+ let result = false;
+ const inspect = children => children?.some(child => containsNode(child, id));
+ if (node.type === 'columns') result = node.columns.some(column => inspect(column.children));
+ else result = inspect(node.children);
+ return Boolean(result);
+ }
+
+ function targetCollection(targetId, slot = 'children') {
+ if (targetId === 'root') return layout;
+ const target = findNode(targetId)?.node;
+ if (!target) return layout;
+ if (slot.startsWith('column:')) return target.columns[Number(slot.split(':')[1])].children;
+ target.children ||= [];
+ return target.children;
+ }
+
+ function addNode(template, targetId = 'root', slot = 'children') {
+ const node = normaliseNode(clone(template));
+ targetCollection(targetId, slot).push(node);
+ selectedId = node.id;
+ update();
+ }
+
+ function fieldNode(key) { return { id: uid(), type: 'field', key }; }
+
+ function renderLibraries() {
+ layoutLibrary.innerHTML = Object.entries(layoutTemplates).map(([key, template]) => `
`).join('');
+ layoutLibrary.querySelectorAll('[data-add-layout]').forEach(button => button.addEventListener('click', () => addNode(layoutTemplates[button.dataset.addLayout])));
+
+ library.innerHTML = Object.entries(schema).map(([key, definition]) => `
`).join('') || '
This content type has no schema yet.
';
+ library.querySelectorAll('[data-add-field]').forEach(button => button.addEventListener('click', () => addNode(fieldNode(button.dataset.addField))));
+ }
+
+ function nodeToolbar(node) {
+ return `
`;
+ }
+
+ function renderDropZone(targetId, slot, label = 'Drop here') {
+ return `
${label}
`;
+ }
+
+ function renderNode(node) {
+ const selected = node.id === selectedId;
+ const base = `relative rounded-xl border ${selected ? 'border-blue-500 ring-2 ring-blue-500/20' : 'border-zinc-200 dark:border-zinc-700'}`;
+ if (node.type === 'field') {
+ const definition = schema[node.key] || {};
+ const value = data[node.key];
+ return `
${nodeToolbar(node)}
${escapeHtml(value === true ? 'Enabled' : value === false ? 'Disabled' : value || 'Click to add content')}
`;
+ }
+ if (node.type === 'columns') {
+ return `
${nodeToolbar(node)}
${node.columns.map((column, index) => `
${renderDropZone(node.id, `column:${index}`, `Column ${index + 1}`)}
${column.children.map(renderNode).join('')}
`).join('')}
`;
+ }
+ return `
${nodeToolbar(node)}
${renderDropZone(node.id, 'children')}${(node.children || []).map(renderNode).join('')}
`;
+ }
+
+ function bindCanvas() {
+ canvas.querySelectorAll('[data-select-node]').forEach(button => button.addEventListener('click', event => { event.stopPropagation(); selectedId = button.dataset.selectNode; renderCanvas(); renderInspector(); }));
+ canvas.querySelectorAll('[data-action]').forEach(button => button.addEventListener('click', event => {
+ event.stopPropagation();
+ const found = findNode(button.dataset.id);
+ if (!found) return;
+ if (button.dataset.action === 'delete') {
+ found.collection.splice(found.index, 1);
+ selectedId = found.parent?.id || layout[0]?.id || null;
+ } else {
+ const copy = clone(found.node);
+ const renew = node => { node.id = uid(); if (node.type === 'columns') node.columns.forEach(column => { column.id = uid(); column.children.forEach(renew); }); else (node.children || []).forEach(renew); };
+ renew(copy);
+ found.collection.splice(found.index + 1, 0, copy);
+ selectedId = copy.id;
+ }
+ update();
+ }));
+ canvas.querySelectorAll('[data-node-id]').forEach(element => {
+ element.addEventListener('dragstart', event => { dragId = element.dataset.nodeId; event.dataTransfer.effectAllowed = 'move'; event.stopPropagation(); });
+ element.addEventListener('dragend', () => { dragId = null; });
+ });
+ canvas.querySelectorAll('[data-drop-target]').forEach(zone => {
+ zone.addEventListener('dragover', event => { event.preventDefault(); event.stopPropagation(); zone.classList.add('border-blue-500','bg-blue-50','dark:bg-blue-950/30'); });
+ zone.addEventListener('dragleave', () => zone.classList.remove('border-blue-500','bg-blue-50','dark:bg-blue-950/30'));
+ zone.addEventListener('drop', event => {
+ event.preventDefault(); event.stopPropagation();
+ zone.classList.remove('border-blue-500','bg-blue-50','dark:bg-blue-950/30');
+ const moving = findNode(dragId)?.node;
+ const target = findNode(zone.dataset.dropTarget)?.node;
+ if (!moving || moving.id === target?.id || (target && containsNode(moving, target.id))) return;
+ const detached = detachNode(dragId);
+ if (!detached) return;
+ targetCollection(zone.dataset.dropTarget, zone.dataset.dropSlot).push(detached);
+ selectedId = detached.id;
+ update();
+ });
});
}
- function select(key) { selectedKey = key; renderLibrary(); renderCanvas(); renderInspector(); }
- function update() { sync(); renderLibrary(); renderCanvas(); renderInspector(); }
+ function renderCanvas() {
+ canvas.innerHTML = `${renderDropZone('root', 'children', 'Drop at page root')}
${layout.map(renderNode).join('')}
`;
+ if (!layout.length) canvas.innerHTML += '
Add a section, columns, container, or field from the component library.
';
+ bindCanvas();
+ }
+
+ function renderFieldInspector(node) {
+ const definition = schema[node.key] || {};
+ const control = controlFor(definition);
+ const label = titleFor(node.key, definition);
+ document.getElementById('inspector-help').textContent = label;
+ if (control === 'toggle') inspector.innerHTML = `
`;
+ else if (control === 'textarea') inspector.innerHTML = `
`;
+ else {
+ const type = control === 'number' ? 'number' : control === 'url' ? 'url' : 'text';
+ inspector.innerHTML = `
`;
+ }
+ const input = document.getElementById('inspector-control');
+ input?.addEventListener(control === 'toggle' ? 'change' : 'input', event => {
+ data[node.key] = control === 'toggle' ? event.target.checked : control === 'number' ? Number(event.target.value) : event.target.value;
+ sync(); renderCanvas();
+ });
+ }
+
+ function renderInspector() {
+ const found = findNode(selectedId);
+ if (!found) { inspector.innerHTML = '
Select a component on the canvas.
'; return; }
+ const node = found.node;
+ if (node.type === 'field') return renderFieldInspector(node);
+ document.getElementById('inspector-help').textContent = node.label || titleFor(node.type);
+ inspector.innerHTML = `
${node.type === 'columns' ? `
` : ''}
Drag components using their cards. Drop them into sections, containers, columns, or the page root.
`;
+ document.getElementById('node-label')?.addEventListener('input', event => { node.label = event.target.value; sync(); renderCanvas(); });
+ document.getElementById('column-count')?.addEventListener('change', event => {
+ const count = Number(event.target.value);
+ while (node.columns.length < count) node.columns.push({ id: uid(), children: [] });
+ while (node.columns.length > count) {
+ const removed = node.columns.pop();
+ node.columns[node.columns.length - 1].children.push(...removed.children);
+ }
+ update();
+ });
+ }
+
+ function update() { sync(); renderLibraries(); renderCanvas(); renderInspector(); }
document.getElementById('toggle-json').addEventListener('click', () => { panel.classList.toggle('hidden'); jsonEditor.value = JSON.stringify(data, null, 2); });
document.getElementById('apply-json').addEventListener('click', () => {
const message = document.getElementById('json-message');
- try { data = JSON.parse(jsonEditor.value); message.textContent = 'JSON applied to the visual editor.'; message.className = 'mt-2 text-sm text-green-700 dark:text-green-300'; update(); }
- catch (error) { message.textContent = error.message; message.className = 'mt-2 text-sm text-red-700 dark:text-red-300'; }
+ try {
+ data = JSON.parse(jsonEditor.value);
+ layout = Array.isArray(data._layout) ? data._layout : defaultLayout();
+ layout.forEach(normaliseNode);
+ selectedId = layout[0]?.id || null;
+ message.textContent = 'JSON applied to the visual editor.';
+ message.className = 'mt-2 text-sm text-green-700 dark:text-green-300';
+ update();
+ } catch (error) {
+ message.textContent = error.message;
+ message.className = 'mt-2 text-sm text-red-700 dark:text-red-300';
+ }
});
- document.querySelectorAll('.builder-width').forEach(button => button.addEventListener('click', () => { document.getElementById('builder-viewport').style.maxWidth = button.dataset.width; document.querySelectorAll('.builder-width').forEach(item => item.classList.remove('font-medium','bg-zinc-100','dark:bg-zinc-800')); button.classList.add('font-medium','bg-zinc-100','dark:bg-zinc-800'); }));
+ document.querySelectorAll('.builder-width').forEach(button => button.addEventListener('click', () => {
+ document.getElementById('builder-viewport').style.maxWidth = button.dataset.width;
+ document.querySelectorAll('.builder-width').forEach(item => item.classList.remove('font-medium','bg-zinc-100','dark:bg-zinc-800'));
+ button.classList.add('font-medium','bg-zinc-100','dark:bg-zinc-800');
+ }));
document.getElementById('content-document-form').addEventListener('submit', sync);
document.getElementById('content-type-select')?.addEventListener('change', event => {
if (!@json($document->exists)) window.location.href = `{{ route('content.documents.create') }}?type=${event.target.value}`;
diff --git a/Modules/Content/Resources/views/admin/index.blade.php b/Modules/Content/Resources/views/admin/index.blade.php
index c219cb4..4217183 100644
--- a/Modules/Content/Resources/views/admin/index.blade.php
+++ b/Modules/Content/Resources/views/admin/index.blade.php
@@ -1,53 +1,6 @@
-
-
-
-
-
Content documents
-
Create and reuse typed content across page regions.
-
-
- Compose homepage
- Create document
-
-
-
- @if(session('status'))
-
{{ session('status') }}
- @endif
- @error('document')
{{ $message }}
@enderror
-
-
-
-
-
- | Document | Type | Status | Uses | Actions |
|---|
-
- @forelse($documents as $document)
-
- {{ $document->title }} {{ $document->slug }} |
- {{ $document->type?->name }} |
- {{ ucfirst($document->status) }} |
- {{ $document->placements_count }} |
- Edit |
-
- @empty
- | No content documents match the current filters. |
- @endforelse
-
-
-
- {{ $documents->links() }}
-
Content documents
Reusable structured content used by page compositions.
+@if(session('status'))
{{ session('status') }}
@endif
+
+
| Title | Type | Status | Usage |
|---|
@forelse($documents as $document)| {{ $document->title }} {{ $document->slug }} | {{ $document->type?->name }} | {{ ucfirst($document->status) }} | {{ $document->placements->count() }} |
@empty| No documents found. |
@endforelse
{{ $documents->links() }}
+@if(session('status'))
{{ session('status') }}
@endif
+
+@foreach(['header','body','footer'] as $region)
{{ ucfirst($region) }}
@forelse($placements->get($region,collect()) as $placement)
@empty
No placements.
@endforelse
@endforeach
Draft preview
'.$rendered.'