class FeedBlock {
|
constructor() {
|
this.cache = window.jvbCache;
|
this.a11y = window.jvbA11y;
|
this.loading = window.jvbLoading;
|
this.error = window.jvbError;
|
|
|
this.container = document.querySelector('section.feed-block');
|
if (!this.container) {
|
return;
|
}
|
|
this.openGallery = false;
|
|
this.initElements();
|
this.addPlaceholders();
|
this.config = {
|
api: feedSettings.apiUrl,
|
nonce: feedSettings.nonce,
|
user: jvbSettings.currentUser || null,
|
source: '',
|
context: '',
|
highlight: null,
|
gallery: false,
|
showAuthor: true,
|
showDate: false,
|
view: localStorage.getItem('feedViewMode') || 'grid',
|
... this.container.dataset
|
};
|
this.taxonomies = {};
|
this.rendered = {};
|
|
this.feed = {
|
imageLoadThreshold: 5,
|
lazyLoadOffset: '100px',
|
gallery: [],
|
loaded: 0,
|
intsersectionObserver: null,
|
templates: new Map()
|
};
|
|
this.isLoading = false;
|
this.hasMore = true;
|
this.retries = {
|
count: 0,
|
max: 3,
|
delay: 1000
|
};
|
this.page = 1;
|
this.order = 'DESC';
|
this.orderby = 'date';
|
|
this.gallery = (this.config.gallery) ? new window.jvbGallery(document.querySelector('dialog.gallery'), {
|
imageWrapper: '.item',
|
loadMore: ()=>this.fetchFeed.bind(this)
|
}) : false;
|
this.initListeners();
|
if (this.page === 1) {
|
this.processURLFilters();
|
} else {
|
this.updateFilters();
|
}
|
|
}
|
initElements() {
|
this.filterSelector = 'form.feed-filters';
|
this.filterForm = this.container.querySelector(this.filterSelector);
|
this.grid = this.container.querySelector('.item-grid');
|
this.loadMore = this.container.querySelector('.load-more');
|
this.filterControls = this.container.querySelector('.filter-actions');
|
this.contentTypes = Array.from(this.filterForm.querySelectorAll('input[name="content"]')).map(
|
content => {
|
return content.value;
|
});
|
this.selectedTerms = this.container.querySelector('.selected-items-section .selected-items');
|
}
|
|
initListeners() {
|
window.addEventListener('popstate', this.handlePopState.bind(this));
|
document.addEventListener('click', this.handleClick.bind(this));
|
document.addEventListener('change', this.handleChange.bind(this));
|
|
|
// Intersection observer for lazy loading
|
if ('IntersectionObserver' in window) {
|
this.imageObserver = new IntersectionObserver(entries => {
|
entries.forEach(entry => {
|
if (entry.isIntersecting) {
|
this.loadImage(entry.target);
|
this.imageObserver.unobserve(entry.target);
|
}
|
});
|
}, {
|
rootMargin: '100px',
|
threshold: 0.1
|
});
|
}
|
// Resize observer for responsive images
|
if ('ResizeObserver' in window) {
|
this.resizeObserver = new ResizeObserver(window.debounce(() => {
|
this.updateImageSizes();
|
}, 250));
|
|
// Observe the container
|
this.resizeObserver.observe(this.container);
|
} else {
|
// Fallback to window resize
|
window.addEventListener('resize', window.debounce(() => {
|
this.updateImageSizes();
|
}, 250));
|
}
|
|
this.taxonomies = {};
|
this.container.querySelectorAll('.jvb-selector:not([hidden])').forEach(selector => {
|
let taxonomy = selector.dataset.taxonomy;
|
if (!Object.hasOwn(this.taxonomies, taxonomy)) {
|
this.taxonomies[taxonomy] = new window.jvbTaxonomySelector(
|
selector,
|
{
|
multiple: true,
|
feed: true,
|
selected: {},
|
onClose: () => this.setSelectedTerms(taxonomy),
|
}
|
);
|
}
|
});
|
}
|
|
|
/**
|
* Handle browser history navigation
|
*/
|
handlePopState(e) {
|
if (e.state && e.state.filters) {
|
if(this.processURLFilters()){
|
// Load items with updated filters
|
this.resetPage();
|
this.fetchFeed();
|
|
// Announce to screen readers
|
this.a11y.announce('Feed filters updated from browser history.');
|
}
|
}
|
}
|
|
processURLFilters() {
|
const params = new URLSearchParams(window.location.search);
|
//No parameters to process
|
if (!params.toString()) {
|
this.updateFilters();
|
return;
|
}
|
|
let filters = ['content', 'order', 'orderby', 'favourites','match'];
|
|
filters.forEach(filter => {
|
let value = params.get('f_'+filter);
|
params.delete('f_'+filter);
|
if (value && this.filterForm.querySelector(`input[name="${filter}"][value="${value}"]`)) {
|
this.filterForm.querySelector(`input[name="${filter}"][value="${value}"]`).checked = true;
|
}
|
});
|
|
let unprocessed = {};
|
for (var [key, value] of Object.entries(Object.fromEntries(params))) {
|
|
key = key.replace('f_','');
|
if (this.contentTypes.includes(key)) {
|
this.openGallery = value;
|
} else {
|
this.taxonomies[key].addTermsFromURL(value);
|
this.setSelectedTerms(key);
|
}
|
}
|
|
this.updateFilters();
|
}
|
|
handleClick(e) {
|
if (e.target.classList.contains('load-more') || e.target.closest('.load-more')) {
|
this.fetchFeed(false);
|
e.target.disabled = true;
|
} else if (e.target.classList.contains('clear-filters') || e.target.closest('.clear-filters')) {
|
this.resetFilters();
|
} else if (this.config.gallery && e.target.closest('.feed-image')) {
|
this.gallery.handleGalleryOpen(e);
|
} else if (e.target.classList.contains('.remove-item') || e.target.closest('.remove-item')) {
|
let tag = e.target.closest('.selected-item');
|
let taxonomy = tag.dataset.taxonomy;
|
this.taxonomies[taxonomy].removeSelectedTerm(tag.dataset.id);
|
this.setSelectedTerms(taxonomy);
|
this.updateFilters();
|
}
|
}
|
handleChange(e) {
|
if (e.target.closest(this.filterSelector)) {
|
this.resetPage();
|
window.removeChildren(this.grid);
|
this.addPlaceholders();
|
//update filters
|
this.updateFilters();
|
}
|
}
|
|
updateFilters() {
|
this.page = 1;
|
const params = new URLSearchParams(window.location.search);
|
|
let filters = Object.fromEntries(new FormData(this.filterForm));
|
|
let contents = [];
|
for (let [key, value] of Object.entries(filters)) {
|
let set = false;
|
switch (key) {
|
case 'content':
|
if (value !== this.contentTypes[0]) {
|
set = true;
|
} else {
|
params.delete('f_'+key);
|
}
|
break;
|
case 'orderby':
|
if (value !== 'date') {
|
set = true;
|
}
|
break;
|
case 'order':
|
if (value !== 'desc') {
|
set = true;
|
}
|
break;
|
default:
|
set = true;
|
}
|
if (!set) {
|
params.delete('f_'+key);
|
}
|
|
|
if (set && value !== false && value !== '') {
|
params.set('f_'+key, value);
|
}
|
if (value !== '') {
|
contents.push(value);
|
}
|
|
const newURL = `${window.location.pathname}?${params.toString()}`;
|
history.pushState(filters, '', newURL);
|
|
}
|
|
this.filters = filters;
|
this.updateContentFor(filters.content);
|
|
this.updateFilterControls();
|
|
this.loading.setContent(contents);
|
this.fetchFeed(true);
|
}
|
|
updateFilterControls() {
|
this.filterControls.hidden = this.selectedTerms.children.length < 2;
|
}
|
|
/**
|
* Toggles taxonomy selectors and certain order/orderby options
|
* depending on current content
|
* @param content
|
*/
|
updateContentFor(content) {
|
this.filterForm.querySelectorAll('.jvb-selector').forEach(tax => {
|
let hasContent = tax.dataset.for.includes(content);
|
tax.hidden = !hasContent;
|
if (!hasContent) {
|
let t = tax.dataset.taxonomy;
|
this.clearSelectedTerms(t);
|
}
|
});
|
this.filterForm.querySelectorAll('input[data-for]').forEach(toggle => {
|
toggle.hidden = !toggle.dataset.for.includes(content);
|
});
|
this.filterForm.querySelectorAll('input[name="order"]').forEach(order => {
|
order.hidden = this.filters.order === 'random';
|
});
|
}
|
|
clearSelectedTerms(taxonomy) {
|
this.filterForm.querySelector(`input[name="${taxonomy}"]`).value = '';
|
if (Object.hasOwn(this.taxonomies, taxonomy)) {
|
this.taxonomies[taxonomy].selectedItems = {};
|
}
|
}
|
|
setSelectedTerms(taxonomy) {
|
let input = this.filterForm.querySelector(`input[name="${taxonomy}"]`);
|
input.value = '';
|
let selected = this.taxonomies[taxonomy].selectedTerms;
|
if (!window.isEmptyObject(selected)) {
|
let ids = Object.keys(selected);
|
input.value = ids.join(',');
|
}
|
this.updateFilters();
|
}
|
|
|
nextPage() {
|
if (this.hasMore) {
|
this.page++;
|
}
|
}
|
resetPage() {
|
this.page = 1;
|
this.hasMore = true;
|
}
|
resetState() {
|
this.resetPage(true);
|
this.isLoading = false;
|
this.retries = {
|
count: 0,
|
max: 3,
|
delay: 1000
|
};
|
}
|
|
resetFilters() {
|
this.filterForm.reset();
|
//check the first content
|
this.filterForm.querySelector('input[name="content"]').checked = true;
|
this.filterForm.querySelector('input[name="orderby"][value="date"]').checked = true;
|
this.page = 1;
|
this.updateFilters();
|
}
|
|
|
buildFilterRequest() {
|
|
let filters = {};
|
|
for (let [filter, value] of Object.entries(this.filters)) {
|
if (value !== false && value !== '') {
|
filters[filter] = value;
|
}
|
}
|
filters.page = parseInt(this.page);
|
if (this.container.dataset.context) {
|
filters.context = this.container.dataset.context;
|
}
|
if (this.container.dataset.source) {
|
filters.source = this.container.dataset.source;
|
}
|
return new URLSearchParams(filters).toString();
|
}
|
|
async fetchFeed(reset = false, force = false) {
|
if (this.isLoading) {
|
return false;
|
}
|
this.loading.showLoading(this.filters);
|
try {
|
if (this.page === 1) {
|
window.removeChildren(this.grid);
|
this.addPlaceholders();
|
}
|
|
const data = await this.cache.fetchWithCache(
|
`${this.config.api}feed?${this.buildFilterRequest()}`,
|
{
|
method: 'GET',
|
},
|
{
|
context: 'feed',
|
forceRefresh: true
|
// forceRefresh: force
|
}
|
);
|
|
//Handle empty results
|
if (!data || !data.items || data.items.length === 0) {
|
if (this.page === 1) {
|
this.showEmptyState();
|
}
|
this.hasMore = false;
|
return false;
|
} else {
|
this.hasMore = data['has_more'];
|
|
this.renderItems(data.items, this.page > 1);
|
|
if (this.hasMore) {
|
this.nextPage();
|
}
|
return true;
|
}
|
} catch (error) {
|
this.handleError(error);
|
} finally {
|
this.loading.hideLoading();
|
if (this.openGallery !== false) {
|
this.gallery.openWhenReady = this.openGallery;
|
this.openGallery = false;
|
}
|
this.loadMore.disabled = false;
|
this.loadMore.hidden = !this.hasMore;
|
}
|
}
|
|
removePlaceholders() {
|
if (this.grid.querySelector('.placeholder')) {
|
window.removeChildren(this.grid);
|
}
|
}
|
showEmptyState() {
|
window.removeChildren(this.grid);
|
let template = window.getTemplate('emptyState');
|
let isFavourite = Object.hasOwn(this.filters, 'favourites') && this.filters.favourites === true;
|
if (isFavourite) {
|
[
|
template.querySelector('h3').textContent,
|
template.querySelector('p:first-of-type').textContent,
|
template.querySelector('p:last-of-type').textContent,
|
] = [
|
'♡ BLANK CANVAS ♡',
|
'You haven\'t fallen in love with any pieces... yet!',
|
'Hit that heart icon when something stops your scroll — your dream collection is waiting to start.'
|
];
|
}
|
this.grid.append(template);
|
this.a11y.announceEmpty(isFavourite);
|
|
}
|
handleError(error){
|
return this.error.handleApiError(
|
error,
|
{
|
component: 'Feed Block',
|
action: 'loaditems'
|
},
|
() => this.fetchFeed()
|
);
|
}
|
|
addPlaceholders() {
|
let total = this.contentTypes.length - 1;
|
for (let i = 0; i < 9; i++) {
|
let template = window.getTemplate('placeholderTemplate');
|
let rand = Math.floor(Math.random()*total+1);
|
let icon = window.getIcon(this.contentTypes[rand]).cloneNode(true);
|
|
template.append(icon);
|
this.grid.append(template);
|
}
|
}
|
renderItems(items, append = false) {
|
//Clear the grid if we aren't appending
|
if (!append) {
|
window.removeChildren(this.grid);
|
this.addPlaceholders();
|
}
|
|
|
//Bail early if no items
|
if (items.length === 0) {
|
this.a11y.announceUpdate(0, append);
|
return;
|
}
|
|
//Use DocumentFragment for better performance
|
const fragment = document.createDocumentFragment();
|
|
const batchSize = 10;
|
const processBatch = (startIndex) => {
|
const endIndex = Math.min(startIndex + batchSize, items.length);
|
|
for (let i = startIndex; i < endIndex; i++) {
|
const item = items[i];
|
const element = this.createItemElement(item);
|
fragment.appendChild(element);
|
|
this.imageObserver.observe(element);
|
}
|
|
if (endIndex < items.length) {
|
requestAnimationFrame(() => {
|
processBatch(endIndex);
|
});
|
} else {
|
this.removePlaceholders();
|
//all batches are processed, append fragment
|
this.grid.appendChild(fragment);
|
if (this.config.gallery) {
|
this.gallery.updateGalleryItems(this.gallery.getGalleryItems());
|
}
|
this.a11y.makeNavigable(this.grid.querySelectorAll('.item:not([data-keyboard-nav])'));
|
this.a11y.announceItems(items.length, append, this.hasMore);
|
}
|
};
|
|
if (items.length > 0) {
|
processBatch(0);
|
} else {
|
this.a11y.announceUpdate(0, append);
|
}
|
}
|
|
/**
|
* Creates a feed-item. Used by RenderItems
|
*/
|
createItemElement(item) {
|
if(!this.rendered[item.icon]) {
|
this.rendered[item.icon] = new Map();
|
}
|
if (this.rendered[item.icon].has(item.id)) {
|
return this.rendered[item.icon].get(item.id);
|
}
|
|
const favourited = window.isFavourited(item.icon, item.id)??false;
|
const template = window.getTemplate('feed-item');
|
|
template.id = `${item.icon}-${item.id}`;
|
template.dataset.id = item.id;
|
template.classList.add(item.icon);
|
|
if (item['umami_view']) {
|
this.buildUmamiData(template, item['umami_view']);
|
}
|
|
let favouriteButton = template.querySelector('button.favourite');
|
[
|
favouriteButton.dataset.id,
|
favouriteButton.dataset.type,
|
favouriteButton.dataset.artist,
|
favouriteButton.title
|
] = [
|
item.id,
|
item.icon,
|
item['user_id'],
|
(favourited) ? 'Remove from Favourites' : 'Add to Favourites'
|
];
|
|
let order = item.order;
|
let single = template.querySelector('.item');
|
let list = template.querySelector('.item-list');
|
let img = template.querySelector('.feed-images');
|
let summary = template.querySelector('summary');
|
let info = template.querySelector('.item-info');
|
|
for (let [index, id] of Object.entries(order)) {
|
let target;
|
let config = item[id];
|
if (id === 'title') {
|
target = template.querySelector('h3 a');
|
if (item.title !== '') {
|
[
|
target.textContent,
|
target.href,
|
target.url
|
] = [
|
item.title,
|
item.url,
|
`Learn more about this ${item.icon}`
|
];
|
if (item.icon !== '') {
|
target.closest('h3').prepend(window.getIcon(item.icon));
|
}
|
if (item.umami_click) {
|
this.buildUmamiData(target, item.umami_click);
|
}
|
} else {
|
target.remove();
|
}
|
} else if (Object.hasOwn(config, 'terms')) {
|
//Taxonomy list
|
if (config.terms.length === 0) {
|
continue;
|
}
|
let taxonomy = list.cloneNode(true);
|
let label = taxonomy.querySelector('.label');
|
let termList = taxonomy.querySelector('ul');
|
let listItem = taxonomy.querySelector('li');
|
|
if (config.label) {
|
label.textContent = config.label;
|
}
|
if (config.icon) {
|
label.prepend(window.getIcon(config.icon));
|
}
|
if (!config.label && !config.icon){
|
label.remove();
|
}
|
|
config.terms.forEach(term => {
|
let termItem = listItem.cloneNode(true);
|
let link = termItem.querySelector('a');
|
[
|
link.href,
|
link.title,
|
link.textContent
|
] = [
|
term.url,
|
`Learn more about ${term.title}`,
|
term.title
|
];
|
if (term.umami_click.length > 0) {
|
this.buildUmamiData(link, term.umami_click);
|
}
|
termList.append(termItem);
|
});
|
|
listItem.remove();
|
info.appendChild(taxonomy);
|
} else if (Object.hasOwn(config, 'value') && config.value !== '') {
|
let itemInfo = single.cloneNode(true);
|
let label = itemInfo.querySelector('.label');
|
let link = itemInfo.querySelector('a');
|
let p = itemInfo.querySelector('p');
|
if (Object.hasOwn(config, 'label')) {
|
label.textContent = config.label;
|
}
|
if (Object.hasOwn(config, 'icon')) {
|
label.prepend(window.getIcon(config.icon));
|
}
|
if (!Object.hasOwn(config, 'icon') && !Object.hasOwn(config, 'label')) {
|
label.remove();
|
}
|
if (Object.hasOwn(config, 'url')) {
|
p.remove();
|
[
|
link.textContent,
|
link.href,
|
link.title
|
] = [
|
config.value,
|
config.url,
|
`Learn more about ${config.value}`
|
];
|
} else {
|
link.remove();
|
p.textContent = config.value;
|
}
|
info.appendChild(itemInfo);
|
} else if (id === 'image') {
|
let images = summary.querySelector('.feed-images');
|
let img = images.querySelector('a');
|
|
let main = img.cloneNode(true);
|
if (!this.config.gallery) {
|
main.href = item.url;
|
}
|
|
main.classList.add('feed-image');
|
this.buildImageData(main.querySelector('img'), item.image);
|
images.append(main);
|
|
if (item.content?.length > 0) {
|
images.classList.add('multi');
|
item.content.forEach(c => {
|
let image = img.cloneNode(true);
|
if (!this.config.gallery) {
|
image.href = c.url;
|
}
|
let itemImg = image.querySelector('img');
|
itemImg.src = c.image.small;
|
itemImg.alt = c.image.alt;
|
images.append(image);
|
});
|
}
|
img.remove();
|
}
|
}
|
single.remove();
|
list.remove();
|
|
this.rendered[item.icon].set(item.id, template);
|
|
return template;
|
}
|
|
buildImageData(img, data){
|
if (typeof data.tiny !== 'string') {
|
return;
|
}
|
[
|
img.src,
|
img.dataset.small,
|
img.dataset.medium,
|
img.dataset.large,
|
img.alt
|
] =
|
[
|
data.tiny,
|
data.small,
|
data.medium,
|
data.large,
|
data.alt
|
];
|
}
|
|
buildUmamiData(item, data){
|
for(let [key, value] of Object.entries(data)){
|
item.dataset[key] = value;
|
}
|
}
|
|
/**
|
* Load Image, used by renderItems
|
* @param element
|
*/
|
loadImage(element) {
|
const img = element.querySelector('img');
|
if (!img) return;
|
const size = this.getImageSize();
|
|
img.src = img.dataset[size] || img.dataset.src;
|
element.setAttribute('data-loaded', 'true');
|
}
|
|
/**
|
* Updates the image size according to screen size
|
*/
|
updateImageSizes() {
|
const size = this.getImageSize();
|
const items = this.grid.querySelectorAll('.item');
|
items.forEach(item => {
|
const img = item.querySelector('img');
|
if (img && img.dataset[size] && img.src !== img.dataset[size]) {
|
img.src = img.dataset[size];
|
}
|
});
|
}
|
/**
|
* Get image size based on screen width
|
*/
|
getImageSize() {
|
const width = window.innerWidth;
|
if (width > 1024) return 'medium';
|
if (width > 500) return 'medium';
|
return 'small';
|
}
|
|
}
|
document.addEventListener('DOMContentLoaded', () => {
|
window.feedBlock = new FeedBlock();
|
});
|
