class TaxonomySelectorPrev {
|
constructor (container, options = {}) {
|
|
this.a11y = window.jvbA11y;
|
this.cache = window.jvbCache;
|
this.error = window.jvbError;
|
|
this.taxonomy = container.dataset.taxonomy;
|
|
this.container = container;
|
this.initConfig(options);
|
this.initElements();
|
this.initListeners();
|
|
this.page = 1;
|
this.hasMore = true;
|
this.isLoading = false;
|
this.searchQuery = '';
|
|
this.terms = new Map();
|
|
this.navigationPath = [];
|
this.currentParent = 0;
|
this.currentParentName = '';
|
this.currentPath = '';
|
this.fetchSpecificTerms = false;
|
|
this.creator = false;
|
|
if ('jvbTaxCreator' in window && this.container.querySelector('.create-new-term-section')) {
|
this.creator = new window.jvbTaxCreator(this);
|
}
|
|
//Render the selected items
|
this.updateSelected();
|
this.modal.backButton.hidden = this.currentParent === 0;
|
}
|
|
initConfig(options) {
|
//Set up currently selected items
|
this.selectedTerms = {};
|
if (options.selected) {
|
if (typeof options.selected === 'object' && !window.isEmptyObject(options.selected)) {
|
this.options.selected.forEach(item => {
|
this.selectedTerms[item.id] = item.name;
|
});
|
} else {
|
this.selectedTerms = options.selected;
|
}
|
}
|
let embeddedOptions = JSON.parse(this.container.dataset.config??'{}');
|
this.maxSelections = options.maxSelections || embeddedOptions.maxSelections || 0;
|
this.isHierarchal = options.hierarchical || embeddedOptions.maxSelections || 0;
|
this.base = options.base || embeddedOptions.base || '';
|
this.onSuccess = options.onSuccess || embeddedOptions.onSuccess || null;
|
this.onClose = options.onClose || embeddedOptions.onClose || null;
|
|
this.isFeed = options.feed || embeddedOptions.feed || false;
|
if (this.isFeed) {
|
this.feedSelected = document.querySelector('.selected-items-section .selected-items')
|
}
|
}
|
|
initElements() {
|
//Separate items by container
|
this.elements = {
|
modal: this.container.querySelector('dialog'),
|
selectedTerms: this.container.querySelector('.selected-items'),
|
};
|
this.modal = {
|
searchInput: this.elements.modal.querySelector('input[type=search]'),
|
termsList: this.elements.modal.querySelector('.items-container'),
|
termsWrap: this.elements.modal.querySelector('.items-wrap'),
|
breadcrumbs: this.elements.modal.querySelector('nav.term-navigation'),
|
loading: this.elements.modal.querySelector('.loading'),
|
loadingText: this.elements.modal.querySelector('.loading span'),
|
clearSearch: this.elements.modal.querySelector('.clear-search'),
|
selectedTerms: this.elements.modal.querySelector('.selected-items'),
|
backButton: this.elements.modal.querySelector('.back-to-parent'),
|
sentinel: this.elements.modal.querySelector('.scroll-sentinel')
|
};
|
}
|
|
initListeners() {
|
this.container.addEventListener('click', this.handleClick.bind(this));
|
this.container.addEventListener('change', this.handleChange.bind(this));
|
|
let o = this.container.closest('.field')?.querySelector('.add-item-btn');
|
if (!o) {
|
o = '.filter-toggle';
|
// o = this.container.closest('.jvb-selector')?.querySelector('.filter-toggle');
|
} else {
|
o = '.add-item-btn';
|
}
|
|
this.observer = new IntersectionObserver(
|
entries => {
|
entries.forEach(entry => {
|
if (entry.isIntersecting && !this.isLoading && this.hasMore) {
|
this.fetchTerms();
|
}
|
});
|
}, {
|
root: this.modal.termsWrap,
|
threshold: 0.5
|
}
|
);
|
|
this.m = new window.jvbModal(
|
this.elements.modal,
|
{
|
save: null,
|
open: o,
|
openMessage: `Opened ${this.taxonomy} selection. Choose from checkboxes or search to filter results.`,
|
onOpen: () => this.openModal(),
|
onClose:() => this.closeModal()
|
}
|
);
|
}
|
handleClick(e) {
|
|
if (window.targetCheck(e, '.remove-item')) {
|
let item = window.targetCheck(e, '.selected-item');
|
if (item) {
|
this.removeSelectedTerm(item.dataset.id);
|
}
|
} else if (window.targetCheck(e, '.back-to-parent')) {
|
this.toParent();
|
} else if (window.targetCheck(e, '.toggle-children')) {
|
let item = e.target.closest('li');
|
this.toChild(parseInt(item.dataset.id), item.querySelector('.term-name').textContent);
|
} else if (window.targetCheck(e, '.path-level')) {
|
let btn = window.targetCheck(e, '.path-level');
|
if (btn.textContent !== this.currentParentName) {
|
|
window.removeChildren(this.modal.termsList);
|
let level = parseInt(btn.dataset.level);
|
|
this.navigatioPath = this.navigationPath.slice(0, level + 1);
|
this.currentParent = parseInt(btn.dataset.id);
|
this.currentParentName = btn.textContent;
|
this.page = 1;
|
this.hasMore = true;
|
this.fetchTerms();
|
}
|
}
|
}
|
handleChange(e) {
|
e.preventDefault();
|
e.stopPropagation();
|
let input = e.target;
|
if (e.target.checked) {
|
let label = e.target.closest('li').querySelector('label');
|
this.addSelectedTerm(input.id, label.title, label.dataset.path);
|
} else {
|
this.removeSelectedTerm(input.id);
|
}
|
}
|
|
handleSearch(e) {
|
let query = this.modal.searchInput.value.trim();
|
if (query === this.searchQuery) return;
|
|
this.searchQuery = query;
|
|
this.page = 1;
|
this.hasMore = true;
|
|
window.removeChildren(this.modal.termsList);
|
if (query.length >= 2 || query.length === 0) {
|
this.fetchTerms(false, true);
|
} else {
|
this.hideLoading();
|
this.showEmptyState('No Results. \nEnter at least 2 characters to search.')
|
}
|
}
|
|
openModal() {
|
this.observer.observe(this.modal.sentinel);
|
this.fetchTerms();
|
this.modal.searchInput.focus();
|
this.modal.searchInput.addEventListener('input',
|
window.debounce(() => this.handleSearch()));
|
}
|
closeModal() {
|
this.observer.unobserve(this.modal.sentinel);
|
window.removeChildren(this.modal.termsList);
|
this.updateSelected();
|
this.resetState();
|
if(this.isFeed && typeof this.onClose === 'function') {
|
this.onClose(this.taxonomy, this.selectedTerms);
|
}
|
this.modal.searchInput.removeEventListener('input', window.debounce(() => this.handleSearch()));
|
}
|
|
nextPage() {
|
if (this.hasMore) {
|
this.page++;
|
}
|
}
|
|
resetPage() {
|
this.page = 1;
|
this.hasMore = true;
|
}
|
|
resetState() {
|
this.resetPage();
|
this.searchQuery = '';
|
this.page = 1;
|
this.currentParent = 0;
|
this.currentParentName = '';
|
this.currentPath = '';
|
this.navigationPath = [];
|
this.hasMore = true;
|
this.isLoading = false;
|
this.retries = {
|
count: 0,
|
max: 3,
|
delay: 1000
|
};
|
}
|
|
toParent() {
|
this.navigationPath.pop();
|
|
let prv = this.navigationPath[this.navigationPath.length - 1];
|
this.currentParent = prv ? prv.id : 0;
|
this.currentParentName = prv ? prv.name : '';
|
|
window.removeChildren(this.modal.termsList);
|
this.page = 1;
|
this.hasMore = true;
|
this.fetchTerms();
|
}
|
|
toChild(termId, termName) {
|
this.navigationPath.push({
|
id: termId,
|
name: termName
|
});
|
this.currentParent = termId;
|
this.currentParentName = termName;
|
window.removeChildren(this.modal.termsList);
|
|
this.page = 1;
|
this.hasMore = true;
|
this.fetchTerms();
|
}
|
|
buildRequest() {
|
let params = new URLSearchParams({
|
taxonomy: this.taxonomy,
|
parent: this.currentParent,
|
search: this.searchQuery,
|
page: this.page
|
});
|
|
if (this.isFeed && this.fetchSpecificTerms) {
|
params.append('termIDs', this.fetchSpecificTerms);
|
}
|
|
if (this.isFeed && 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.toString();
|
}
|
showLoading() {
|
this.isLoading = true;
|
this.modal.loading.hidden = false;
|
this.elements.modal.classList.add('loading');
|
|
let text = (this.searchQuery !== '') ? 'searching for "'+this.searchQuery+'" items' : ((this.currentParentName === '') ? 'loading items' : 'loading '+this.currentParentName+' items');
|
this.stopTyping = window.typeLoop(this.modal.loadingText, text);
|
|
}
|
hideLoading() {
|
this.isLoading = false;
|
this.modal.loading.hidden = true;
|
this.elements.modal.classList.remove('loading');
|
this.stopTyping();
|
}
|
async fetchTerms(forceRefresh = false, showPath = false) {
|
if (this.isLoading) {
|
return;
|
}
|
|
try {
|
this.showLoading();
|
|
const data = await this.cache.fetchWithCache(
|
`${jvbSettings.api}terms?`+this.buildRequest(),
|
{
|
method: 'GET',
|
headers: {
|
'Content-Type': 'application/json',
|
'X-WP-Nonce': jvbSettings.nonce,
|
}
|
},
|
{
|
content: this.taxonomy,
|
// forceRefresh: true
|
forceRefresh: forceRefresh
|
}
|
);
|
|
if (this.fetchSpecificTerms) {
|
this.fetchSpecificTerms = false;
|
return data.terms;
|
}
|
|
|
if (!data || !data.terms || data.terms.length === 0) {
|
if (this.page === 1) {
|
this.showEmptyState();
|
}
|
this.hasMore = false;
|
} else {
|
this.hasMore = data.pagination['has_more'];
|
this.renderTerms(data.terms, this.page > 1, showPath);
|
if (this.hasMore) {
|
this.nextPage();
|
}
|
}
|
} catch (e) {
|
this.handleError(e);
|
} finally {
|
this.hideLoading();
|
}
|
}
|
|
handleError(error){
|
return this.error.log(
|
error,
|
{
|
component: 'Taxonomy Selector',
|
action: 'fetchTerms'
|
},
|
() => this.fetchTerms()
|
);
|
}
|
|
addPlaceholders() {
|
|
}
|
|
renderTerms(terms, append = false, path = false) {
|
if (!append) {
|
window.removeChildren(this.modal.termsList);
|
this.addPlaceholders();
|
}
|
if (terms.length === 0) {
|
this.a11y.announceUpdate(0, append);
|
return;
|
}
|
|
this.updateBreadcrumbs();
|
|
|
|
this.disabled = this.isLimitReached();
|
for (let [id, term] of Object.entries(terms)) {
|
if (!term) return;
|
this.terms.set(term.id, term.name);
|
this.createTermElement({
|
id: parseInt(term.id),
|
name: term.name,
|
hasChildren: term.hasChildren,
|
path: term.path || null,
|
show: path
|
});
|
}
|
}
|
|
|
|
createTermElement(term) {
|
if (!term || !term.name) return;
|
|
let item = window.getTemplate('termListItem');
|
item.dataset.id = term.id;
|
const isSelected = (term.id in this.selectedTerms);
|
let input = item.querySelector('input');
|
let label = item.querySelector('label');
|
let name = item.querySelector('span');
|
|
[
|
input.id,
|
input.name,
|
input.value,
|
input.disabled,
|
input.checked,
|
label.htmlFor,
|
label.title,
|
label.dataset.path,
|
name.textContent
|
] = [
|
`${this.base}${term.id}`,
|
`${this.base}${this.taxonomy}-select`,
|
term.id,
|
isSelected ? false : this.disabled,
|
isSelected,
|
`${this.base}${term.id}`,
|
term.path || term.name,
|
term.path,
|
term.show ? term.path : term.name,
|
];
|
|
if (term.hasChildren) {
|
let button = window.getTemplate('termChildrenToggle');
|
button.ariaLabel = `View sub-terms of ${term.name}`;
|
item.append(button);
|
}
|
|
this.modal.termsList.append(item);
|
}
|
|
updateBreadcrumbs() {
|
window.removeChildren(this.modal.breadcrumbs);
|
this.modal.breadcrumbs.append(this.modal.backButton);
|
|
this.modal.backButton.hidden = this.currentParent === 0;
|
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,
|
level.name
|
];
|
this.modal.breadcrumbs.append(button);
|
});
|
}
|
|
showEmptyState(message = ''){
|
let template = window.getTemplate('noResults');
|
if (message !== '') {
|
template.querySelector('span').textContent = message;
|
}
|
this.modal.termsList.append(template);
|
}
|
|
updateSelected() {
|
if (this.isFeed) {
|
return;
|
}
|
|
let checks = this.getSpacesToUpdate();
|
checks.forEach(check => {
|
window.removeChildren(check);
|
});
|
|
for (const [id, term] of Object.entries(this.selectedTerms)) {
|
this.addTermToBoxes(id, term.name, term.path);
|
}
|
|
this.disabled = this.isLimitReached();
|
this.setCheckboxes(this.disabled);
|
}
|
|
async addTermsFromURL(ids) {
|
this.fetchSpecificTerms = ids;
|
let terms = await this.fetchTerms();
|
terms.forEach(term => {
|
this.addSelectedTerm(term.id, term.name, term.path);
|
});
|
}
|
|
addSelectedTerm(id, name, path) {
|
this.selectedTerms[id] = {
|
name: name,
|
path: path
|
};
|
|
this.addTermToBoxes(id, name, path);
|
}
|
|
getSpacesToUpdate() {
|
let checks = [
|
this.modal.selectedTerms,
|
this.elements.selectedTerms
|
];
|
|
if (this.isFeed) {
|
checks.push(this.feedSelected);
|
}
|
return checks;
|
}
|
|
addTermToBoxes(id, name, path) {
|
let checks = this.getSpacesToUpdate();
|
|
checks.forEach(check => {
|
if (!check.querySelector(`[data-id="${id}"]`)) {
|
let item = window.getTemplate('selectedTerm');
|
[
|
item.dataset.id,
|
item.dataset.path,
|
item.dataset.name,
|
item.dataset.taxonomy,
|
item.querySelector('span').textContent,
|
item.querySelector('button').title
|
] = [
|
id,
|
path,
|
name,
|
this.taxonomy,
|
path,
|
`Remove ${name}`
|
];
|
if (check === this.feedSelected) {
|
item.prepend(window.getIcon(this.taxonomy));
|
}
|
check.append(item);
|
}
|
});
|
|
let input = this.modal.termsList.querySelector(`input[value="${id}"]`);
|
if (input) {
|
input.checked = true;
|
}
|
}
|
removeSelectedTerm(id) {
|
delete this.selectedTerms[id];
|
|
let checks = [
|
this.modal.selectedTerms,
|
this.elements.selectedTerms
|
];
|
if (this.isFeed) {
|
checks.push(this.feedSelected);
|
}
|
checks.forEach(check => {
|
check.querySelector(`[data-id="${id}"]`)?.remove();
|
});
|
|
|
let input = this.modal.termsList.querySelector(`input[value="${id}"]`);
|
if (input) {
|
input.checked = false;
|
}
|
}
|
|
setCheckboxes(disabled) {
|
this.modal.termsList.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
|
if (!checkbox.checked) {
|
checkbox.disabled = disabled;
|
}
|
});
|
}
|
|
isLimitReached() {
|
return this.maxSelections > 0 && this.getSelectedTerms().length > this.maxSelections;
|
}
|
|
getSelectedTerms() {
|
return this.modal.termsList.querySelectorAll('input:checked');
|
}
|
|
}
|
|
window.jvbSelector = TaxonomySelectorPrev;
|
