From c2a5476997befeaafce461693f4a363c13766df4 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 04 Jan 2026 18:53:21 +0000
Subject: [PATCH] Merge branch 'main' of https://github.com/jakevdwerf/jvb
---
assets/js/concise/PopulateForm.js | 782 ++++++++++++++++++++-----------------------------------
1 files changed, 291 insertions(+), 491 deletions(-)
diff --git a/assets/js/concise/PopulateForm.js b/assets/js/concise/PopulateForm.js
index f9335db..98fcc33 100644
--- a/assets/js/concise/PopulateForm.js
+++ b/assets/js/concise/PopulateForm.js
@@ -1,25 +1,78 @@
/**********************************************
PopulateForm extracts saved data and populates the form field accordingly
-**********************************************/
+ **********************************************/
class PopulateForm {
- constructor(form, fieldData = {}, imageData = {}, options = {}) {
- for (let [fieldName, fieldValue] of Object.entries(fieldData)) {
+ 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, imageData, options);
+ this.populateField(wrapper, fieldName, fieldValue);
}
}
}
/**
- * 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
+ * Normalize data to consistent structure
+ * Supports both new format (item object) and legacy format (fields, images)
*/
- populateField(fieldWrapper, fieldName, fieldValue, imagesData = {}, options = {}) {
+ 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;
}
@@ -31,11 +84,11 @@
case 'upload':
case 'gallery':
case 'image':
- this.populateUploadField(fieldWrapper, fieldName, fieldValue, imagesData);
+ this.populateUploadField(fieldWrapper, fieldName, fieldValue);
break;
case 'repeater':
- this.populateRepeaterField(fieldWrapper, fieldName, fieldValue, options);
+ this.populateRepeaterField(fieldWrapper, fieldName, fieldValue);
break;
case 'taxonomy':
@@ -73,6 +126,7 @@
case 'number':
this.populateNumberField(fieldWrapper, fieldName, fieldValue);
break;
+
case 'textarea':
if (fieldWrapper.querySelector('.editor-container')) {
this.populateEditorField(fieldWrapper, fieldName, fieldValue);
@@ -93,294 +147,7 @@
}
/**
- * Determine field type from wrapper element
- * @param {HTMLElement} fieldWrapper - Field wrapper element
- * @returns {string} Field type
- */
- getFieldType(fieldWrapper) {
- // Check dataset first (most reliable for our use case)
- if (fieldWrapper.dataset.fieldType) {
- return fieldWrapper.dataset.fieldType;
- }
-
- if (fieldWrapper.dataset.type) {
- return fieldWrapper.dataset.type;
- }
-
- // Check for specific field classes
- 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;
- }
- }
-
- // 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`);
- // Skip file inputs - browsers don't allow setting their values programmatically
- if (input && input.type === 'file') {
- return;
- }
- 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) {
- 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
+ * Populate taxonomy fields with visual display
*/
populateTaxonomyField(fieldWrapper, fieldName, fieldValue) {
// Handle different value formats
@@ -391,10 +158,9 @@
} else if (typeof fieldValue === 'string') {
try {
const parsed = JSON.parse(fieldValue);
- termIds = Array.isArray(parsed) ?
- parsed.map(v => String(v)) : [String(parsed)];
+ termIds = Array.isArray(parsed) ? parsed.map(v => String(v)) : [String(parsed)];
} catch (e) {
- termIds = fieldValue.split(',').map(v => v.trim());
+ termIds = fieldValue.split(',').map(v => v.trim()).filter(v => v);
}
} else if (fieldValue) {
termIds = [String(fieldValue)];
@@ -412,28 +178,23 @@
// Trigger TaxonomySelector to update visual display
const toggle = fieldWrapper.querySelector('.taxonomy-toggle');
if (toggle && toggle.dataset.fieldId && window.jvbTaxonomy) {
- window.jvbTaxonomy.updateFieldFromInput(toggle.dataset.fieldId);
+ // Use requestAnimationFrame to ensure DOM is ready
+ requestAnimationFrame(() => {
+ window.jvbTaxonomy.updateFieldFromInput(toggle.dataset.fieldId);
+ });
}
}
}
/**
- * Populate user fields (similar to taxonomy)
- */
- populateUserField(fieldWrapper, fieldName, fieldValue) {
- // Similar logic to taxonomy fields
- this.populateTaxonomyField(fieldWrapper, fieldName, fieldValue);
- }
-
- /**
* Populate upload fields (images, videos, files)
*/
- populateUploadField(fieldWrapper, fieldName, fieldValue, imagesData = {}) {
+ 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, imagesData);
+ this.populateTimelineGallery(fieldWrapper, fieldName, fieldValue);
return;
}
@@ -442,7 +203,7 @@
}
// Handle comma-separated IDs or single ID
- const itemIds = String(fieldValue).split(',').filter(id => parseInt(id.trim()));
+ const itemIds = this.splitIDs(fieldValue);
if (itemIds.length === 0) {
return;
}
@@ -467,47 +228,12 @@
if (grid) {
itemIds.forEach(itemId => {
const template = window.getTemplate('uploadItem');
-
if (!template) {
console.warn('uploadItem template not found');
return;
}
- let input = template.querySelector('input[name="select-item"]');
- let label = template.querySelector('label[for="select-item"]');
-
- template.dataset.id = itemId;
- input.name = input.name + `-${itemId}`;
- input.id = input.name;
- label.htmlFor = input.name;
-
- const img = template.querySelector('img');
- template.querySelector('video')?.remove();
- const details = template.querySelector('details');
-
- // Populate with data
- if (imagesData[itemId]) {
- const data = imagesData[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, 'Available data:', Object.keys(imagesData));
- }
-
- // Remove hint if present
- details?.querySelector('.upload-meta > .hint')?.remove();
-
+ this.populateUploadItem(template, itemId);
grid.append(template);
});
@@ -518,175 +244,249 @@
}
}
- populateTimelineGallery(fieldWrapper, fieldName, fieldValue, imagesData) {
- console.log('populating Timeline Gallery');
- if (!fieldValue || typeof fieldValue !== 'object') {
+ /**
+ * 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;
}
- const imageIds = Object.values(fieldValue);
- if (imageIds.length === 0) {
+ if (fieldValue.length === 0) {
return;
}
- // Update display
const grid = fieldWrapper.querySelector('.item-grid');
const uploadContainer = fieldWrapper.querySelector('.file-upload-container');
- fieldWrapper.querySelector('.progress')?.remove();
+ // Clear existing items
if (grid) {
window.removeChildren(grid);
- console.log(imageIds);
- for (let data of Object.entries(fieldValue)) {
- let imageId = data['post_thumbnail'];
- const template = window.getTemplate('timelineItem');
- if (!template) return;
+ }
- const img = template.querySelector('img');
+ fieldWrapper.querySelector('.progress')?.remove();
- // Remove unnecessary elements
- template.querySelector('video')?.remove();
- template.querySelector('.select-item span')?.remove();
+ if (!grid) return;
- let input = template.querySelector('input[name="select-item"]');
- let label = template.querySelector('label[for="select-item"]');
- template.dataset.id = imageId;
- template.dataset.postId = data.id;
- input.name = input.name + `-${imageId}`;
+ // 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;
+ }
- const imgData = imagesData[imageId];
+ // Remove unnecessary elements
+ template.querySelector('video')?.remove();
+ template.querySelector('.select-item span')?.remove();
- // Set image source
- if (img && imgData) {
- img.src = imgData.medium || imgData.small || imgData.large || '';
- img.title = imgData['image-title'];
+ // 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;
}
- // Merge data
- const mergedData = { ...data, ...imgData };
+ const input = field.querySelector('input:not([type="file"]), textarea');
+ if (!input) return;
- // Populate fields
- const fields = template.querySelectorAll('.field');
- fields.forEach(field => {
- if (field.classList.contains('group')) {
- return;
- }
+ const label = field.querySelector('label');
+ const fieldName = input.name.replace('upload_data::', '').replace(/^\[.*?\]/, '');
- const input = field.querySelector('input:not([type="file"]), textarea');
- if (!input) return;
-
- const label = field.querySelector('label');
- const name = input.name.replace('upload_data::', '');
- const value = mergedData[name];
-
- // Populate the field
- this.populateField(field, name, value, imagesData);
-
- // Update field identifiers
- const id = data.id;
- const newName = `[${id}]${name}`;
- input.name = newName;
- input.id = newName;
- if (label) label.htmlFor = newName;
- });
-
- grid.append(template);
- }
-
- // Hide upload container if items exist
- if (imageIds.length > 0 && uploadContainer) {
- uploadContainer.hidden = true;
- }
- }
- }
-
- /**
- * 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;
+ // Get value from itemData or imgData
+ let value = itemData[fieldName];
+ if (value === undefined && imgData) {
+ value = imgData[fieldName];
}
- // Populate field value
- if (rowData[originalName] !== undefined) {
- this.populateRepeaterFieldValue(field, originalName, rowData[originalName]);
+ // 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;
});
- container.appendChild(row);
- });
- }
+ grid.append(template);
+ }
- /**
- * 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 || '');
+ // Hide upload container if items exist
+ if (fieldValue.length > 0 && uploadContainer) {
+ uploadContainer.hidden = true;
}
}
+
+ // ... rest of the methods stay the same (populateTextField, populateTextareaField, etc.)
+ // I'll include the key ones that might need updating
+
+ 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';
+ }
+
+ // Include all other existing methods...
}
+// Make available globally
window.jvbPopulate = PopulateForm;
--
Gitblit v1.10.0