/**
|
* This separates out all create logic from the base TaxonomySelector.js, so that we only enqueue create logic if it's creatable
|
* Updated to work with the refactored centralized TaxonomySelector
|
*/
|
|
class TaxonomyCreator {
|
|
constructor(selector) {
|
this.selector = selector;
|
|
// Get taxonomy from current active field config
|
this.taxonomy = selector.currentConfig?.taxonomy;
|
if (!this.taxonomy) {
|
console.error('TaxonomyCreator: No active field or taxonomy found');
|
return;
|
}
|
|
this.createNew = selector.modal.querySelector('.create-new-term');
|
this.toggle = selector.modal.querySelector('.new-term-toggle');
|
this.form = this.createNew.querySelector('.create-new-term-section');
|
|
this.initListeners();
|
this.initTermCreation();
|
}
|
|
initListeners() {
|
document.addEventListener('click', this.handleClick.bind(this));
|
}
|
|
handleClick(e) {
|
if (window.targetCheck(e, '.create-new-term summary')) {
|
if (this.createNew.open) {
|
this.createNew.querySelector('input[name="term_name"]').focus();
|
}
|
this.resetParentOptions();
|
}
|
|
if (window.targetCheck(e, '.submit-term')) {
|
this.handleTermCreation(e);
|
}
|
}
|
|
async handleTermCreation(e) {
|
const termName = this.form.querySelector('input[name="term_name"]').value.trim();
|
const parentId = this.form.querySelector('input#select_parent')?.value;
|
|
try {
|
this.form.querySelector('button').disabled = true;
|
const response = await this.createTerm(termName, parentId);
|
|
if (response.success) {
|
let term = response.term;
|
|
// Close the create new section
|
this.createNew.open = false;
|
|
// Add to the terms list UI
|
this.selector.createTermElement({
|
id: parseInt(term.id),
|
name: term.name,
|
hasChildren: term.hasChildren || false,
|
path: term.path || term.name,
|
show: false
|
});
|
|
// Add to current modal selection
|
this.selector.addSelectedTermToModal(term.id, term.name, term.path);
|
|
// Clear the form
|
this.form.querySelector('input[name="term_name"]').value = '';
|
}
|
} catch (error) {
|
console.error('Error creating term:', error);
|
this.selector.showError?.('Failed to create term') ||
|
console.error('Failed to create term');
|
} finally {
|
this.form.querySelector('button').disabled = false;
|
}
|
}
|
|
initTermCreation() {
|
if (!this.form) {
|
return;
|
}
|
|
this.form.addEventListener('change', (e) => {
|
e.preventDefault();
|
e.stopPropagation();
|
});
|
}
|
|
resetParentOptions() {
|
let select = this.createNew.querySelector('#select_parent');
|
if (!select) return;
|
|
let defaultOption = select.querySelector('option');
|
if (!defaultOption) return;
|
|
// Clear existing options
|
window.removeChildren(select);
|
select.append(defaultOption.cloneNode(true));
|
|
// Add current parent if we're in a sub-category
|
if (this.selector.currentParentName !== '') {
|
let parentOption = defaultOption.cloneNode(true);
|
parentOption.value = this.selector.currentParent;
|
parentOption.textContent = this.selector.currentParentName;
|
select.append(parentOption);
|
}
|
|
// Add terms from current taxonomy cache
|
const taxonomyTerms = this.selector.currentTerms;
|
if (taxonomyTerms && taxonomyTerms.length > 0) {
|
taxonomyTerms.forEach(term => {
|
let option = defaultOption.cloneNode(true);
|
option.id = `select-parent-${term.id}`;
|
option.value = term.id;
|
option.textContent = ' — ' + term.name;
|
select.append(option);
|
});
|
}
|
}
|
|
async createTerm(name, parent = 0) {
|
let loadingMessage = this.createNew.querySelector('.loading-message.create-term');
|
let text = loadingMessage?.querySelector('span');
|
|
try {
|
if (loadingMessage) {
|
loadingMessage.hidden = false;
|
}
|
|
if (text && window.typeText) {
|
window.typeText(text, 'Checking term...');
|
} else if (text) {
|
text.textContent = 'Checking term...';
|
}
|
|
// Check if term already exists by searching
|
const originalSearchQuery = this.selector.searchQuery;
|
const originalFetchSpecific = this.selector.fetchSpecificTerms;
|
|
this.selector.searchQuery = name;
|
this.selector.fetchSpecificTerms = false; // We want to search, not fetch specific IDs
|
|
const existingTerms = await this.selector.fetchTerms(
|
this.selector.activeField,
|
false,
|
true // isSearch = true
|
);
|
|
// Restore original search state
|
this.selector.searchQuery = originalSearchQuery;
|
this.selector.fetchSpecificTerms = originalFetchSpecific;
|
|
// Check if any existing terms match exactly
|
const exactMatches = existingTerms.filter(term =>
|
term.name.toLowerCase() === name.toLowerCase()
|
);
|
|
if (exactMatches.length > 0) {
|
this.showTermSuggestions(exactMatches);
|
return { success: false, reason: 'exists' };
|
}
|
|
// Show similar terms if found
|
if (existingTerms.length > 0) {
|
this.showTermSuggestions(existingTerms);
|
return { success: false, reason: 'similar' };
|
}
|
|
// Term doesn't exist, create it
|
if (text) {
|
text.textContent = 'Creating term...';
|
}
|
|
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();
|
return result;
|
|
} catch (error) {
|
console.error('Error creating term:', error);
|
throw error;
|
} finally {
|
this.form.querySelector('button').disabled = false;
|
if (loadingMessage) {
|
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
|
window.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.path || term.name;
|
|
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 modal selection
|
this.selector.addSelectedTermToModal(term.id, term.name, term.path);
|
|
// Close the create new section
|
this.createNew.open = false;
|
|
// Clear suggestions
|
suggestionContainer.hidden = true;
|
|
// Clear the form
|
this.form.querySelector('input[name="term_name"]').value = '';
|
});
|
|
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;
|
}
|
|
/**
|
* Clean up when modal closes
|
*/
|
destroy() {
|
// Remove event listeners if needed
|
// Clear any pending operations
|
const loadingMessage = this.createNew?.querySelector('.loading-message.create-term');
|
if (loadingMessage) {
|
loadingMessage.hidden = true;
|
}
|
|
// Clear suggestions
|
const suggestionContainer = this.createNew?.querySelector('.term-suggestions');
|
if (suggestionContainer) {
|
suggestionContainer.hidden = true;
|
}
|
}
|
}
|
|
window.jvbTaxCreator = TaxonomyCreator;
|
