UI and editing updates
This commit is contained in:
Mark Gregory
@@ -168,10 +168,16 @@
|
||||
let data = parseObject(dataField.value);
|
||||
|
||||
function parseObject(value) {
|
||||
if (value && typeof value === 'object' && !Array.isArray(value)) return value;
|
||||
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(value || '{}');
|
||||
return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {};
|
||||
|
||||
return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
|
||||
? parsed
|
||||
: {};
|
||||
} catch (_) {
|
||||
return {};
|
||||
}
|
||||
@@ -179,49 +185,166 @@
|
||||
|
||||
function normaliseSchema(raw) {
|
||||
if (typeof raw === 'string') {
|
||||
try { raw = JSON.parse(raw); } catch (_) { return []; }
|
||||
try {
|
||||
raw = JSON.parse(raw);
|
||||
} catch (_) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
if (Array.isArray(raw)) return raw;
|
||||
if (!raw || typeof raw !== 'object') return [];
|
||||
if (Array.isArray(raw.fields)) return raw.fields;
|
||||
if (Array.isArray(raw.schema)) return raw.schema;
|
||||
return Object.values(raw).filter(field => field && typeof field === 'object' && field.key);
|
||||
|
||||
if (Array.isArray(raw)) {
|
||||
return raw;
|
||||
}
|
||||
|
||||
if (! raw || typeof raw !== 'object') {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (Array.isArray(raw.fields)) {
|
||||
return raw.fields;
|
||||
}
|
||||
|
||||
if (Array.isArray(raw.schema)) {
|
||||
return raw.schema;
|
||||
}
|
||||
|
||||
return Object.values(raw).filter(
|
||||
field => field && typeof field === 'object' && field.key
|
||||
);
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '').replace(/[&<>"']/g, character => ({
|
||||
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": ''',
|
||||
})[character]);
|
||||
}
|
||||
|
||||
function get(path) {
|
||||
return path.split('.').reduce((value, key) => value?.[key], data);
|
||||
function pathParts(path) {
|
||||
return String(path || '')
|
||||
.split('.')
|
||||
.filter(part => part !== '');
|
||||
}
|
||||
|
||||
function set(path, value) {
|
||||
const parts = path.split('.');
|
||||
let target = data;
|
||||
parts.slice(0, -1).forEach(key => {
|
||||
if (target[key] === undefined || target[key] === null) {
|
||||
target[key] = /^\d+$/.test(parts[parts.indexOf(key) + 1] ?? '') ? [] : {};
|
||||
function getAtPath(path) {
|
||||
return pathParts(path).reduce((value, part) => {
|
||||
if (value === undefined || value === null) {
|
||||
return undefined;
|
||||
}
|
||||
target = target[key];
|
||||
});
|
||||
target[parts.at(-1)] = value;
|
||||
sync();
|
||||
|
||||
return value[part];
|
||||
}, data);
|
||||
}
|
||||
|
||||
function sync() {
|
||||
dataField.value = JSON.stringify(data, null, 2);
|
||||
function setAtPath(path, value) {
|
||||
const parts = pathParts(path);
|
||||
|
||||
if (! parts.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
let target = data;
|
||||
|
||||
parts.forEach((part, index) => {
|
||||
const isLast = index === parts.length - 1;
|
||||
|
||||
if (isLast) {
|
||||
target[part] = value;
|
||||
return;
|
||||
}
|
||||
|
||||
const nextPart = parts[index + 1];
|
||||
const shouldBeArray = /^\d+$/.test(nextPart);
|
||||
|
||||
if (
|
||||
target[part] === undefined
|
||||
|| target[part] === null
|
||||
|| typeof target[part] !== 'object'
|
||||
) {
|
||||
target[part] = shouldBeArray ? [] : {};
|
||||
}
|
||||
|
||||
target = target[part];
|
||||
});
|
||||
|
||||
syncJson();
|
||||
}
|
||||
|
||||
function fieldForPath(schema, path) {
|
||||
const parts = pathParts(path);
|
||||
let fields = schema;
|
||||
let matched = null;
|
||||
|
||||
for (const part of parts) {
|
||||
if (/^\d+$/.test(part)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
matched = (fields || []).find(field => field.key === part) ?? null;
|
||||
|
||||
if (! matched) {
|
||||
return null;
|
||||
}
|
||||
|
||||
fields = matched.fields || [];
|
||||
}
|
||||
|
||||
return matched;
|
||||
}
|
||||
|
||||
function defaultValue(field) {
|
||||
if (Object.prototype.hasOwnProperty.call(field, 'default')) return field.default;
|
||||
if (field.type === 'boolean') return false;
|
||||
if (field.type === 'repeater') return [];
|
||||
if (Object.prototype.hasOwnProperty.call(field, 'default')) {
|
||||
return structuredClone(field.default);
|
||||
}
|
||||
|
||||
if (field.type === 'boolean') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (field.type === 'repeater') {
|
||||
return [];
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
function newRepeaterItem(field) {
|
||||
const item = {};
|
||||
|
||||
(field.fields || []).forEach(child => {
|
||||
item[child.key] = defaultValue(child);
|
||||
});
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
function hydrateMissingFields(fields, target) {
|
||||
(fields || []).forEach(field => {
|
||||
if (! Object.prototype.hasOwnProperty.call(target, field.key)) {
|
||||
target[field.key] = defaultValue(field);
|
||||
}
|
||||
|
||||
if (field.type === 'repeater') {
|
||||
if (! Array.isArray(target[field.key])) {
|
||||
target[field.key] = [];
|
||||
}
|
||||
|
||||
target[field.key].forEach(item => {
|
||||
if (item && typeof item === 'object' && ! Array.isArray(item)) {
|
||||
hydrateMissingFields(field.fields || [], item);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function syncJson() {
|
||||
dataField.value = JSON.stringify(data, null, 2);
|
||||
}
|
||||
|
||||
function fieldMarkup(field, value, path) {
|
||||
const help = field.help
|
||||
? `<p class="mt-1 text-xs text-zinc-500">${escapeHtml(field.help)}</p>`
|
||||
@@ -229,16 +352,18 @@
|
||||
|
||||
if (field.type === 'boolean') {
|
||||
return `
|
||||
<label class="flex items-center justify-between gap-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
|
||||
<label class="flex cursor-pointer items-center justify-between gap-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
|
||||
<span>
|
||||
<strong class="block text-sm">${escapeHtml(field.label)}</strong>
|
||||
${help}
|
||||
</span>
|
||||
<span class="relative inline-flex h-6 w-11 shrink-0 items-center">
|
||||
<input class="peer sr-only" data-path="${escapeHtml(path)}" type="checkbox" ${value === true ? 'checked' : ''}>
|
||||
<span class="absolute inset-0 rounded-full bg-zinc-300 transition peer-checked:bg-blue-600"></span>
|
||||
<span class="absolute left-1 h-4 w-4 rounded-full bg-white transition peer-checked:translate-x-5"></span>
|
||||
</span>
|
||||
<input
|
||||
data-path="${escapeHtml(path)}"
|
||||
type="checkbox"
|
||||
value="1"
|
||||
${value === true || value === 1 || value === '1' ? 'checked' : ''}
|
||||
class="h-5 w-5 rounded border-zinc-400 text-orange-600 focus:ring-orange-500"
|
||||
>
|
||||
</label>`;
|
||||
}
|
||||
|
||||
@@ -246,153 +371,256 @@
|
||||
return `
|
||||
<label class="block text-sm font-medium">
|
||||
${escapeHtml(field.label)}
|
||||
<textarea data-path="${escapeHtml(path)}" class="mt-2 min-h-28 w-full rounded-lg border border-zinc-300 bg-white p-3 dark:border-zinc-700 dark:bg-zinc-950">${escapeHtml(value)}</textarea>
|
||||
</label>${help}`;
|
||||
<textarea
|
||||
data-path="${escapeHtml(path)}"
|
||||
class="mt-2 min-h-28 w-full rounded-lg border border-zinc-600 bg-zinc-950 p-3 text-zinc-100"
|
||||
>${escapeHtml(value)}</textarea>
|
||||
</label>
|
||||
${help}`;
|
||||
}
|
||||
|
||||
if (field.type === 'repeater') {
|
||||
return repeaterMarkup(field, Array.isArray(value) ? value : [], path) + help;
|
||||
return repeaterMarkup(
|
||||
field,
|
||||
Array.isArray(value) ? value : [],
|
||||
path
|
||||
) + help;
|
||||
}
|
||||
|
||||
let inputType = 'text';
|
||||
|
||||
if (field.type === 'number') {
|
||||
inputType = 'number';
|
||||
} else if (field.type === 'email') {
|
||||
inputType = 'email';
|
||||
} else if (field.type === 'url') {
|
||||
inputType = 'url';
|
||||
}
|
||||
|
||||
const type = field.type === 'number' ? 'number' : field.type === 'email' ? 'email' : 'text';
|
||||
return `
|
||||
<label class="block text-sm font-medium">
|
||||
${escapeHtml(field.label)}
|
||||
<input
|
||||
data-path="${escapeHtml(path)}"
|
||||
type="${type}"
|
||||
type="${inputType}"
|
||||
value="${escapeHtml(value)}"
|
||||
${field.min !== undefined ? `min="${escapeHtml(field.min)}"` : ''}
|
||||
${field.max !== undefined ? `max="${escapeHtml(field.max)}"` : ''}
|
||||
class="mt-2 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 dark:border-zinc-700 dark:bg-zinc-950"
|
||||
class="mt-2 w-full rounded-lg border border-zinc-600 bg-zinc-950 px-3 py-2 text-zinc-100"
|
||||
>
|
||||
</label>${help}`;
|
||||
</label>
|
||||
${help}`;
|
||||
}
|
||||
|
||||
function repeaterMarkup(field, items, path) {
|
||||
return `
|
||||
<section class="rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
|
||||
<div class="mb-4 flex items-center justify-between gap-3">
|
||||
<section class="rounded-xl border border-zinc-600 p-4">
|
||||
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<h3 class="font-semibold">${escapeHtml(field.label)}</h3>
|
||||
<p class="text-xs text-zinc-500">Items can be reordered, hidden, or removed.</p>
|
||||
<p class="text-xs text-zinc-500">
|
||||
Add, edit, reorder, hide or remove items.
|
||||
</p>
|
||||
</div>
|
||||
<button type="button" data-add="${escapeHtml(path)}" class="rounded-lg border px-3 py-1.5 text-sm">Add item</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-action="add"
|
||||
data-path="${escapeHtml(path)}"
|
||||
class="rounded-lg border border-zinc-500 px-3 py-1.5 text-sm hover:bg-zinc-800"
|
||||
>
|
||||
Add item
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
${items.length ? items.map((item, index) => `
|
||||
<article class="rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="mb-3 flex items-center justify-between gap-3">
|
||||
<strong class="text-sm">Item ${index + 1}</strong>
|
||||
<div class="flex gap-2">
|
||||
<button type="button" data-up="${escapeHtml(path)}.${index}" class="rounded border px-2 py-1" title="Move up">↑</button>
|
||||
<button type="button" data-down="${escapeHtml(path)}.${index}" class="rounded border px-2 py-1" title="Move down">↓</button>
|
||||
<button type="button" data-remove="${escapeHtml(path)}.${index}" class="rounded border border-red-300 px-2 py-1 text-red-700">Remove</button>
|
||||
${items.length
|
||||
? items.map((item, index) => `
|
||||
<article class="rounded-lg border border-zinc-700 bg-zinc-900 p-4">
|
||||
<div class="mb-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<strong class="text-sm">Item ${index + 1}</strong>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
data-action="up"
|
||||
data-path="${escapeHtml(path)}"
|
||||
data-index="${index}"
|
||||
class="rounded border border-zinc-600 px-2 py-1"
|
||||
aria-label="Move item up"
|
||||
>↑</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-action="down"
|
||||
data-path="${escapeHtml(path)}"
|
||||
data-index="${index}"
|
||||
class="rounded border border-zinc-600 px-2 py-1"
|
||||
aria-label="Move item down"
|
||||
>↓</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-action="remove"
|
||||
data-path="${escapeHtml(path)}"
|
||||
data-index="${index}"
|
||||
class="rounded border border-red-500 px-2 py-1 text-red-300"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
${(field.fields || []).map(child => `
|
||||
<div class="${child.type === 'textarea' || child.type === 'richtext' ? 'md:col-span-2' : ''}">
|
||||
${fieldMarkup(child, item?.[child.key] ?? defaultValue(child), `${path}.${index}.${child.key}`)}
|
||||
</div>`).join('')}
|
||||
</div>
|
||||
</article>`).join('') : '<p class="rounded-lg border border-dashed p-6 text-center text-sm text-zinc-500">No items. Select “Add item” to create one.</p>'}
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
${(field.fields || []).map(child => `
|
||||
<div class="${['textarea', 'richtext', 'repeater'].includes(child.type) ? 'md:col-span-2' : ''}">
|
||||
${fieldMarkup(
|
||||
child,
|
||||
item?.[child.key] ?? defaultValue(child),
|
||||
`${path}.${index}.${child.key}`
|
||||
)}
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</article>
|
||||
`).join('')
|
||||
: `
|
||||
<p class="rounded-lg border border-dashed border-zinc-600 p-6 text-center text-sm text-zinc-500">
|
||||
No items. Select “Add item” to create one.
|
||||
</p>
|
||||
`}
|
||||
</div>
|
||||
</section>`;
|
||||
}
|
||||
|
||||
function render() {
|
||||
const schema = normaliseSchema(rawSchemas[String(typeSelect.value)]);
|
||||
status.textContent = schema.length ? `${schema.length} editable field${schema.length === 1 ? '' : 's'}` : 'Schema unavailable';
|
||||
function currentSchema() {
|
||||
return normaliseSchema(rawSchemas[String(typeSelect.value)]);
|
||||
}
|
||||
|
||||
if (!schema.length) {
|
||||
function render() {
|
||||
const schema = currentSchema();
|
||||
|
||||
status.textContent = schema.length
|
||||
? `${schema.length} editable field${schema.length === 1 ? '' : 's'}`
|
||||
: 'Schema unavailable';
|
||||
|
||||
if (! schema.length) {
|
||||
host.innerHTML = `
|
||||
<div class="rounded-xl border border-red-300 bg-red-50 p-4 text-sm text-red-800">
|
||||
This content type has no usable visual schema. Run <code>php artisan content:install-saasland</code> once to refresh schemas without replacing content.
|
||||
This content type has no usable visual schema.
|
||||
Run <code>php artisan content:install-saasland</code> once.
|
||||
</div>`;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
hydrateMissingFields(schema, data);
|
||||
syncJson();
|
||||
|
||||
host.innerHTML = schema.map(field => fieldMarkup(
|
||||
field,
|
||||
Object.prototype.hasOwnProperty.call(data, field.key) ? data[field.key] : defaultValue(field),
|
||||
data[field.key],
|
||||
field.key
|
||||
)).join('');
|
||||
|
||||
bind();
|
||||
}
|
||||
|
||||
function bind() {
|
||||
host.querySelectorAll('[data-path]').forEach(element => {
|
||||
const eventName = element.type === 'checkbox' ? 'change' : 'input';
|
||||
element.addEventListener(eventName, () => {
|
||||
let value = element.type === 'checkbox' ? element.checked : element.value;
|
||||
if (element.type === 'number') value = element.value === '' ? null : Number(element.value);
|
||||
set(element.dataset.path, value);
|
||||
});
|
||||
});
|
||||
host.addEventListener('input', event => {
|
||||
const element = event.target.closest('[data-path]');
|
||||
|
||||
host.querySelectorAll('[data-add]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const schema = normaliseSchema(rawSchemas[String(typeSelect.value)]);
|
||||
const field = schema.find(candidate => candidate.key === button.dataset.add);
|
||||
const items = Array.isArray(get(button.dataset.add)) ? get(button.dataset.add) : [];
|
||||
const newItem = {};
|
||||
(field?.fields || []).forEach(child => newItem[child.key] = defaultValue(child));
|
||||
items.push(newItem);
|
||||
set(button.dataset.add, items);
|
||||
render();
|
||||
});
|
||||
});
|
||||
if (! element || element.type === 'checkbox') {
|
||||
return;
|
||||
}
|
||||
|
||||
host.querySelectorAll('[data-remove]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
if (!confirm('Remove this item?')) return;
|
||||
const parts = button.dataset.remove.split('.');
|
||||
const index = Number(parts.pop());
|
||||
const path = parts.join('.');
|
||||
const items = Array.isArray(get(path)) ? get(path) : [];
|
||||
items.splice(index, 1);
|
||||
set(path, items);
|
||||
render();
|
||||
});
|
||||
});
|
||||
let value = element.value;
|
||||
|
||||
host.querySelectorAll('[data-up], [data-down]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const raw = button.dataset.up ?? button.dataset.down;
|
||||
const parts = raw.split('.');
|
||||
const index = Number(parts.pop());
|
||||
const path = parts.join('.');
|
||||
const items = Array.isArray(get(path)) ? get(path) : [];
|
||||
const destination = button.dataset.up !== undefined ? index - 1 : index + 1;
|
||||
if (destination < 0 || destination >= items.length) return;
|
||||
[items[index], items[destination]] = [items[destination], items[index]];
|
||||
set(path, items);
|
||||
render();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (element.type === 'number') {
|
||||
value = element.value === '' ? null : Number(element.value);
|
||||
}
|
||||
|
||||
setAtPath(element.dataset.path, value);
|
||||
});
|
||||
|
||||
host.addEventListener('change', event => {
|
||||
const element = event.target.closest('[data-path]');
|
||||
|
||||
if (! element || element.type !== 'checkbox') {
|
||||
return;
|
||||
}
|
||||
|
||||
setAtPath(element.dataset.path, element.checked);
|
||||
});
|
||||
|
||||
host.addEventListener('click', event => {
|
||||
const button = event.target.closest('button[data-action]');
|
||||
|
||||
if (! button) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const schema = currentSchema();
|
||||
const action = button.dataset.action;
|
||||
const path = button.dataset.path;
|
||||
const field = fieldForPath(schema, path);
|
||||
const items = Array.isArray(getAtPath(path))
|
||||
? [...getAtPath(path)]
|
||||
: [];
|
||||
|
||||
if (action === 'add') {
|
||||
if (! field || field.type !== 'repeater') {
|
||||
return;
|
||||
}
|
||||
|
||||
items.push(newRepeaterItem(field));
|
||||
setAtPath(path, items);
|
||||
render();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const index = Number(button.dataset.index);
|
||||
|
||||
if (! Number.isInteger(index) || index < 0 || index >= items.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (action === 'remove') {
|
||||
if (! window.confirm('Remove this item?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
items.splice(index, 1);
|
||||
}
|
||||
|
||||
if (action === 'up' && index > 0) {
|
||||
[items[index - 1], items[index]] = [items[index], items[index - 1]];
|
||||
}
|
||||
|
||||
if (action === 'down' && index < items.length - 1) {
|
||||
[items[index], items[index + 1]] = [items[index + 1], items[index]];
|
||||
}
|
||||
|
||||
setAtPath(path, items);
|
||||
render();
|
||||
});
|
||||
|
||||
typeSelect.addEventListener('change', () => {
|
||||
const schema = normaliseSchema(rawSchemas[String(typeSelect.value)]);
|
||||
const nextData = {};
|
||||
schema.forEach(field => nextData[field.key] = defaultValue(field));
|
||||
data = nextData;
|
||||
sync();
|
||||
data = {};
|
||||
hydrateMissingFields(currentSchema(), data);
|
||||
syncJson();
|
||||
render();
|
||||
});
|
||||
|
||||
dataField.addEventListener('change', () => {
|
||||
try {
|
||||
data = parseObject(dataField.value);
|
||||
render();
|
||||
} catch (error) {
|
||||
alert(`Invalid JSON: ${error.message}`);
|
||||
}
|
||||
data = parseObject(dataField.value);
|
||||
render();
|
||||
});
|
||||
|
||||
form.addEventListener('submit', () => {
|
||||
syncJson();
|
||||
});
|
||||
|
||||
form.addEventListener('submit', sync);
|
||||
render();
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user