|
class TaxonomySelectorOld
|
{
|
constructor(container, options = {}) {
|
this.initialized = false;
|
this.container = container;
|
this.config = this.initializeConfig(options);
|
this.a11y = window.jvbA11y;
|
this.cache = window.jvbCache;
|
this.loading = window.jvbLoading;
|
|
this.taxonomy = container.dataset.taxonomy;
|
this.selectedItems = options.selected ?? {};
|
|
this.commonTerms = new Map();
|
this.pendingTerms = new Map();
|
this.page = 1;
|
this.loading = false;
|
this.hasMore = true;
|
this.searchQuery = '';
|
this.createNew = false;
|
this.currentTerms = new Map();
|
this.initialState = new Map();
|
|
this.init();
|
|
this.navigationPath = [];
|
this.currentParent = 0;
|
this.currentParentName = '';
|
this.currentPath = '';
|
this.limitWasReached = false;
|
|
if (this.config.selected) {
|
if (typeof this.config.selected === 'object' && !window.isEmptyObject(this.config.selected)) {
|
this.config.selected.forEach(item => {
|
this.selectedItems[item.id] = item.name;
|
});
|
} else {
|
this.selectedItems = this.config.selected;
|
}
|
|
this.updateSelected();
|
}
|
|
if (this.selectedItems) {
|
for (const [id, name] of Object.entries(this.selectedItems)) {
|
this.initialState.set(id, name);
|
}
|
}
|
|
this.initialized = true;
|
this.boundTermListener = this.initializeToggleButtons.bind(this);
|
}
|
|
initializeConfig(options) {
|
const defaultConfig = this.container ?
|
JSON.parse(this.container.dataset.config || '{}') : {};
|
|
return {
|
...defaultConfig,
|
...options,
|
selectedItems: options.selected ?? {},
|
maxSelections: options.maxSelections || defaultConfig.maxSelections || 0,
|
hierarchical: options.hierarchical || defaultConfig.hierarchical || false,
|
base: options.base || defaultConfig.base || '',
|
onSuccess: options.onSuccess || defaultConfig.onSuccess || null,
|
onClose: options.onClose || defaultConfig.onClose || null,
|
onCreate: options.onCreate || defaultConfig.onCreate || null,
|
values: options.values || defaultConfig.values || null,
|
};
|
}
|
|
init() {
|
this.modal = this.container.querySelector('dialog');
|
this.modalSelected = this.container.querySelector('.selected-items');
|
this.searchInput = this.modal.querySelector('input[type=search]');
|
this.itemsContainer = this.modal.querySelector('.items-container');
|
this.itemsWrap = this.modal.querySelector('.items-wrap');
|
this.selectedContainer = this.container.querySelector('.selected-items');
|
this.breadcrumbNav = this.modal.querySelector('nav.term-navigation');
|
this.loadingText = this.modal.querySelector('p.loading');
|
this.noResultsText = this.modal.querySelector('p.no-results') || this.createNoResultsElement();
|
this.clearSearchButton = this.modal.querySelector('.clear-search');
|
this.modalSelectedItems = this.modal.querySelector('.selected-items .selected');
|
|
// Initialize common terms from config
|
if (this.config.common) {
|
Object.entries(this.config.common).forEach(([id, term]) => {
|
this.commonTerms.set(id, term);
|
});
|
}
|
|
this.initializeEventListeners();
|
this.initializeInfiniteScroll();
|
this.initializeTermCreation();
|
this.updateModalSelected();
|
}
|
|
updateModalSelected() {
|
if (!this.modalSelectedItems) return;
|
|
// Clear existing selected items
|
removeChildren(this.modalSelectedItems);
|
|
for (const [id, term] of Object.entries(this.selectedItems)) {
|
const itemDiv = window.getTemplate('selectedTerm');
|
itemDiv.dataset.id = id;
|
let name = itemDiv.querySelector('span');
|
let button = itemDiv.querySelector('button');
|
[name.textContent, button.ariaLabel] =
|
[escapeHtml(term), `Remove ${escapeHtml(term)}`];
|
|
this.modalSelectedItems.appendChild(itemDiv);
|
}
|
|
// Add event listeners for removal
|
this.modalSelectedItems.addEventListener('click', e => {
|
const removeBtn = e.target.closest('.remove-item');
|
if (!removeBtn) return;
|
|
const item = removeBtn.closest('.selected-item');
|
if (item) {
|
this.removeItem(item.dataset.id);
|
}
|
});
|
}
|
|
createNoResultsElement() {
|
const noResults = window.getTemplate('noResults');
|
noResults.className = 'no-results';
|
noResults.hidden = true;
|
this.itemsWrap.appendChild(noResults);
|
return noResults;
|
}
|
|
buildParams() {
|
let params = new URLSearchParams({
|
taxonomy: this.taxonomy,
|
parent: this.currentParent || 0,
|
search: this.searchQuery || '',
|
per_page: 20,
|
page: this.page,
|
});
|
if (this.config.feed) {
|
if (window.feedBlock && window.feedBlock.config && window.feedBlock.config.context) {
|
params.append('main_context', JSON.stringify({
|
context: window.feedBlock.config.context,
|
id: window.feedBlock.config.source
|
}));
|
params.append('content', window.feedBlock.filters.content);
|
}
|
}
|
return params;
|
}
|
|
showLoading() {
|
if (this.loading) return;
|
this.loading = true;
|
this.loadingText.hidden = false;
|
this.noResultsText.hidden = true;
|
this.modal.classList.add('loading');
|
}
|
hideLoading()
|
{
|
this.loading = false;
|
this.loadingText.hidden = true;
|
this.modal.classList.remove('loading');
|
}
|
async fetchTerms(forceRefresh = false) {
|
try {
|
const params = this.buildParams();
|
|
const data = await this.cache.fetchWithCache(
|
`${jvbSettings.api}terms?` + params.toString(),
|
{
|
method: 'GET',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': jvbSettings.nonce
|
}
|
},
|
{
|
content: this.taxonomy,
|
forceRefresh: forceRefresh
|
}
|
);
|
return data;
|
} catch (e) {
|
console.error('Error fetching terms:', error);
|
this.noResultsText.hidden = false;
|
this.noResultsText.textContent = 'Error loading terms. Please try again.';
|
throw error;
|
}
|
|
}
|
async fetchAndRenderTerms(forceRefresh = false) {
|
if (this.loading || (!this.hasMore && !forceRefresh)) return;
|
|
try {
|
this.showLoading();
|
return;
|
const response = await this.fetchTerms(forceRefresh);
|
|
// Check if we have results
|
const hasResults = response.terms && Object.keys(response.terms).length > 0;
|
|
await this.renderTerms(response.terms, this.page === 1);
|
|
// Show no results message if needed
|
this.noResultsText.hidden = hasResults || !this.searchQuery;
|
|
// Update pagination info if available
|
const paginationInfo = this.modal.querySelector('.pagination-info');
|
if (paginationInfo && response.pagination) {
|
paginationInfo.textContent = `Showing ${Object.keys(response.terms).length} of ${response.pagination.total_terms} items`;
|
}
|
|
this.cache.setItem(this.taxonomy + 'List', response.terms, this.taxonomy);
|
|
this.page++;
|
this.hasMore = response.pagination.has_more;
|
|
return true;
|
} catch (error) {
|
console.error('Error fetching terms:', error);
|
this.noResultsText.hidden = false;
|
this.noResultsText.textContent = 'Error loading terms. Please try again.';
|
throw error;
|
} finally {
|
this.hideLoading();
|
}
|
}
|
|
async createTerm(name, parent = 0)
|
{
|
let loadingMessage = this.modal.querySelector('.loading-message.create-term');
|
|
let text = loadingMessage.querySelector('span');
|
const form = this.createNew.querySelector('form');
|
const submitButton = form.querySelector('button[type="submit"]');
|
try {
|
loadingMessage.hidden = false;
|
window.typeText(text, 'Checking term...');
|
|
this.searchQuery = name;
|
const check = await this.fetchTerms();
|
|
console.log(check);
|
if (check.terms.length > 0) {
|
this.showTermSuggestions(check.terms);
|
return false;
|
}
|
|
//Term doesn't already exist, let's continue
|
const response = await fetch(`${jvbSettings.api}terms`, {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': jvbSettings.nonce
|
},
|
body: JSON.stringify({
|
taxonomy: this.taxonomy,
|
name: name,
|
parent: parent
|
})
|
})
|
|
if (!response.ok) {
|
throw new Error(`Server error: ${response.status}`);
|
}
|
|
const result = await response.json();
|
|
if (result.success) {
|
form.reset();
|
this.m.hasChanges = false;
|
this.m.handleClose();
|
if (this.config.onCreate) {
|
this.config.onCreate(result);
|
}
|
window.addNotification('SUCCESS\n\nWe\'ve put your suggestion to the masses (well, verified artists). Upon approval, '+ name +' will be available for use.')
|
}
|
|
return result;
|
} catch (error) {
|
console.error('Error creating term:', error);
|
throw error;
|
} finally {
|
submitButton.disabled = false;
|
loadingMessage.hidden = true;
|
}
|
}
|
|
// Helper method to show term suggestions when similar terms exist
|
showTermSuggestions(suggestions) {
|
const suggestionContainer = this.createNew.querySelector('.term-suggestions') ||
|
this.createSuggestionContainer();
|
|
// Clear existing suggestions
|
removeChildren(suggestionContainer);
|
|
// Add heading
|
const heading = document.createElement('h4');
|
heading.textContent = 'Similar terms already exist:';
|
suggestionContainer.appendChild(heading);
|
|
// Create list of suggestions
|
const list = document.createElement('ul');
|
list.className = 'term-suggestion-list';
|
|
suggestions.forEach(term => {
|
const item = document.createElement('li');
|
|
// Create term path display if available
|
let termDisplay = term.name;
|
if (term.path) {
|
termDisplay = term.path;
|
}
|
|
const button = document.createElement('button');
|
button.type = 'button';
|
button.className = 'use-existing-term';
|
button.setAttribute('data-id', term.id);
|
button.textContent = termDisplay;
|
|
button.addEventListener('click', () => {
|
// Add this term to selected items
|
this.selectedItems[term.id] = term.name;
|
this.updateSelected();
|
|
// Close the create new section
|
this.createNew.hidden = true;
|
|
// Optionally, close the modal
|
this.m.handleClose();
|
});
|
|
item.appendChild(button);
|
list.appendChild(item);
|
});
|
|
suggestionContainer.appendChild(list);
|
suggestionContainer.hidden = false;
|
}
|
|
// Create container for term suggestions if it doesn't exist
|
createSuggestionContainer() {
|
const container = document.createElement('div');
|
container.className = 'term-suggestions';
|
container.hidden = true;
|
|
// Insert after the form
|
this.createNew.querySelector('form').after(container);
|
return container;
|
}
|
|
// Show message when term suggestion is pending approval
|
showApprovalPendingMessage(termName) {
|
const pendingContainer = this.createNew.querySelector('.term-pending-approval') ||
|
this.createPendingContainer();
|
|
// Clear and set content
|
removeChildren(pendingContainer);
|
|
const message = document.createElement('div');
|
message.className = 'approval-message';
|
message.innerHTML = `
|
<h4>Thank you for your suggestion!</h4>
|
<p>Your suggestion "<strong>${escapeHtml(termName)}</strong>" has been submitted for review.</p>
|
<p>Other verified artists will review and approve your suggestion.</p>
|
<p>You'll receive a notification when it's approved.</p>
|
<button type="button" class="close-pending-message">Got it</button>
|
`;
|
|
pendingContainer.appendChild(message);
|
pendingContainer.hidden = false;
|
|
// Add event listener to close button
|
pendingContainer.querySelector('.close-pending-message').addEventListener('click', () => {
|
pendingContainer.hidden = true;
|
this.createNew.hidden = true;
|
});
|
}
|
|
createTermElement(term) {
|
if (!term || !term.name) return null;
|
|
const li = window.getTemplate('termListItem');
|
li.dataset.id = term.id;
|
|
const isSelected = (term.id in this.selectedItems);
|
let input = li.querySelector('input');
|
let label = li.querySelector('label');
|
let name = label.querySelector('span');
|
|
[input.id, input.name, input.value, input.disabled, label.htmlFor, label.title, name.textContent] =
|
[`${this.config.base}${term.id}`, `${this.config.base}${this.taxonomy}`, term.id, isSelected ? false : this.disabled, `${this.config.base}${term.id}`, escapeHtml(term.path || term.name), (term.show) ? term.path : term.name];
|
|
input.checked = isSelected;
|
|
if (term.hasChildren) {
|
let button = window.getTemplate('termChildrenToggle');
|
button.ariaLabel = `View sub-categories of ${escapeHtml(term.name)}`;
|
li.append(button);
|
}
|
|
return li;
|
}
|
|
updateSelected() {
|
if (this.config.feed) {
|
return;
|
}
|
|
// Clear existing selected items
|
removeChildren(this.selectedContainer);
|
|
for (const [id, term] of Object.entries(this.selectedItems)) {
|
const itemDiv = window.getTemplate('selectedTerm');
|
itemDiv.dataset.id = id;
|
let name = itemDiv.querySelector('span');
|
let button = itemDiv.querySelector('button');
|
[name.textContent, button.ariaLabel] =
|
[escapeHtml(term), `Remove ${escapeHtml(term)}`];
|
|
this.selectedContainer.appendChild(itemDiv);
|
}
|
|
if (this.isSelectionLimitReached()) {
|
this.disabled = true;
|
this.disableCheckboxes();
|
} else {
|
this.disabled = false;
|
this.enableCheckboxes();
|
}
|
|
// Also update the modal selected terms list if it exists
|
this.updateModalSelected();
|
|
// Only trigger change if there are actual changes
|
if (this.hasSelectionChanged()) {
|
if (this.initialized && this.config.onSuccess) {
|
this.config.onSuccess();
|
}
|
// Update initial state
|
this.initialState = new Map(Object.entries(this.selectedItems));
|
}
|
}
|
|
hasSelectionChanged() {
|
// First check if sizes are different
|
if (Object.keys(this.selectedItems).length !== this.initialState.size) {
|
return true;
|
}
|
|
// Then check if any items differ
|
for (const [id, name] of Object.entries(this.selectedItems)) {
|
if (!this.initialState.has(id) || this.initialState.get(id) !== name) {
|
return true;
|
}
|
}
|
|
// Also check if any items were removed
|
for (const id of this.initialState.keys()) {
|
if (!(id in this.selectedItems)) {
|
return true;
|
}
|
}
|
|
return false;
|
}
|
initializeEventListeners() {
|
let o = this.container.closest('.field')?.querySelector('.add-item-btn');
|
if (!o) {
|
o = this.container.closest('.jvb-selector')?.querySelector('.filter-toggle');
|
}
|
|
this.modal.addEventListener('click', (e)=> {
|
if (e.target.classList.contains('new-term-toggle') ||
|
e.target.closest('.new-term-toggle')) {
|
const isHidden = this.createNew.hidden;
|
this.createNew.hidden = !isHidden;
|
|
if (!this.createNew.hidden) {
|
this.createNew.querySelector('input[name="term_name"]').focus();
|
}
|
this.resetParentOptions();
|
}
|
});
|
|
this.m = new window.jvbModal(
|
this.modal,
|
{
|
save: null,
|
open: o,
|
openMessage: 'Opened ' + this.taxonomy + ' selection. Choose from checkboxes to filter results.',
|
onOpen: () => this.openModal(),
|
onClose: () => this.closeModal()
|
}
|
);
|
|
// Selected items handling
|
if (!this.config.feed) {
|
this.selectedContainer.addEventListener('click', e => {
|
const removeBtn = e.target.closest('.remove-item');
|
if (!removeBtn) return;
|
|
const item = removeBtn.closest('.selected-item');
|
if (item) {
|
this.removeItem(item.dataset.id);
|
}
|
});
|
} else {
|
this.container.querySelector('.filter-toggle').addEventListener('click', e => {
|
this.m.handleOpen();
|
});
|
}
|
|
this.itemsContainer.addEventListener('change', e => {
|
const input = e.target;
|
e.preventDefault();
|
if (input.type === 'checkbox' || input.type === 'radio') {
|
const item = input.closest('li');
|
if (!item) return;
|
|
const termId = item.dataset.id;
|
const termName = item.querySelector('.term-name').textContent;
|
|
if (input.checked) {
|
// Add to selected items
|
this.selectedItems[termId] = termName;
|
} else {
|
delete this.selectedItems[termId];
|
// Remove from selected items
|
}
|
|
if (this.isSelectionLimitReached()) {
|
this.disabled = true;
|
this.disableCheckboxes();
|
} else if (!this.disabled && this.limitWasReached === true) {
|
this.enableCheckboxes();
|
}
|
|
// Update the selection display
|
this.updateSelected();
|
}
|
});
|
|
// Clear search button
|
if (this.clearSearchButton) {
|
this.clearSearchButton.addEventListener('click', () => {
|
this.searchInput.value = '';
|
this.searchQuery = '';
|
this.page = 1;
|
this.hasMore = true;
|
this.fetchAndRenderTerms();
|
});
|
}
|
|
// Back to parent button
|
const backButton = this.breadcrumbNav.querySelector('.back-to-parent');
|
if (backButton) {
|
backButton.addEventListener('click', () => this.navigateToParent());
|
}
|
}
|
|
openModal() {
|
this.searchInput.value = '';
|
|
// Wait for the modal to be fully open before fetching the first page of terms
|
setTimeout(() => {
|
this.fetchAndRenderTerms();
|
}, 50);
|
|
this.searchInput.focus();
|
|
// Search handling with debounce
|
this.searchInput.addEventListener('input',
|
window.debounce(() => this.handleSearch(), 300));
|
}
|
closeModal() {
|
this.updateSelected();
|
if (this.searchQuery) {
|
this.searchQuery = '';
|
this.page = 1;
|
this.hasMore = true;
|
}
|
if (this.config.feed) {
|
if (this.config.onClose) {
|
this.config.onClose();
|
}
|
}
|
}
|
|
disableCheckboxes() {
|
this.limitWasReached = true;
|
this.itemsContainer.querySelectorAll('input').forEach(input => {
|
input.disabled = (!input.checked);
|
});
|
}
|
|
enableCheckboxes() {
|
this.limitWasReached = false;
|
this.itemsContainer.querySelectorAll('input:disabled').forEach(input => {
|
input.disabled = false;
|
});
|
}
|
|
isSelectionLimitReached() {
|
return this.config.maxSelections > 0 &&
|
Object.keys(this.selectedItems).length >= this.config.maxSelections;
|
}
|
|
removeItem(id) {
|
delete this.selectedItems[id];
|
|
// Update checkboxes in the modal
|
const input = this.modal.querySelector(`input[value="${id}"]`);
|
if (input) {
|
input.checked = false;
|
}
|
|
this.updateSelected();
|
}
|
|
async handleSearch() {
|
const query = this.searchInput.value.trim();
|
|
if (query === this.searchQuery) return;
|
|
this.searchQuery = query;
|
|
// Reset pagination
|
this.page = 1;
|
this.hasMore = true;
|
|
// Don't show loading if already showing (prevents flickers)
|
if (!this.loading) {
|
this.showLoading();
|
}
|
|
try {
|
// Store checked state before clearing
|
const checkedState = new Map();
|
this.itemsContainer.querySelectorAll('input:checked').forEach(input => {
|
checkedState.set(input.value, true);
|
});
|
|
// Clear existing content
|
removeChildren(this.itemsContainer);
|
|
// Only search if query is at least 2 chars or empty
|
if (query.length >= 2 || query.length === 0) {
|
this.loading = false;
|
await this.fetchAndRenderTerms();
|
} else {
|
// For very short queries, just clear and show message
|
this.hideLoading();
|
this.noResultsText.hidden = false;
|
this.noResultsText.textContent = 'Enter at least 2 characters to search';
|
}
|
|
// Restore checked state
|
checkedState.forEach((_, value) => {
|
const input = this.itemsContainer.querySelector(`input[value="${value}"]`);
|
if (input) input.checked = true;
|
});
|
|
} catch (error) {
|
console.error('Search error:', error);
|
this.showError('Search failed');
|
}
|
}
|
|
// Term creation initialization
|
initializeTermCreation() {
|
if (!this.config.createNew) return;
|
|
this.createNew = this.modal.querySelector('.create-new-term-section');
|
if (!this.createNew) return;
|
|
const toggle = this.modal.querySelector('.new-term-toggle');
|
const form = this.createNew.querySelector('form');
|
if (!form) return;
|
|
// let submitButton = form.querySelector('button[type="submit"]');
|
// submitButton.addEventListener('click', (e)=> {
|
// e.preventDefault();
|
// });
|
|
// Handle form submission
|
form.addEventListener('submit', (e) => {
|
e.preventDefault();
|
|
const termName = e.target.querySelector('input[name="term_name"]').value.trim();
|
const parentId = e.target.querySelector('input#select_parent')?.value;
|
|
try {
|
form.querySelector('button').disabled = true;
|
const response = this.createTerm(termName, parentId);
|
|
if (response.success) {
|
this.showNotification(
|
'Thank you! Your suggestion has been submitted for review.',
|
'success'
|
);
|
e.target.reset();
|
this.createNew.hidden = true;
|
}
|
} catch (error) {
|
console.error('Error creating term:', error);
|
this.showError('Failed to submit suggestion');
|
} finally {
|
form.querySelector('button').disabled = false;
|
}
|
});
|
}
|
|
resetParentOptions() {
|
let ids = Array.from(this.currentTerms);
|
let select = this.modal.querySelector('#select_parent');
|
if (!select) return;
|
|
let option = select.querySelector('option');
|
if (!option) return;
|
|
removeChildren(select);
|
select.append(option);
|
|
if (this.currentParentName !== '') {
|
let o = option.cloneNode(true);
|
[o.value, o.textContent] =
|
[this.currentParent, this.currentParentName];
|
select.append(o);
|
}
|
|
if (ids.length > 0) {
|
ids.forEach(id => {
|
let o = option.cloneNode(true);
|
[o.id, o.value, o.textContent] =
|
[`select-parent-${id[0]}`, id[0], ' — ' + id[1]];
|
select.append(o);
|
});
|
}
|
}
|
|
renderTerms(terms, clearExisting = true, path = false) {
|
if (!terms) return;
|
|
const targetContainer = this.itemsContainer;
|
|
console.log(this.page, 'Current Page');
|
console.log(clearExisting, 'Clear Existing');
|
|
if (clearExisting) {
|
this.currentTerms.clear();
|
removeChildren(targetContainer);
|
|
if (this.itemsWrap.querySelector('details')) {
|
this.itemsWrap.querySelector('details').removeAttribute('open');
|
}
|
|
// Term Navigation
|
let backButton = this.breadcrumbNav.querySelector('.back-to-parent');
|
removeChildren(this.breadcrumbNav);
|
this.breadcrumbNav.append(backButton);
|
|
// Show navigation path if we're not at root
|
if (this.navigationPath.length > 0) {
|
backButton.hidden = false;
|
|
// Create the navigation path
|
this.navigationPath.forEach((level, index) => {
|
let button = window.getTemplate('termBreadcrumb');
|
[button.dataset.level, button.dataset.id, button.title, button.textContent] =
|
[index, level.id, level.path || level.name, escapeHtml(level.name)];
|
this.breadcrumbNav.append(button);
|
});
|
} else {
|
backButton.hidden = true;
|
}
|
}
|
|
// Check if we have any terms
|
const hasTerms = terms && typeof terms === 'object' && Object.keys(terms).length > 0;
|
|
// Show appropriate message if no terms
|
if (!hasTerms) {
|
this.noResultsText.hidden = false;
|
if (this.searchQuery) {
|
this.noResultsText.textContent = `No results found for "${this.searchQuery}"`;
|
} else if (this.currentParent !== 0) {
|
this.noResultsText.textContent = 'No subcategories found';
|
} else {
|
this.noResultsText.textContent = 'No categories available';
|
}
|
return;
|
} else {
|
this.noResultsText.hidden = true;
|
}
|
|
// Render terms
|
this.disabled = this.isSelectionLimitReached();
|
|
Object.entries(terms).forEach(([id, term]) => {
|
if (!term) return;
|
this.currentTerms.set(id, typeof term === 'string' ? term : term.name);
|
|
const termElement = this.createTermElement({
|
id: parseInt(id),
|
name: typeof term === 'string' ? term : term.name,
|
hasChildren: typeof term === 'object' ? term.hasChildren : false,
|
path: term.path || null,
|
show: path
|
});
|
|
if (termElement) targetContainer.appendChild(termElement);
|
});
|
|
this.resetParentOptions();
|
|
this.container.removeEventListener('click', this.boundTermListener);
|
this.container.addEventListener('click', this.boundTermListener);
|
}
|
|
async navigateToParent() {
|
// Pop current level from navigation path
|
this.navigationPath.pop();
|
|
// Get previous parent from path or default to root
|
const previousLevel = this.navigationPath[this.navigationPath.length - 1];
|
this.currentParent = previousLevel ? previousLevel.id : 0;
|
this.currentParentName = previousLevel ? previousLevel.name : '';
|
|
this.page = 1;
|
this.hasMore = true;
|
|
await this.fetchAndRenderTerms();
|
}
|
|
|
async navigateToChildren(termId, termName) {
|
// Add current level to navigation path
|
this.navigationPath.push({
|
id: termId,
|
name: termName
|
});
|
|
this.currentParent = termId;
|
this.currentParentName = termName;
|
|
this.page = 1;
|
this.hasMore = true;
|
|
await this.fetchAndRenderTerms();
|
}
|
|
initializeToggleButtons(e) {
|
if (e.target.classList.contains('toggle-children') || e.target.closest('.toggle-children')) {
|
const item = e.target.closest('li');
|
if (!item) return;
|
|
const termId = parseInt(item.dataset.id);
|
const termName = item.querySelector('.term-name').textContent;
|
|
this.navigateToChildren(termId, termName);
|
}
|
|
if (e.target.classList.contains('path-level') || e.target.closest('.path-level')) {
|
const btn = e.target.classList.contains('path-level') ? e.target : e.target.closest('.path-level');
|
|
// Skip if already on this level
|
if (btn.textContent === this.currentParentName) return;
|
|
const level = parseInt(btn.dataset.level);
|
|
// Navigate to the specific level
|
this.navigationPath = this.navigationPath.slice(0, level + 1);
|
this.currentParent = parseInt(btn.dataset.id);
|
this.currentParentName = btn.textContent;
|
this.page = 1;
|
this.hasMore = true;
|
|
this.fetchAndRenderTerms();
|
}
|
|
if (e.target.classList.contains('back-to-parent') || e.target.closest('.back-to-parent')) {
|
this.navigateToParent();
|
}
|
}
|
|
showNotification(message, type = 'info') {
|
window.addNotification(message, type);
|
}
|
|
showError(message) {
|
this.showNotification(message, 'error');
|
}
|
|
initializeInfiniteScroll() {
|
const observer = new IntersectionObserver(entries => {
|
entries.forEach(entry => {
|
if (entry.isIntersecting && !this.loading && this.hasMore) {
|
this.fetchAndRenderTerms();
|
}
|
});
|
}, {
|
root: this.itemsWrap,
|
threshold: 0.5
|
});
|
|
// Observe the sentinel element
|
const sentinel = this.container.querySelector('.scroll-sentinel');
|
if (sentinel) {
|
observer.observe(sentinel);
|
}
|
}
|
|
cleanup() {
|
// Remove event listeners
|
this.modal?.remove();
|
this.searchInput = null;
|
this.itemsContainer = null;
|
this.selectedContainer = null;
|
}
|
}
|
|
window.jvbSelector = TaxonomySelectorOld;
|
