mirror of
https://github.com/danpros/htmly.git
synced 2026-04-18 11:36:20 +05:30
Form builder styling
This commit is contained in:
Dan
parent
c372b37980
commit
be90f88708
5 changed files with 43 additions and 21 deletions
|
|
@ -12,8 +12,9 @@ if (file_exists($field_file)) {
|
|||
<div id="form-preview"></div>
|
||||
<br><br>
|
||||
<!-- Form Input Section -->
|
||||
<div class="form-group">
|
||||
<label for="type">Field Type</label>
|
||||
<div class="form-group" id="form-input">
|
||||
<label for="type">Form Input</label>
|
||||
<span class="d-block mt-1" id="input-status"></span>
|
||||
<br>
|
||||
<select id="type">
|
||||
<option value="text">Text</option>
|
||||
|
|
@ -21,17 +22,18 @@ if (file_exists($field_file)) {
|
|||
<option value="checkbox">Checkbox</option>
|
||||
<option value="select">Select</option>
|
||||
</select>
|
||||
<input type="text" id="name" placeholder="Name (required)">
|
||||
<input type="text" id="label" placeholder="Label (required)">
|
||||
<input type="text" id="name" placeholder="Name (required)">
|
||||
<input type="text" id="value" placeholder="Value (optional)">
|
||||
<input type="text" id="info" placeholder="Field Info (optional)">
|
||||
|
||||
<button id="add-field" class="btn btn-primary">Add Field</button>
|
||||
<span class="d-block mt-1"><small><em>No spaces for <code>Name</code> input. Underscores and dashes allowed</em></small></span>
|
||||
|
||||
<div id="options-container" style="display: none;">
|
||||
<strong>Options</strong>
|
||||
<div id="option-list"></div>
|
||||
<button id="add-option" class="btn btn-primary btn-xs">Add Option</button>
|
||||
<span class="d-block mt-1"><small><em>No spaces for select <code>Value</code> input. Underscores and dashes allowed</em></small></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,9 @@ if (file_exists($field_file)) {
|
|||
<div id="form-preview"></div>
|
||||
<br><br>
|
||||
<!-- Form Input Section -->
|
||||
<div class="form-group">
|
||||
<label for="type">Field Type</label>
|
||||
<div class="form-group" id="form-input">
|
||||
<label for="type">Form Input</label>
|
||||
<span class="d-block mt-1" id="input-status"></span>
|
||||
<br>
|
||||
<select id="type">
|
||||
<option value="text">Text</option>
|
||||
|
|
@ -21,17 +22,18 @@ if (file_exists($field_file)) {
|
|||
<option value="checkbox">Checkbox</option>
|
||||
<option value="select">Select</option>
|
||||
</select>
|
||||
<input type="text" id="name" placeholder="Name (required)">
|
||||
<input type="text" id="label" placeholder="Label (required)">
|
||||
<input type="text" id="name" placeholder="Name (required)">
|
||||
<input type="text" id="value" placeholder="Value (optional)">
|
||||
<input type="text" id="info" placeholder="Field Info (optional)">
|
||||
|
||||
<button id="add-field" class="btn btn-primary">Add Field</button>
|
||||
<span class="d-block mt-1"><small><em>No spaces for <code>Name</code> input. Underscores and dashes allowed</em></small></span>
|
||||
|
||||
<div id="options-container" style="display: none;">
|
||||
<strong>Options</strong>
|
||||
<div id="option-list"></div>
|
||||
<button id="add-option" class="btn btn-primary btn-xs">Add Option</button>
|
||||
<span class="d-block mt-1"><small><em>No spaces for select <code>Value</code> input. Underscores and dashes allowed</em></small></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,9 @@ if (file_exists($field_file)) {
|
|||
<div id="form-preview"></div>
|
||||
<br><br>
|
||||
<!-- Form Input Section -->
|
||||
<div class="form-group">
|
||||
<label for="type">Field Type</label>
|
||||
<div class="form-group" id="form-input">
|
||||
<label for="type">Form Input</label>
|
||||
<span class="d-block mt-1" id="input-status"></span>
|
||||
<br>
|
||||
<select id="type">
|
||||
<option value="text">Text</option>
|
||||
|
|
@ -21,17 +22,18 @@ if (file_exists($field_file)) {
|
|||
<option value="checkbox">Checkbox</option>
|
||||
<option value="select">Select</option>
|
||||
</select>
|
||||
<input type="text" id="name" placeholder="Name (required)">
|
||||
<input type="text" id="label" placeholder="Label (required)">
|
||||
<input type="text" id="name" placeholder="Name (required)">
|
||||
<input type="text" id="value" placeholder="Value (optional)">
|
||||
<input type="text" id="info" placeholder="Field Info (optional)">
|
||||
|
||||
<button id="add-field" class="btn btn-primary">Add Field</button>
|
||||
<span class="d-block mt-1"><small><em>No spaces for <code>Name</code> input. Underscores and dashes allowed</em></small></span>
|
||||
|
||||
<div id="options-container" style="display: none;">
|
||||
<strong>Options</strong>
|
||||
<div id="option-list"></div>
|
||||
<button id="add-option" class="btn btn-primary btn-xs">Add Option</button>
|
||||
<span class="d-block mt-1"><small><em>No spaces for select <code>Value</code> input. Underscores and dashes allowed</em></small></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,9 @@ if (file_exists($field_file)) {
|
|||
<div id="form-preview"></div>
|
||||
<br><br>
|
||||
<!-- Form Input Section -->
|
||||
<div class="form-group">
|
||||
<label for="type">Field Type</label>
|
||||
<div class="form-group" id="form-input">
|
||||
<label for="type">Form Input</label>
|
||||
<span class="d-block mt-1" id="input-status"></span>
|
||||
<br>
|
||||
<select id="type">
|
||||
<option value="text">Text</option>
|
||||
|
|
@ -21,17 +22,18 @@ if (file_exists($field_file)) {
|
|||
<option value="checkbox">Checkbox</option>
|
||||
<option value="select">Select</option>
|
||||
</select>
|
||||
<input type="text" id="name" placeholder="Name (required)">
|
||||
<input type="text" id="label" placeholder="Label (required)">
|
||||
<input type="text" id="name" placeholder="Name (required)">
|
||||
<input type="text" id="value" placeholder="Value (optional)">
|
||||
<input type="text" id="info" placeholder="Field Info (optional)">
|
||||
|
||||
<button id="add-field" class="btn btn-primary">Add Field</button>
|
||||
<span class="d-block mt-1"><small><em>No spaces for <code>Name</code> input. Underscores and dashes allowed</em></small></span>
|
||||
|
||||
<div id="options-container" style="display: none;">
|
||||
<strong>Options</strong>
|
||||
<div id="option-list"></div>
|
||||
<button id="add-option" class="btn btn-primary btn-xs">Add Option</button>
|
||||
<span class="d-block mt-1"><small><em>No spaces for select <code>Value</code> input. Underscores and dashes allowed</em></small></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -101,6 +101,11 @@ addFieldBtn.addEventListener('click', () => {
|
|||
}
|
||||
|
||||
updatePreviewAndOutput();
|
||||
|
||||
document.getElementById(field.name + '-form-preview').scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Delete field logic
|
||||
|
|
@ -164,6 +169,10 @@ 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({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
// Update preview with Edit and Delete buttons
|
||||
|
|
@ -172,7 +181,9 @@ function updatePreviewAndOutput() {
|
|||
|
||||
fields.forEach((f, index) => {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.setAttribute('class', 'field-preview form-group');
|
||||
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>`;
|
||||
|
|
@ -215,7 +226,7 @@ function updatePreviewAndOutput() {
|
|||
if (el) {
|
||||
wrapper.appendChild(el);
|
||||
}
|
||||
|
||||
|
||||
if (f.type === 'checkbox' || f.type === 'select') {
|
||||
const tip = document.createElement('span');
|
||||
tip.innerHTML = `<small class="d-block mt-1"><em>${f.info}</em></small>`;
|
||||
|
|
@ -235,6 +246,7 @@ function updatePreviewAndOutput() {
|
|||
wrapper.appendChild(deleteBtn);
|
||||
|
||||
formPreviewEl.appendChild(wrapper);
|
||||
|
||||
});
|
||||
|
||||
jsonOutputEl.value = JSON.stringify(fields, null, 2);
|
||||
|
|
@ -246,20 +258,22 @@ function updatePreviewAndOutput() {
|
|||
optionListEl.innerHTML = '';
|
||||
typeEl.value = "text";
|
||||
addFieldBtn.textContent = "Add Field";
|
||||
document.getElementById('input-status').innerHTML = '';
|
||||
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
updatePreviewAndOutput();
|
||||
|
||||
|
||||
// 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
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue