/**********************************************
|
PopulateForm extracts saved data and populates the form field accordingly
|
**********************************************/
|
class PopulateForm {
|
constructor(form, itemDataOrFields = {}, legacyImages = {}, options = {}) {
|
// Support both old signature (fields, images) and new signature (item object)
|
this.item = this.normalizeItemData(itemDataOrFields, legacyImages);
|
this.form = form;
|
this.options = options;
|
|
// Populate all fields
|
for (let [fieldName, fieldValue] of Object.entries(this.item.fields)) {
|
let wrapper = form.querySelector(`[data-field="${fieldName}"]`);
|
if (wrapper) {
|
this.populateField(wrapper, fieldName, fieldValue);
|
}
|
}
|
}
|
|
/**
|
* Normalize data to consistent structure
|
* Supports both new format (item object) and legacy format (fields, images)
|
*/
|
normalizeItemData(itemDataOrFields, legacyImages) {
|
// Check if this is the new format (has a fields property) or legacy format
|
if (itemDataOrFields && typeof itemDataOrFields === 'object' && 'fields' in itemDataOrFields) {
|
// New format - already structured
|
return {
|
fields: itemDataOrFields.fields || {},
|
images: itemDataOrFields.images || {},
|
taxonomies: itemDataOrFields.taxonomies || {}
|
};
|
} else {
|
// Legacy format - fields and images passed separately
|
return {
|
fields: itemDataOrFields || {},
|
images: legacyImages || {},
|
taxonomies: {}
|
};
|
}
|
}
|
|
/**
|
* Check if a field is a taxonomy field
|
*/
|
isTaxonomyField(fieldName) {
|
return Object.hasOwn(this.item.taxonomies, fieldName) &&
|
Object.keys(this.item.taxonomies[fieldName]).length > 0;
|
}
|
|
/**
|
* Check if a value references image data
|
*/
|
isImageField(value) {
|
if (!this.item.images || Object.keys(this.item.images).length === 0) {
|
return false;
|
}
|
|
const ids = this.splitIDs(value);
|
return ids.some(id => Object.keys(this.item.images).includes(String(id)));
|
}
|
|
/**
|
* Split comma-separated IDs into array of integers
|
*/
|
splitIDs(value) {
|
return String(value).split(',')
|
.map(v => parseInt(v.trim()))
|
.filter(v => !isNaN(v) && v > 0);
|
}
|
|
/**
|
* Populate a single field with its value
|
*/
|
populateField(fieldWrapper, fieldName, fieldValue, options = {}) {
|
if (!fieldWrapper || fieldValue === undefined || fieldValue === null) {
|
return;
|
}
|
|
// Determine field type from classes or data attributes
|
const fieldType = this.getFieldType(fieldWrapper);
|
|
switch (fieldType) {
|
case 'upload':
|
case 'gallery':
|
case 'image':
|
this.populateUploadField(fieldWrapper, fieldName, fieldValue);
|
break;
|
|
case 'repeater':
|
this.populateRepeaterField(fieldWrapper, fieldName, fieldValue);
|
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;
|
}
|
}
|
|
/**
|
* Populate taxonomy fields with visual display
|
*/
|
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()).filter(v => v);
|
}
|
} 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(',');
|
|
// Trigger TaxonomySelector to update visual display
|
const toggle = fieldWrapper.querySelector('.taxonomy-toggle');
|
if (toggle && toggle.dataset.fieldId && window.jvbTaxonomy) {
|
// Use requestAnimationFrame to ensure DOM is ready
|
requestAnimationFrame(() => {
|
window.jvbTaxonomy.updateFieldFromInput(toggle.dataset.fieldId);
|
});
|
}
|
}
|
}
|
|
/**
|
* Populate upload fields (images, videos, files)
|
*/
|
populateUploadField(fieldWrapper, fieldName, fieldValue) {
|
// Check if this is a timeline gallery
|
const isTimeline = fieldWrapper.dataset.subtype === 'timeline' || fieldName === 'timeline';
|
|
if (isTimeline) {
|
this.populateTimelineGallery(fieldWrapper, fieldName, fieldValue);
|
return;
|
}
|
|
if (!fieldValue) {
|
return;
|
}
|
|
// Handle comma-separated IDs or single ID
|
const itemIds = this.splitIDs(fieldValue);
|
if (itemIds.length === 0) {
|
return;
|
}
|
|
// Update hidden input
|
const hiddenInput = fieldWrapper.querySelector(`input[type="hidden"][name="${fieldName}"]`);
|
if (hiddenInput) {
|
hiddenInput.value = itemIds.join(',');
|
}
|
|
// Update display grid
|
const grid = fieldWrapper.querySelector('.item-grid');
|
const uploadContainer = fieldWrapper.querySelector('.file-upload-container');
|
|
// Clear existing items first
|
if (grid) {
|
window.removeChildren(grid);
|
}
|
|
fieldWrapper.querySelector('.progress')?.remove();
|
|
if (grid) {
|
itemIds.forEach(itemId => {
|
const template = window.getTemplate('uploadItem');
|
if (!template) {
|
console.warn('uploadItem template not found');
|
return;
|
}
|
|
this.populateUploadItem(template, itemId);
|
grid.append(template);
|
});
|
|
// Hide upload container if items exist
|
if (itemIds.length > 0 && uploadContainer) {
|
uploadContainer.hidden = true;
|
}
|
}
|
}
|
|
/**
|
* Populate a single upload item
|
*/
|
populateUploadItem(template, itemId) {
|
let input = template.querySelector('input[name="select-item"]');
|
let label = template.querySelector('label[for="select-item"]');
|
|
template.dataset.id = itemId;
|
input.name = `select-item-${itemId}`;
|
input.id = input.name;
|
label.htmlFor = input.name;
|
|
const img = template.querySelector('img');
|
template.querySelector('video')?.remove();
|
|
// Populate with data from item.images
|
if (this.item.images[itemId]) {
|
const data = this.item.images[itemId];
|
if (img) {
|
img.src = data.medium || data.small || data.large || '';
|
img.alt = data['image-alt-text'] || data.alt || '';
|
}
|
|
// Populate metadata fields
|
const titleInput = template.querySelector('[name="image-title"]');
|
const altInput = template.querySelector('[name="image-alt-text"]');
|
const captionInput = template.querySelector('[name="image-caption"]');
|
|
if (titleInput) titleInput.value = data['image-title'] || data.title || '';
|
if (altInput) altInput.value = data['image-alt-text'] || data.alt || '';
|
if (captionInput) captionInput.value = data['image-caption'] || data.caption || '';
|
} else {
|
console.warn(`No image data found for ID: ${itemId}`);
|
}
|
|
// Remove hint if present
|
template.querySelector('details .upload-meta > .hint')?.remove();
|
}
|
|
/**
|
* Populate timeline gallery - FIXED iteration
|
*/
|
populateTimelineGallery(fieldWrapper, fieldName, fieldValue) {
|
console.log('Populating Timeline Gallery', fieldValue);
|
|
if (!fieldValue || !Array.isArray(fieldValue)) {
|
console.warn('Timeline field value must be an array');
|
return;
|
}
|
|
if (fieldValue.length === 0) {
|
return;
|
}
|
|
const grid = fieldWrapper.querySelector('.item-grid');
|
const uploadContainer = fieldWrapper.querySelector('.file-upload-container');
|
|
// Clear existing items
|
if (grid) {
|
window.removeChildren(grid);
|
}
|
|
fieldWrapper.querySelector('.progress')?.remove();
|
|
if (!grid) return;
|
|
// FIX: Iterate directly over array, not Object.entries
|
for (let itemData of fieldValue) {
|
const template = window.getTemplate('timelineItem');
|
if (!template) {
|
console.warn('timelineItem template not found');
|
continue;
|
}
|
|
const imageId = itemData.post_thumbnail;
|
const postId = itemData.id;
|
|
// Set template data attributes
|
template.dataset.id = imageId;
|
template.dataset.postId = postId;
|
|
// Update selection controls
|
let input = template.querySelector('input[name="select-item"]');
|
let label = template.querySelector('label[for="select-item"]');
|
if (input && label) {
|
input.name = `select-item-${imageId}`;
|
input.id = input.name;
|
label.htmlFor = input.name;
|
}
|
|
// Remove unnecessary elements
|
template.querySelector('video')?.remove();
|
template.querySelector('.select-item span')?.remove();
|
|
// Populate main image
|
const img = template.querySelector('img');
|
const imgData = this.item.images[imageId];
|
if (img && imgData) {
|
img.src = imgData.medium || imgData.small || imgData.large || '';
|
img.title = imgData['image-title'] || '';
|
img.alt = imgData['image-alt-text'] || '';
|
}
|
|
// Populate all fields within the template
|
const fields = template.querySelectorAll('.field');
|
fields.forEach(field => {
|
if (field.classList.contains('group')) {
|
return;
|
}
|
|
const input = field.querySelector('input:not([type="file"]), textarea');
|
if (!input) return;
|
|
const label = field.querySelector('label');
|
const fieldName = input.name.replace('upload_data::', '').replace(/^\[.*?\]/, '');
|
|
// Get value from itemData or imgData
|
let value = itemData[fieldName];
|
if (value === undefined && imgData) {
|
value = imgData[fieldName];
|
}
|
|
// Populate the field using our standard method
|
if (value !== undefined && value !== null) {
|
this.populateField(field, fieldName, value);
|
}
|
|
// Update field identifiers to include post ID
|
const newName = `[${postId}]${fieldName}`;
|
const newId = newName;
|
input.name = newName;
|
input.id = newId;
|
if (label) label.htmlFor = newId;
|
});
|
|
grid.append(template);
|
}
|
|
// Hide upload container if items exist
|
if (fieldValue.length > 0 && uploadContainer) {
|
uploadContainer.hidden = true;
|
}
|
}
|
|
populateTextField(fieldWrapper, fieldName, fieldValue) {
|
const input = fieldWrapper.querySelector(`[name="${fieldName}"], input, textarea`);
|
if (input && input.type !== 'file') {
|
input.value = String(fieldValue || '');
|
|
if (input.dataset.limit) {
|
const counter = fieldWrapper.querySelector('.char-count .current');
|
if (counter) {
|
counter.textContent = input.value.length;
|
}
|
}
|
}
|
}
|
|
populateTextareaField(fieldWrapper, fieldName, fieldValue) {
|
const textarea = fieldWrapper.querySelector(`textarea[name="${fieldName}"]`) ||
|
fieldWrapper.querySelector('textarea:not([data-editor="true"])');
|
|
if (textarea) {
|
textarea.value = String(fieldValue || '');
|
textarea.dispatchEvent(new Event('change', { bubbles: true }));
|
|
if (textarea.dataset.limit) {
|
const counter = fieldWrapper.querySelector('.char-count .current');
|
if (counter) {
|
counter.textContent = textarea.value.length;
|
const limit = parseInt(textarea.dataset.limit, 10);
|
fieldWrapper.classList.toggle('reached', textarea.value.length >= limit);
|
}
|
}
|
}
|
}
|
|
populateEditorField(fieldWrapper, fieldName, fieldValue) {
|
const textarea = fieldWrapper.querySelector(`textarea[name="${fieldName}"][data-editor="true"]`);
|
if (!textarea) return;
|
|
textarea.value = String(fieldValue || '');
|
const editorContainer = fieldWrapper.querySelector('.editor');
|
const content = fieldValue || '<p><br></p>';
|
|
if (editorContainer) {
|
let quillInstance = editorContainer.__quill;
|
|
if (!quillInstance && window.Quill) {
|
for (let instance of (window.Quill.instances || [])) {
|
if (instance.container === editorContainer) {
|
quillInstance = instance;
|
break;
|
}
|
}
|
}
|
|
if (quillInstance) {
|
quillInstance.root.innerHTML = content;
|
editorContainer.__quill = quillInstance;
|
} else {
|
editorContainer.innerHTML = content;
|
}
|
}
|
|
textarea.dispatchEvent(new Event('change', { bubbles: true }));
|
}
|
|
getFieldType(fieldWrapper) {
|
if (fieldWrapper.dataset.fieldType) return fieldWrapper.dataset.fieldType;
|
if (fieldWrapper.dataset.type) return fieldWrapper.dataset.type;
|
|
const typeClasses = [
|
'upload', '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;
|
}
|
}
|
|
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 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 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 user fields (similar to taxonomy)
|
*/
|
populateUserField(fieldWrapper, fieldName, fieldValue) {
|
// Similar logic to taxonomy fields
|
this.populateTaxonomyField(fieldWrapper, fieldName, fieldValue);
|
}
|
|
/**
|
* Populate repeater fields
|
*/
|
populateRepeaterField(fieldWrapper, fieldName, fieldValue) {
|
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 || '');
|
}
|
}
|
}
|
|
// Make available globally
|
window.jvbPopulate = PopulateForm;
|
