UI: fixes based on Actionable Feedback from devtalk and frontend changes #40
@ -14,6 +14,7 @@ function appendImageUploadForm() {
|
|||||||
accept="image/*" class="form-control"
|
accept="image/*" class="form-control"
|
||||||
id="id_${formsetPrefix}-${i}-source">
|
id="id_${formsetPrefix}-${i}-source">
|
||||||
<button class="btn btn-link js-btn-reset-img-upload-form mt-1"><i class="i-refresh"></i> Reset</button>
|
<button class="btn btn-link js-btn-reset-img-upload-form mt-1"><i class="i-refresh"></i> Reset</button>
|
||||||
|
<button class="btn btn-link js-btn-remove-img-upload-form mt-1"><i class="i-trash"></i> Remove</button>
|
||||||
<div class="invalid-feedback"></div>
|
<div class="invalid-feedback"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
@ -23,7 +24,7 @@ function appendImageUploadForm() {
|
|||||||
<div class="invalid-feedback"></div>
|
<div class="invalid-feedback"></div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
formRow.classList.add('row', 'ext-edit-field-row');
|
formRow.classList.add('row', 'ext-edit-field-row', 'js-ext-edit-field-row');
|
||||||
formRow.innerHTML = newFormHTML;
|
formRow.innerHTML = newFormHTML;
|
||||||
formsetContainer.appendChild(formRow);
|
formsetContainer.appendChild(formRow);
|
||||||
inputTotalForms.value = parseInt(inputTotalForms.value) + 1;
|
inputTotalForms.value = parseInt(inputTotalForms.value) + 1;
|
||||||
@ -33,12 +34,32 @@ btnAddImage.addEventListener('click', function(ev) {
|
|||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
appendImageUploadForm();
|
appendImageUploadForm();
|
||||||
|
|
||||||
// Call function resetImgUploadForm
|
// Init function removeImgUploadForm
|
||||||
|
removeImgUploadForm();
|
||||||
|
|
||||||
|
// Init function resetImgUploadForm
|
||||||
resetImgUploadForm();
|
resetImgUploadForm();
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Create function removeImgUploadForm
|
||||||
|
function removeImgUploadForm() {
|
||||||
|
const btnRemoveImgUploadForm = document.querySelectorAll('.js-btn-remove-img-upload-form');
|
||||||
|
|
||||||
|
btnRemoveImgUploadForm.forEach(function(item) {
|
||||||
|
item.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Find the row parent
|
||||||
|
const rowParent = this.closest('.js-ext-edit-field-row');
|
||||||
|
|
||||||
|
// Remove the row
|
||||||
|
rowParent.remove();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Create function resetImgUploadForm
|
// Create function resetImgUploadForm
|
||||||
function resetImgUploadForm() {
|
function resetImgUploadForm() {
|
||||||
const btnResetImgUploadForm = document.querySelectorAll('.js-btn-reset-img-upload-form');
|
const btnResetImgUploadForm = document.querySelectorAll('.js-btn-reset-img-upload-form');
|
||||||
|
Loading…
Reference in New Issue
Block a user