From ac444cba221832c012c0435fdc8339fe9f37febb Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Mon, 11 May 2026 18:35:04 +0000
Subject: [PATCH] =Some changes to the CRUD.js editing, timeline post configuration
---
assets/js/concise/PopulateForm.js | 984 ++++++++++++++++++++++-----------------------------------
1 files changed, 388 insertions(+), 596 deletions(-)
diff --git a/assets/js/concise/PopulateForm.js b/assets/js/concise/PopulateForm.js
index 74dda58..be44bfa 100644
--- a/assets/js/concise/PopulateForm.js
+++ b/assets/js/concise/PopulateForm.js
@@ -1,566 +1,339 @@
-/**********************************************
- 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);
+ constructor() {
+ this.templates = window.jvbTemplates;
+ this.formHelper = window.jvbForm;
+
+ this.defineTemplates();
+
+ this.data = null;
+ this.form = null;
+ }
+
+ /**
+ *
+ * @param {HTMLElement} form
+ * @param {object} data
+ * @param {object} data.fields
+ * @param {object} data.images
+ * @param {object} data.taxonomies
+ */
+ populate (form, data = {})
+ {
+ this.data = data;
+ this.mergeRootData();
this.form = form;
- this.options = options;
+ if (!this.formHelper) {
+ this.formHelper = window.jvbForm;
+ }
+ // If still not available, queue for retry
+ if (!this.formHelper) {
+ requestAnimationFrame(() => {
+ this.populate(form, data);
+ });
+ return;
+ }
- // 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);
+ if (!Object.hasOwn(this.data, 'fields') || Object.keys(this.data.fields).length === 0) return;
+
+ for (let [name, value] of Object.entries(this.data.fields)) {
+ let field = form.querySelector(`[data-field="${name}"]`);
+ if (field) {
+ this.populateField(field, name, value);
}
}
}
+ mergeRootData(){
+ let check = ['status','date','modified'];
+ check.forEach(ch =>{
+ this.data.fields[`post_${ch}`] = this.data[ch];
+ });
+ }
+
/**
- * Normalize data to consistent structure
- * Supports both new format (item object) and legacy format (fields, images)
+ *
+ * @param {HTMLElement} field
+ * @param {string} name
+ * @param {mixed} value
*/
- 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 || {}
- };
+ populateField(field, name, value) {
+
+ let type = this.formHelper.getFieldType(field);
+ if (!type || this.isEmptyValue(name) || this.isEmptyValue(value)) return;
+
+ const handlers = {
+ 'repeater': this.populateRepeater.bind(this),
+ 'tag-list': this.populateTagList.bind(this),
+ 'group': this.populateGroup.bind(this),
+ 'location': this.populateLocation.bind(this),
+ 'selector': this.populateTaxonomy.bind(this),
+ 'user': this.populateUser.bind(this),
+ 'upload': this.populateUpload.bind(this),
+ 'gallery': this.populateUpload.bind(this),
+ 'image': this.populateUpload.bind(this),
+ 'set': this.populateMultiValue.bind(this),
+ 'checkbox': this.populateMultiValue.bind(this),
+ 'select': this.populateSingleValue.bind(this),
+ 'radio': this.populateSingleValue.bind(this),
+ 'true-false': this.populateBoolean.bind(this),
+ 'toggle-text': this.populateBoolean.bind(this),
+ 'date': this.populateDate.bind(this),
+ 'time': this.populateDate.bind(this),
+ 'datetime': this.populateDate.bind(this),
+ 'number': this.populateNumber.bind(this),
+ 'textarea': this.populateTextarea.bind(this),
+ 'quantity': this.populateNumber.bind(this),
+ };
+
+ if (Object.hasOwn(handlers, type)) {
+ handlers[type](field, name, value);
} else {
- // Legacy format - fields and images passed separately
- return {
- fields: itemDataOrFields || {},
- images: legacyImages || {},
- taxonomies: {}
- };
+ this.populateText(field, name, value);
}
}
- /**
- * 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;
- }
+ populateRepeater(field, name, value) {
+ if (!value || !Array.isArray(value)) return;
- /**
- * Check if a value references image data
- */
- isImageField(value) {
- if (!this.item.images || Object.keys(this.item.images).length === 0) {
- return false;
- }
+ const container = field.querySelector('.repeater-items');
+ let template = field.querySelector('template')?.className ?? false;
+ if (!container || !template) return;
- const ids = this.splitIDs(value);
- return ids.some(id => Object.keys(this.item.images).includes(String(id)));
- }
+ window.removeChildren(container);
- /**
- * 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);
- }
+ value.forEach((data, index) => {
+ const templateData = { ...data, index, repeater: field };
- /**
- * Populate a single field with its value
- */
- populateField(fieldWrapper, fieldName, fieldValue, options = {}) {
- if (!fieldWrapper || fieldValue === undefined || fieldValue === null) {
- return;
- }
+ const row = this.templates.create(template, templateData);
+ if (!row) return;
- // Determine field type from classes or data attributes
- const fieldType = this.getFieldType(fieldWrapper);
+ container.append(row);
- 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);
+ const formConfig = this.formHelper.getForm(row);
+ if (formConfig) {
+ this.formHelper.initializeFields(row, formConfig);
}
- } else if (fieldValue) {
- termIds = [String(fieldValue)];
- }
- if (termIds.length === 0) {
- return;
- }
+ for (let [fieldName, fieldValue] of Object.entries(data)) {
+ let subField = row.querySelector(`[data-field="${fieldName}"]`);
+ if (subField) {
+ this.populateField(subField, fieldName, fieldValue);
+ }
+ }
+ });
+ }
+ populateTagList(field, name, value) {
+ if (!value || !Array.isArray(value)) return;
- // Update hidden input
- const hiddenInput = fieldWrapper.querySelector(`input[type="hidden"][name="${fieldName}"]`);
+ const container = field.querySelector('.tag-items');
+ let template = field.querySelector('template')?.className ?? false;
+ if (!container || !template) return;
+
+ window.removeChildren(container);
+
+ value.forEach((data, index) => {
+ const row = this.templates.create(template, {
+ label: this.getTagLabel(data, field.dataset.tagFormat ?? 'first_field'),
+ fieldName: name,
+ ...data
+ });
+ if (!row) return;
+
+ // Set hidden input values directly
+ row.querySelectorAll('input[type="hidden"]').forEach(input => {
+ const key = input.dataset.field;
+ if (key && data[key] !== undefined) {
+ input.value = data[key];
+ }
+ });
+
+ container.append(row);
+ });
+ }
+ /**
+ * Build tag label from data - mirrors addTagListItem logic
+ */
+ getTagLabel(data, format) {
+ const values = Object.values(data).filter(v => !this.isEmptyValue(v));
+ switch (format) {
+ case 'first_field':
+ return values[0] ?? 'New Item';
+ case 'all_fields':
+ return values.join(', ') || 'New Item';
+ default:
+ if (format.includes('{')) {
+ let label = format;
+ for (const [key, value] of Object.entries(data)) {
+ label = label.replace(`{${key}}`, value);
+ }
+ return label;
+ }
+ return data[format] ?? values[0] ?? 'New Item';
+ }
+ }
+ populateGroup(field, name, value) {
+ if (!value || typeof value !== 'object') return;
+
+ for (let [subName, subValue] of Object.entries(value)) {
+ let subField = field.querySelector(`[data-field="${subName}"]`);
+ if (subField) {
+ this.populateField(subField, subName, subValue);
+ }
+ }
+ }
+ populateLocation(field, name, value) {
+ const subFields = ['address', 'lat', 'lng', 'street', 'city', 'province', 'postal_code', 'country'];
+ subFields.forEach(subField => {
+ if (Object.hasOwn(value, subField)) {
+ let input = field.querySelector(`[data-location-field="${subField}"]`);
+ if (input) input.value = String(value[subField]||'');
+ }
+ });
+ }
+ populateTaxonomy(field, name, value) {
+ let termIds = this.splitIDs(value);
+ if (termIds.length === 0) return;
+
+ const hiddenInput = field.querySelector(`input[type="hidden"][name="${name}"]`);
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
+ if (window.jvbSelector) {
requestAnimationFrame(() => {
- window.jvbTaxonomy.updateFieldFromInput(toggle.dataset.fieldId);
+ window.jvbSelector.updateFieldFromInput(hiddenInput);
});
}
}
}
-
- /**
- * 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);
+ populateUser(field, name, value) {
+ this.populateTaxonomy(field, name, value);
+ }
+ populateUpload(field, name, value) {
+ if (field.dataset.subtype && field.dataset.subtype === 'timeline') {
+ this.populateTimelineGallery(field,name,value);
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 (this.isEmptyValue(value)) return;
+ const ids = this.splitIDs(value);
+ if (ids.length === 0) return;
+ const hiddenInput = field.querySelector(`input[type="hidden"]`);
if (hiddenInput) {
- hiddenInput.value = itemIds.join(',');
+ hiddenInput.value = ids.join(',');
}
- // Update display grid
- const grid = fieldWrapper.querySelector('.item-grid');
- const uploadContainer = fieldWrapper.querySelector('.file-upload-container');
+ const grid = field.querySelector('.item-grid');
- // Clear existing items first
+ field.querySelector('.progress')?.remove();
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);
+ ids.forEach(id => {
+ let data = this.data.images[id]??{};
+ data.field = {
+ config: {
+ showMeta: true
+ }
+ };
+ data.id = id;
+ grid.append(this.templates.create('uploadItem', data));
});
-
- // Hide upload container if items exist
- if (itemIds.length > 0 && uploadContainer) {
- uploadContainer.hidden = true;
- }
}
+
+ this.populateUploadMeta(field, name, value);
}
+ populateUploadMeta(element, name, id) {
+ // Find the image_data field group
+ const imageDataField = element.querySelector('[data-field="image_data"]');
+ if (!imageDataField) return;
+ let data = this.data.images[id]??false;
+ if (!data) return;
- /**
- * Populate a single upload item
- */
- populateUploadItem(template, itemId) {
- let input = template.querySelector('input[name="select-item"]');
- let label = template.querySelector('label[for="select-item"]');
+ // Set upload ID or attachment ID
+ imageDataField.dataset.attachmentId = data.id;
+ imageDataField.setAttribute('data-ignore', '');
- template.dataset.id = itemId;
- input.name = `select-item-${itemId}`;
- input.id = input.name;
- label.htmlFor = input.name;
+ // Populate the metadata fields
+ const meta = [
+ 'image-title',
+ 'image-alt-text',
+ 'image-caption'
+ ];
- 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;
+ for (const m of meta) {
+ const input = imageDataField.querySelector(`[data-field="${m}"] input, [data-field="${m}"] textarea`);
+ if (input && data[m]!=='') {
+ input.value = window.decodeHTMLEntities(data[m]);
}
}
}
- }
+ populateTimelineGallery(field,name, value) {
+ if (!value || !Array.isArray(value) || value.length === 0) return;
- populateTextareaField(fieldWrapper, fieldName, fieldValue) {
- const textarea = fieldWrapper.querySelector(`textarea[name="${fieldName}"]`) ||
- fieldWrapper.querySelector('textarea:not([data-editor="true"])');
+ let grid = field.querySelector('.item-grid');
- if (textarea) {
- textarea.value = String(fieldValue || '');
- textarea.dispatchEvent(new Event('change', { bubbles: true }));
+ if (grid) {
+ window.removeChildren(grid);
- 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;
+ field.querySelector('.progress')?.remove();
+ for (let data of value) {
+ let point = this.templates.create('timelineItem', data);
+ if (point) {
+ grid.append(point);
}
}
}
-
- if (quillInstance) {
- quillInstance.root.innerHTML = content;
- editorContainer.__quill = quillInstance;
- } else {
- editorContainer.innerHTML = content;
+ }
+ populateMultiValue(field, name, value) {
+ if (typeof value === 'string') {
+ try {
+ value = JSON.parse(value);
+ } catch (e) {
+ value = value.split(',').map(v => v.trim());
}
}
-
- 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;
+ if (!Array.isArray(value)) {
+ value = [String(value)];
+ }
+ let select = field.querySelector(`select[name="${name}"]`);
+ if (select && select.multiple) {
+ for (let option of select.options) {
+ option.selected = value.includes(option.value);
}
+ return;
}
+ field.querySelectorAll(`input[type="checkbox"][name="${name}[]"], input[type="checkbox"][name="${name}"]`).forEach(checkbox => {
+ checkbox.checked = value.includes(checkbox.value);
+ });
- 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';
}
+ populateSingleValue(field, name, value) {
+ value = String(value || '');
- /**
- * 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}"]`);
+ let select = field.querySelector(`select[name="${name}"]`);
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;
+ let input = field.querySelector(`input[type="radio"][value="${value}"], input[type="checkbox"][value="${value}"]`)
+ || field.querySelector(`[name="${name}"][value="${value}"]`);
+ if (input) {
+ input.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());
- }
+ populateBoolean(field, name, value) {
+ const input = field.querySelector(`[name="${name}"], input[type="checkbox"]`);
+ if (input) {
+ input.checked = Boolean(value);
}
-
- 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;
+ populateDate(field, name, value) {
+ const input = field.querySelector(`[name="${name}"], input`);
+ if (input) {
+ if (typeof value === 'object' && Object.hasOwn(value, 'date')) {
+ value = value.date;
}
-
- // Convert to appropriate format for input type
try {
- const date = new Date(dateValue);
+ const date = new Date(value);
if (!isNaN(date.getTime())) {
switch (input.type) {
case 'date':
@@ -573,131 +346,150 @@
input.value = date.toISOString().slice(0, 16);
break;
default:
- input.value = dateValue;
+ input.value = value;
}
}
} catch (e) {
- input.value = dateValue;
+ input.value = value;
}
}
}
-
- /**
- * Populate location fields
- */
- populateLocationField(fieldWrapper, fieldName, fieldValue) {
- if (!fieldValue || typeof fieldValue !== 'object') {
- return;
+ populateNumber(field, name, value) {
+ const input = field.querySelector(`[name="${name}"], input[type="number"]`);
+ if (input) {
+ input.value = Number(value) || 0;
}
+ }
+ populateTextarea(field, name, value) {
+ let textarea = field.querySelector('textarea[data-editor], textarea');
+ this.populateText(field, name, value);
- // 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] || '');
- }
+ if (textarea?.dataset.editor) {
+ const editor = field.querySelector('.ql-editor');
+ if (editor) {
+ editor.innerHTML = value;
+ } else {
+ textarea.dispatchEvent(new Event('change', { bubbles: true }));
}
+ }
+ }
+ populateText(field, name, value) {
+ let input = field.querySelector(`[name="${name}"]`)
+ || field.querySelector('textarea[data-editor]')
+ || field.querySelector('input:not([type="hidden"]):not([type="file"]), textarea, select');
+ if (input) {
+ input.value = window.decodeHTMLEntities(value??'');
+ }
+ }
+ /********************************************************************
+ UTILITY
+ ********************************************************************/
+ getFormHelper() {
+ window.requestAnimationFrame(()=> {
+ this.formHelper = window.jvbForm;
});
}
-
- /**
- * Populate user fields (similar to taxonomy)
- */
- populateUserField(fieldWrapper, fieldName, fieldValue) {
- // Similar logic to taxonomy fields
- this.populateTaxonomyField(fieldWrapper, fieldName, fieldValue);
+ splitIDs(value) {
+ return String(value).split(',')
+ .map(v=>parseInt(v.trim()))
+ .filter(v=>!isNaN(v) && v>0);
+ }
+ isEmptyValue(value) {
+ if (value === null || value === undefined || value === '') return true;
+ if (Array.isArray(value) && value.length === 0) return true;
+ return typeof value === 'object' && Object.keys(value).length === 0;
}
- /**
- * Populate repeater fields
- */
- populateRepeaterField(fieldWrapper, fieldName, fieldValue) {
- if (!fieldValue || !Array.isArray(fieldValue)) {
- return;
- }
+ defineTemplates() {
+ const T = this.templates;
+ const p = this;
- const container = fieldWrapper.querySelector('.repeater-items');
- const template = fieldWrapper.querySelector('template');
+ T.define('timelineItem', {
+ refs: {
+ select: '[name="select-item"]',
+ video: 'video',
+ file: '.select-item span',
+ img: 'img',
+ details: '[data-field="image_data"] details',
+ imgAlt: '[data-field="image-alt-text"]',
+ imgTitle: '[data-field="image-title"]',
+ imgDesc: '[data-field="image-caption"]',
+ },
+ manyRefs: {
+ fields: '.field',
+ },
+ setup({el, refs, manyRefs, data}) {
+ el.dataset.itemId = data.id;
- if (!container || !template) {
- console.warn(`Repeater field ${fieldName}: missing container or template`);
- return;
- }
+ if (refs.select) {
+ let wrapper = refs.select.closest('.preview');
+ window.prefixInput(refs.select, `${data.id}-`, wrapper);
+ }
+ if (refs.video) refs.video.remove();
+ if (refs.file) refs.file.remove();
- // 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;
+ let imgData = p.data.images[data['post_thumbnail']]??false;
+ if (refs.img && imgData) {
+ refs.img.src = imgData.medium || imgData.small || imgData.large || '';
+ refs.img.title = imgData.large.split("/").pop()??'';
+ refs.img.alt = imgData['image-alt-text']??'';
}
- // Populate field value
- if (rowData[originalName] !== undefined) {
- this.populateRepeaterFieldValue(field, originalName, rowData[originalName]);
- }
- });
- container.appendChild(row);
+ if (refs.details) {
+ let imgData = p.data.images[data.post_thumbnail];
+
+ refs.details.setAttribute('data-ignore', '');
+ refs.details.dataset.attachmentId = data.post_thumbnail;
+
+ let imgAlt = refs.imgAlt.querySelector('input');
+ let imgTitle = refs.imgTitle.querySelector('input');
+ let imgDesc = refs.imgDesc.querySelector('textarea');
+ window.prefixInput(imgAlt, `[${data.post_thumbnail}]`, refs.imgAlt, false, true);
+ window.prefixInput(imgTitle, `[${data.post_thumbnail}]`, refs.imgTitle, false, true);
+ window.prefixInput(imgDesc, `[${data.post_thumbnail}]`, refs.imgDesc, false, true);
+
+ if (Object.hasOwn(imgData, 'image-alt-text') && refs.imgAlt) {
+ imgAlt.value = window.decodeHTMLEntities(imgData['image-alt-text']);
+ }
+ if ((Object.hasOwn(imgData, 'image-title') || Object.hasOwn(data, 'file')) && refs.imgTitle) {
+ imgTitle.value = window.decodeHTMLEntities(imgData['image-title']||data.file.name);
+ }
+ if (Object.hasOwn(imgData, 'image-caption') && refs.imgDesc) {
+ imgDesc.value = window.decodeHTMLEntities(imgData['image-caption']);
+ }
+ }
+
+ if (manyRefs.fields) {
+ for (let field of manyRefs.fields) {
+ if (field.closest('[data-ignore]')) continue;
+ if (field.dataset.fieldType === 'group') continue;
+ if (field.dataset.field === 'post_thumbnail') {
+ field.remove();
+ continue;
+ }
+ let name = field.dataset.field;
+
+ const input = field.querySelector('input:not([type="file"]), textarea, select');
+ if (input) window.prefixInput(input, `[${data.id}]`, field, false, true);
+
+ let value = data[name] ?? '';
+ if (!p.isEmptyValue(value)) {
+ p.populateField(field, name, value);
+ }
+ }
+
+ }
+ }
});
}
-
- /**
- * 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;
+document.addEventListener('DOMContentLoaded', function() {
+ window.auth.subscribe(event => {
+ if (event === 'auth-loaded') {
+ window.jvbPopulate = new PopulateForm();
+ }
+ });
+});
--
Gitblit v1.10.0