From 6684d027e8e7fe12853f37d25e6153410e79097f Mon Sep 17 00:00:00 2001 From: danpros Date: Tue, 21 Oct 2025 07:32:16 +0700 Subject: [PATCH] Simplify the select option Make the select options value similar to future theme settings. --- system/admin/views/add-content.html.php | 3 +- system/admin/views/add-page.html.php | 3 +- system/admin/views/edit-content.html.php | 5 +- system/admin/views/edit-page.html.php | 3 +- system/resources/js/form.builder.js | 102 ++++++++++------------- 5 files changed, 53 insertions(+), 63 deletions(-) diff --git a/system/admin/views/add-content.html.php b/system/admin/views/add-content.html.php index 3b21787..d1b4963 100644 --- a/system/admin/views/add-content.html.php +++ b/system/admin/views/add-content.html.php @@ -225,10 +225,11 @@ $( function() { info;?> +
diff --git a/system/admin/views/add-page.html.php b/system/admin/views/add-page.html.php index 0ab6cfb..4e78491 100644 --- a/system/admin/views/add-page.html.php +++ b/system/admin/views/add-page.html.php @@ -85,10 +85,11 @@ if ($type == 'is_page') { info;?> +
diff --git a/system/admin/views/edit-content.html.php b/system/admin/views/edit-content.html.php index 0260569..da96a6e 100644 --- a/system/admin/views/edit-content.html.php +++ b/system/admin/views/edit-content.html.php @@ -274,11 +274,12 @@ $( function() { info;?> - +
+ diff --git a/system/admin/views/edit-page.html.php b/system/admin/views/edit-page.html.php index 07e2fe6..9fb2697 100644 --- a/system/admin/views/edit-page.html.php +++ b/system/admin/views/edit-page.html.php @@ -197,10 +197,11 @@ if ($type == 'is_page' || $type == 'is_frontpage') { info;?> +
diff --git a/system/resources/js/form.builder.js b/system/resources/js/form.builder.js index f962170..61e527b 100644 --- a/system/resources/js/form.builder.js +++ b/system/resources/js/form.builder.js @@ -1,5 +1,5 @@ /*! - * Simple Form Builder for HTMLy - @author danpros + * Simple Form Builder for HTMLy - Author @danpros * * const fields = []; */ @@ -36,14 +36,6 @@ addOptionBtn.addEventListener('click', () => { const col1Div = document.createElement('div'); col1Div.classList.add('col'); - - const col2Div = document.createElement('div'); - col2Div.classList.add('col'); - - const labelInput = document.createElement('input'); - labelInput.type = 'text'; - labelInput.placeholder = 'Label (required)'; - labelInput.setAttribute('class', 'option-label form-control'); const valueInput = document.createElement('input'); valueInput.type = 'text'; @@ -58,11 +50,8 @@ addOptionBtn.addEventListener('click', () => { removeBtn.addEventListener('click', () => optionDiv.remove()); removeBtn.setAttribute('class', 'btn btn-danger'); - optionDiv.appendChild(labelInput); + col1Div.appendChild(valueInput); optionDiv.appendChild(col1Div); - optionDiv.appendChild(col2Div); - col1Div.appendChild(labelInput); - col2Div.appendChild(valueInput); optionDiv.appendChild(removeBtn); optionListEl.appendChild(optionDiv); }); @@ -79,16 +68,14 @@ addFieldBtn.addEventListener('click', () => { if (field.type === 'select') { const options = Array.from(document.querySelectorAll('.option-item')).map(item => { - const label = item.querySelector('.option-label').value.trim(); - const value = item.querySelector('.option-value').value.trim().replace(/\s+/g, ''); // Remove spaces - return { label, value }; + return item.querySelector('.option-value').value.trim().replace(/\s+/g, ''); }); - if (options.some(opt => !opt.label || !opt.value)) { - alert("All options for a select field must have both label and value!"); + if (options.some(opt => !opt)) { + alert("All options for a select must have a value!"); return; } - field.options = options; + field.options = options; // now an array of strings } if (!field.name || !field.label || !field.type) { @@ -111,10 +98,12 @@ addFieldBtn.addEventListener('click', () => { updatePreviewAndOutput(); - document.getElementById(field.name + '-form-preview').scrollIntoView({ - behavior: 'smooth' - }); - + const target = document.getElementById(field.name + '-form-preview'); + if (target) { + target.scrollIntoView({ + behavior: 'smooth' + }); + } }); // Delete field logic @@ -138,26 +127,20 @@ function editField(index) { if (field.type === 'select') { optionsContainerEl.style.display = 'block'; optionListEl.innerHTML = ''; + + // Accept both string array and legacy object array ({value: 'x'}) field.options.forEach(opt => { + const valueText = (typeof opt === 'string') ? opt : (opt && opt.value ? opt.value : ''); const optionDiv = document.createElement('div'); optionDiv.setAttribute('class', 'option-item row mt-1 mb-1'); const col1Div = document.createElement('div'); col1Div.classList.add('col'); - - const col2Div = document.createElement('div'); - col2Div.classList.add('col'); - - const labelInput = document.createElement('input'); - labelInput.type = 'text'; - labelInput.placeholder = 'Label (required)'; - labelInput.value = opt.label; - labelInput.setAttribute('class', 'option-label form-control'); const valueInput = document.createElement('input'); valueInput.type = 'text'; valueInput.placeholder = 'Value (required)'; - valueInput.value = opt.value.replace(/\s+/g, ''); // Remove spaces + valueInput.value = valueText.replace(/\s+/g, ''); // Remove spaces valueInput.setAttribute('class', 'option-value form-control'); valueInput.addEventListener('input', () => { valueInput.value = valueInput.value.replace(/\s+/g, ''); // Remove spaces in real-time @@ -172,11 +155,8 @@ function editField(index) { } }); - optionDiv.appendChild(labelInput); + col1Div.appendChild(valueInput); optionDiv.appendChild(col1Div); - optionDiv.appendChild(col2Div); - col1Div.appendChild(labelInput); - col2Div.appendChild(valueInput); optionDiv.appendChild(removeBtn); optionListEl.appendChild(optionDiv); }); @@ -187,10 +167,16 @@ function editField(index) { editingIndex = index; addFieldBtn.textContent = "Update Field"; - document.getElementById('input-status').innerHTML = `
Editing: ${field.label}
`; - document.getElementById('form-input').scrollIntoView({ - behavior: 'smooth' - }); + const statusEl = document.getElementById('input-status'); + if (statusEl) { + statusEl.innerHTML = `
Editing: ${field.label}
`; + } + const formInput = document.getElementById('form-input'); + if (formInput) { + formInput.scrollIntoView({ + behavior: 'smooth' + }); + } } // Update preview with Edit and Delete buttons @@ -201,7 +187,6 @@ function updatePreviewAndOutput() { const wrapper = document.createElement('div'); wrapper.setAttribute('class', 'field-preview callout callout-info'); wrapper.setAttribute('id', f.name + '-form-preview'); - formID = f.name; const label = document.createElement('label'); label.innerHTML = `${f.label}
Field ID: ${f.name}`; @@ -210,14 +195,14 @@ function updatePreviewAndOutput() { let el; if (f.type === 'textarea') { el = document.createElement('textarea'); - el.placeholder = f.info; + el.placeholder = f.info || ''; el.setAttribute('class', 'form-control'); - el.value = f.value; + el.value = f.value || ''; } else if (f.type === 'checkbox') { const spacer = document.createElement('br'); el = document.createElement('input'); el.type = 'checkbox'; - el.checked = f.value === 'true'; + el.checked = (f.value === 'true' || f.value === true); const checkboxLabel = document.createElement('span'); checkboxLabel.textContent = ` ${f.label} `; wrapper.appendChild(spacer); @@ -227,17 +212,18 @@ function updatePreviewAndOutput() { } else if (f.type === 'select') { el = document.createElement('select'); el.setAttribute('class', 'form-control'); - f.options.forEach(opt => { + // f.options is an array of strings + (f.options || []).forEach(opt => { const option = document.createElement('option'); - option.value = opt.value; - option.textContent = opt.label; + option.value = opt; + option.textContent = opt; el.appendChild(option); }); } else { el = document.createElement('input'); el.type = f.type; - el.value = f.value; - el.placeholder = f.info; + el.value = f.value || ''; + el.placeholder = f.info || ''; el.setAttribute('class', 'form-control'); } @@ -245,7 +231,7 @@ function updatePreviewAndOutput() { wrapper.appendChild(el); } - if (f.type === 'checkbox' || f.type === 'select') { + if (f.info) { const tip = document.createElement('span'); tip.innerHTML = `${f.info}`; wrapper.appendChild(tip); @@ -264,10 +250,11 @@ function updatePreviewAndOutput() { wrapper.appendChild(deleteBtn); formPreviewEl.appendChild(wrapper); - }); jsonOutputEl.value = JSON.stringify(fields, null, 2); + + // Reset form inputs nameEl.value = ''; labelEl.value = ''; valueEl.value = ''; @@ -276,8 +263,8 @@ function updatePreviewAndOutput() { optionListEl.innerHTML = ''; typeEl.value = "text"; addFieldBtn.textContent = "Add Field"; - document.getElementById('input-status').innerHTML = ''; - + const statusEl = document.getElementById('input-status'); + if (statusEl) statusEl.innerHTML = ''; } document.addEventListener('DOMContentLoaded', () => { @@ -286,12 +273,11 @@ document.addEventListener('DOMContentLoaded', () => { // Real-time removal of spaces in the name field nameEl.addEventListener('input', () => { nameEl.value = nameEl.value.replace(/\s+/g, ''); // Remove spaces in real-time - }); + }); valueEl.addEventListener('input', () => { if (typeEl.value === 'select') { valueEl.value = valueEl.value.replace(/\s+/g, ''); // Remove spaces } - }); - -}); + }); +}); \ No newline at end of file