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

Fix form styling

Browse source
This commit is contained in:
Dan 2025-03-19 12:20:36 +07:00
commit 04c5ab3a3d
6 changed files with 204 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

64
system/admin/views/custom-field-page.html.php
View file

@ -10,34 +10,58 @@ if (file_exists($field_file)) {
?>
<!-- Preview Section -->
<div id="form-preview"></div>
<br><br>
<br>
<!-- Form Input Section -->
<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>
<option value="textarea">Textarea</option>
<option value="checkbox">Checkbox</option>
<option value="select">Select</option>
</select>
<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>
<div class="row">
<div class="col">
<label for="type">Form type</label>
<select id="type" class="form-control">
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="checkbox">Checkbox</option>
<option value="select">Select</option>
</select>
</div>
<div class="col">
<label for="label">Label</label>
<input type="text" class="form-control" id="label" placeholder="Label (required)">
</div>
<div class="col">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name (required)">
</div>
<div class="col">
<label for="value">Value</label>
<input type="text" class="form-control" id="value" placeholder="Value (optional)">
</div>
<div class="col">
<label for="info">Info</label>
<input type="text" class="form-control" id="info" placeholder="Field Info (optional)">
</div>
<div class="col">
<label for="add-field">Operations</label>
<button id="add-field" class="btn btn-primary">Add Field</button>
</div>
</div>
<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>
<div class="row">
<div class="col-sm-6">
<h5 class="mt-2">Options</h5>
<div id="option-list"></div>
<button id="add-option" class="btn btn-primary btn-xs mt-1">Add Option</button>
<span class="d-block mt-1"><small><em>No spaces for select and option <code>Value</code> input. Underscores and dashes allowed</em></small></span>
</div>
<br><br>
</div>
</div>
</div>
<!-- Form submit Section -->
<button class="btn btn-primary" id="saveButton"><?php echo i18n('save');?></button>

64
system/admin/views/custom-field-post.html.php
View file

@ -10,34 +10,58 @@ if (file_exists($field_file)) {
?>
<!-- Preview Section -->
<div id="form-preview"></div>
<br><br>
<br>
<!-- Form Input Section -->
<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>
<option value="textarea">Textarea</option>
<option value="checkbox">Checkbox</option>
<option value="select">Select</option>
</select>
<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>
<div class="row">
<div class="col">
<label for="type">Form type</label>
<select id="type" class="form-control">
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="checkbox">Checkbox</option>
<option value="select">Select</option>
</select>
</div>
<div class="col">
<label for="label">Label</label>
<input type="text" class="form-control" id="label" placeholder="Label (required)">
</div>
<div class="col">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name (required)">
</div>
<div class="col">
<label for="value">Value</label>
<input type="text" class="form-control" id="value" placeholder="Value (optional)">
</div>
<div class="col">
<label for="info">Info</label>
<input type="text" class="form-control" id="info" placeholder="Field Info (optional)">
</div>
<div class="col">
<label for="add-field">Operations</label>
<button id="add-field" class="btn btn-primary">Add Field</button>
</div>
</div>
<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>
<div class="row">
<div class="col-sm-6">
<h5 class="mt-2">Options</h5>
<div id="option-list"></div>
<button id="add-option" class="btn btn-primary btn-xs mt-1">Add Option</button>
<span class="d-block mt-1"><small><em>No spaces for select and option <code>Value</code> input. Underscores and dashes allowed</em></small></span>
</div>
<br><br>
</div>
</div>
</div>
<!-- Form submit Section -->
<button class="btn btn-primary" id="saveButton"><?php echo i18n('save');?></button>

64
system/admin/views/custom-field-profile.html.php
View file

@ -10,34 +10,58 @@ if (file_exists($field_file)) {
?>
<!-- Preview Section -->
<div id="form-preview"></div>
<br><br>
<br>
<!-- Form Input Section -->
<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>
<option value="textarea">Textarea</option>
<option value="checkbox">Checkbox</option>
<option value="select">Select</option>
</select>
<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>
<div class="row">
<div class="col">
<label for="type">Form type</label>
<select id="type" class="form-control">
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="checkbox">Checkbox</option>
<option value="select">Select</option>
</select>
</div>
<div class="col">
<label for="label">Label</label>
<input type="text" class="form-control" id="label" placeholder="Label (required)">
</div>
<div class="col">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name (required)">
</div>
<div class="col">
<label for="value">Value</label>
<input type="text" class="form-control" id="value" placeholder="Value (optional)">
</div>
<div class="col">
<label for="info">Info</label>
<input type="text" class="form-control" id="info" placeholder="Field Info (optional)">
</div>
<div class="col">
<label for="add-field">Operations</label>
<button id="add-field" class="btn btn-primary">Add Field</button>
</div>
</div>
<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>
<div class="row">
<div class="col-sm-6">
<h5 class="mt-2">Options</h5>
<div id="option-list"></div>
<button id="add-option" class="btn btn-primary btn-xs mt-1">Add Option</button>
<span class="d-block mt-1"><small><em>No spaces for select and option <code>Value</code> input. Underscores and dashes allowed</em></small></span>
</div>
<br><br>
</div>
</div>
</div>
<!-- Form submit Section -->
<button class="btn btn-primary" id="saveButton"><?php echo i18n('save');?></button>

64
system/admin/views/custom-field-subpage.html.php
View file

@ -10,34 +10,58 @@ if (file_exists($field_file)) {
?>
<!-- Preview Section -->
<div id="form-preview"></div>
<br><br>
<br>
<!-- Form Input Section -->
<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>
<option value="textarea">Textarea</option>
<option value="checkbox">Checkbox</option>
<option value="select">Select</option>
</select>
<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>
<div class="row">
<div class="col">
<label for="type">Form type</label>
<select id="type" class="form-control">
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="checkbox">Checkbox</option>
<option value="select">Select</option>
</select>
</div>
<div class="col">
<label for="label">Label</label>
<input type="text" class="form-control" id="label" placeholder="Label (required)">
</div>
<div class="col">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name (required)">
</div>
<div class="col">
<label for="value">Value</label>
<input type="text" class="form-control" id="value" placeholder="Value (optional)">
</div>
<div class="col">
<label for="info">Info</label>
<input type="text" class="form-control" id="info" placeholder="Field Info (optional)">
</div>
<div class="col">
<label for="add-field">Operations</label>
<button id="add-field" class="btn btn-primary">Add Field</button>
</div>
</div>
<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>
<div class="row">
<div class="col-sm-6">
<h5 class="mt-2">Options</h5>
<div id="option-list"></div>
<button id="add-option" class="btn btn-primary btn-xs mt-1">Add Option</button>
<span class="d-block mt-1"><small><em>No spaces for select and option <code>Value</code> input. Underscores and dashes allowed</em></small></span>
</div>
<br><br>
</div>
</div>
</div>
<!-- Form submit Section -->
<button class="btn btn-primary" id="saveButton"><?php echo i18n('save');?></button>

2
system/admin/views/custom-field.html.php
View file

@ -3,7 +3,7 @@
<br>
<p>Custom fields enable users to add extra, specific data fields to their content, allowing for more detailed and flexible content management.</p>
<p>Use <code>get_field()</code> function in your template. Example:
<p>Use <code>get_field()</code> function in your template.
<ul><li>Post, Page, Subpage: <code>&lt;?php echo get_field('field_name', $p-&gt;raw);?&gt;</code></code></li>
<li>Profile: <code>&lt;?php echo get_field('field_name', $author-&gt;raw);?&gt;</code></code></li></ul>
</p>

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

@ -32,17 +32,23 @@ typeEl.addEventListener('change', () => {
// Add new option for select field
addOptionBtn.addEventListener('click', () => {
const optionDiv = document.createElement('div');
optionDiv.classList.add('option-item');
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.classList.add('option-label');
labelInput.setAttribute('class', 'option-label form-control');
const valueInput = document.createElement('input');
valueInput.type = 'text';
valueInput.placeholder = 'Value (required)';
valueInput.classList.add('option-value');
valueInput.setAttribute('class', 'option-value form-control');
valueInput.addEventListener('input', () => {
valueInput.value = valueInput.value.replace(/\s+/g, ''); // Remove spaces in real-time
});
@ -53,7 +59,10 @@ addOptionBtn.addEventListener('click', () => {
removeBtn.setAttribute('class', 'btn btn-danger');
optionDiv.appendChild(labelInput);
optionDiv.appendChild(valueInput);
optionDiv.appendChild(col1Div);
optionDiv.appendChild(col2Div);
col1Div.appendChild(labelInput);
col2Div.appendChild(valueInput);
optionDiv.appendChild(removeBtn);
optionListEl.appendChild(optionDiv);
});
@ -131,19 +140,25 @@ function editField(index) {
optionListEl.innerHTML = '';
field.options.forEach(opt => {
const optionDiv = document.createElement('div');
optionDiv.classList.add('option-item');
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.classList.add('option-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.classList.add('option-value');
valueInput.setAttribute('class', 'option-value form-control');
valueInput.addEventListener('input', () => {
valueInput.value = valueInput.value.replace(/\s+/g, ''); // Remove spaces in real-time
});
@ -158,7 +173,10 @@ function editField(index) {
});
optionDiv.appendChild(labelInput);
optionDiv.appendChild(valueInput);
optionDiv.appendChild(col1Div);
optionDiv.appendChild(col2Div);
col1Div.appendChild(labelInput);
col2Div.appendChild(valueInput);
optionDiv.appendChild(removeBtn);
optionListEl.appendChild(optionDiv);
});