From 552d48a1424417da160c4952650ea6f4a3d7bafa Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 04 Jan 2026 20:18:23 +0000
Subject: [PATCH] =Taxonomy Selector and Creator refactor
---
assets/js/concise/TaxonomySelector.js | 1526 ++++++++++++++++++++--------------------------------------
1 files changed, 528 insertions(+), 998 deletions(-)
diff --git a/assets/js/concise/TaxonomySelector.js b/assets/js/concise/TaxonomySelector.js
index 8ae44bb..b411d11 100644
--- a/assets/js/concise/TaxonomySelector.js
+++ b/assets/js/concise/TaxonomySelector.js
@@ -1,6 +1,6 @@
/**
- * Centralized Taxonomy Selector with DataStore Integration
- * Handles all taxonomy selection fields using DataStore for state management
+ * TaxonomySelector - Streamlined version
+ * Manages taxonomy selection fields with DataStore integration
*/
class TaxonomySelector {
constructor() {
@@ -8,138 +8,133 @@
this.error = window.jvbError;
this.index = -1;
- this.hasAutocomplete = false;
this.isInitializing = true;
this.taxonomiesToFetch = new Set();
-
- this.triggers = new Set(['.taxonomy-toggle']);
-
this.subscribers = new Set();
- 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, //2 hours
- filters: {
- taxonomy: '',
- page: 1,
- search: '',
- parent: 0
- },
- required: 'taxonomy',
- delayFetch: true,
- });
+ // 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;
- // Central field management
+ // Field management
this.fields = new Map();
- this.selectedTerms = new Map(); // Current modal selection
+ this.selectedTerms = new Map(); // Current modal selection
- // Current modal context
+ // Modal context
this.activeField = null;
this.currentConfig = null;
- this.currentSingular = null;
- this.currentPlural = null;
-
- // Modal state
this.disabled = false;
- // Search debouncing
- this.searchHandler = null;
- this.autocompleteHandler = null;
- this.isAutocompleteActive = false;
+ // Search contexts
+ this.searchContexts = new Map();
this.init();
}
- /**
- * Initialize the selector
- */
init() {
this.initModal();
this.scanExistingFields();
this.initGlobalListeners();
- if (this.hasAutocomplete && window.jvbTaxCreator) {
+ // Initialize creator if needed
+ if (this.needsCreator() && window.jvbTaxCreator) {
this.creator = new window.jvbTaxCreator(this);
}
+
this.store.subscribe(this.handleStoreEvent.bind(this));
- // Complete initialization
+
this.isInitializing = false;
this.batchFetchTaxonomies();
}
- /**
- * Handle DataStore events
- */
+ needsCreator() {
+ return Array.from(this.fields.values()).some(field =>
+ field.canCreate || field.hasAutocomplete
+ );
+ }
+
+ /***********************************************************************
+ * DATASTORE EVENT HANDLING
+ ***********************************************************************/
+
handleStoreEvent(event, data) {
- switch (event) {
- case 'data-loaded':
- const taxonomy = this.store.filters.taxonomy;
- // Handle batch taxonomy loading (comma-separated)
- if (taxonomy?.includes(',')) {
- this.handleBatchDataLoaded(taxonomy, data);
- }
- // Update button states for this taxonomy (or taxonomies)
- if (taxonomy) {
- // Handle comma-separated taxonomies from batch fetch
- const taxonomies = taxonomy.includes(',')
- ? taxonomy.split(',').map(t => t.trim())
- : [taxonomy];
+ const handlers = {
+ 'data-loaded': () => this.handleDataLoaded(data),
+ 'filters-changed': () => this.handleFiltersChanged(data),
+ 'fetch-error': () => this.handleFetchError(data.error),
+ };
- taxonomies.forEach(tax => {
- this.updateFieldsForTaxonomy(tax);
- });
- }
+ handlers[event]?.();
+ }
- // Only render if modal is open OR autocomplete active
- if (this.modal?.open) {
- this.handleTermsLoaded(data);
- }
+ handleDataLoaded(data) {
+ const taxonomy = this.store.filters.taxonomy;
- if (this.isAutocompleteActive && this.activeField) {
- const field = this.fields.get(this.activeField);
- const terms = data.data?.items || [];
- const query = data.filters?.search || '';
- this.showAutocompleteResults(field, terms, query);
- this.isAutocompleteActive = false;
- }
- break;
+ // Update field states for affected taxonomies
+ if (taxonomy) {
+ const taxonomies = taxonomy.includes(',')
+ ? taxonomy.split(',').map(t => t.trim())
+ : [taxonomy];
- case 'filters-changed':
- if (this.modal?.open) {
- this.showLoading();
- }
- break;
+ taxonomies.forEach(tax => this.updateFieldsForTaxonomy(tax));
+ }
- case 'fetch-error':
- if (this.isAutocompleteActive && this.activeField) {
- this.showAutocompleteError(this.activeField);
- this.isAutocompleteActive = false;
+ // Initialize displays on first load
+ if (this.isInitializing) {
+ this.fields.forEach((config, fieldId) => {
+ if (config.selectedTerms.size > 0) {
+ this.initFieldDisplay(fieldId);
}
- this.handleFetchError(data.error);
- break;
+ });
+ }
+
+ // 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);
}
}
- /**
- * Handle loaded terms from DataStore
- */
- handleTermsLoaded(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(); // Use getFiltered() instead of getFilteredItems()
+ const terms = this.store.getFiltered();
const response = this.store.lastResponse?.page || {};
- const isSearch = data.filters?.search && data.filters.search.length > 0;
+ const isSearch = data.filters?.search?.length > 0;
const append = response.page > 1;
this.notify('terms-loaded', { terms, filters: data.filters });
@@ -152,7 +147,6 @@
} else {
this.renderTerms(terms, append, isSearch);
- // Handle pagination
if (response.has_more) {
this.observer.observe(this.ui.sentinel);
} else {
@@ -160,107 +154,88 @@
}
}
- // Announce to screen readers
this.a11y?.announce(terms.length, append);
}
- /**
- * Handle fetch errors
- */
+ 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) {
- console.error('Taxonomy fetch error:', error);
this.hideLoading();
- if (this.error?.log) {
- this.error.log(error, {
- component: 'TaxonomySelector',
- action: 'fetchTerms'
- }, () => this.fetchCurrentTerms());
+ const context = this.getActiveSearchContext();
+
+ if (context === 'autocomplete') {
+ this.showAutocompleteError(this.activeField);
+ this.searchContexts.delete(this.activeField);
} else {
- this.showEmptyState('Error loading terms. Please try again.');
+ this.handleError(error, 'fetch');
}
}
+ /***********************************************************************
+ * FIELD MANAGEMENT
+ ***********************************************************************/
- /**
- * Check if taxonomy has terms and update button states
- */
- updateFieldButtonState(fieldId) {
- const field = this.fields.get(fieldId);
- if (!field) return;
-
- // Check store for items of this specific taxonomy
- 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.getSingular(field.taxonomy)} available`
- : `Select ${this.getPlural(field.taxonomy)}`;
- }
- }
- /**
- * Update fields when taxonomy items are updated
- */
updateFieldsForTaxonomy(taxonomy) {
this.getFieldsForTaxonomy(taxonomy).forEach(field => {
this.updateFieldButtonState(field.id);
});
}
- /**
- * Get fields for a specific taxonomy
- */
+ 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);
}
-
-
- /**
- * Scan page for existing taxonomy fields and register them
- */
- scanExistingFields(container = null) {
- if (!container) {
- container = document.body;
- }
- const selectors = container.querySelectorAll('.field.taxonomy, .field.post');
-
- selectors.forEach(selector => {
+ scanExistingFields(container = document.body) {
+ container.querySelectorAll('.field.taxonomy, .field.post').forEach(selector => {
try {
this.registerField(selector);
} catch (error) {
- this.error.log(error, {
- component: 'TaxonomySelector',
- action: 'scanExistingFields',
- container: selector.dataset.name
- });
+ this.handleError(error, 'scanExistingFields', selector.dataset.name);
}
});
}
- /**
- * Register a taxonomy field
- */
- registerField(field, options = {}) {
- let input = field.querySelector('input[type=hidden]');
- if (!input) {
- return false;
- }
- if (!('fieldId' in field.dataset)) {
- field.dataset.fieldId = this.createFieldId(field);
- }
- let fieldId = field.dataset.fieldId;
+ registerField(field) {
+ const input = field.querySelector('input[type=hidden]');
+ if (!input) return false;
- let button = (Object.hasOwn(options, 'button')) ? options.button : field.querySelector('button.taxonomy-toggle');
+ const fieldId = this.createFieldId(field);
+ field.dataset.fieldId = fieldId;
- if (Object.hasOwn(options, 'buttonSelector')) {
- this.triggers.add(options.buttonSelector);
- }
-
- let config = {
+ const button = field.querySelector('button.taxonomy-toggle');
+ const config = {
id: fieldId,
input: input,
container: field,
@@ -269,45 +244,31 @@
maxSelection: parseInt(button.dataset.max) || 0,
canSearch: 'search' in button.dataset,
hasAutocomplete: 'autocomplete' in button.dataset,
- autocompleteDropdown: field.querySelector('.autocomplete-dropdown')??false,
+ autocompleteDropdown: field.querySelector('.autocomplete-dropdown') || null,
canCreate: 'creatable' in button.dataset,
isRequired: 'required' in button.dataset,
selectedTerms: new Set(),
toggle: button,
- selectedContainer: (Object.hasOwn(options, 'selected')) ? options.selected : field.querySelector('.selected-items'),
- ...options
+ selectedContainer: field.querySelector('.selected-items'),
};
- if (!this.hasAutocomplete && config.hasAutocomplete) {
- this.hasAutocomplete = true;
- this.initAutocomplete();
- }
-
- // Parse initial selected values
+ // Parse initial values
const value = input.value.trim();
- if (value !== '') {
- const selectedIds = value.split(',')
+ if (value) {
+ value.split(',')
.map(id => parseInt(id.trim()))
- .filter(id => !isNaN(id));
- selectedIds.forEach(id => config.selectedTerms.add(id));
- }
-
- if (Object.hasOwn(options, 'selectedItems')) {
- options.selectedItems.forEach(id => {
- config.selectedTerms.add(id);
- });
+ .filter(id => !isNaN(id))
+ .forEach(id => config.selectedTerms.add(id));
}
this.fields.set(fieldId, config);
- // Ensure store exists for this taxonomy
+ // Queue for batch fetch
if (this.isInitializing) {
this.taxonomiesToFetch.add(config.taxonomy);
- } else {
- // this.store.setFilter('taxonomy', config.taxonomy);
}
- // Initialize display for any pre-selected values
+ // Initialize display
if (config.selectedTerms.size > 0) {
this.initFieldDisplay(fieldId);
}
@@ -315,78 +276,29 @@
return fieldId;
}
- /**
- * Register a filter button (simplified registration for feed blocks)
- */
- registerFilterButton(button, options = {}) {
- const fieldId = this.createFieldId(button);
- button.dataset.fieldId = fieldId;
-
- if (options.buttonSelector) {
- this.triggers.add(options.buttonSelector);
- }
-
- const config = {
- id: fieldId,
- input: null,
- container: options.container || button.closest('.filters') || button.parentElement,
- taxonomy: button.dataset.taxonomy,
- name: `filter_${button.dataset.taxonomy}`,
- maxSelection: parseInt(button.dataset.max) || 0,
- canSearch: 'search' in button.dataset,
- hasAutocomplete: false,
- canCreate: false,
- isRequired: false,
- selectedTerms: new Set(options.selectedItems || []),
- toggle: button,
- selectedContainer: options.selected || null,
- isFilterMode: true,
- ...options
- };
-
- this.fields.set(fieldId, config);
-
- if (this.isInitializing) {
- this.taxonomiesToFetch.add(config.taxonomy);
- } else {
- this.store.setFilter('taxonomy', config.taxonomy);
- }
-
- return fieldId;
- }
-
- /**
- * Create unique field ID
- */
createFieldId(field) {
this.index++;
return 'selector-' + this.index;
}
- /**
- * Initialize display for a field with existing values
- */
async initFieldDisplay(fieldId) {
const field = this.fields.get(fieldId);
if (!field || field.selectedTerms.size === 0) return;
- const selectedIds = Array.from(field.selectedTerms);
-
- selectedIds.forEach(termId => {
- const term = this.store.get(termId); // Changed from getItem
+ Array.from(field.selectedTerms).forEach(termId => {
+ const term = this.store.get(termId);
if (term) {
- this.addTermToDisplay(fieldId, term.id, term.name, term.path);
+ this.addTermDisplay(termId, term.name, term.path, 'field', fieldId);
}
});
}
- /**
- * Initialize modal elements
- */
- initModal() {
- this.modalID = 'dialog#jvb-selector';
- this.modal = document.querySelector(this.modalID);
+ /***********************************************************************
+ * MODAL INITIALIZATION
+ ***********************************************************************/
+ initModal() {
+ this.modal = document.querySelector('dialog#jvb-selector');
if (!this.modal) {
console.warn('Taxonomy selector modal not found');
return;
@@ -394,36 +306,24 @@
this.initModalElements();
- // Initialize modal instance
this.modalInstance = new window.jvbModal(this.modal, {
- handleForm: false,
- save: null,
- open: null
+ handleForm: false
});
- this.modalInstance.subscribe((event, data) => {
- switch (event) {
- case 'modal-open':
- this.openModal(data);
- break;
- case 'modal-close':
- this.closeModal(data);
- break;
- }
+
+ this.modalInstance.subscribe((event) => {
+ if (event === 'modal-open') this.openModal();
+ if (event === 'modal-close') this.closeModal();
});
}
- /**
- * Initialize modal element references
- */
initModalElements() {
- this.selectors = {
+ const selectors = {
search: {
input: '[type=search]',
- clear: '.clear-search',
container: '.search-wrapper'
},
- termsList: '.items-container',
- termsWrap: '.items-wrap',
+ termsList: '.items-container',
+ termsWrap: '.items-wrap',
breadcrumbs: {
nav: 'nav.term-navigation',
back: '.back-to-parent',
@@ -436,25 +336,20 @@
sentinel: '.scroll-sentinel',
modal: {
title: '#modal-title',
- content: '.modal-content'
},
create: {
details: '.create-new-term',
- parent: '#select_parent',
summary: '.create-new-term summary',
- name: '#term_name',
- button: '.submit-term',
label: {
name: '[for=term_name]',
parent: '[for=select_parent]'
}
- },
- favouriteTerms: '.favourite-terms'
- }
+ }
+ };
- this.ui = window.uiFromSelectors(this.selectors);
+ this.ui = window.uiFromSelectors(selectors);
- // Initialize intersection observer for infinite scroll
+ // Initialize infinite scroll observer
this.observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
@@ -467,58 +362,29 @@
});
}
- /**
- * Set up global event delegation
- */
+ /***********************************************************************
+ * GLOBAL EVENT LISTENERS
+ ***********************************************************************/
+
initGlobalListeners() {
document.addEventListener('click', this.handleClick.bind(this));
document.addEventListener('change', this.handleChange.bind(this));
- if (this.hasAutocomplete) {
- this.initAutocomplete();
- }
+ document.addEventListener('input', this.handleInput.bind(this));
+ document.addEventListener('focus', this.handleFocus.bind(this), true);
+ document.addEventListener('blur', this.handleBlur.bind(this), true);
}
- initAutocomplete()
- {
- this.autocompleteHandler = (e) => {
- window.debouncer.schedule(
- 'taxonomy-autocomplete',
- () => this.handleAutocomplete(e),
- 300
- );
- };
- document.addEventListener('input', this.autocompleteHandler);
- document.addEventListener('blur', this.cleanupAutocomplete.bind(this));
- // Preload taxonomy data on focus
- document.addEventListener('focus', (e) => {
- if (!('autocomplete' in e.target.dataset)) {
- return;
- }
-
+ 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) return;
-
- // Preload this taxonomy's data
- this.preloadTaxonomy(field.taxonomy);
- }, true); // Use capture phase
- }
-
- /**
- * Handle global click events
- */
- handleClick(e) {
- // Handle taxonomy toggle buttons
- const toggleButton = window.targetCheck(e, Array.from(this.triggers));
-
- if (toggleButton) {
- e.preventDefault();
- this.handleToggleClick(toggleButton);
+ if (field) this.setActiveField(fieldId, true);
return;
}
- // Handle remove selected term buttons
+ // Remove selected term
const removeButton = window.targetCheck(e, 'button.remove-item');
if (removeButton && e.target.closest('.jvb-selector')) {
const fieldId = this.getFieldId(removeButton);
@@ -527,25 +393,20 @@
return;
}
- // Handle modal close button
+ // Modal close
if (e.target.matches('.modal-close')) {
- if (this.modalInstance) {
- this.modalInstance.handleClose();
- }
+ this.modalInstance?.handleClose();
return;
}
- // Handle clicks within the modal
- if (this.modal && this.modal.contains(e.target)) {
+ // Modal clicks
+ if (this.modal?.contains(e.target)) {
this.handleModalClick(e);
}
}
- /**
- * Handle global change events
- */
handleChange(e) {
- // Handle hidden input changes for taxonomy fields
+ // Hidden input changes
const taxonomyField = window.targetCheck(e, '.taxonomy.field, .post.field');
if (taxonomyField && e.target.type === 'hidden') {
const fieldId = this.getFieldId(e.target);
@@ -553,60 +414,122 @@
return;
}
- // Handle modal changes
- if (this.modal && this.modal.contains(e.target)) {
+ // Modal checkboxes
+ if (this.modal?.contains(e.target)) {
this.handleModalChange(e);
}
}
- /**
- * Handle toggle button click
- */
- handleToggleClick(toggle) {
- try {
- const fieldId = this.getFieldId(toggle);
+ 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) {
- console.error('Field not found for toggle:', fieldId);
- return;
- }
-
-
- this.setActiveField(fieldId, true);
-
- } catch (error) {
- console.error('Error handling toggle click:', error);
- if (this.error?.log) {
- this.error.log(error, {
- component: 'TaxonomySelector',
- action: 'handleToggleClick'
- });
+ if (field?.hasAutocomplete) {
+ this.performSearch(e.target.value.trim(), 'autocomplete', fieldId);
}
}
}
- /**
- * Set the active field for modal operations
- */
+ 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);
- this.currentSingular = this.getSingular(this.currentConfig.taxonomy);
- this.currentPlural = this.getPlural(this.currentConfig.taxonomy);
-
if (openModal) {
this.modalInstance.handleOpen();
}
- // Set taxonomy filter - store handles the rest
this.store.setFilter('taxonomy', this.currentConfig.taxonomy);
- // Clear modal selection state
+ // Reset modal selection state
this.selectedTerms.clear();
- // Copy field's current selections to modal state
+ // Copy field selections to modal
this.currentConfig.selectedTerms.forEach(termId => {
const term = this.store.get(termId);
if (term) {
@@ -619,147 +542,55 @@
});
}
-
- /**
- * Handle clicks within modal
- */
handleModalClick(e) {
if (window.targetCheck(e, '.remove-item')) {
- let selectedItem = window.targetCheck(e, '.selected-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')) {
- let termItem = e.target.closest('li');
+ const termItem = e.target.closest('li');
this.navigateToChild(
parseInt(termItem.dataset.id),
termItem.querySelector('.term-name').textContent
);
} else if (window.targetCheck(e, '.path-level')) {
- let pathLevel = window.targetCheck(e, '.path-level');
- this.navigateToPath(pathLevel);
+ const pathLevel = window.targetCheck(e, '.path-level');
+ this.navigateToPath(parseInt(pathLevel.dataset.id) || 0);
}
}
- /**
- * Handle changes within modal (checkboxes)
- */
handleModalChange(e) {
- if (window.targetCheck(e, this.modalID) && e.target.type === 'checkbox') {
- e.preventDefault();
- e.stopPropagation();
+ if (e.target.type !== 'checkbox') return;
- const termId = parseInt(e.target.closest('li').dataset.id);
- const label = e.target.closest('li').querySelector('label');
+ e.preventDefault();
+ e.stopPropagation();
- if (e.target.checked) {
- this.addSelectedTermToModal(termId, label.title, label.dataset.path);
- } else {
- this.removeSelectedTermFromModal(termId);
- }
+ 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 for filtering (without a field)
- * @param {string} taxonomy - The taxonomy to filter by
- * @param {Function} callback - Callback when terms are selected
- * @param {Array} preselected - Array of term IDs already selected
- */
- openForFilter(taxonomy, callback, preselected = []) {
- // Create a temporary virtual field config
- const virtualFieldId = `filter-${taxonomy}-${Date.now()}`;
-
- this.fields.set(virtualFieldId, {
- id: virtualFieldId,
- input: null, // No input for filter mode
- container: null,
- taxonomy: taxonomy,
- name: `filter_${taxonomy}`,
- maxSelection: 0, // No limit for filters
- canSearch: true,
- hasAutocomplete: false,
- autocompleteDropdown: document.querySelector('.autocomplete-dropdown')??false,
- canCreate: false, // Disable creation for filters
- isRequired: false,
- selectedTerms: new Set(preselected),
- toggle: null,
- selectedContainer: null,
- isFilterMode: true, // Flag for filter mode
- filterCallback: callback // Store the callback
- });
-
- this.setActiveField(virtualFieldId, true);
- this.modalInstance.handleOpen();
- }
-
- /**
- * Open modal and initialize
- */
openModal() {
if (!this.currentConfig) {
console.error('No active field set');
return;
}
- // Initialize creator if available
- if (!this.creator && this.currentConfig.canCreate && 'jvbTaxCreator' in window) {
- this.creator = new window.jvbTaxCreator(this);
- }
-
- // Update modal UI
- this.updateModalForTaxonomy();
-
- // Load selected terms display
+ this.updateModalUI();
this.updateModalSelections();
- this.updateSelectionCount();
- // Clear terms list and show loading
window.removeChildren(this.ui.termsList);
this.showLoading();
}
- /**
- * Update selection count display in modal
- */
- updateSelectionCount() {
- if (!this.currentConfig) return;
-
- const count = this.selectedTerms.size;
- const max = this.currentConfig.maxSelection;
-
- // Update any count display elements
- const countElement = this.modal?.querySelector('.selection-count');
- if (countElement) {
- if (max > 0) {
- countElement.textContent = `${count} of ${max} selected`;
- } else {
- countElement.textContent = `${count} selected`;
- }
- }
- }
-
-
-
- /**
- * Get singular label for taxonomy
- */
- getSingular(taxonomy) {
- return jvbSettings.labels[taxonomy]?.single || taxonomy;
- }
-
- /**
- * Get plural label for taxonomy
- */
- getPlural(taxonomy) {
- return jvbSettings.labels[taxonomy]?.plural || taxonomy;
- }
-
- /**
- * Close modal and save selections
- */
closeModal() {
this.observer.unobserve(this.ui.sentinel);
window.removeChildren(this.ui.termsList);
@@ -769,53 +600,19 @@
taxonomy: this.currentConfig.taxonomy
});
- if (this.currentConfig?.isFilterMode) {
- if (this.currentConfig.filterCallback) {
- const selectedIds = Array.from(this.selectedTerms.keys());
- this.currentConfig.filterCallback(selectedIds, this.currentConfig.taxonomy);
- }
- // this.fields.delete(this.activeField);
- } else if (this.activeField) {
+ if (this.activeField) {
this.saveSelectionsToField(this.activeField);
}
- // Cleanup
- if (this.currentConfig?.canSearch && this.searchHandler) {
- this.ui.search.input.removeEventListener('input', this.searchHandler);
- }
-
- if (!this.hasAutocomplete && this.creator) {
- delete this.creator;
- }
-
- // Remove: this.activeStore = null;
this.activeField = null;
this.currentConfig = null;
}
- /**
- * Reset modal state
- */
- resetModalState() {
- this.disabled = false;
+ updateModalUI() {
+ const singular = this.getLabel(this.currentConfig.taxonomy, 'single');
+ const plural = this.getLabel(this.currentConfig.taxonomy, 'plural');
- window.removeChildren(this.ui.termsList);
- window.removeChildren(this.ui.selectedTerms);
- this.ui.search.input.value = '';
-
- // Clear navigation breadcrumbs
- window.removeChildren(this.ui.breadcrumbs.nav);
- this.ui.breadcrumbs.nav.appendChild(this.ui.breadcrumbs.back);
- this.ui.breadcrumbs.back.hidden = true;
- }
-
- /**
- * Update modal content for current taxonomy
- */
- updateModalForTaxonomy() {
- if (!this.currentConfig) return;
-
- this.ui.modal.title.textContent = `Select ${this.currentPlural}`;
+ this.ui.modal.title.textContent = `Select ${plural}`;
if (this.ui.search.container) {
this.ui.search.container.style.display = this.currentConfig.canSearch ? 'block' : 'none';
@@ -826,185 +623,126 @@
this.ui.create.details.hidden = !this.currentConfig.canCreate;
if (this.ui.create.summary) {
- this.ui.create.summary.textContent = `Add new ${this.currentSingular}`;
+ this.ui.create.summary.textContent = `Add new ${singular}`;
}
if (this.ui.create.label.name) {
- this.ui.create.label.name.textContent = `Name this ${this.currentSingular}`;
+ this.ui.create.label.name.textContent = `Name this ${singular}`;
}
if (this.ui.create.label.parent) {
this.ui.create.label.parent.textContent = `Nest it under`;
}
-
- if (this.ui.create.parent) {
-
- }
}
- const openMessage = `Opened ${this.currentSingular} selection. Choose from checkboxes or search to filter results.`;
- this.a11y?.announce(openMessage);
+ this.a11y?.announce(`Opened ${singular} selection. Choose from checkboxes or search to filter results.`);
}
- /**
- * Update modal selections display
- */
updateModalSelections() {
window.removeChildren(this.ui.selectedTerms);
this.selectedTerms.forEach((termData, id) => {
- this.addTermToModalDisplay(id, termData.name, termData.path);
+ this.addTermDisplay(id, termData.name, termData.path, 'modal');
});
this.checkSelectionLimits();
}
- /**
- * Add selected term to modal
- */
addSelectedTermToModal(id, name, path) {
- this.selectedTerms.set(id, {
- id: id,
- name: name,
- path: path
- });
+ this.selectedTerms.set(id, { id, name, path });
- this.addTermToModalDisplay(id, name, path);
+ this.addTermDisplay(id, name, path, 'modal');
this.checkSelectionLimits();
- // Check the corresponding checkbox
const checkbox = this.ui.termsList.querySelector(`input[value="${id}"]`);
- if (checkbox) {
- checkbox.checked = true;
- }
+ if (checkbox) checkbox.checked = true;
}
- /**
- * Remove selected term from modal
- */
removeSelectedTermFromModal(id) {
this.selectedTerms.delete(parseInt(id));
- // Remove from modal display
const selectedItem = this.ui.selectedTerms.querySelector(`[data-id="${id}"]`);
- if (selectedItem) {
- selectedItem.remove();
- }
+ if (selectedItem) selectedItem.remove();
- // Uncheck the corresponding checkbox
const checkbox = this.ui.termsList.querySelector(`input[value="${id}"]`);
- if (checkbox) {
- checkbox.checked = false;
- }
+ 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.ui.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.ui.termsList.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
if (!checkbox.checked) {
- checkbox.disabled = disabled;
+ checkbox.disabled = this.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);
+ this.addTermDisplay(id, termData.name, termData.path, 'field', fieldId);
});
- // Update hidden input
- const selectedIds = Array.from(field.selectedTerms);
- field.input.value = selectedIds.join(',');
+ field.input.value = Array.from(field.selectedTerms).join(',');
field.input.dispatchEvent(new Event('change', { bubbles: true }));
}
- /**
- * Remove selected term from field
- */
+ /***********************************************************************
+ * 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;
- const id = parseInt(termId);
- field.selectedTerms.delete(id);
+ field.selectedTerms.delete(parseInt(termId));
- // Remove from display
- const selectedItem = field.selectedContainer.querySelector(`[data-id="${id}"]`);
- if (selectedItem) {
- selectedItem.remove();
- }
+ const selectedItem = field.selectedContainer.querySelector(`[data-id="${termId}"]`);
+ if (selectedItem) selectedItem.remove();
- // Update hidden input
- const selectedIds = Array.from(field.selectedTerms);
- field.input.value = selectedIds.join(',');
+ field.input.value = Array.from(field.selectedTerms).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;
@@ -1013,248 +751,71 @@
field.selectedTerms.clear();
window.removeChildren(field.selectedContainer);
- if (value !== '') {
- const selectedIds = value.split(',')
+ if (value) {
+ value.split(',')
.map(id => parseInt(id.trim()))
- .filter(id => !isNaN(id));
+ .filter(id => !isNaN(id))
+ .forEach(id => field.selectedTerms.add(id));
- selectedIds.forEach(id => field.selectedTerms.add(id));
this.initFieldDisplay(fieldId);
}
}
- /**
- * Handle search input
- */
- handleSearch(e) {
- const query = e.target.value.trim();
+ /***********************************************************************
+ * NAVIGATION
+ ***********************************************************************/
- // Clear existing debounce
- if (this.searchHandler) {
- clearTimeout(this.searchHandler);
- }
-
- this.searchHandler = setTimeout(() => {
- // Single call - auto-fetches
- this.store.setFilters({
- search: query,
- page: 1,
- parent: query ? 0 : (this.store.filters.parent || 0)
- });
-
- window.removeChildren(this.ui.termsList);
- }, 300);
- }
-
- async handleAutocomplete(e) {
- if (!('autocomplete' in e.target.dataset)) {
- return;
- }
-
- const fieldId = this.getFieldId(e.target);
- const field = this.fields.get(fieldId);
-
- if (!field) return;
-
- // Store current value immediately (fixes fast typing issue)
- const query = e.target.value.trim();
- field.currentAutocompleteQuery = query;
-
- if (query.length < 2) {
- if (field.autocompleteDropdown) {
- field.autocompleteDropdown.hidden = true;
- }
- this.isAutocompleteActive = false;
- return;
- }
-
- this.activeField = fieldId;
- this.isAutocompleteActive = true;
-
- if (field.autocompleteDropdown) {
- field.autocompleteDropdown.hidden = false;
- }
-
- this.store.setFilters({
- taxonomy: field.taxonomy,
- search: query,
- page: 1
- });
- }
-
- cleanupAutocomplete(e) {
- if (!('autocomplete' in e.target.dataset)) {
- return;
- }
-
- const fieldId = this.getFieldId(e.target);
- const field = this.fields.get(fieldId);
-
- if (!field) return;
-
- if (this.creator) {
- delete this.creator;
- }
- }
-
- showAutocompleteError(fieldId) {
-
- const field = this.fields.get(fieldId);
- if (!field) {
- return;
- }
- if (!field.config.autocompleteDropdown) {
- field.config.autocompleteDropdown = field.element.querySelector('.autocomplete-dropdown');
- }
- const dropdown = field.config.autocompleteDropdown;
- if (dropdown) {
- window.removeChildren(dropdown);
- this.showEmptyState('Hmmm... something went wrong', dropdown);
- }
- }
-
- showAutocompleteResults(field, terms, query) {
- if (!field || !field.autocompleteDropdown) {
- return;
- }
-
- const dropdown = field.autocompleteDropdown;
- window.removeChildren(dropdown);
-
- if (terms.length === 0) {
- this.showEmptyState('No items found.', dropdown);
- } else {
- terms.forEach(term => {
- const element = this.createAutocompleteTermElement(field, term);
- if (element) {
- dropdown.appendChild(element);
- }
- });
- }
-
- // Only show create button if exact match doesn't exist
- const currentQuery = field.currentAutocompleteQuery || query;
- if (field.canCreate && currentQuery && window.jvbTaxCreator) {
- const exactMatch = terms.find(term =>
- term.name.toLowerCase() === currentQuery.toLowerCase()
- );
-
- if (!exactMatch) {
- const createOption = this.createNewTermOption(currentQuery);
- dropdown.appendChild(createOption);
- }
- }
-
- dropdown.hidden = false;
- }
-
- createNewTermOption(query) {
- const button = document.createElement('button');
- button.type = 'button';
- button.className = 'autocomplete-item create-term';
- button.dataset.query = query;
- button.innerHTML = `<strong>Create:</strong> "${query}"`;
-
- return button;
- }
-
- createAutocompleteTermElement(field, term) {
- const item = document.createElement('button');
- item.type = 'button';
- item.className = 'autocomplete-item';
- item.dataset.id = term.id;
- item.dataset.name = term.name;
- item.dataset.path = term.path || term.name;
- item.textContent = term.path || term.name;
-
- item.addEventListener('click', () => {
- // Add term to field
- field.selectedTerms.add(parseInt(term.id));
- this.addTermToDisplay(field.id, term.id, term.name, term.path);
-
- // Update input
- field.input.value = Array.from(field.selectedTerms).join(',');
- field.input.dispatchEvent(new Event('change', { bubbles: true }));
-
- // Clear and hide dropdown
- field.autocompleteDropdown.hidden = true;
- const input = field.container.querySelector('input[data-autocomplete]');
- if (input) input.value = '';
- });
-
- return item;
- }
-
- /**
- * Navigate to parent term
- */
navigateToParent() {
- // Store handles fetch automatically
- this.store.setFilters({
- parent: 0,
- page: 1
- });
-
+ this.store.setFilters({ parent: 0, page: 1 });
window.removeChildren(this.ui.termsList);
this.ui.breadcrumbs.back.hidden = true;
}
- /**
- * Navigate to child term
- */
navigateToChild(termId, termName) {
- // Store handles fetch automatically
- this.store.setFilters({
- parent: termId,
- page: 1
- });
-
+ this.store.setFilters({ parent: termId, page: 1 });
window.removeChildren(this.ui.termsList);
this.updateBreadcrumbs(termId, termName);
this.ui.breadcrumbs.back.hidden = false;
}
- /**
- * Navigate to specific path level
- */
- navigateToPath(pathLevel) {
- const parentId = parseInt(pathLevel.dataset.id) || 0;
-
- // Store handles fetch automatically
- this.store.setFilters({
- parent: parentId,
- page: 1
- });
-
+ navigateToPath(parentId) {
+ this.store.setFilters({ parent: parentId, page: 1 });
window.removeChildren(this.ui.termsList);
this.ui.breadcrumbs.back.hidden = parentId === 0;
}
- /**
- * Load more terms (pagination)
- */
loadMoreTerms() {
const currentPage = this.store.filters.page || 1;
this.store.setFilter('page', currentPage + 1);
}
- /**
- * Render terms list
- */
- renderTerms(terms = null, append = false, showPath = false) {
- // If no terms provided, get from store
- if (!terms) {
- terms = this.store.getFiltered();
- }
+ updateBreadcrumbs(termId, termName) {
+ const breadcrumb = window.getTemplate('termBreadcrumb');
+ breadcrumb.dataset.id = termId;
+ breadcrumb.textContent = termName;
+ breadcrumb.title = termName;
- if (!append) {
- window.removeChildren(this.ui.termsList);
+ 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();
- }
+ if (!append) this.showEmptyState();
return;
}
@@ -1271,104 +832,145 @@
show: showPath
});
- if (element) {
- fragment.appendChild(element);
- }
+ if (element) fragment.appendChild(element);
});
this.ui.termsList.appendChild(fragment);
}
- /**
- * Create individual term element
- */
createTermElement(termData) {
- if (!termData || !termData.name) return null;
+ if (!termData?.name) return null;
- const listItem = window.getTemplate('termListItem').cloneNode(true);
+ 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');
+ const nameSpan = listItem.querySelector('.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;
+ 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;
+ label.htmlFor = checkbox.id;
+ label.title = termData.path || termData.name;
+ label.dataset.path = termData.path;
- nameSpan.textContent = termData.show ? termData.path : termData.name;
- }
+ 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);
- }
+ const childrenToggle = window.getTemplate('termChildrenToggle');
+ childrenToggle.ariaLabel = `View sub-terms of ${termData.name}`;
+ listItem.appendChild(childrenToggle);
}
return listItem;
}
- /**
- * Create children toggle button
- */
- createChildrenToggle() {
+ /***********************************************************************
+ * 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 = 'toggle-children';
- button.innerHTML = '→';
+ 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;
}
- /**
- * Update breadcrumb navigation
- */
- updateBreadcrumbs(termId, termName) {
- // This is a simplified version - you'd want to maintain a proper breadcrumb trail
- const breadcrumb = window.getTemplate('termBreadcrumb').cloneNode(true);
- breadcrumb.dataset.id = termId;
- breadcrumb.textContent = termName;
- breadcrumb.title = termName;
+ createAutocompleteCreateButton(query) {
+ const button = document.createElement('button');
+ button.type = 'button';
+ button.className = 'autocomplete-item create-term';
+ button.dataset.query = query;
- // Remove any existing breadcrumbs after this level
- const existingCrumb = this.ui.breadcrumbs.nav.querySelector(`[data-id="${termId}"]`);
- if (existingCrumb) {
- // Remove all breadcrumbs after this one
- while (existingCrumb.nextElementSibling) {
- existingCrumb.nextElementSibling.remove();
- }
- } else {
- this.ui.breadcrumbs.nav.appendChild(breadcrumb);
- }
+ const strong = document.createElement('strong');
+ strong.textContent = 'Create: ';
+
+ button.appendChild(strong);
+ button.appendChild(document.createTextNode(`"${query}"`));
+
+ return button;
}
- /**
- * Show loading state
- */
+ 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 searchQuery = this.store.filters.search || '';
+ const currentParent = this.store.filters.parent || 0;
- let message = searchQuery !== '' ?
- `searching for "${searchQuery}" items` :
- currentParent === 0 ?
- 'loading items' :
- `loading child items`;
+ 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);
@@ -1377,9 +979,6 @@
}
}
- /**
- * Hide loading state
- */
hideLoading() {
this.ui.loading.loading.hidden = true;
this.modal.classList.remove('loading');
@@ -1389,47 +988,40 @@
}
}
- /**
- * Show empty state message
- */
showEmptyState(message = 'No items found.', container = null) {
- if (!container) {
- container = this.ui.termsList;
- }
- const emptyElement = window.getTemplate('noResults').cloneNode(true);
+ if (!container) container = this.ui.termsList;
- if (message && emptyElement.querySelector('span')) {
- emptyElement.querySelector('span').textContent = message;
+ const emptyElement = window.getTemplate('noResults');
+ const messageSpan = emptyElement.querySelector('span');
+
+ if (message && messageSpan) {
+ messageSpan.textContent = message;
}
container.appendChild(emptyElement);
}
- /**
- * Get field ID from any element within the field
- */
+ /***********************************************************************
+ * UTILITIES
+ ***********************************************************************/
+
getFieldId(element) {
- if (element.dataset.fieldId) {
- return element.dataset.fieldId;
- }
+ if (element.dataset.fieldId) return element.dataset.fieldId;
const fieldContainer = element.closest('[data-field-id]');
- if (fieldContainer) {
- return fieldContainer.dataset.fieldId;
- }
-
- return null;
+ return fieldContainer?.dataset.fieldId || null;
}
- /********************************************
- BATCH FETCH: fetches first page for all taxonomies in one call
- ********************************************/
+
+ 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();
- // Single fetch - the data-loaded event will handle cache splitting
this.store.setFilters({
taxonomy: taxonomies.join(','),
page: 1,
@@ -1437,85 +1029,31 @@
parent: 0
});
}
- handleBatchDataLoaded(taxonomyString, data) {
- const taxonomies = taxonomyString.split(',').map(t => t.trim());
- const storeInstance = this.store.getStore(); // Access actual store instance
- taxonomies.forEach(taxonomy => {
- const filters = {
- taxonomy: taxonomy,
- page: 1,
- search: '',
- parent: 0
- };
-
- // Use the internal generateCacheKey method via store instance
- const cacheKey = this.generateCacheKeyForFilters(filters);
-
- // Filter items for this specific taxonomy
- const items = Array.from(this.store.data.values())
- .filter(item => item.taxonomy === taxonomy)
- .map(item => item.id);
-
- const cacheEntry = {
- key: cacheKey,
- items: items,
- timestamp: Date.now(),
- endpoint: storeInstance.config.endpoint,
- filters: filters
- };
-
- // Set in both memory and IndexedDB cache
- storeInstance.cache.set(cacheKey, cacheEntry);
-
- // Persist to IndexedDB (if available)
- if (storeInstance.db?.objectStoreNames.contains('cache')) {
- const tx = storeInstance.db.transaction(['cache'], 'readwrite');
- const objectStore = tx.objectStore('cache');
- objectStore.put(cacheEntry);
- }
-
- // Update button states for this taxonomy
- this.updateFieldsForTaxonomy(taxonomy);
- });
-
- // Initialize field displays
- this.fields.forEach((config, fieldId) => {
- if (config.selectedTerms.size > 0) {
- this.initFieldDisplay(fieldId);
- }
- });
- }
-
- /**
- * Generate cache key for given filters (matching DataStore's internal logic)
- */
- generateCacheKeyForFilters(filters) {
- const normalized = Object.keys(filters)
- .sort()
- .reduce((acc, key) => {
- acc[key] = filters[key];
- return acc;
- }, {});
-
- return JSON.stringify(normalized);
- }
-
- /**
- * Preload taxonomy data on hover
- */
async preloadTaxonomy(taxonomy) {
- // Trigger fetch for this taxonomy
- this.store.setFilters({
+ await this.store.setFilters({
taxonomy: taxonomy,
page: 1,
search: '',
parent: 0
});
}
- /*****************************************
- SUBSCRIBERS
- *****************************************/
+
+ 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);
@@ -1523,7 +1061,7 @@
}
notify(event, data = {}) {
- this.subscribers.forEach( callback => {
+ this.subscribers.forEach(callback => {
try {
callback(event, data);
} catch (error) {
@@ -1532,35 +1070,27 @@
});
}
- /**
- * Clean up
- */
destroy() {
- // Remove event listeners
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);
- // Clear intervals and cleanup
this.observer?.disconnect();
-
- // Destroy all stores
this.store.destroy();
-
this.subscribers.clear();
- // Clear all maps
this.fields.clear();
this.selectedTerms.clear();
+ this.searchContexts.clear();
}
}
-/**
- * Initialize singleton
- */
-document.addEventListener('DOMContentLoaded', function() {
+// Initialize on auth ready
+document.addEventListener('DOMContentLoaded', () => {
window.auth.subscribe((event) => {
if (event === 'auth-loaded') {
window.jvbSelector = new TaxonomySelector();
}
});
-
});
--
Gitblit v1.10.0