mirror of
https://github.com/danpros/htmly.git
synced 2026-04-17 11:16:00 +05:30
Simplify the select option
Make the select options value similar to future theme settings.
This commit is contained in:
danpros
parent
bf5a361c8e
commit
6684d027e8
5 changed files with 53 additions and 63 deletions
|
|
@ -225,10 +225,11 @@ $( function() {
|
|||
<label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
|
||||
<select id="<?php echo $fld->name;?>" class="form-control" name="<?php echo $fld->name;?>">
|
||||
<?php foreach ($fld->options as $val):?>
|
||||
<option value="<?php echo $val->value;?>" ><?php echo $val->label;?></option>
|
||||
<option value="<?php echo $val;?>" ><?php echo $val;?></option>
|
||||
<?php endforeach;?>
|
||||
</select>
|
||||
<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
|
||||
<br>
|
||||
<?php endif;?>
|
||||
<?php endforeach;?>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -85,10 +85,11 @@ if ($type == 'is_page') {
|
|||
<label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
|
||||
<select id="<?php echo $fld->name;?>" class="form-control" name="<?php echo $fld->name;?>">
|
||||
<?php foreach ($fld->options as $val):?>
|
||||
<option value="<?php echo $val->value;?>" ><?php echo $val->label;?></option>
|
||||
<option value="<?php echo $val;?>" ><?php echo $val;?></option>
|
||||
<?php endforeach;?>
|
||||
</select>
|
||||
<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
|
||||
<br>
|
||||
<?php endif;?>
|
||||
<?php endforeach;?>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -274,10 +274,11 @@ $( function() {
|
|||
<label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
|
||||
<select id="<?php echo $fld->name;?>" class="form-control" name="<?php echo $fld->name;?>">
|
||||
<?php foreach ($fld->options as $val):?>
|
||||
<option value="<?php echo $val->value;?>" <?php if (get_field($fld->name, $content) === $val->value) { echo 'selected="selected"';} ?>><?php echo $val->label;?></option>
|
||||
<option value="<?php echo $val;?>" <?php if (get_field($fld->name, $content) === $val) { echo 'selected="selected"';} ?>><?php echo $val;?></option>
|
||||
<?php endforeach;?>
|
||||
</select>
|
||||
<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
|
||||
<br>
|
||||
<?php endif;?>
|
||||
<?php endforeach;?>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -197,10 +197,11 @@ if ($type == 'is_page' || $type == 'is_frontpage') {
|
|||
<label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
|
||||
<select id="<?php echo $fld->name;?>" class="form-control" name="<?php echo $fld->name;?>">
|
||||
<?php foreach ($fld->options as $val):?>
|
||||
<option value="<?php echo $val->value;?>" <?php if (get_field($fld->name, $content) === $val->value) { echo 'selected="selected"';} ?>><?php echo $val->label;?></option>
|
||||
<option value="<?php echo $val;?>" <?php if (get_field($fld->name, $content) === $val) { echo 'selected="selected"';} ?>><?php echo $val;?></option>
|
||||
<?php endforeach;?>
|
||||
</select>
|
||||
<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
|
||||
<br>
|
||||
<?php endif;?>
|
||||
<?php endforeach;?>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* Simple Form Builder for HTMLy - @author danpros
|
||||
* Simple Form Builder for HTMLy - Author @danpros
|
||||
*
|
||||
* const fields = [];
|
||||
*/
|
||||
|
|
@ -37,14 +37,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';
|
||||
valueInput.placeholder = 'Value (required)';
|
||||
|
|
@ -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({
|
||||
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 = `<div class="callout callout-warning">Editing:</small> <code>${field.label}</div>`;
|
||||
document.getElementById('form-input').scrollIntoView({
|
||||
const statusEl = document.getElementById('input-status');
|
||||
if (statusEl) {
|
||||
statusEl.innerHTML = `<div class="callout callout-warning">Editing:</small> <code>${field.label}</code></div>`;
|
||||
}
|
||||
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} <br><small>Field ID:</small> <code>${f.name}</code>`;
|
||||
|
|
@ -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 = `<small class="d-block mt-1"><em>${f.info}</em></small>`;
|
||||
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', () => {
|
||||
|
|
@ -293,5 +280,4 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
valueEl.value = valueEl.value.replace(/\s+/g, ''); // Remove spaces
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue