/**
|
* TaxonomySelector - Streamlined version
|
* Manages taxonomy selection fields with DataStore integration
|
*/
|
class TaxonomySelector {
|
constructor() {
|
this.a11y = window.jvbA11y;
|
this.error = window.jvbError;
|
this.index = -1;
|
|
this.isInitializing = true;
|
this.taxonomiesToFetch = new Set();
|
this.subscribers = new Set();
|
|
// Register DataStore
|
const store = window.jvbStore.register('taxonomies', {
|
storeName: 'terms',
|
keyPath: 'id',
|
showLoading: false,
|
indexes: [
|
{name: 'taxonomy', keyPath: 'taxonomy'},
|
{name: 'parent', keyPath: 'parent'},
|
{name: 'slug', keyPath: 'slug', unique: true},
|
{name: 'count', keyPath: 'count'},
|
],
|
endpoint: 'terms',
|
TTL: 2 * 60 * 1000,
|
filters: {
|
taxonomy: '',
|
page: 1,
|
search: '',
|
parent: 0
|
},
|
required: 'taxonomy',
|
delayFetch: true,
|
});
|
this.store = store.terms;
|
|
// Field management
|
this.fields = new Map();
|
this.selectedTerms = new Map(); // Current modal selection
|
|
// Modal context
|
this.activeField = null;
|
this.currentConfig = null;
|
this.disabled = false;
|
|
// Search contexts
|
this.searchContexts = new Map();
|
|
this.init();
|
}
|
|
init() {
|
this.initModal();
|
this.scanExistingFields();
|
this.initGlobalListeners();
|
|
// Initialize creator if needed
|
if (this.needsCreator() && window.jvbTaxCreator) {
|
this.creator = new window.jvbTaxCreator(this);
|
}
|
|
this.store.subscribe(this.handleStoreEvent.bind(this));
|
|
this.isInitializing = false;
|
this.batchFetchTaxonomies();
|
}
|
|
needsCreator() {
|
return Array.from(this.fields.values()).some(field =>
|
field.canCreate || field.hasAutocomplete
|
);
|
}
|
|
/***********************************************************************
|
* DATASTORE EVENT HANDLING
|
***********************************************************************/
|
|
handleStoreEvent(event, data) {
|
const handlers = {
|
'data-loaded': () => this.handleDataLoaded(data),
|
'filters-changed': () => this.handleFiltersChanged(data),
|
'fetch-error': () => this.handleFetchError(data.error),
|
};
|
|
handlers[event]?.();
|
}
|
|
handleDataLoaded(data) {
|
const taxonomy = this.store.filters.taxonomy;
|
|
// Update field states for affected taxonomies
|
if (taxonomy) {
|
const taxonomies = taxonomy.includes(',')
|
? taxonomy.split(',').map(t => t.trim())
|
: [taxonomy];
|
|
taxonomies.forEach(tax => this.updateFieldsForTaxonomy(tax));
|
}
|
|
// Initialize displays on first load
|
if (this.isInitializing) {
|
this.fields.forEach((config, fieldId) => {
|
if (config.selectedTerms.size > 0) {
|
this.initFieldDisplay(fieldId);
|
}
|
});
|
}
|
|
// Render based on context
|
this.renderSearchResults(data);
|
}
|
|
renderSearchResults(data) {
|
const context = this.getActiveSearchContext();
|
|
if (context === 'modal') {
|
this.renderModalResults(data);
|
} else if (context === 'autocomplete') {
|
this.renderAutocompleteResults(data);
|
}
|
}
|
|
getActiveSearchContext() {
|
if (this.modal?.open) return 'modal';
|
if (this.activeField && this.searchContexts.has(this.activeField)) {
|
return this.searchContexts.get(this.activeField);
|
}
|
return null;
|
}
|
|
renderModalResults(data) {
|
this.hideLoading();
|
const terms = this.store.getFiltered();
|
const response = this.store.lastResponse?.page || {};
|
const isSearch = data.filters?.search?.length > 0;
|
const append = response.page > 1;
|
|
this.notify('terms-loaded', { terms, filters: data.filters });
|
|
if (terms.length === 0) {
|
if (!append) {
|
this.showEmptyState(isSearch ? 'No results found.' : 'No items available.');
|
}
|
this.observer.unobserve(this.ui.sentinel);
|
} else {
|
this.renderTerms(terms, append, isSearch);
|
|
if (response.has_more) {
|
this.observer.observe(this.ui.sentinel);
|
} else {
|
this.observer.unobserve(this.ui.sentinel);
|
}
|
}
|
|
this.a11y?.announce(terms.length, append);
|
}
|
|
renderAutocompleteResults(data) {
|
const field = this.fields.get(this.activeField);
|
if (!field?.autocompleteDropdown) return;
|
|
const terms = this.store.getFiltered();
|
const query = data.filters?.search || '';
|
|
this.showAutocompleteResults(field, terms, query);
|
this.searchContexts.delete(this.activeField);
|
}
|
|
handleFiltersChanged(data) {
|
if (this.modal?.open) {
|
this.showLoading();
|
}
|
}
|
|
handleFetchError(error) {
|
this.hideLoading();
|
|
const context = this.getActiveSearchContext();
|
|
if (context === 'autocomplete') {
|
this.showAutocompleteError(this.activeField);
|
this.searchContexts.delete(this.activeField);
|
} else {
|
this.handleError(error, 'fetch');
|
}
|
}
|
|
/***********************************************************************
|
* FIELD MANAGEMENT
|
***********************************************************************/
|
|
updateFieldsForTaxonomy(taxonomy) {
|
this.getFieldsForTaxonomy(taxonomy).forEach(field => {
|
this.updateFieldButtonState(field.id);
|
});
|
}
|
|
updateFieldButtonState(fieldId) {
|
const field = this.fields.get(fieldId);
|
if (!field) return;
|
|
const hasTerms = Array.from(this.store.data.values())
|
.some(term => term.taxonomy === field.taxonomy);
|
|
if (field.toggle) {
|
field.toggle.disabled = !hasTerms && !field.canCreate;
|
field.toggle.title = !hasTerms
|
? `No ${this.getLabel(field.taxonomy, 'single')} available`
|
: `Select ${this.getLabel(field.taxonomy, 'plural')}`;
|
}
|
}
|
|
getFieldsForTaxonomy(taxonomy) {
|
return Array.from(this.fields.values())
|
.filter(field => field.taxonomy === taxonomy);
|
}
|
|
scanExistingFields(container = document.body) {
|
container.querySelectorAll('.field.taxonomy, .field.post').forEach(selector => {
|
try {
|
this.registerField(selector);
|
} catch (error) {
|
this.handleError(error, 'scanExistingFields', selector.dataset.name);
|
}
|
});
|
}
|
|
registerField(field) {
|
const input = field.querySelector('input[type=hidden]');
|
if (!input) return false;
|
|
const fieldId = this.createFieldId(field);
|
field.dataset.fieldId = fieldId;
|
|
const button = field.querySelector('button.taxonomy-toggle');
|
const config = {
|
id: fieldId,
|
input: input,
|
container: field,
|
taxonomy: button.dataset.taxonomy,
|
name: field.dataset.field,
|
maxSelection: parseInt(button.dataset.max) || 0,
|
canSearch: 'search' in button.dataset,
|
hasAutocomplete: 'autocomplete' in button.dataset,
|
autocompleteDropdown: field.querySelector('.autocomplete-dropdown') || null,
|
canCreate: 'creatable' in button.dataset,
|
isRequired: 'required' in button.dataset,
|
selectedTerms: new Set(),
|
toggle: button,
|
selectedContainer: field.querySelector('.selected-items'),
|
};
|
|
// Parse initial values
|
const value = input.value.trim();
|
if (value) {
|
value.split(',')
|
.map(id => parseInt(id.trim()))
|
.filter(id => !isNaN(id))
|
.forEach(id => config.selectedTerms.add(id));
|
}
|
|
this.fields.set(fieldId, config);
|
|
// Queue for batch fetch
|
if (this.isInitializing) {
|
this.taxonomiesToFetch.add(config.taxonomy);
|
}
|
|
// Initialize display
|
if (config.selectedTerms.size > 0) {
|
this.initFieldDisplay(fieldId);
|
}
|
|
return fieldId;
|
}
|
|
createFieldId(field) {
|
this.index++;
|
return 'selector-' + this.index;
|
}
|
|
async initFieldDisplay(fieldId) {
|
const field = this.fields.get(fieldId);
|
if (!field || field.selectedTerms.size === 0) return;
|
|
Array.from(field.selectedTerms).forEach(termId => {
|
const term = this.store.get(termId);
|
if (term) {
|
this.addTermDisplay(termId, term.name, term.path, 'field', fieldId);
|
}
|
});
|
}
|
|
/***********************************************************************
|
* MODAL INITIALIZATION
|
***********************************************************************/
|
|
initModal() {
|
this.modal = document.querySelector('dialog#jvb-selector');
|
if (!this.modal) {
|
console.warn('Taxonomy selector modal not found');
|
return;
|
}
|
|
this.initModalElements();
|
|
this.modalInstance = new window.jvbModal(this.modal, {
|
handleForm: false
|
});
|
|
this.modalInstance.subscribe((event) => {
|
if (event === 'modal-open') this.openModal();
|
if (event === 'modal-close') this.closeModal();
|
});
|
}
|
|
initModalElements() {
|
const selectors = {
|
search: {
|
input: '[type=search]',
|
container: '.search-wrapper'
|
},
|
termsList: '.items-container',
|
termsWrap: '.items-wrap',
|
breadcrumbs: {
|
nav: 'nav.term-navigation',
|
back: '.back-to-parent',
|
},
|
loading: {
|
loading: '.loading',
|
text: '.loading span'
|
},
|
selectedTerms: '.selected-items',
|
sentinel: '.scroll-sentinel',
|
modal: {
|
title: '#modal-title',
|
},
|
create: {
|
details: '.create-new-term',
|
summary: '.create-new-term summary',
|
label: {
|
name: '[for=term_name]',
|
parent: '[for=select_parent]'
|
}
|
}
|
};
|
|
this.ui = window.uiFromSelectors(selectors);
|
|
// Initialize infinite scroll observer
|
this.observer = new IntersectionObserver((entries) => {
|
entries.forEach(entry => {
|
if (entry.isIntersecting) {
|
this.loadMoreTerms();
|
}
|
});
|
}, {
|
root: this.ui.termsWrap,
|
threshold: 0.5
|
});
|
}
|
|
/***********************************************************************
|
* GLOBAL EVENT LISTENERS
|
***********************************************************************/
|
|
initGlobalListeners() {
|
document.addEventListener('click', this.handleClick.bind(this));
|
document.addEventListener('change', this.handleChange.bind(this));
|
document.addEventListener('input', this.handleInput.bind(this));
|
document.addEventListener('focus', this.handleFocus.bind(this), true);
|
document.addEventListener('blur', this.handleBlur.bind(this), true);
|
}
|
|
handleClick(e) {
|
// Toggle button
|
if (window.targetCheck(e, '.taxonomy-toggle')) {
|
e.preventDefault();
|
const fieldId = this.getFieldId(e.target);
|
const field = this.fields.get(fieldId);
|
if (field) this.setActiveField(fieldId, true);
|
return;
|
}
|
|
// Remove selected term
|
const removeButton = window.targetCheck(e, 'button.remove-item');
|
if (removeButton && e.target.closest('.jvb-selector')) {
|
const fieldId = this.getFieldId(removeButton);
|
const termId = removeButton.closest('.selected-item').dataset.id;
|
this.removeSelectedTerm(fieldId, termId);
|
return;
|
}
|
|
// Modal close
|
if (e.target.matches('.modal-close')) {
|
this.modalInstance?.handleClose();
|
return;
|
}
|
|
// Modal clicks
|
if (this.modal?.contains(e.target)) {
|
this.handleModalClick(e);
|
}
|
}
|
|
handleChange(e) {
|
// Hidden input changes
|
const taxonomyField = window.targetCheck(e, '.taxonomy.field, .post.field');
|
if (taxonomyField && e.target.type === 'hidden') {
|
const fieldId = this.getFieldId(e.target);
|
this.updateFieldFromInput(fieldId);
|
return;
|
}
|
|
// Modal checkboxes
|
if (this.modal?.contains(e.target)) {
|
this.handleModalChange(e);
|
}
|
}
|
|
handleInput(e) {
|
// Modal search
|
if (this.modal?.contains(e.target) && e.target.type === 'search') {
|
this.performSearch(e.target.value.trim(), 'modal');
|
return;
|
}
|
|
// Autocomplete
|
if ('autocomplete' in e.target.dataset) {
|
const fieldId = this.getFieldId(e.target);
|
const field = this.fields.get(fieldId);
|
if (field?.hasAutocomplete) {
|
this.performSearch(e.target.value.trim(), 'autocomplete', fieldId);
|
}
|
}
|
}
|
|
handleFocus(e) {
|
if (!('autocomplete' in e.target.dataset)) return;
|
|
const fieldId = this.getFieldId(e.target);
|
const field = this.fields.get(fieldId);
|
|
if (field?.hasAutocomplete) {
|
this.preloadTaxonomy(field.taxonomy);
|
}
|
}
|
|
handleBlur(e) {
|
if (!('autocomplete' in e.target.dataset)) return;
|
|
setTimeout(() => {
|
const fieldId = this.getFieldId(e.target);
|
const field = this.fields.get(fieldId);
|
|
if (field?.autocompleteDropdown) {
|
field.autocompleteDropdown.hidden = true;
|
}
|
|
this.searchContexts.delete(fieldId);
|
}, 200);
|
}
|
|
/***********************************************************************
|
* UNIFIED SEARCH
|
***********************************************************************/
|
|
performSearch(query, context = 'modal', fieldId = null) {
|
const field = context === 'autocomplete'
|
? this.fields.get(fieldId)
|
: this.currentConfig;
|
|
if (!field) return;
|
|
// Autocomplete validation
|
if (context === 'autocomplete') {
|
field.currentAutocompleteQuery = query;
|
|
if (query.length < 2) {
|
if (field.autocompleteDropdown) {
|
field.autocompleteDropdown.hidden = true;
|
}
|
return;
|
}
|
|
this.searchContexts.set(fieldId, 'autocomplete');
|
this.activeField = fieldId;
|
|
if (field.autocompleteDropdown) {
|
field.autocompleteDropdown.hidden = false;
|
}
|
}
|
|
// Debounced search
|
window.debouncer.schedule(
|
`taxonomy-search-${context}-${fieldId || 'modal'}`,
|
async () => {
|
await this.store.setFilters({
|
taxonomy: field.taxonomy,
|
search: query,
|
page: 1,
|
parent: query ? 0 : (this.store.filters.parent || 0)
|
});
|
|
if (context === 'modal') {
|
window.removeChildren(this.ui.termsList);
|
}
|
},
|
300
|
);
|
}
|
|
/***********************************************************************
|
* MODAL OPERATIONS
|
***********************************************************************/
|
|
setActiveField(fieldId, openModal = false) {
|
this.activeField = fieldId;
|
this.currentConfig = this.fields.get(fieldId);
|
|
if (openModal) {
|
this.modalInstance.handleOpen();
|
}
|
|
this.store.setFilter('taxonomy', this.currentConfig.taxonomy);
|
|
// Reset modal selection state
|
this.selectedTerms.clear();
|
|
// Copy field selections to modal
|
this.currentConfig.selectedTerms.forEach(termId => {
|
const term = this.store.get(termId);
|
if (term) {
|
this.selectedTerms.set(termId, {
|
id: termId,
|
name: term.name,
|
path: term.path
|
});
|
}
|
});
|
}
|
|
handleModalClick(e) {
|
if (window.targetCheck(e, '.remove-item')) {
|
const selectedItem = window.targetCheck(e, '.selected-item');
|
if (selectedItem) {
|
this.removeSelectedTermFromModal(selectedItem.dataset.id);
|
}
|
} else if (window.targetCheck(e, '.back-to-parent')) {
|
this.navigateToParent();
|
} else if (window.targetCheck(e, '.toggle-children')) {
|
const termItem = e.target.closest('li');
|
this.navigateToChild(
|
parseInt(termItem.dataset.id),
|
termItem.querySelector('.term-name').textContent
|
);
|
} else if (window.targetCheck(e, '.path-level')) {
|
const pathLevel = window.targetCheck(e, '.path-level');
|
this.navigateToPath(parseInt(pathLevel.dataset.id) || 0);
|
}
|
}
|
|
handleModalChange(e) {
|
if (e.target.type !== 'checkbox') return;
|
|
e.preventDefault();
|
e.stopPropagation();
|
|
const termId = parseInt(e.target.closest('li').dataset.id);
|
const label = e.target.closest('li').querySelector('label');
|
|
if (e.target.checked) {
|
this.addSelectedTermToModal(termId, label.title, label.dataset.path);
|
} else {
|
this.removeSelectedTermFromModal(termId);
|
}
|
}
|
|
openModal() {
|
if (!this.currentConfig) {
|
console.error('No active field set');
|
return;
|
}
|
|
this.updateModalUI();
|
this.updateModalSelections();
|
|
window.removeChildren(this.ui.termsList);
|
this.showLoading();
|
}
|
|
closeModal() {
|
this.observer.unobserve(this.ui.sentinel);
|
window.removeChildren(this.ui.termsList);
|
|
this.notify('selected-terms', {
|
terms: this.selectedTerms,
|
taxonomy: this.currentConfig.taxonomy
|
});
|
|
if (this.activeField) {
|
this.saveSelectionsToField(this.activeField);
|
}
|
|
this.activeField = null;
|
this.currentConfig = null;
|
}
|
|
updateModalUI() {
|
const singular = this.getLabel(this.currentConfig.taxonomy, 'single');
|
const plural = this.getLabel(this.currentConfig.taxonomy, 'plural');
|
|
this.ui.modal.title.textContent = `Select ${plural}`;
|
|
if (this.ui.search.container) {
|
this.ui.search.container.style.display = this.currentConfig.canSearch ? 'block' : 'none';
|
}
|
|
if (this.ui.create.details) {
|
this.ui.create.details.style.display = this.currentConfig.canCreate ? 'block' : 'none';
|
this.ui.create.details.hidden = !this.currentConfig.canCreate;
|
|
if (this.ui.create.summary) {
|
this.ui.create.summary.textContent = `Add new ${singular}`;
|
}
|
|
if (this.ui.create.label.name) {
|
this.ui.create.label.name.textContent = `Name this ${singular}`;
|
}
|
if (this.ui.create.label.parent) {
|
this.ui.create.label.parent.textContent = `Nest it under`;
|
}
|
}
|
|
this.a11y?.announce(`Opened ${singular} selection. Choose from checkboxes or search to filter results.`);
|
}
|
|
updateModalSelections() {
|
window.removeChildren(this.ui.selectedTerms);
|
|
this.selectedTerms.forEach((termData, id) => {
|
this.addTermDisplay(id, termData.name, termData.path, 'modal');
|
});
|
|
this.checkSelectionLimits();
|
}
|
|
addSelectedTermToModal(id, name, path) {
|
this.selectedTerms.set(id, { id, name, path });
|
|
this.addTermDisplay(id, name, path, 'modal');
|
this.checkSelectionLimits();
|
|
const checkbox = this.ui.termsList.querySelector(`input[value="${id}"]`);
|
if (checkbox) checkbox.checked = true;
|
}
|
|
removeSelectedTermFromModal(id) {
|
this.selectedTerms.delete(parseInt(id));
|
|
const selectedItem = this.ui.selectedTerms.querySelector(`[data-id="${id}"]`);
|
if (selectedItem) selectedItem.remove();
|
|
const checkbox = this.ui.termsList.querySelector(`input[value="${id}"]`);
|
if (checkbox) checkbox.checked = false;
|
|
this.checkSelectionLimits();
|
}
|
|
checkSelectionLimits() {
|
if (!this.currentConfig || this.currentConfig.maxSelection === 0) {
|
return;
|
}
|
|
this.disabled = this.selectedTerms.size >= this.currentConfig.maxSelection;
|
|
this.ui.termsList.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
|
if (!checkbox.checked) {
|
checkbox.disabled = this.disabled;
|
}
|
});
|
}
|
|
saveSelectionsToField(fieldId) {
|
const field = this.fields.get(fieldId);
|
if (!field) return;
|
|
field.selectedTerms.clear();
|
window.removeChildren(field.selectedContainer);
|
|
this.selectedTerms.forEach((termData, id) => {
|
field.selectedTerms.add(id);
|
this.addTermDisplay(id, termData.name, termData.path, 'field', fieldId);
|
});
|
|
field.input.value = Array.from(field.selectedTerms).join(',');
|
field.input.dispatchEvent(new Event('change', { bubbles: true }));
|
}
|
|
/***********************************************************************
|
* TERM DISPLAY
|
***********************************************************************/
|
|
addTermDisplay(termId, termName, termPath, context = 'field', fieldId = null) {
|
const config = context === 'field'
|
? this.fields.get(fieldId)
|
: this.currentConfig;
|
|
const container = context === 'field'
|
? config.selectedContainer
|
: this.ui.selectedTerms;
|
|
if (container.querySelector(`[data-id="${termId}"]`)) return;
|
|
const item = window.getTemplate('selectedTerm');
|
item.dataset.id = termId;
|
item.dataset.path = termPath;
|
item.dataset.name = termName;
|
item.dataset.taxonomy = config.taxonomy;
|
item.querySelector('.item-name').textContent = termPath;
|
item.querySelector('button').title = `Remove ${termName}`;
|
|
container.appendChild(item);
|
|
if (context === 'modal') {
|
const checkbox = this.ui.termsList.querySelector(`input[value="${termId}"]`);
|
if (checkbox) checkbox.checked = true;
|
}
|
}
|
|
removeSelectedTerm(fieldId, termId) {
|
const field = this.fields.get(fieldId);
|
if (!field) return;
|
|
field.selectedTerms.delete(parseInt(termId));
|
|
const selectedItem = field.selectedContainer.querySelector(`[data-id="${termId}"]`);
|
if (selectedItem) selectedItem.remove();
|
|
field.input.value = Array.from(field.selectedTerms).join(',');
|
field.input.dispatchEvent(new Event('change', { bubbles: true }));
|
}
|
|
updateFieldFromInput(fieldId) {
|
const field = this.fields.get(fieldId);
|
if (!field) return;
|
|
const value = field.input.value.trim();
|
field.selectedTerms.clear();
|
window.removeChildren(field.selectedContainer);
|
|
if (value) {
|
value.split(',')
|
.map(id => parseInt(id.trim()))
|
.filter(id => !isNaN(id))
|
.forEach(id => field.selectedTerms.add(id));
|
|
this.initFieldDisplay(fieldId);
|
}
|
}
|
|
/***********************************************************************
|
* NAVIGATION
|
***********************************************************************/
|
|
navigateToParent() {
|
this.store.setFilters({ parent: 0, page: 1 });
|
window.removeChildren(this.ui.termsList);
|
this.ui.breadcrumbs.back.hidden = true;
|
}
|
|
navigateToChild(termId, termName) {
|
this.store.setFilters({ parent: termId, page: 1 });
|
window.removeChildren(this.ui.termsList);
|
this.updateBreadcrumbs(termId, termName);
|
this.ui.breadcrumbs.back.hidden = false;
|
}
|
|
navigateToPath(parentId) {
|
this.store.setFilters({ parent: parentId, page: 1 });
|
window.removeChildren(this.ui.termsList);
|
this.ui.breadcrumbs.back.hidden = parentId === 0;
|
}
|
|
loadMoreTerms() {
|
const currentPage = this.store.filters.page || 1;
|
this.store.setFilter('page', currentPage + 1);
|
}
|
|
updateBreadcrumbs(termId, termName) {
|
const breadcrumb = window.getTemplate('termBreadcrumb');
|
breadcrumb.dataset.id = termId;
|
breadcrumb.textContent = termName;
|
breadcrumb.title = termName;
|
|
const existingCrumb = this.ui.breadcrumbs.nav.querySelector(`[data-id="${termId}"]`);
|
if (existingCrumb) {
|
while (existingCrumb.nextElementSibling) {
|
existingCrumb.nextElementSibling.remove();
|
}
|
} else {
|
this.ui.breadcrumbs.nav.appendChild(breadcrumb);
|
}
|
}
|
|
/***********************************************************************
|
* RENDERING
|
***********************************************************************/
|
|
renderTerms(terms = null, append = false, showPath = false) {
|
if (!terms) terms = this.store.getFiltered();
|
|
if (!append) window.removeChildren(this.ui.termsList);
|
|
if (terms.length === 0) {
|
if (!append) this.showEmptyState();
|
return;
|
}
|
|
const currentParent = this.store.filters.parent || 0;
|
this.ui.breadcrumbs.back.hidden = currentParent === 0;
|
|
const fragment = document.createDocumentFragment();
|
terms.forEach(term => {
|
const element = this.createTermElement({
|
id: parseInt(term.id),
|
name: term.name,
|
hasChildren: term.hasChildren,
|
path: term.path || null,
|
show: showPath
|
});
|
|
if (element) fragment.appendChild(element);
|
});
|
|
this.ui.termsList.appendChild(fragment);
|
}
|
|
createTermElement(termData) {
|
if (!termData?.name) return null;
|
|
const listItem = window.getTemplate('termListItem');
|
listItem.dataset.id = termData.id;
|
|
const isSelected = this.selectedTerms.has(termData.id);
|
const checkbox = listItem.querySelector('input');
|
const label = listItem.querySelector('label');
|
const nameSpan = listItem.querySelector('.term-name');
|
|
checkbox.id = `${this.currentConfig.container.id}${termData.id}`;
|
checkbox.name = `${this.currentConfig.container.id}${this.currentConfig.taxonomy}-select`;
|
checkbox.value = termData.id;
|
checkbox.disabled = !isSelected && this.disabled;
|
checkbox.checked = isSelected;
|
|
label.htmlFor = checkbox.id;
|
label.title = termData.path || termData.name;
|
label.dataset.path = termData.path;
|
|
nameSpan.textContent = termData.show ? termData.path : termData.name;
|
|
if (termData.hasChildren) {
|
const childrenToggle = window.getTemplate('termChildrenToggle');
|
childrenToggle.ariaLabel = `View sub-terms of ${termData.name}`;
|
listItem.appendChild(childrenToggle);
|
}
|
|
return listItem;
|
}
|
|
/***********************************************************************
|
* AUTOCOMPLETE
|
***********************************************************************/
|
|
showAutocompleteResults(field, terms, query) {
|
if (!field?.autocompleteDropdown) return;
|
|
const dropdown = field.autocompleteDropdown;
|
window.removeChildren(dropdown);
|
|
if (terms.length === 0) {
|
this.showEmptyState('No items found.', dropdown);
|
} else {
|
const fragment = document.createDocumentFragment();
|
|
terms.forEach(term => {
|
const item = this.createAutocompleteItem(field, term);
|
if (item) fragment.appendChild(item);
|
});
|
|
dropdown.appendChild(fragment);
|
}
|
|
// Create button if allowed and no exact match
|
const currentQuery = field.currentAutocompleteQuery || query;
|
if (field.canCreate && currentQuery) {
|
const exactMatch = terms.find(term =>
|
term.name.toLowerCase() === currentQuery.toLowerCase()
|
);
|
|
if (!exactMatch) {
|
dropdown.appendChild(this.createAutocompleteCreateButton(currentQuery));
|
}
|
}
|
|
dropdown.hidden = false;
|
}
|
|
createAutocompleteItem(field, term) {
|
const button = document.createElement('button');
|
button.type = 'button';
|
button.className = 'autocomplete-item';
|
button.dataset.id = term.id;
|
button.dataset.name = term.name;
|
button.dataset.path = term.path || term.name;
|
button.textContent = term.path || term.name;
|
|
button.addEventListener('click', () => {
|
field.selectedTerms.add(parseInt(term.id));
|
this.addTermDisplay(term.id, term.name, term.path, 'field', field.id);
|
|
field.input.value = Array.from(field.selectedTerms).join(',');
|
field.input.dispatchEvent(new Event('change', { bubbles: true }));
|
|
field.autocompleteDropdown.hidden = true;
|
const input = field.container.querySelector('input[data-autocomplete]');
|
if (input) input.value = '';
|
});
|
|
return button;
|
}
|
|
createAutocompleteCreateButton(query) {
|
const button = document.createElement('button');
|
button.type = 'button';
|
button.className = 'autocomplete-item create-term';
|
button.dataset.query = query;
|
|
const strong = document.createElement('strong');
|
strong.textContent = 'Create: ';
|
|
button.appendChild(strong);
|
button.appendChild(document.createTextNode(`"${query}"`));
|
|
return button;
|
}
|
|
showAutocompleteError(fieldId) {
|
const field = this.fields.get(fieldId);
|
if (!field?.autocompleteDropdown) return;
|
|
window.removeChildren(field.autocompleteDropdown);
|
this.showEmptyState('Hmmm... something went wrong', field.autocompleteDropdown);
|
}
|
|
/***********************************************************************
|
* UI STATES
|
***********************************************************************/
|
|
showLoading() {
|
this.ui.loading.loading.hidden = false;
|
this.modal.classList.add('loading');
|
|
const searchQuery = this.store.filters.search || '';
|
const currentParent = this.store.filters.parent || 0;
|
|
const message = searchQuery
|
? `searching for "${searchQuery}" items`
|
: currentParent === 0
|
? 'loading items'
|
: 'loading child items';
|
|
if (window.typeLoop) {
|
this.stopTyping = window.typeLoop(this.ui.loading.text, message);
|
} else {
|
this.ui.loading.text.textContent = message;
|
}
|
}
|
|
hideLoading() {
|
this.ui.loading.loading.hidden = true;
|
this.modal.classList.remove('loading');
|
|
if (this.stopTyping) {
|
this.stopTyping();
|
}
|
}
|
|
showEmptyState(message = 'No items found.', container = null) {
|
if (!container) container = this.ui.termsList;
|
|
const emptyElement = window.getTemplate('noResults');
|
const messageSpan = emptyElement.querySelector('span');
|
|
if (message && messageSpan) {
|
messageSpan.textContent = message;
|
}
|
|
container.appendChild(emptyElement);
|
}
|
|
/***********************************************************************
|
* UTILITIES
|
***********************************************************************/
|
|
getFieldId(element) {
|
if (element.dataset.fieldId) return element.dataset.fieldId;
|
|
const fieldContainer = element.closest('[data-field-id]');
|
return fieldContainer?.dataset.fieldId || null;
|
}
|
|
getLabel(taxonomy, type = 'single') {
|
return jvbSettings.labels[taxonomy]?.[type] || taxonomy;
|
}
|
|
async batchFetchTaxonomies() {
|
if (this.taxonomiesToFetch.size === 0) return;
|
|
const taxonomies = Array.from(this.taxonomiesToFetch);
|
this.taxonomiesToFetch.clear();
|
|
this.store.setFilters({
|
taxonomy: taxonomies.join(','),
|
page: 1,
|
search: '',
|
parent: 0
|
});
|
}
|
|
async preloadTaxonomy(taxonomy) {
|
await this.store.setFilters({
|
taxonomy: taxonomy,
|
page: 1,
|
search: '',
|
parent: 0
|
});
|
}
|
|
handleError(error, context, detail = null) {
|
console.error(`Taxonomy ${context} error:`, error, detail);
|
|
if (this.error?.log) {
|
this.error.log(error, {
|
component: 'TaxonomySelector',
|
action: context,
|
detail: detail
|
});
|
}
|
|
if (this.modal?.open) {
|
this.showEmptyState('Error loading. Please try again.');
|
}
|
}
|
|
subscribe(callback) {
|
this.subscribers.add(callback);
|
return () => this.subscribers.delete(callback);
|
}
|
|
notify(event, data = {}) {
|
this.subscribers.forEach(callback => {
|
try {
|
callback(event, data);
|
} catch (error) {
|
console.error('Subscriber error:', error);
|
}
|
});
|
}
|
|
destroy() {
|
document.removeEventListener('click', this.handleClick);
|
document.removeEventListener('change', this.handleChange);
|
document.removeEventListener('input', this.handleInput);
|
document.removeEventListener('focus', this.handleFocus);
|
document.removeEventListener('blur', this.handleBlur);
|
|
this.observer?.disconnect();
|
this.store.destroy();
|
this.subscribers.clear();
|
this.fields.clear();
|
this.selectedTerms.clear();
|
this.searchContexts.clear();
|
}
|
}
|
|
// Initialize on auth ready
|
document.addEventListener('DOMContentLoaded', () => {
|
window.auth.subscribe((event) => {
|
if (event === 'auth-loaded') {
|
window.jvbSelector = new TaxonomySelector();
|
}
|
});
|
});
|
