355 lines
22 KiB
Svelte
355 lines
22 KiB
Svelte
|
<script>
|
||
|
|
import { onMount } from 'svelte';
|
||
|
|
import NestedBlockEditor from './NestedBlockEditor.svelte';
|
||
|
|
let {
|
||
|
|
blocks = $bindable([]),
|
||
|
|
activeLocale,
|
||
|
|
onRemoveBlock,
|
||
|
|
onMoveBlock,
|
||
|
|
onOpenMediaPicker,
|
||
|
|
onUpdateBlockText,
|
||
|
|
onTranslateBlock,
|
||
|
|
setFocalPoint,
|
||
|
|
currentA11yIssues = []
|
||
|
|
} = $props();
|
||
|
|
|
||
|
|
function dropdown(node, initialValue) {
|
||
|
|
if (typeof window.jQuery !== 'undefined' && typeof window.jQuery.fn.dropdown === 'function') {
|
||
|
|
const el = window.jQuery(node);
|
||
|
|
el.dropdown();
|
||
|
|
return {
|
||
|
|
update(newValue) {
|
||
|
|
if (newValue !== undefined) {
|
||
|
|
el.dropdown('set selected', newValue.toString());
|
||
|
|
}
|
||
|
|
},
|
||
|
|
destroy() {
|
||
|
|
el.dropdown('destroy');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function addSubBlock(parentBlock, containerKey, subIndex = null) {
|
||
|
|
const type = 'paragraph'; // Default to paragraph for simplicity in nested slots
|
||
|
|
const newBlock = { type, data: { text: '' } };
|
||
|
|
|
||
|
|
if (subIndex === null) {
|
||
|
|
if (!parentBlock.data[containerKey]) parentBlock.data[containerKey] = [];
|
||
|
|
parentBlock.data[containerKey] = [...parentBlock.data[containerKey], newBlock];
|
||
|
|
} else {
|
||
|
|
if (!parentBlock.data[containerKey][subIndex].blocks) parentBlock.data[containerKey][subIndex].blocks = [];
|
||
|
|
parentBlock.data[containerKey][subIndex].blocks = [...parentBlock.data[containerKey][subIndex].blocks, newBlock];
|
||
|
|
}
|
||
|
|
blocks = [...blocks];
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeSubBlock(parentBlock, containerKey, subIndex, blockIndex) {
|
||
|
|
if (subIndex === null) {
|
||
|
|
parentBlock.data[containerKey] = parentBlock.data[containerKey].filter((_, i) => i !== blockIndex);
|
||
|
|
} else {
|
||
|
|
parentBlock.data[containerKey][subIndex].blocks = parentBlock.data[containerKey][subIndex].blocks.filter((_, i) => i !== blockIndex);
|
||
|
|
}
|
||
|
|
blocks = [...blocks];
|
||
|
|
}
|
||
|
|
|
||
|
|
function addSlot(block, type) {
|
||
|
|
if (type === 'columns') {
|
||
|
|
if (!block.data.columns) block.data.columns = [];
|
||
|
|
block.data.columns = [...block.data.columns, { blocks: [] }];
|
||
|
|
} else if (type === 'grid') {
|
||
|
|
if (!block.data.items) block.data.items = [];
|
||
|
|
block.data.items = [...block.data.items, { blocks: [] }];
|
||
|
|
}
|
||
|
|
blocks = [...blocks];
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeSlot(block, type, index) {
|
||
|
|
if (type === 'columns') {
|
||
|
|
block.data.columns = block.data.columns.filter((_, i) => i !== index);
|
||
|
|
} else if (type === 'grid') {
|
||
|
|
block.data.items = block.data.items.filter((_, i) => i !== index);
|
||
|
|
}
|
||
|
|
blocks = [...blocks];
|
||
|
|
}
|
||
|
|
|
||
|
|
function getBlockIssues(index) {
|
||
|
|
return currentA11yIssues.filter(issue => issue.block_index === index);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="block-list">
|
||
|
|
{#each blocks as block, index}
|
||
|
|
<div class="ui raised segment block-item" style="padding: 0; margin-bottom: 2rem; border-left: 5px solid {getBlockIssues(index).some(i => i.type === 'error') ? '#db2828' : (getBlockIssues(index).length > 0 ? '#fbbd08' : '#2185d0')};">
|
||
|
|
<div class="ui top attached secondary segment" style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem;">
|
||
|
|
<div>
|
||
|
|
<i class="grip vertical icon" style="cursor: move;"></i>
|
||
|
|
<span style="font-weight: bold; text-transform: uppercase;">{block.type}</span>
|
||
|
|
</div>
|
||
|
|
<div class="ui mini basic icon buttons">
|
||
|
|
<button type="button" class="ui button" onclick={() => onMoveBlock(index, -1)} title="Move Up">
|
||
|
|
<i class="angle up icon"></i>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="ui button" onclick={() => onMoveBlock(index, 1)} title="Move Down">
|
||
|
|
<i class="angle down icon"></i>
|
||
|
|
</button>
|
||
|
|
{#if activeLocale !== 'en'}
|
||
|
|
<button type="button" class="ui blue button" onclick={() => onTranslateBlock(index)} title="Translate from English">
|
||
|
|
<i class="translate icon"></i>
|
||
|
|
</button>
|
||
|
|
{/if}
|
||
|
|
<button type="button" class="ui red button" onclick={() => onRemoveBlock(index)} title="Remove Block">
|
||
|
|
<i class="trash icon"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content" style="padding: 1.5rem;">
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][type]" value={block.type}>
|
||
|
|
|
||
|
|
{#if getBlockIssues(index).length > 0}
|
||
|
|
<div class="ui message mini {getBlockIssues(index).some(i => i.type === 'error') ? 'error' : 'warning'}">
|
||
|
|
<ul class="list">
|
||
|
|
{#each getBlockIssues(index) as issue}
|
||
|
|
<li><strong>{issue.type === 'error' ? 'ERROR' : 'A11Y'}:</strong> {issue.message}</li>
|
||
|
|
{/each}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
{#if block.type === 'paragraph'}
|
||
|
|
<div class="field" style="margin-top: 1rem;">
|
||
|
|
<label for="paragraph-text-{index}">Text</label>
|
||
|
|
<textarea id="paragraph-text-{index}" name="content[{activeLocale}][{index}][data][text]"
|
||
|
|
bind:value={block.data.text}
|
||
|
|
placeholder="Enter text..."
|
||
|
|
rows="3"></textarea>
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][text]" value={block.data.text || ''}>
|
||
|
|
</div>
|
||
|
|
{:else if block.type === 'heading'}
|
||
|
|
<div class="two fields">
|
||
|
|
<div class="field three wide">
|
||
|
|
<label for="heading-level-{index}">Level</label>
|
||
|
|
<select id="heading-level-{index}" name="content[{activeLocale}][{index}][data][level]" bind:value={block.data.level} class="ui dropdown" use:dropdown={block.data.level}>
|
||
|
|
<option value="1">H1</option>
|
||
|
|
<option value="2">H2</option>
|
||
|
|
<option value="3">H3</option>
|
||
|
|
<option value="4">H4</option>
|
||
|
|
<option value="5">H5</option>
|
||
|
|
<option value="6">H6</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="field thirteen wide">
|
||
|
|
<label for="heading-text-{index}">Heading Text</label>
|
||
|
|
<input id="heading-text-{index}" type="text" name="content[{activeLocale}][{index}][data][text]" bind:value={block.data.text} placeholder="Enter heading...">
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][level]" value={block.data.level}>
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][aria_label]" value={block.data.aria_label || ''}>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label for="heading-aria-{index}">ARIA Label (Optional)</label>
|
||
|
|
<input id="heading-aria-{index}" type="text" name="content[{activeLocale}][{index}][data][aria_label]" bind:value={block.data.aria_label} placeholder="Descriptive label for screen readers">
|
||
|
|
</div>
|
||
|
|
{:else if block.type === 'media'}
|
||
|
|
{#if block.data.media_id && block.data.filename}
|
||
|
|
<div class="ui card fluid">
|
||
|
|
<div class="image-editor-container" style="position: relative; user-select: none;">
|
||
|
|
<div class="image"
|
||
|
|
style="max-height: 400px; overflow: hidden; background: #f9f9f9; display: flex; align-items: center; justify-content: center; cursor: crosshair;"
|
||
|
|
onclick={(e) => setFocalPoint(index, e)}
|
||
|
|
onkeydown={(e) => e.key === 'Enter' && setFocalPoint(index, e)}
|
||
|
|
role="button"
|
||
|
|
tabindex="0"
|
||
|
|
aria-label="Set focal point for image">
|
||
|
|
<img src="/media/{block.data.filename}?w=800&q=60"
|
||
|
|
alt={block.data.filename}
|
||
|
|
style="pointer-events: none; max-width: 100%; max-height: 400px;" />
|
||
|
|
|
||
|
|
<div class="focal-point-marker"
|
||
|
|
style="position: absolute;
|
||
|
|
left: {(block.data['fp-x'] || 0.5) * 100}%;
|
||
|
|
top: {(block.data['fp-y'] || 0.5) * 100}%;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
border: 2px solid white;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: rgba(219, 40, 40, 0.6);
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
box-shadow: 0 0 5px rgba(0,0,0,0.5);
|
||
|
|
pointer-events: none;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="position: absolute; bottom: 5px; right: 5px; background: rgba(0,0,0,0.6); color: white; padding: 2px 5px; font-size: 10px; border-radius: 3px;">
|
||
|
|
Click to set Focal Point: {Number(block.data['fp-x'] || 0.5).toFixed(2)}, {Number(block.data['fp-y'] || 0.5).toFixed(2)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<div class="header">{block.data.filename}</div>
|
||
|
|
<div class="meta">
|
||
|
|
<button type="button" class="ui button tiny basic" onclick={() => block.data.showAdvanced = !block.data.showAdvanced}>
|
||
|
|
<i class="cog icon"></i> {block.data.showAdvanced ? 'Hide' : 'Show'} JIT Settings
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#if block.data.showAdvanced}
|
||
|
|
<div class="ui divider"></div>
|
||
|
|
<div class="four fields">
|
||
|
|
<div class="field">
|
||
|
|
<label for="media-w-{index}">Width</label>
|
||
|
|
<input id="media-w-{index}" type="number" name="content[{activeLocale}][{index}][data][w]" bind:value={block.data.w} placeholder="Auto">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label for="media-h-{index}">Height</label>
|
||
|
|
<input id="media-h-{index}" type="number" name="content[{activeLocale}][{index}][data][h]" bind:value={block.data.h} placeholder="Auto">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label for="media-q-{index}">Quality</label>
|
||
|
|
<input id="media-q-{index}" type="number" name="content[{activeLocale}][{index}][data][q]" bind:value={block.data.q} min="1" max="100">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label for="media-fit-{index}">Fit</label>
|
||
|
|
<select id="media-fit-{index}" name="content[{activeLocale}][{index}][data][fit]" bind:value={block.data.fit} class="ui dropdown compact" use:dropdown={block.data.fit}>
|
||
|
|
<option value="contain">Contain</option>
|
||
|
|
<option value="crop">Crop (Focal)</option>
|
||
|
|
<option value="max">Max</option>
|
||
|
|
<option value="fill">Fill</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][media_id]" value={block.data.media_id || ''}>
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][filename]" value={block.data.filename || ''}>
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][fp-x]" value={block.data['fp-x'] || 0.5}>
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][fp-y]" value={block.data['fp-y'] || 0.5}>
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][alt]" value={block.data.alt || ''}>
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][w]" value={block.data.w || ''}>
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][h]" value={block.data.h || ''}>
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][q]" value={block.data.q || 85}>
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][fit]" value={block.data.fit || 'contain'}>
|
||
|
|
|
||
|
|
<div class="field" style="margin-top: 1rem;">
|
||
|
|
<label for="media-caption-{index}">Caption / Alt Text</label>
|
||
|
|
<input id="media-caption-{index}" type="text" name="content[{activeLocale}][{index}][data][text]" bind:value={block.data.text} placeholder="Enter caption...">
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][text]" value={block.data.text || ''}>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="extra content">
|
||
|
|
<button type="button" class="ui button basic small" onclick={() => onOpenMediaPicker(index)}>
|
||
|
|
Change Media
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{:else}
|
||
|
|
<div class="ui placeholder segment"
|
||
|
|
onclick={() => onOpenMediaPicker(index)}
|
||
|
|
onkeydown={(e) => e.key === 'Enter' && onOpenMediaPicker(index)}
|
||
|
|
role="button"
|
||
|
|
tabindex="0"
|
||
|
|
style="cursor: pointer;">
|
||
|
|
<div class="ui icon header">
|
||
|
|
<i class="image outline icon"></i>
|
||
|
|
No media selected. Click to select.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<input type="hidden" name="content[{activeLocale}][{index}][data][media_id]" value="">
|
||
|
|
{/if}
|
||
|
|
{:else if block.type === 'columns'}
|
||
|
|
<div class="ui segment secondary">
|
||
|
|
<div class="ui header small">Columns Layout</div>
|
||
|
|
<div class="ui grid">
|
||
|
|
{#each block.data.columns || [] as column, colIndex}
|
||
|
|
<div class="column" style="width: {100 / (block.data.columns.length)}%;">
|
||
|
|
<div class="ui segment basic p-0">
|
||
|
|
<div class="ui top attached label mini">
|
||
|
|
Col {colIndex + 1}
|
||
|
|
<i class="trash icon right floated red"
|
||
|
|
style="cursor: pointer;"
|
||
|
|
onclick={() => removeSlot(block, 'columns', colIndex)}
|
||
|
|
onkeydown={(e) => e.key === 'Enter' && removeSlot(block, 'columns', colIndex)}
|
||
|
|
role="button"
|
||
|
|
tabindex="0"
|
||
|
|
aria-label="Remove Column"></i>
|
||
|
|
</div>
|
||
|
|
<div style="padding: 1rem 0;">
|
||
|
|
<NestedBlockEditor
|
||
|
|
blocks={column.blocks}
|
||
|
|
{activeLocale}
|
||
|
|
onRemoveBlock={(i) => removeSubBlock(block, 'columns', colIndex, i)}
|
||
|
|
onMoveBlock={(i, dir) => { /* TODO */ }}
|
||
|
|
{onOpenMediaPicker}
|
||
|
|
{onUpdateBlockText}
|
||
|
|
{setFocalPoint}
|
||
|
|
/>
|
||
|
|
<button type="button" class="ui button mini fluid basic" onclick={() => addSubBlock(block, 'columns', colIndex)}>
|
||
|
|
<i class="plus icon"></i> Add to Column
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
<button type="button" class="ui button small basic" onclick={() => addSlot(block, 'columns')}>
|
||
|
|
<i class="plus icon"></i> Add Column
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{:else if block.type === 'grid'}
|
||
|
|
<div class="ui segment secondary">
|
||
|
|
<div class="ui header small">Grid Layout</div>
|
||
|
|
<div class="two fields">
|
||
|
|
<div class="field">
|
||
|
|
<label for="grid-cols-{index}">Columns</label>
|
||
|
|
<input id="grid-cols-{index}" type="number" name="content[{activeLocale}][{index}][data][cols]" bind:value={block.data.cols} min="1" max="6">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ui grid doubling">
|
||
|
|
{#each block.data.items || [] as item, itemIndex}
|
||
|
|
<div class="column" style="width: {100 / (block.data.cols || 3)}%;">
|
||
|
|
<div class="ui segment basic p-0">
|
||
|
|
<div class="ui top attached label mini">
|
||
|
|
Item {itemIndex + 1}
|
||
|
|
<i class="trash icon right floated red"
|
||
|
|
style="cursor: pointer;"
|
||
|
|
onclick={() => removeSlot(block, 'grid', itemIndex)}
|
||
|
|
onkeydown={(e) => e.key === 'Enter' && removeSlot(block, 'grid', itemIndex)}
|
||
|
|
role="button"
|
||
|
|
tabindex="0"
|
||
|
|
aria-label="Remove Grid Item"></i>
|
||
|
|
</div>
|
||
|
|
<div style="padding: 1rem 0;">
|
||
|
|
<NestedBlockEditor
|
||
|
|
blocks={item.blocks}
|
||
|
|
{activeLocale}
|
||
|
|
onRemoveBlock={(i) => removeSubBlock(block, 'grid', itemIndex, i)}
|
||
|
|
onMoveBlock={(i, dir) => { /* TODO */ }}
|
||
|
|
{onOpenMediaPicker}
|
||
|
|
{onUpdateBlockText}
|
||
|
|
{setFocalPoint}
|
||
|
|
/>
|
||
|
|
<button type="button" class="ui button mini fluid basic" onclick={() => addSubBlock(block, 'grid', itemIndex)}>
|
||
|
|
<i class="plus icon"></i> Add to Item
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
<button type="button" class="ui button small basic" onclick={() => addSlot(block, 'grid')}>
|
||
|
|
<i class="plus icon"></i> Add Grid Item
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.block-list {
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.block-item {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.p-0 { padding: 0 !important; }
|
||
|
|
</style>
|