| | |
| | | }, |
| | | tagList: { |
| | | tagList: '.field.tag-list', //querySelectorAll |
| | | input: '.tag-input-row', |
| | | input: '.row', |
| | | add: '.add-tag', |
| | | remove: '.remove-tag', |
| | | label: '.tag-label', |
| | |
| | | if (e.target.closest('[data-ignore]') || this.isRestoring) return; |
| | | |
| | | let field = this.getField(e.target); |
| | | |
| | | //Dependencies |
| | | if (this.dependencies.has(field.dataset.field)) { |
| | | let dependency = this.dependencies.get(field.dataset.field); |
| | |
| | | }); |
| | | } |
| | | |
| | | if (Object.hasOwn(field.dataset, 'repeater-id') || Object.hasOwn(field.dataset,'tag-list-id')) { |
| | | this.updateCollectionField(field); |
| | | return; |
| | | } |
| | | |
| | | let form = this.getForm(e.target); |
| | | this.updateItem(field.dataset.field, this.getFieldValue(e.target), form); |
| | | } |
| | |
| | | |
| | | if (this.subscribers.size > 0) { |
| | | e.preventDefault(); |
| | | console.log('Cancelling scheduled backup and manually backing up'); |
| | | |
| | | |
| | | |
| | | if (form.options.cache) { |
| | | this.cancelBackup(); |
| | |
| | | this.removeQuantityListeners(item.element); |
| | | break; |
| | | } |
| | | }); |
| | | |
| | | if (check.has(item.id)) { |
| | | check.delete(item.id); |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | |
| | | |
| | |
| | | } |
| | | } |
| | | checkForRepeaters(form) { |
| | | |
| | | if (!form.querySelector(this.selectors.repeater.repeater)) return; |
| | | |
| | | form.querySelectorAll(this.selectors.repeater.repeater).forEach(repeater => { |
| | |
| | | sortable: false, |
| | | }; |
| | | |
| | | if (!config.ui.addButton) return; |
| | | if (!config.ui.add) return; |
| | | |
| | | let template = repeater.querySelector('template'); |
| | | this.templates.define( |
| | |
| | | setup({el, refs, manyRefs, data}) { |
| | | let index = config.ui.items?.children?.length??0; |
| | | el.dataset.index = index; |
| | | |
| | | |
| | | manyRefs.inputs?.forEach(input => { |
| | | let wrapper = el.closest('[data-field]'); |
| | | window.prefixInput(input, `${el.dataset.fieldName}:${index}:`, wrapper); |
| | | window.prefixInput(input, `${data.repeater.dataset.fieldName}:${index}:`, el); |
| | | }); |
| | | } |
| | | }, |
| | |
| | | } |
| | | handleRepeaterClick(e) { |
| | | if (e.target.matches(this.selectors.repeater.add)) { |
| | | console.log('Add Repeater Row'); |
| | | this.addRepeaterRow(e.target.closest('[data-repeater-id]')); |
| | | } else if (e.target.matches(this.selectors.repeater.remove)) { |
| | | this.removeRepeaterRow(e.target); |
| | | console.log('Remove Repeater Row'); |
| | | this.removeRepeaterRow(e.target.closest('[data-index]')); |
| | | } |
| | | } |
| | | addRepeaterRow(repeater) { |
| | | repeater.append(this.templates.create(repeater.dataset.repeaterId)); |
| | | let data = {}; |
| | | data.repeater = repeater; |
| | | repeater.append(this.templates.create(repeater.dataset.repeaterId, data)); |
| | | this.initializeFields(repeater, this.getField(repeater).config??{}); |
| | | this.a11y.announce('Row added'); |
| | | } |
| | | removeRepeaterRow(row) { |
| | |
| | | config.ui.items.append(newItem); |
| | | config.ui.inputs[0]?.focus(); |
| | | |
| | | this.updateCollectionField(tagList); |
| | | |
| | | this.a11y.announce('Item added'); |
| | | } |
| | | removeTagListItem(tag) { |
| | |
| | | ); |
| | | }); |
| | | }); |
| | | |
| | | |
| | | this.updateCollectionField(container); |
| | | } |
| | | |
| | | /** |
| | | * Update the entire repeater/tagList field data |
| | | * Call this whenever rows are added, removed, or reordered |
| | | */ |
| | | updateCollectionField(element) { |
| | | const field = element.closest('[data-field]'); |
| | | if (!field) return; |
| | | |
| | | const fieldType = field.dataset.fieldType; |
| | | if (!['repeater', 'tag-list'].includes(fieldType)) return; |
| | | |
| | | const form = this.getForm(element); |
| | | if (!form) return; |
| | | |
| | | // Get all current data for the collection |
| | | const value = this.getFieldValue(field.querySelector('input, select, textarea')); |
| | | this.updateItem(field.dataset.field, value, form); |
| | | } |
| | | /********************************************************************** |
| | | VALIDATION |