/**********************************************
|
PopulateForm extracts saved data and populates the form field accordingly
|
**********************************************/
|
class PopulateForm {
|
constructor(form, fieldData = {}, imageData = {}, options = {}) {
|
console.log('Populating field... ', form);
|
console.log('fieldData: ', fieldData);
|
console.log('imageData: ', imageData);
|
console.log('options: ', options);
|
for (let [fieldName, fieldValue] of Object.entries(fieldData)) {
|
let wrapper = form.querySelector(`[data-field="${fieldName}"]`);
|
if (wrapper) {
|
this.populateField(wrapper, fieldName, fieldValue, imageData, options);
|
}
|
}
|
}
|
|
/**
|
* Populate a single field with its value
|
* @param {HTMLElement} fieldWrapper - The field wrapper element
|
* @param {string} fieldName - Field name
|
* @param {*} fieldValue - Field value
|
* @param {Object} imagesData - Image metadata
|
* @param {Object} options - Additional options
|
*/
|
populateField(fieldWrapper, fieldName, fieldValue, imagesData = {}, options = {}) {
|
if (!fieldWrapper || fieldValue === undefined || fieldValue === null) {
|
return;
|
}
|
|
// Determine field type from classes or data attributes
|
const fieldType = this.getFieldType(fieldWrapper);
|
|
switch (fieldType) {
|
case 'image':
|
this.populateImageField(fieldWrapper, fieldName, fieldValue, imagesData);
|
break;
|
|
case 'gallery':
|
this.populateGalleryField(fieldWrapper, fieldName, fieldValue, imagesData);
|
break;
|
|
case 'repeater':
|
this.populateRepeaterField(fieldWrapper, fieldName, fieldValue, options);
|
break;
|
|
case 'taxonomy':
|
this.populateTaxonomyField(fieldWrapper, fieldName, fieldValue);
|
break;
|
|
case 'user':
|
this.populateUserField(fieldWrapper, fieldName, fieldValue);
|
break;
|
|
case 'location':
|
this.populateLocationField(fieldWrapper, fieldName, fieldValue);
|
break;
|
|
case 'set':
|
case 'checkbox':
|
this.populateSetField(fieldWrapper, fieldName, fieldValue);
|
break;
|
|
case 'select':
|
case 'radio':
|
this.populateSelectField(fieldWrapper, fieldName, fieldValue);
|
break;
|
|
case 'true_false':
|
this.populateBooleanField(fieldWrapper, fieldName, fieldValue);
|
break;
|
|
case 'date':
|
case 'time':
|
case 'datetime':
|
this.populateDateField(fieldWrapper, fieldName, fieldValue);
|
break;
|
|
case 'number':
|
this.populateNumberField(fieldWrapper, fieldName, fieldValue);
|
break;
|
case 'textarea':
|
if (fieldWrapper.querySelector('.editor-container')) {
|
this.populateEditorField(fieldWrapper, fieldName, fieldValue);
|
} else {
|
this.populateTextareaField(fieldWrapper, fieldName, fieldValue);
|
}
|
break;
|
|
case 'text':
|
case 'email':
|
case 'url':
|
case 'tel':
|
case 'phone':
|
default:
|
this.populateTextField(fieldWrapper, fieldName, fieldValue);
|
break;
|
}
|
}
|
|
/**
|
* Determine field type from wrapper element
|
* @param {HTMLElement} fieldWrapper - Field wrapper element
|
* @returns {string} Field type
|
*/
|
getFieldType(fieldWrapper) {
|
// Check for specific field classes
|
const typeClasses = [
|
'image', 'gallery', 'repeater', 'taxonomy', 'user', 'location',
|
'set', 'checkbox', 'select', 'radio', 'true_false', 'date',
|
'time', 'datetime', 'editor', 'number', 'text', 'textarea',
|
'email', 'url', 'tel', 'phone'
|
];
|
|
for (const type of typeClasses) {
|
if (fieldWrapper.classList.contains(type)) {
|
return type;
|
}
|
}
|
|
// Check for data attribute
|
if (fieldWrapper.dataset.type) {
|
return fieldWrapper.dataset.type;
|
}
|
|
// Check input type
|
const input = fieldWrapper.querySelector('input, select, textarea');
|
if (input) {
|
if (input.tagName === 'TEXTAREA') {
|
return input.dataset.editor === 'true' ? 'editor' : 'textarea';
|
}
|
if (input.type) {
|
return input.type === 'checkbox' && !fieldWrapper.classList.contains('true_false') ? 'set' : input.type;
|
}
|
}
|
|
return 'text';
|
}
|
|
/**
|
* Populate text-based fields
|
*/
|
populateTextField(fieldWrapper, fieldName, fieldValue) {
|
const input = fieldWrapper.querySelector(`[name="${fieldName}"], input, textarea`);
|
if (input) {
|
input.value = String(fieldValue || '');
|
|
// Update character counter if present
|
if (input.dataset.limit) {
|
const counter = fieldWrapper.querySelector('.char-count .current');
|
if (counter) {
|
counter.textContent = input.value.length;
|
}
|
}
|
}
|
}
|
|
/**
|
* Populate textarea fields
|
*/
|
populateTextareaField(fieldWrapper, fieldName, fieldValue) {
|
const textarea = fieldWrapper.querySelector(`textarea[name="${fieldName}"]`) ||
|
fieldWrapper.querySelector('textarea:not([data-editor="true"])');
|
|
if (textarea) {
|
const oldValue = textarea.value;
|
textarea.value = String(fieldValue || '');
|
|
// Trigger change event to update any dependencies
|
textarea.dispatchEvent(new Event('change', { bubbles: true }));
|
|
// Update character counter if present
|
if (textarea.dataset.limit) {
|
const counter = fieldWrapper.querySelector('.char-count .current');
|
if (counter) {
|
counter.textContent = textarea.value.length;
|
|
// Check if limit is reached
|
const limit = parseInt(textarea.dataset.limit, 10);
|
if (textarea.value.length >= limit) {
|
fieldWrapper.classList.add('reached');
|
} else {
|
fieldWrapper.classList.remove('reached');
|
}
|
}
|
}
|
} else {
|
console.warn(`No textarea found for field ${fieldName} in wrapper:`, fieldWrapper);
|
}
|
}
|
|
|
|
/**
|
* Populate number fields
|
*/
|
populateNumberField(fieldWrapper, fieldName, fieldValue) {
|
const input = fieldWrapper.querySelector(`[name="${fieldName}"], input[type="number"]`);
|
if (input) {
|
input.value = Number(fieldValue) || 0;
|
}
|
}
|
|
/**
|
* Populate boolean/true_false fields
|
*/
|
populateBooleanField(fieldWrapper, fieldName, fieldValue) {
|
const input = fieldWrapper.querySelector(`[name="${fieldName}"], input[type="checkbox"]`);
|
if (input) {
|
input.checked = Boolean(fieldValue);
|
}
|
}
|
|
/**
|
* Populate select/radio fields
|
*/
|
populateSelectField(fieldWrapper, fieldName, fieldValue) {
|
const value = String(fieldValue || '');
|
|
// Try select first
|
const select = fieldWrapper.querySelector(`select[name="${fieldName}"]`);
|
if (select) {
|
select.value = value;
|
return;
|
}
|
|
// Try radio buttons
|
const radio = fieldWrapper.querySelector(`input[type="radio"][name="${fieldName}"][value="${value}"]`);
|
if (radio) {
|
radio.checked = true;
|
}
|
}
|
|
/**
|
* Populate set/checkbox fields (multiple selections)
|
*/
|
populateSetField(fieldWrapper, fieldName, fieldValue) {
|
// Parse value if it's a string
|
let values = fieldValue;
|
if (typeof fieldValue === 'string') {
|
try {
|
values = JSON.parse(fieldValue);
|
} catch (e) {
|
values = fieldValue.split(',').map(v => v.trim());
|
}
|
}
|
|
if (!Array.isArray(values)) {
|
values = [String(values)];
|
}
|
|
// Update checkboxes
|
fieldWrapper.querySelectorAll(`input[type="checkbox"][name*="${fieldName}"]`).forEach(checkbox => {
|
checkbox.checked = values.includes(checkbox.value);
|
});
|
}
|
|
/**
|
* Populate date/time fields
|
*/
|
populateDateField(fieldWrapper, fieldName, fieldValue) {
|
const input = fieldWrapper.querySelector(`[name="${fieldName}"], input`);
|
if (input && fieldValue) {
|
// Handle different date formats
|
let dateValue = fieldValue;
|
if (typeof fieldValue === 'object' && fieldValue.date) {
|
dateValue = fieldValue.date;
|
}
|
|
// Convert to appropriate format for input type
|
try {
|
const date = new Date(dateValue);
|
if (!isNaN(date.getTime())) {
|
switch (input.type) {
|
case 'date':
|
input.value = date.toISOString().split('T')[0];
|
break;
|
case 'time':
|
input.value = date.toTimeString().slice(0, 5);
|
break;
|
case 'datetime-local':
|
input.value = date.toISOString().slice(0, 16);
|
break;
|
default:
|
input.value = dateValue;
|
}
|
}
|
} catch (e) {
|
input.value = dateValue;
|
}
|
}
|
}
|
|
/**
|
* Populate editor fields (Quill)
|
*/
|
populateEditorField(fieldWrapper, fieldName, fieldValue) {
|
const textarea = fieldWrapper.querySelector(`textarea[name="${fieldName}"]`) ||
|
fieldWrapper.querySelector('textarea[data-editor="true"]') ||
|
fieldWrapper.querySelector('textarea');
|
|
if (!textarea) {
|
console.warn(`Editor field ${fieldName}: textarea not found`);
|
return;
|
}
|
|
const content = String(fieldValue || '');
|
|
// Update the textarea value
|
textarea.value = content;
|
|
// Try to find and update Quill editor
|
const editorContainer = fieldWrapper.querySelector('.editor');
|
if (editorContainer) {
|
// Try different ways to access the Quill instance
|
let quillInstance = null;
|
|
// Method 1: Check if Quill is stored on the editor element
|
if (editorContainer.__quill) {
|
quillInstance = editorContainer.__quill;
|
}
|
// Method 2: Check if Quill is stored as quill property
|
else if (editorContainer.quill) {
|
quillInstance = editorContainer.quill;
|
}
|
// Method 3: Try to find Quill in the global registry (if you have one)
|
else if (window.Quill && window.Quill.find) {
|
quillInstance = window.Quill.find(editorContainer);
|
}
|
// Method 4: Check all Quill instances if available
|
else if (window.Quill && window.Quill.instances) {
|
// Some setups store instances in a registry
|
for (let instance of window.Quill.instances) {
|
if (instance.container === editorContainer) {
|
quillInstance = instance;
|
break;
|
}
|
}
|
}
|
|
if (quillInstance) {
|
// Set the content in Quill
|
quillInstance.root.innerHTML = content;
|
// Store the instance reference for future use
|
editorContainer.__quill = quillInstance;
|
} else {
|
console.warn(`Quill instance not found for ${fieldName}, setting HTML directly`);
|
// Fallback: set HTML directly
|
editorContainer.innerHTML = content;
|
}
|
} else {
|
console.warn(`Editor container not found for ${fieldName}`);
|
}
|
|
// Trigger change event on textarea
|
textarea.dispatchEvent(new Event('change', { bubbles: true }));
|
}
|
|
/**
|
* Populate location fields
|
*/
|
populateLocationField(fieldWrapper, fieldName, fieldValue) {
|
if (!fieldValue || typeof fieldValue !== 'object') {
|
return;
|
}
|
|
// Location fields typically have sub-fields
|
const subFields = ['address', 'lat', 'lng', 'street', 'city', 'province', 'postal_code', 'country'];
|
|
subFields.forEach(subField => {
|
if (fieldValue[subField] !== undefined) {
|
const input = fieldWrapper.querySelector(`[name="${fieldName}_${subField}"], [name="${subField}"]`);
|
if (input) {
|
input.value = String(fieldValue[subField] || '');
|
}
|
}
|
});
|
}
|
|
/**
|
* Populate taxonomy fields
|
*/
|
populateTaxonomyField(fieldWrapper, fieldName, fieldValue) {
|
// Handle different value formats
|
let termIds = [];
|
|
if (Array.isArray(fieldValue)) {
|
termIds = fieldValue.map(v => String(v));
|
} else if (typeof fieldValue === 'string') {
|
try {
|
const parsed = JSON.parse(fieldValue);
|
termIds = Array.isArray(parsed) ? parsed.map(v => String(v)) : [String(parsed)];
|
} catch (e) {
|
termIds = fieldValue.split(',').map(v => v.trim());
|
}
|
} else if (fieldValue) {
|
termIds = [String(fieldValue)];
|
}
|
|
if (termIds.length === 0) {
|
return;
|
}
|
|
// Update hidden input
|
const hiddenInput = fieldWrapper.querySelector(`input[type="hidden"][name="${fieldName}"]`);
|
if (hiddenInput) {
|
hiddenInput.value = termIds.join(',');
|
}
|
}
|
|
/**
|
* Populate user fields (similar to taxonomy)
|
*/
|
populateUserField(fieldWrapper, fieldName, fieldValue) {
|
// Similar logic to taxonomy fields
|
this.populateTaxonomyField(fieldWrapper, fieldName, fieldValue);
|
}
|
|
/**
|
* Populate image fields
|
*/
|
populateImageField(fieldWrapper, fieldName, fieldValue, imagesData = {}) {
|
if (!fieldValue) {
|
return;
|
}
|
|
// Handle comma-separated IDs or single ID
|
const imageIds = String(fieldValue).split(',').filter(id => parseInt(id.trim()));
|
if (imageIds.length === 0) {
|
return;
|
}
|
|
// Update hidden input
|
const hiddenInput = fieldWrapper.querySelector(`input[type="hidden"][name="${fieldName}"]`);
|
if (hiddenInput) {
|
hiddenInput.value = imageIds.join(',');
|
}
|
|
// Update image display
|
const grid = fieldWrapper.querySelector('.item-grid');
|
const uploadContainer = fieldWrapper.querySelector('.file-upload-container');
|
fieldWrapper.querySelector('.progress')?.remove();
|
if (grid) {
|
window.removeChildren(grid);
|
imageIds.forEach(imageId => {
|
let image = window.getTemplate('uploadItem');
|
let img = image.querySelector('img');
|
|
let details = image.querySelector('details');
|
let meta = window.getTemplate('uploadMeta')
|
details.append(meta);
|
[
|
img.src,
|
img.alt,
|
image.querySelector('[name="image-title"]').value,
|
image.querySelector('[name="image-alt-text"]').value,
|
image.querySelector('[name="image-caption"]').value,
|
] = [
|
imagesData[imageId].medium,
|
imagesData[imageId].alt,
|
imagesData[imageId].title,
|
imagesData[imageId].alt,
|
imagesData[imageId].caption,
|
];
|
|
details.querySelector('.upload-meta > .hint')?.remove();
|
|
grid.append(image);
|
});
|
|
if (imageIds.length > 0) {
|
if (uploadContainer) {
|
uploadContainer.hidden = true;
|
}
|
}
|
}
|
}
|
|
/**
|
* Populate gallery fields
|
*/
|
populateGalleryField(fieldWrapper, fieldName, fieldValue, imagesData = {}) {
|
this.populateImageField(fieldWrapper, fieldName, fieldValue, imagesData);
|
}
|
|
/**
|
* Populate repeater fields
|
*/
|
populateRepeaterField(fieldWrapper, fieldName, fieldValue, options = {}) {
|
console.log('fieldWrapper', fieldWrapper);
|
console.log('fieldName', fieldName);
|
console.log('fieldValue', fieldValue);
|
console.log('options', options);
|
if (!fieldValue || !Array.isArray(fieldValue)) {
|
return;
|
}
|
|
const container = fieldWrapper.querySelector('.repeater-items');
|
const template = fieldWrapper.querySelector('template');
|
|
if (!container || !template) {
|
console.warn(`Repeater field ${fieldName}: missing container or template`);
|
return;
|
}
|
|
// Clear existing rows
|
window.removeChildren(container);
|
|
// Create rows for each data item
|
fieldValue.forEach((rowData, index) => {
|
if (!rowData || typeof rowData !== 'object') {
|
return;
|
}
|
|
const row = window.getTemplate(template.className);
|
if (!row) {
|
console.warn(`Repeater field ${fieldName}: template not found`);
|
return;
|
}
|
|
// Set row ID and update row number
|
row.id = `${fieldWrapper.closest('form').id}-${fieldName}-row-${index}`;
|
row.dataset.index = index;
|
|
const rowNumber = row.querySelector('.row-number');
|
if (rowNumber) {
|
rowNumber.textContent = `#${index + 1}`;
|
}
|
|
// Update field names and populate values
|
row.querySelectorAll('input, select, textarea').forEach(field => {
|
const originalName = field.name;
|
const newName = `${fieldName}:${index}:${originalName}`;
|
const newId = `${fieldName}-${index}-${originalName}-${field.value}`;
|
|
// Update field identifiers
|
field.name = newName;
|
field.id = newId;
|
|
// Update label
|
const label = field.nextElementSibling;
|
if (label && label.tagName === 'LABEL') {
|
label.htmlFor = newId;
|
}
|
|
// Populate field value
|
if (rowData[originalName] !== undefined) {
|
this.populateRepeaterFieldValue(field, originalName, rowData[originalName]);
|
}
|
});
|
|
container.appendChild(row);
|
});
|
}
|
|
/**
|
* Populate individual repeater field value
|
*/
|
populateRepeaterFieldValue(field, fieldName, fieldValue) {
|
switch (field.type) {
|
case 'checkbox':
|
field.checked = Boolean(fieldValue);
|
break;
|
case 'radio':
|
field.checked = field.value === String(fieldValue);
|
break;
|
case 'select-one':
|
case 'select-multiple':
|
field.value = String(fieldValue || '');
|
break;
|
default:
|
field.value = String(fieldValue || '');
|
}
|
}
|
}
|
|
window.jvbPopulate = PopulateForm;
|
