@beforesemicolon/site-builder 0.35.0 → 0.36.0

package/scaffolds/admin/controls/controls.js

@@ -0,0 +1,249 @@
+import { renderFileUploadControl } from './file.control.js'
+import { renderQuillEditor } from './html.control.js'
+import { renderCodeEditor } from './code.control.js'
+import { renderMarkdownEditor } from './markdown.control.js'
+import {
+    currentWidget,
+    currentWidgetId,
+    originalWidgetValues,
+    getPendingChange,
+    removePendingChange,
+    addPendingChange,
+    panel,
+    currentPage,
+} from '../data.js'
+
+const { html, repeat, pick, when, is } = window.BFS.MARKUP
+
+const FILE_TYPE_PATTERN = /image|video|audio|file|font|icon|pdf/
+
+const resolveChangeType = () => {
+    if (panel() === 'page') {
+        return currentWidgetId() ? 'page-widget' : 'page'
+    }
+
+    return 'widget'
+}
+
+const resolveChangeId = (changeType, widgetId, pageId) => {
+    if (changeType === 'page') {
+        return pageId
+    }
+    return widgetId
+}
+
+const handleControlValueChange = (
+    path,
+    value,
+    inputType = 'text',
+    fileData = null
+) => {
+    const pathIndexes = String(path).split('.')
+    const widget = { ...currentWidget() }
+    const widgetId = currentWidgetId()
+    const pageId = currentPage()?.id ?? ''
+    const changeType = resolveChangeType()
+    const changeId = resolveChangeId(changeType, widgetId, pageId)
+    const originalKey =
+        changeType === 'page-widget' ? `${pageId}:${widgetId}` : widgetId
+
+    const i = pathIndexes.shift()
+
+    // copy to force update
+    widget.inputs[i] = {
+        ...widget.inputs[i],
+    }
+
+    // use pathIndexes to locate the input nested items
+    let currentInput = widget.inputs[i]
+
+    while (pathIndexes.length) {
+        if (!currentInput.definitions) {
+            currentInput = null
+            break
+        }
+
+        currentInput = currentInput.definitions[pathIndexes.shift()]
+    }
+
+    if (currentInput) {
+        // Get the original value for this path
+        const originalValue =
+            originalWidgetValues.get(originalKey)?.[path] ?? null
+        // update in place
+        currentInput.value = value
+
+        // Get current widget changes or create new one
+        const currentWidgetChanges = getPendingChange(changeId) ?? {
+            type: changeType,
+            id: changeId,
+            changes: {},
+        }
+
+        // Check if the new value matches the original value
+        if (value === originalValue) {
+            // Value reverted to original - remove from pending changes
+            delete currentWidgetChanges.changes[path]
+
+            // If no more changes for this widget, remove it entirely
+            if (Object.keys(currentWidgetChanges.changes).length === 0) {
+                removePendingChange(changeId)
+            } else {
+                addPendingChange(changeId, currentWidgetChanges)
+            }
+        } else {
+            // Value is different from original - add/update pending change
+            const changeEntry = {
+                originalValue,
+                newValue: value,
+                inputType,
+            }
+
+            // Add file data if this is a file upload (Requirements 1.3, 3.4)
+            if (fileData && FILE_TYPE_PATTERN.test(inputType)) {
+                changeEntry.fileData = fileData
+            }
+
+            currentWidgetChanges.changes[path] = changeEntry
+            addPendingChange(changeId, currentWidgetChanges)
+        }
+    }
+}
+
+const inputControl = ({ type, value, name, dir, readonly, ...otherProps }) => {
+    return html` <label class="control-field-block">
+        <span class="label">${name}</span>
+        <input ${otherProps} type="${type}" value="${value}" name="${name}" />
+    </label>`
+}
+
+const renderInputControl = (
+    input,
+    idx = 0,
+    disabled,
+    onChange = handleControlValueChange
+) => {
+    const { type, value, name } = input
+
+    if (input.readonly) {
+        return ''
+    }
+
+    // convert name from camel case to space between words as label
+    const label = (name ?? '')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')
+
+    switch (type) {
+        case 'text':
+        case 'email':
+        case 'url':
+        case 'tel':
+        case 'number':
+        case 'color':
+        case 'date':
+        case 'datetime-local':
+        case 'month':
+        case 'time':
+        case 'week':
+        case 'password':
+            return inputControl({
+                ...input,
+                name: label,
+                oninput: (e) => onChange(idx, e.target.value, type),
+                disabled,
+            })
+        case 'html':
+            return renderQuillEditor(input, idx, disabled, label, onChange)
+        case 'code':
+            return renderCodeEditor(input, idx, disabled, label, onChange)
+        case 'markdown':
+            return renderMarkdownEditor(input, idx, disabled, label, onChange)
+        case 'textarea':
+            return html` <label class="control-field-block">
+                <span class="label">${label}</span>
+                <textarea
+                    rows="3"
+                    cols="30"
+                    disabled="${disabled}"
+                    name="${name}"
+                    oninput="${(e) => onChange(idx, e.target.value, type)}"
+                >
+${value}</textarea
+                >
+            </label>`
+        case 'list':
+        case 'group':
+        case 'options':
+            return html`
+                <div class="control-field-block">
+                    ${name ? html`<h4 class="label">${label}</h4>` : ''}
+                    <div class="nested-control">
+                        ${input.definitions.map((item, i) =>
+                            renderInputControl(
+                                {
+                                    readonly: input.readonly ?? item.readonly,
+                                    ...item,
+                                },
+                                `${idx}.${i}`,
+                                disabled,
+                                onChange
+                            )
+                        )}
+                    </div>
+                </div>
+            `
+        case 'boolean':
+            return inputControl({
+                ...input,
+                type: 'checkbox',
+                name: label,
+                oninput: (e) => onChange(idx, e.target.checked, type),
+                disabled,
+            })
+        case 'embed':
+            return inputControl({
+                ...input,
+                type: 'url',
+                name: label,
+                oninput: (e) => onChange(idx, e.target.value, type),
+                disabled,
+            })
+        case 'image':
+        case 'video':
+        case 'audio':
+        case 'file':
+        case 'font':
+        case 'icon':
+        case 'pdf':
+            return renderFileUploadControl(
+                input,
+                idx,
+                (path, value, inputType, fileData) =>
+                    onChange(path, value, inputType, fileData)
+            )
+        default:
+            return ''
+    }
+}
+
+export const Controls = ({ disabled }) => html`
+    <header>
+        ${when(
+            is(panel, 'page'),
+            html`<div class="info-alert">
+                All changes done to this page will only apply to this page and
+                its content.
+            </div>`,
+            html`<div class="info-warning">
+                All changes done to this widget will apply to everywhere this
+                widget is used.
+            </div>`
+        )}
+    </header>
+    <div class="content">
+        ${repeat(pick(currentWidget, 'inputs'), (input, idx) =>
+            renderInputControl(input, idx, disabled)
+        )}
+    </div>
+`