/**
|
* Centralized Taxonomy Selector
|
* Handles all taxonomy selection fields on the page from a single location
|
*/
|
class TaxonomySelector {
|
constructor() {
|
this.a11y = window.jvbA11y;
|
// this.cache = window.jvbCache;
|
this.error = window.jvbError;
|
this.index = -1;
|
|
this.stores = new Map();
|
|
// Central field management
|
this.fields = new Map(); // fieldId -> field configuration
|
this.terms = new Map(); // taxonomy -> Map(termId -> term data)
|
this.selectedTerms = new Map(); // Current selection (cleared on modal close)
|
|
// Current modal context
|
this.activeField = null;
|
this.currentConfig = null;
|
|
// Modal state
|
this.page = 1;
|
this.hasMore = true;
|
this.isLoading = false;
|
this.searchQuery = '';
|
this.navigationPath = [];
|
this.currentParent = 0;
|
this.currentParentName = '';
|
this.fetchSpecificTerms = false;
|
this.disabled = false;
|
|
// Search debouncing
|
this.searchHandler = null;
|
|
// Prefetch system
|
this.prefetchCache = new Map();
|
this.prefetchQueue = [];
|
this.isPrefetching = false;
|
|
this.init();
|
}
|
|
/**
|
* Initialize the selector
|
*/
|
init() {
|
this.initModal();
|
this.scanExistingFields();
|
this.initGlobalListeners();
|
this.initPrefetching();
|
}
|
|
/**
|
* Scan page for existing taxonomy fields and register them
|
*/
|
scanExistingFields() {
|
const selectors = document.querySelectorAll('.field.taxonomy, .field.post');
|
selectors.forEach(selector => {
|
try {
|
this.registerField(selector);
|
} catch (error) {
|
this.error.log(error, {
|
component: 'TaxonomySelector',
|
action: 'scanExistingFields',
|
container: selector.dataset.name
|
});
|
}
|
});
|
}
|
|
/**
|
* Register a taxonomy field
|
*/
|
registerField(field, options = {}) {
|
let input = field.querySelector('input[type=hidden]');
|
if (!input) {
|
return;
|
}
|
|
if (!('fieldId' in field.dataset)) {
|
field.dataset.fieldId = this.createFieldId(field);
|
}
|
let fieldId = field.dataset.fieldId;
|
let button = field.querySelector('button.taxonomy-toggle');
|
|
let config = {
|
id: fieldId,
|
input: input,
|
container: field,
|
taxonomy: button.dataset.taxonomy,
|
name: field.dataset.field,
|
singular: button.dataset.singular,
|
plural: button.dataset.plural,
|
maxSelection: parseInt(button.dataset.max) || 0,
|
canSearch: 'search' in button.dataset,
|
canCreate: 'creatable' in button.dataset,
|
isRequired: 'required' in button.dataset,
|
selectedTerms: new Set(input.value.split(',')),
|
toggle: button,
|
selectedContainer: field.querySelector('.selected-items'),
|
...options
|
};
|
|
this.fields.set(fieldId, config);
|
|
// Initialize display for any pre-selected values
|
this.initFieldDisplay(fieldId);
|
|
return fieldId;
|
}
|
|
/**
|
* Create unique field ID
|
*/
|
createFieldId(field) {
|
let input = field.querySelector('input[type=hidden]');
|
this.index++;
|
return 'selector-'+this.index;
|
|
}
|
|
/**
|
* Initialize display for a field with existing values
|
*/
|
initFieldDisplay(fieldId) {
|
const field = this.fields.get(fieldId);
|
if (!field) return;
|
|
const value = field.input.value.trim();
|
if (value !== '') {
|
const selectedIds = value.split(',')
|
.map(id => parseInt(id.trim()))
|
.filter(id => !isNaN(id));
|
|
if (selectedIds.length > 0) {
|
this.updateFieldDisplay(fieldId, selectedIds);
|
}
|
}
|
}
|
|
/**
|
* Update field display with selected term IDs
|
*/
|
async updateFieldDisplay(fieldId, selectedIds) {
|
const field = this.fields.get(fieldId);
|
if (!field || selectedIds.length === 0) return;
|
|
// Check if we already have these terms cached
|
const taxonomy = field.taxonomy;
|
const needsFetch = [];
|
const cachedTerms = [];
|
|
selectedIds.forEach(termId => {
|
if (this.terms.has(taxonomy) && this.terms.get(taxonomy).has(termId)) {
|
const term = this.terms.get(taxonomy).get(termId);
|
cachedTerms.push(term);
|
field.selectedTerms.add(termId);
|
} else {
|
needsFetch.push(termId);
|
}
|
});
|
|
// Display cached terms immediately
|
cachedTerms.forEach(term => {
|
this.addTermToDisplay(fieldId, term.id, term.name, term.path);
|
});
|
|
// Fetch missing terms if needed
|
if (needsFetch.length > 0) {
|
try {
|
this.fetchSpecificTerms = needsFetch.join(',');
|
const fetchedTerms = await this.fetchTerms(fieldId);
|
|
fetchedTerms.forEach(term => {
|
field.selectedTerms.add(term.id);
|
this.addTermToDisplay(fieldId, term.id, term.name, term.path);
|
});
|
} catch (error) {
|
console.error('Failed to fetch missing terms:', error);
|
} finally {
|
this.fetchSpecificTerms = false;
|
}
|
}
|
}
|
|
/**
|
* Initialize modal elements
|
*/
|
initModal() {
|
this.modalID = 'dialog#jvb-selector';
|
this.modal = document.querySelector(this.modalID);
|
|
if (!this.modal) {
|
console.warn('Taxonomy selector modal not found');
|
return;
|
}
|
|
this.initModalElements();
|
|
// Initialize modal instance
|
this.modalInstance = new window.jvbModal(this.modal, {
|
handleForm: false,
|
save: null,
|
open: null,
|
onOpen: () => this.openModal(),
|
onClose: () => this.closeModal()
|
});
|
}
|
|
/**
|
* Initialize modal element references
|
*/
|
initModalElements() {
|
this.elements = {
|
searchInput: this.modal.querySelector('input[type=search]'),
|
termsList: this.modal.querySelector('.items-container'),
|
termsWrap: this.modal.querySelector('.items-wrap'),
|
breadcrumbs: this.modal.querySelector('nav.term-navigation'),
|
loading: this.modal.querySelector('.loading'),
|
loadingText: this.modal.querySelector('.loading span'),
|
clearSearch: this.modal.querySelector('.clear-search'),
|
selectedTerms: this.modal.querySelector('.selected-items'),
|
backButton: this.modal.querySelector('.back-to-parent'),
|
sentinel: this.modal.querySelector('.scroll-sentinel'),
|
modalTitle: this.modal.querySelector('#modal-title'),
|
modalContent: this.modal.querySelector('.modal-content'),
|
createNewSection: this.modal.querySelector('.create-new-term'),
|
favouriteTerms: this.modal.querySelector('.favourite-terms'),
|
};
|
|
// Initialize intersection observer for infinite scroll
|
this.observer = new IntersectionObserver((entries) => {
|
entries.forEach(entry => {
|
if (entry.isIntersecting && !this.isLoading && this.hasMore) {
|
this.fetchTerms(this.activeField);
|
}
|
});
|
}, {
|
root: this.elements.termsWrap,
|
threshold: 0.5
|
});
|
}
|
|
/**
|
* Set up global event delegation
|
*/
|
initGlobalListeners() {
|
document.addEventListener('click', this.handleClick.bind(this));
|
document.addEventListener('change', this.handleChange.bind(this));
|
}
|
|
/**
|
* Handle global click events
|
*/
|
handleClick(e) {
|
// Handle taxonomy toggle buttons
|
const toggleButton = window.targetCheck(e, '.taxonomy-toggle');
|
if (toggleButton) {
|
e.preventDefault();
|
this.handleToggleClick(toggleButton);
|
return;
|
}
|
|
// Handle remove selected term buttons
|
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;
|
}
|
|
// Handle modal close button
|
if (e.target.matches('.modal-close')) {
|
if (this.modalInstance) {
|
this.modalInstance.handleClose();
|
}
|
return;
|
}
|
|
// Handle clicks within the modal
|
if (this.modal && this.modal.contains(e.target)) {
|
this.handleModalClick(e);
|
}
|
}
|
|
/**
|
* Handle global change events
|
*/
|
handleChange(e) {
|
// Handle hidden input changes for taxonomy fields
|
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;
|
}
|
|
// Handle modal changes
|
if (this.modal && this.modal.contains(e.target)) {
|
this.handleModalChange(e);
|
}
|
}
|
|
/**
|
* Handle toggle button click
|
*/
|
handleToggleClick(toggle) {
|
try {
|
const fieldId = this.getFieldId(toggle);
|
const field = this.fields.get(fieldId);
|
|
if (!field) {
|
console.error('Field not found for toggle:', fieldId);
|
return;
|
}
|
|
this.setActiveField(fieldId);
|
this.modalInstance.handleOpen();
|
|
} catch (error) {
|
console.error('Error handling toggle click:', error);
|
this.error?.handleError(error, {
|
component: 'TaxonomySelector',
|
action: 'handleToggleClick'
|
});
|
}
|
}
|
|
/**
|
* Set the active field for modal operations
|
*/
|
setActiveField(fieldId) {
|
this.activeField = fieldId;
|
this.currentConfig = this.fields.get(fieldId);
|
|
// Clear modal selection state
|
this.selectedTerms.clear();
|
|
// Copy field's current selections to modal state
|
if (this.currentConfig.selectedTerms) {
|
this.currentConfig.selectedTerms.forEach(termId => {
|
// Find term data to populate modal selection
|
const taxonomy = this.currentConfig.taxonomy;
|
if (this.terms.has(taxonomy) && this.terms.get(taxonomy).has(termId)) {
|
const term = this.terms.get(taxonomy).get(termId);
|
this.selectedTerms.set(termId, {
|
id: termId,
|
name: term.name,
|
path: term.path
|
});
|
}
|
});
|
}
|
}
|
|
/**
|
* Handle clicks within modal
|
*/
|
handleModalClick(e) {
|
if (window.targetCheck(e, '.remove-item')) {
|
let selectedItem = window.targetCheck(e, '.selected-item');
|
if (selectedItem) {
|
this.removeSelectedTermFromModal(selectedItem.dataset.id);
|
}
|
} else if (window.targetCheck(e, '.back-to-parent')) {
|
this.toParent();
|
} else if (window.targetCheck(e, '.toggle-children')) {
|
let termItem = e.target.closest('li');
|
this.toChild(
|
parseInt(termItem.dataset.id),
|
termItem.querySelector('.term-name').textContent
|
);
|
} else if (window.targetCheck(e, '.path-level')) {
|
let pathLevel = window.targetCheck(e, '.path-level');
|
if (pathLevel.textContent !== this.currentParentName) {
|
this.navigateToPath(pathLevel);
|
}
|
}
|
}
|
|
/**
|
* Handle changes within modal (checkboxes)
|
*/
|
handleModalChange(e) {
|
if (window.targetCheck(e, this.modalID) && e.target.type === 'checkbox') {
|
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);
|
}
|
}
|
}
|
|
/**
|
* Open modal and initialize
|
*/
|
openModal() {
|
if (!this.activeField || !this.currentConfig) {
|
console.error('No active field set for modal');
|
return;
|
}
|
|
this.resetModalState();
|
this.updateModalForTaxonomy();
|
this.observer.observe(this.elements.sentinel);
|
|
// Set up search if enabled
|
if (this.currentConfig.canSearch) {
|
this.elements.searchInput.focus();
|
this.searchHandler = window.debounce(() => this.handleSearch(), 300);
|
this.elements.searchInput.addEventListener('input', this.searchHandler);
|
}
|
|
// Initialize creator if available
|
if (this.currentConfig.canCreate && 'jvbTaxCreator' in window) {
|
this.creator = new window.jvbTaxCreator(this);
|
}
|
|
// Display current selections
|
this.updateModalSelections();
|
|
// Fetch terms
|
this.fetchTerms(this.activeField);
|
}
|
|
/**
|
* Close modal and save selections
|
*/
|
closeModal() {
|
this.observer.unobserve(this.elements.sentinel);
|
window.removeChildren(this.elements.termsList);
|
|
// Save selections to active field
|
if (this.activeField) {
|
this.saveSelectionsToField(this.activeField);
|
}
|
|
// Cleanup
|
if (this.currentConfig?.canSearch && this.searchHandler) {
|
this.elements.searchInput.removeEventListener('input', this.searchHandler);
|
}
|
|
if (this.creator) {
|
delete this.creator;
|
}
|
|
this.activeField = null;
|
this.currentConfig = null;
|
}
|
|
/**
|
* Reset modal state
|
*/
|
resetModalState() {
|
this.page = 1;
|
this.hasMore = true;
|
this.isLoading = false;
|
this.searchQuery = '';
|
this.navigationPath = [];
|
this.currentParent = 0;
|
this.currentParentName = '';
|
this.disabled = false;
|
|
window.removeChildren(this.elements.termsList);
|
window.removeChildren(this.elements.selectedTerms);
|
this.elements.searchInput.value = '';
|
}
|
|
/**
|
* Update modal content for current taxonomy
|
*/
|
updateModalForTaxonomy() {
|
if (!this.currentConfig) return;
|
|
this.elements.modalTitle.textContent = `Select ${this.currentConfig.plural}`;
|
|
const searchWrapper = this.modal.querySelector('.search-wrapper');
|
if (searchWrapper) {
|
searchWrapper.style.display = this.currentConfig.canSearch ? 'block' : 'none';
|
}
|
|
if (this.elements.createNewSection) {
|
this.elements.createNewSection.style.display = this.currentConfig.canCreate ? 'block' : 'none';
|
this.elements.createNewSection.hidden = !this.currentConfig.canCreate;
|
}
|
|
const openMessage = `Opened ${this.currentConfig.singular} selection. Choose from checkboxes or search to filter results.`;
|
this.a11y?.announce(openMessage);
|
}
|
|
/**
|
* Update modal selections display
|
*/
|
updateModalSelections() {
|
window.removeChildren(this.elements.selectedTerms);
|
|
this.selectedTerms.forEach((termData, id) => {
|
this.addTermToModalDisplay(id, termData.name, termData.path);
|
});
|
|
this.checkSelectionLimits();
|
}
|
|
/**
|
* Add selected term to modal
|
*/
|
addSelectedTermToModal(id, name, path) {
|
this.selectedTerms.set(id, {
|
id: id,
|
name: name,
|
path: path
|
});
|
|
this.addTermToModalDisplay(id, name, path);
|
this.checkSelectionLimits();
|
|
// Check the corresponding checkbox
|
const checkbox = this.elements.termsList.querySelector(`input[value="${id}"]`);
|
if (checkbox) {
|
checkbox.checked = true;
|
}
|
}
|
|
/**
|
* Remove selected term from modal
|
*/
|
removeSelectedTermFromModal(id) {
|
this.selectedTerms.delete(id);
|
|
// Remove from modal display
|
const selectedItem = this.elements.selectedTerms.querySelector(`[data-id="${id}"]`);
|
if (selectedItem) {
|
selectedItem.remove();
|
}
|
|
// Uncheck the corresponding checkbox
|
const checkbox = this.elements.termsList.querySelector(`input[value="${id}"]`);
|
if (checkbox) {
|
checkbox.checked = false;
|
}
|
|
this.checkSelectionLimits();
|
}
|
|
/**
|
* Add term to modal display
|
*/
|
addTermToModalDisplay(id, name, path) {
|
const item = window.getTemplate('selectedTerm').cloneNode(true);
|
item.dataset.id = id;
|
item.dataset.path = path;
|
item.dataset.name = name;
|
item.dataset.taxonomy = this.currentConfig.taxonomy;
|
item.querySelector('span').textContent = path;
|
item.querySelector('button').title = `Remove ${name}`;
|
|
this.elements.selectedTerms.appendChild(item);
|
}
|
|
/**
|
* Check selection limits and disable/enable checkboxes
|
*/
|
checkSelectionLimits() {
|
if (!this.currentConfig || this.currentConfig.maxSelection === 0) {
|
return;
|
}
|
|
this.disabled = this.selectedTerms.size >= this.currentConfig.maxSelection;
|
this.setCheckboxes(this.disabled);
|
}
|
|
/**
|
* Set checkbox disabled state
|
*/
|
setCheckboxes(disabled) {
|
this.elements.termsList.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
|
if (!checkbox.checked) {
|
checkbox.disabled = disabled;
|
}
|
});
|
}
|
|
/**
|
* Save modal selections to field
|
*/
|
saveSelectionsToField(fieldId) {
|
const field = this.fields.get(fieldId);
|
if (!field) return;
|
|
// Clear current field selections
|
field.selectedTerms.clear();
|
window.removeChildren(field.selectedContainer);
|
|
// Add modal selections to field
|
this.selectedTerms.forEach((termData, id) => {
|
field.selectedTerms.add(id);
|
this.addTermToDisplay(fieldId, id, termData.name, termData.path);
|
});
|
|
// Update hidden input
|
const selectedIds = Array.from(field.selectedTerms);
|
field.input.value = selectedIds.join(',');
|
field.input.dispatchEvent(new Event('change', { bubbles: true }));
|
}
|
|
/**
|
* Remove selected term from field
|
*/
|
removeSelectedTerm(fieldId, termId) {
|
const field = this.fields.get(fieldId);
|
if (!field) return;
|
|
const id = parseInt(termId);
|
field.selectedTerms.delete(id);
|
|
// Remove from display
|
const selectedItem = field.selectedContainer.querySelector(`[data-id="${id}"]`);
|
if (selectedItem) {
|
selectedItem.remove();
|
}
|
|
// Update hidden input
|
const selectedIds = Array.from(field.selectedTerms);
|
field.input.value = selectedIds.join(',');
|
field.input.dispatchEvent(new Event('change', { bubbles: true }));
|
}
|
|
/**
|
* Add term to field display
|
*/
|
addTermToDisplay(fieldId, id, name, path) {
|
const field = this.fields.get(fieldId);
|
if (!field || field.selectedContainer.querySelector(`[data-id="${id}"]`)) {
|
return; // Already displayed
|
}
|
|
const item = window.getTemplate('selectedTerm').cloneNode(true);
|
item.dataset.id = id;
|
item.dataset.path = path;
|
item.dataset.name = name;
|
item.dataset.taxonomy = field.taxonomy;
|
item.querySelector('span').textContent = path;
|
item.querySelector('button').title = `Remove ${name}`;
|
|
field.selectedContainer.appendChild(item);
|
}
|
|
/**
|
* Update field from hidden input value
|
*/
|
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 !== '') {
|
const selectedIds = value.split(',')
|
.map(id => parseInt(id.trim()))
|
.filter(id => !isNaN(id));
|
|
this.updateFieldDisplay(fieldId, selectedIds);
|
}
|
}
|
|
/**
|
* Handle search input
|
*/
|
handleSearch() {
|
let query = this.elements.searchInput.value.trim();
|
|
if (query !== this.searchQuery) {
|
this.searchQuery = query;
|
this.page = 1;
|
this.hasMore = true;
|
window.removeChildren(this.elements.termsList);
|
|
if (query.length >= 2 || query.length === 0) {
|
this.fetchTerms(this.activeField, false, true);
|
} else {
|
this.hideLoading();
|
this.showEmptyState('No Results. \nEnter at least 2 characters to search.');
|
}
|
}
|
}
|
|
/**
|
* Navigate to parent term
|
*/
|
toParent() {
|
this.navigationPath.pop();
|
let parent = this.navigationPath[this.navigationPath.length - 1];
|
this.currentParent = parent ? parent.id : 0;
|
this.currentParentName = parent ? parent.name : '';
|
window.removeChildren(this.elements.termsList);
|
this.page = 1;
|
this.hasMore = true;
|
this.fetchTerms(this.activeField);
|
}
|
|
/**
|
* Navigate to child term
|
*/
|
toChild(id, name) {
|
this.navigationPath.push({ id: id, name: name });
|
this.currentParent = id;
|
this.currentParentName = name;
|
window.removeChildren(this.elements.termsList);
|
this.page = 1;
|
this.hasMore = true;
|
this.fetchTerms(this.activeField);
|
}
|
|
/**
|
* Navigate to specific path level
|
*/
|
navigateToPath(pathLevel) {
|
window.removeChildren(this.elements.termsList);
|
let level = parseInt(pathLevel.dataset.level);
|
this.navigationPath = this.navigationPath.slice(0, level + 1);
|
this.currentParent = parseInt(pathLevel.dataset.id);
|
this.currentParentName = pathLevel.textContent;
|
this.page = 1;
|
this.hasMore = true;
|
this.fetchTerms(this.activeField);
|
}
|
|
/**
|
* Fetch terms for the active field
|
*/
|
async fetchTerms(fieldId, forceRefresh = false, isSearch = false) {
|
|
if (this.isLoading || !fieldId) return;
|
|
const field = this.fields.get(fieldId);
|
if (!field) return;
|
|
if (!this.stores.has(field.taxonomy)) {
|
this.stores.set(field.taxonomy, new window.jvbStore({
|
name: field.taxonomy,
|
endpoint: 'terms',
|
filters: {
|
taxonomy: field.taxonomy,
|
page: 1,
|
search: '',
|
parent: 0
|
}
|
}));
|
}
|
|
let store = this.stores.get(field.taxonomy);
|
store.fetch();
|
|
return;
|
|
try {
|
this.showLoading();
|
|
const requestUrl = `${jvbSettings.api}terms?${this.buildRequest(field.taxonomy)}`;
|
|
const response = await this.cache.fetchWithCache(requestUrl, {
|
method: 'GET',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': jvbSettings.nonce
|
}
|
}, {
|
content: field.taxonomy,
|
forceRefresh: forceRefresh
|
});
|
|
// Handle specific term fetching
|
if (this.fetchSpecificTerms) {
|
this.fetchSpecificTerms = false;
|
return response.terms || [];
|
}
|
|
if (response && response.terms && response.terms.length !== 0) {
|
this.hasMore = response.pagination?.has_more || false;
|
this.renderTerms(response.terms, this.page > 1, isSearch);
|
|
if (this.hasMore) {
|
this.nextPage();
|
}
|
} else {
|
if (this.page === 1) {
|
this.showEmptyState();
|
}
|
this.hasMore = false;
|
}
|
|
return response.terms || [];
|
} catch (error) {
|
this.handleError(error);
|
return [];
|
} finally {
|
this.hideLoading();
|
}
|
}
|
|
/**
|
* Build request parameters
|
*/
|
buildRequest(taxonomy = null) {
|
let params = new URLSearchParams({
|
taxonomy: taxonomy || this.currentConfig?.taxonomy || '',
|
parent: this.currentParent,
|
search: this.searchQuery,
|
page: this.page
|
});
|
|
if (this.fetchSpecificTerms) {
|
params.append('termIDs', this.fetchSpecificTerms);
|
}
|
|
return params.toString();
|
}
|
|
/**
|
* Render terms list
|
*/
|
renderTerms(terms, append = false, showPath = false) {
|
|
|
if (!append) {
|
window.removeChildren(this.elements.termsList);
|
}
|
|
if (terms.length === 0) {
|
if (!append) {
|
this.showEmptyState();
|
}
|
this.a11y?.announce(0, append);
|
return;
|
}
|
|
this.updateBreadcrumbs();
|
|
for (const [index, term] of Object.entries(terms)) {
|
if (!term) continue;
|
|
// Store term in global cache
|
const taxonomy = this.currentConfig.taxonomy;
|
if (!this.terms.has(taxonomy)) {
|
this.terms.set(taxonomy, new Map());
|
}
|
this.terms.get(taxonomy).set(term.id, term);
|
|
this.createTermElement({
|
id: parseInt(term.id),
|
name: term.name,
|
hasChildren: term.hasChildren,
|
path: term.path || null,
|
show: showPath
|
});
|
}
|
|
this.a11y?.announce(terms.length, append);
|
}
|
|
/**
|
* Create individual term element
|
*/
|
createTermElement(termData) {
|
if (!termData || !termData.name) return;
|
|
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('span, .term-name');
|
|
if (checkbox && label && nameSpan) {
|
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 ?
|
window.getTemplate('termChildrenToggle') :
|
this.createChildrenToggle();
|
|
if (childrenToggle) {
|
childrenToggle.ariaLabel = `View sub-terms of ${termData.name}`;
|
listItem.appendChild(childrenToggle);
|
}
|
}
|
|
this.elements.termsList.appendChild(listItem);
|
}
|
|
/**
|
* Create children toggle button
|
*/
|
createChildrenToggle() {
|
const button = document.createElement('button');
|
button.type = 'button';
|
button.className = 'toggle-children';
|
button.innerHTML = '→';
|
return button;
|
}
|
|
/**
|
* Update breadcrumb navigation
|
*/
|
updateBreadcrumbs() {
|
window.removeChildren(this.elements.breadcrumbs);
|
this.elements.breadcrumbs.appendChild(this.elements.backButton);
|
this.elements.backButton.hidden = this.currentParent === 0;
|
|
this.navigationPath.forEach((pathItem, index) => {
|
const breadcrumb = window.getTemplate ?
|
window.getTemplate('termBreadcrumb') :
|
this.createBreadcrumbElement();
|
|
breadcrumb.dataset.level = index;
|
breadcrumb.dataset.id = pathItem.id;
|
breadcrumb.title = pathItem.path || pathItem.name;
|
breadcrumb.textContent = pathItem.name;
|
|
this.elements.breadcrumbs.appendChild(breadcrumb);
|
});
|
}
|
|
/**
|
* Create breadcrumb element
|
*/
|
createBreadcrumbElement() {
|
const button = document.createElement('button');
|
button.type = 'button';
|
button.className = 'path-level';
|
return button;
|
}
|
|
/**
|
* Show loading state
|
*/
|
showLoading() {
|
this.isLoading = true;
|
this.elements.loading.hidden = false;
|
this.modal.classList.add('loading');
|
|
let message = this.searchQuery !== '' ?
|
`searching for "${this.searchQuery}" items` :
|
this.currentParentName === '' ?
|
'loading items' :
|
`loading ${this.currentParentName} items`;
|
|
if (window.typeLoop) {
|
this.stopTyping = window.typeLoop(this.elements.loadingText, message);
|
} else {
|
this.elements.loadingText.textContent = message;
|
}
|
}
|
|
/**
|
* Hide loading state
|
*/
|
hideLoading() {
|
this.isLoading = false;
|
this.elements.loading.hidden = true;
|
this.modal.classList.remove('loading');
|
|
if (this.stopTyping) {
|
this.stopTyping();
|
}
|
}
|
|
/**
|
* Show empty state message
|
*/
|
showEmptyState(message = '') {
|
const emptyElement = window.getTemplate('noResults');
|
|
if (message && emptyElement.querySelector('span')) {
|
emptyElement.querySelector('span').textContent = message;
|
}
|
|
this.elements.termsList.appendChild(emptyElement);
|
}
|
|
/**
|
* Move to next page
|
*/
|
nextPage() {
|
if (this.hasMore) {
|
this.page++;
|
}
|
}
|
|
/**
|
* Handle API errors
|
*/
|
handleError(error) {
|
console.error('Taxonomy selector error:', error);
|
|
if (this.error && this.error.log) {
|
return this.error.log(error, {
|
component: 'TaxonomySelector',
|
action: 'fetchTerms'
|
}, () => this.fetchTerms(this.activeField));
|
} else {
|
this.showEmptyState('Error loading terms. Please try again.');
|
}
|
}
|
|
/**
|
* Initialize prefetching system
|
*/
|
initPrefetching() {
|
if (document.readyState === 'complete') {
|
this.startPrefetching();
|
} else {
|
window.addEventListener('load', () => {
|
this.scheduleIdlePrefetch();
|
});
|
}
|
}
|
|
/**
|
* Schedule prefetching during browser idle time
|
*/
|
scheduleIdlePrefetch() {
|
if ('requestIdleCallback' in window) {
|
requestIdleCallback((deadline) => {
|
this.startPrefetching(deadline);
|
}, { timeout: 5000 });
|
} else {
|
setTimeout(() => this.startPrefetching(), 1000);
|
}
|
}
|
|
/**
|
* Start the prefetching process
|
*/
|
startPrefetching() {
|
const visibleTaxonomies = new Set();
|
document.querySelectorAll('button.taxonomy-toggle').forEach(button => {
|
visibleTaxonomies.add(button.dataset.taxonomy);
|
});
|
|
visibleTaxonomies.forEach(taxonomy => {
|
this.prefetchTaxonomyTerms(taxonomy);
|
});
|
}
|
|
/**
|
* Prefetch terms for a specific taxonomy
|
*/
|
async prefetchTaxonomyTerms(taxonomy) {
|
try {
|
const response = await this.cache.fetchWithCache(
|
`${jvbSettings.api}terms?taxonomy=${taxonomy}&page=1`,
|
{
|
method: 'GET',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': jvbSettings.nonce
|
}
|
},
|
{ content: taxonomy }
|
);
|
|
if (response.terms) {
|
if (!this.terms.has(taxonomy)) {
|
this.terms.set(taxonomy, new Map());
|
}
|
response.terms.forEach(term => {
|
this.terms.get(taxonomy).set(term.id, term);
|
});
|
}
|
} catch (error) {
|
console.warn(`Failed to prefetch terms for ${taxonomy}:`, error);
|
}
|
}
|
|
/**
|
* Get field ID from any element within the field
|
*/
|
getFieldId(element) {
|
// Try multiple approaches to find the field ID
|
if (element.dataset.fieldId) {
|
return element.dataset.fieldId;
|
}
|
|
const fieldContainer = element.closest('[data-field-id]');
|
if (fieldContainer) {
|
return fieldContainer.dataset.fieldId ||
|
fieldContainer.dataset.field ||
|
fieldContainer.dataset.name;
|
}
|
|
return null;
|
}
|
|
/**
|
* Utility: delay for prefetching
|
*/
|
delay(ms) {
|
return new Promise(resolve => setTimeout(resolve, ms));
|
}
|
|
/**
|
* Clean up
|
*/
|
destroy() {
|
// Remove event listeners
|
document.removeEventListener('click', this.handleClick);
|
document.removeEventListener('change', this.handleChange);
|
|
// Clear intervals and cleanup
|
this.observer?.disconnect();
|
|
// Clear all maps
|
this.fields.clear();
|
this.terms.clear();
|
this.selectedTerms.clear();
|
}
|
}
|
|
/**
|
* Initialize singleton
|
*/
|
document.addEventListener('DOMContentLoaded', function() {
|
if (!window.jvbSelector) {
|
window.jvbSelector = new TaxonomySelector();
|
}
|
});
|
