FbIN/htmly
1
0
Fork 0
mirror of https://github.com/danpros/htmly.git synced 2026-04-17 11:16:00 +05:30
Code Issues Projects Releases Packages Wiki Activity

Simplify the select option

Browse source 
Make the select options value similar to future theme settings.
This commit is contained in:
danpros 2025-10-21 07:32:16 +07:00
commit 6684d027e8
5 changed files with 53 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

3
system/admin/views/add-content.html.php
View file

@ -225,10 +225,11 @@ $( function() {
<label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label> <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;?>"> <select id="<?php echo $fld->name;?>" class="form-control" name="<?php echo $fld->name;?>">
<?php foreach ($fld->options as $val):?> <?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;?> <?php endforeach;?>
</select> </select>
<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span> <span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
<br>
<?php endif;?> <?php endif;?>
<?php endforeach;?> <?php endforeach;?>
</div> </div>

3
system/admin/views/add-page.html.php
View file

@ -85,10 +85,11 @@ if ($type == 'is_page') {
<label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label> <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;?>"> <select id="<?php echo $fld->name;?>" class="form-control" name="<?php echo $fld->name;?>">
<?php foreach ($fld->options as $val):?> <?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;?> <?php endforeach;?>
</select> </select>
<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span> <span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
<br>
<?php endif;?> <?php endif;?>
<?php endforeach;?> <?php endforeach;?>
</div> </div>

5
system/admin/views/edit-content.html.php
View file

@ -274,11 +274,12 @@ $( function() {
<label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label> <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;?>"> <select id="<?php echo $fld->name;?>" class="form-control" name="<?php echo $fld->name;?>">
<?php foreach ($fld->options as $val):?> <?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;?> <?php endforeach;?>
</select> </select>
<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span> <span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
<?php endif;?> <br>
<?php endif;?>
<?php endforeach;?> <?php endforeach;?>
</div> </div>
</div> </div>

3
system/admin/views/edit-page.html.php
View file

@ -197,10 +197,11 @@ if ($type == 'is_page' || $type == 'is_frontpage') {
<label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label> <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;?>"> <select id="<?php echo $fld->name;?>" class="form-control" name="<?php echo $fld->name;?>">
<?php foreach ($fld->options as $val):?> <?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;?> <?php endforeach;?>
</select> </select>
<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span> <span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
<br>
<?php endif;?> <?php endif;?>
<?php endforeach;?> <?php endforeach;?>
</div> </div>

102
system/resources/js/form.builder.js
View file

@ -1,5 +1,5 @@
/*! /*!
* Simple Form Builder for HTMLy - @author danpros * Simple Form Builder for HTMLy - Author @danpros
* *
* const fields = []; * const fields = [];
*/ */
@ -36,14 +36,6 @@ addOptionBtn.addEventListener('click', () => {
const col1Div = document.createElement('div'); const col1Div = document.createElement('div');
col1Div.classList.add('col'); 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'); const valueInput = document.createElement('input');
valueInput.type = 'text'; valueInput.type = 'text';
@ -58,11 +50,8 @@ addOptionBtn.addEventListener('click', () => {
removeBtn.addEventListener('click', () => optionDiv.remove()); removeBtn.addEventListener('click', () => optionDiv.remove());
removeBtn.setAttribute('class', 'btn btn-danger'); removeBtn.setAttribute('class', 'btn btn-danger');
optionDiv.appendChild(labelInput); col1Div.appendChild(valueInput);
optionDiv.appendChild(col1Div); optionDiv.appendChild(col1Div);
optionDiv.appendChild(col2Div);
col1Div.appendChild(labelInput);
col2Div.appendChild(valueInput);
optionDiv.appendChild(removeBtn); optionDiv.appendChild(removeBtn);
optionListEl.appendChild(optionDiv); optionListEl.appendChild(optionDiv);
}); });
@ -79,16 +68,14 @@ addFieldBtn.addEventListener('click', () => {
if (field.type === 'select') { if (field.type === 'select') {
const options = Array.from(document.querySelectorAll('.option-item')).map(item => { const options = Array.from(document.querySelectorAll('.option-item')).map(item => {
const label = item.querySelector('.option-label').value.trim(); return item.querySelector('.option-value').value.trim().replace(/\s+/g, '');
const value = item.querySelector('.option-value').value.trim().replace(/\s+/g, ''); // Remove spaces
return { label, value };
}); });
if (options.some(opt => !opt.label || !opt.value)) { if (options.some(opt => !opt)) {
alert("All options for a select field must have both label and value!"); alert("All options for a select must have a value!");
return; return;
} }
field.options = options; field.options = options; // now an array of strings
} }
if (!field.name || !field.label || !field.type) { if (!field.name || !field.label || !field.type) {
@ -111,10 +98,12 @@ addFieldBtn.addEventListener('click', () => {
updatePreviewAndOutput(); updatePreviewAndOutput();
document.getElementById(field.name + '-form-preview').scrollIntoView({ const target = document.getElementById(field.name + '-form-preview');
behavior: 'smooth' if (target) {
}); target.scrollIntoView({
behavior: 'smooth'
});
}
}); });
// Delete field logic // Delete field logic
@ -138,26 +127,20 @@ function editField(index) {
if (field.type === 'select') { if (field.type === 'select') {
optionsContainerEl.style.display = 'block'; optionsContainerEl.style.display = 'block';
optionListEl.innerHTML = ''; optionListEl.innerHTML = '';
// Accept both string array and legacy object array ({value: 'x'})
field.options.forEach(opt => { field.options.forEach(opt => {
const valueText = (typeof opt === 'string') ? opt : (opt && opt.value ? opt.value : '');
const optionDiv = document.createElement('div'); const optionDiv = document.createElement('div');
optionDiv.setAttribute('class', 'option-item row mt-1 mb-1'); optionDiv.setAttribute('class', 'option-item row mt-1 mb-1');
const col1Div = document.createElement('div'); const col1Div = document.createElement('div');
col1Div.classList.add('col'); 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'); const valueInput = document.createElement('input');
valueInput.type = 'text'; valueInput.type = 'text';
valueInput.placeholder = 'Value (required)'; 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.setAttribute('class', 'option-value form-control');
valueInput.addEventListener('input', () => { valueInput.addEventListener('input', () => {
valueInput.value = valueInput.value.replace(/\s+/g, ''); // Remove spaces in real-time 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(col1Div);
optionDiv.appendChild(col2Div);
col1Div.appendChild(labelInput);
col2Div.appendChild(valueInput);
optionDiv.appendChild(removeBtn); optionDiv.appendChild(removeBtn);
optionListEl.appendChild(optionDiv); optionListEl.appendChild(optionDiv);
}); });
@ -187,10 +167,16 @@ function editField(index) {
editingIndex = index; editingIndex = index;
addFieldBtn.textContent = "Update Field"; addFieldBtn.textContent = "Update Field";
document.getElementById('input-status').innerHTML = `<div class="callout callout-warning">Editing:</small> <code>${field.label}</div>`; const statusEl = document.getElementById('input-status');
document.getElementById('form-input').scrollIntoView({ if (statusEl) {
behavior: 'smooth' 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 // Update preview with Edit and Delete buttons
@ -201,7 +187,6 @@ function updatePreviewAndOutput() {
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.setAttribute('class', 'field-preview callout callout-info'); wrapper.setAttribute('class', 'field-preview callout callout-info');
wrapper.setAttribute('id', f.name + '-form-preview'); wrapper.setAttribute('id', f.name + '-form-preview');
formID = f.name;
const label = document.createElement('label'); const label = document.createElement('label');
label.innerHTML = `${f.label} <br><small>Field ID:</small> <code>${f.name}</code>`; label.innerHTML = `${f.label} <br><small>Field ID:</small> <code>${f.name}</code>`;
@ -210,14 +195,14 @@ function updatePreviewAndOutput() {
let el; let el;
if (f.type === 'textarea') { if (f.type === 'textarea') {
el = document.createElement('textarea'); el = document.createElement('textarea');
el.placeholder = f.info; el.placeholder = f.info || '';
el.setAttribute('class', 'form-control'); el.setAttribute('class', 'form-control');
el.value = f.value; el.value = f.value || '';
} else if (f.type === 'checkbox') { } else if (f.type === 'checkbox') {
const spacer = document.createElement('br'); const spacer = document.createElement('br');
el = document.createElement('input'); el = document.createElement('input');
el.type = 'checkbox'; el.type = 'checkbox';
el.checked = f.value === 'true'; el.checked = (f.value === 'true' || f.value === true);
const checkboxLabel = document.createElement('span'); const checkboxLabel = document.createElement('span');
checkboxLabel.textContent = ` ${f.label} `; checkboxLabel.textContent = ` ${f.label} `;
wrapper.appendChild(spacer); wrapper.appendChild(spacer);
@ -227,17 +212,18 @@ function updatePreviewAndOutput() {
} else if (f.type === 'select') { } else if (f.type === 'select') {
el = document.createElement('select'); el = document.createElement('select');
el.setAttribute('class', 'form-control'); 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'); const option = document.createElement('option');
option.value = opt.value; option.value = opt;
option.textContent = opt.label; option.textContent = opt;
el.appendChild(option); el.appendChild(option);
}); });
} else { } else {
el = document.createElement('input'); el = document.createElement('input');
el.type = f.type; el.type = f.type;
el.value = f.value; el.value = f.value || '';
el.placeholder = f.info; el.placeholder = f.info || '';
el.setAttribute('class', 'form-control'); el.setAttribute('class', 'form-control');
} }
@ -245,7 +231,7 @@ function updatePreviewAndOutput() {
wrapper.appendChild(el); wrapper.appendChild(el);
} }
if (f.type === 'checkbox' || f.type === 'select') { if (f.info) {
const tip = document.createElement('span'); const tip = document.createElement('span');
tip.innerHTML = `<small class="d-block mt-1"><em>${f.info}</em></small>`; tip.innerHTML = `<small class="d-block mt-1"><em>${f.info}</em></small>`;
wrapper.appendChild(tip); wrapper.appendChild(tip);
@ -264,10 +250,11 @@ function updatePreviewAndOutput() {
wrapper.appendChild(deleteBtn); wrapper.appendChild(deleteBtn);
formPreviewEl.appendChild(wrapper); formPreviewEl.appendChild(wrapper);
}); });
jsonOutputEl.value = JSON.stringify(fields, null, 2); jsonOutputEl.value = JSON.stringify(fields, null, 2);
// Reset form inputs
nameEl.value = ''; nameEl.value = '';
labelEl.value = ''; labelEl.value = '';
valueEl.value = ''; valueEl.value = '';
@ -276,8 +263,8 @@ function updatePreviewAndOutput() {
optionListEl.innerHTML = ''; optionListEl.innerHTML = '';
typeEl.value = "text"; typeEl.value = "text";
addFieldBtn.textContent = "Add Field"; addFieldBtn.textContent = "Add Field";
document.getElementById('input-status').innerHTML = ''; const statusEl = document.getElementById('input-status');
if (statusEl) statusEl.innerHTML = '';
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@ -286,12 +273,11 @@ document.addEventListener('DOMContentLoaded', () => {
// Real-time removal of spaces in the name field // Real-time removal of spaces in the name field
nameEl.addEventListener('input', () => { nameEl.addEventListener('input', () => {
nameEl.value = nameEl.value.replace(/\s+/g, ''); // Remove spaces in real-time nameEl.value = nameEl.value.replace(/\s+/g, ''); // Remove spaces in real-time
}); });
valueEl.addEventListener('input', () => { valueEl.addEventListener('input', () => {
if (typeEl.value === 'select') { if (typeEl.value === 'select') {
valueEl.value = valueEl.value.replace(/\s+/g, ''); // Remove spaces valueEl.value = valueEl.value.replace(/\s+/g, ''); // Remove spaces
} }
}); });
});
});