From 56a9a1ccf764ff7a6af8f8a2292cb07443cb4aa7 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Thu, 28 May 2026 18:19:57 +0000
Subject: [PATCH] =New Gitbit setpu
---
src/feed/view.js | 1271 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 666 insertions(+), 605 deletions(-)
diff --git a/src/feed/view.js b/src/feed/view.js
index 5e3b453..894f85c 100644
--- a/src/feed/view.js
+++ b/src/feed/view.js
@@ -1,13 +1,12 @@
class FeedBlock {
constructor() {
this.container = document.querySelector('section.feed-block');
- if (!this.container) {
- return;
- }
+ if(!this.container) return;
this.a11y = window.jvbA11y;
- this.cache = new window.jvbCache('feed');
this.error = window.jvbError;
+ this.cache = new window.jvbCache('feed');
+ this.templates = window.jvbTemplates;
this.config = {
source: '',
@@ -17,600 +16,146 @@
view: this.cache.get('feedView') || 'grid',
... this.container.dataset
};
+
+ this.init();
+ }
+ init() {
this.initElements();
+ this.defineTemplates();
+ this.initListeners();
this.initFilters();
-
- this.loadWhenAble();
- }
-
- loadWhenAble() {
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
- this.initTaxonomies();
this.initStore();
- this.initListeners();
+ this.initTaxonomies();
+
+ this.processCachedFilters();
+ this.processURLFilters();
+ this.updateFilterUI();
this.initGallery();
}, { timeout: 2000 });
} else {
setTimeout(() => {
- this.initTaxonomies();
this.initStore();
- this.initListeners();
+ this.initTaxonomies();
+
+ this.processCachedFilters();
+ this.processURLFilters();
+ this.updateFilterUI();
this.initGallery();
}, 100);
}
}
initElements() {
- this.currentTaxonomies = new Set(); // Allowed Taxonomies, grabbed from active buttons
- this.taxonomyFilters = {};
- this.elements = {
+ this.selectors = {
filterTrigger: '[data-filter]',
filters: {
- content: '[data-filter="content"]',
- orderby: '[data-filter="orderby"]',
- order: '[data-filter="order"]',
- match: '[data-filter="match"]',
+ actions: '.filter-actions .toggle-text',
+ container: '.all-filters',
+ content: '[data-filter="content"]',
+ orderby: '[data-filter="orderby"]',
+ order: '[data-filter="order"]',
+ match: '[data-filter="match"]',
favourites: '[data-filter="favourites"]',
- taxonomy: '[data-filter^="taxonomy"]'
+ taxonomy: '[data-filter^="taxonomy"]',
},
- selectedTax: '.selected-items',
- clearFilter: 'button.clear-filters',
- loadMore: 'button.load-more',
- filterContainer: '.filters',
- grid: '.item-grid',
- };
- this.ui = window.uiFromSelectors(this.elements);
-
- this.ui.content = this.ui.filterContainer.querySelectorAll('[name="content"]');
- this.ui.taxonomies = this.ui.filterContainer.querySelectorAll('[data-taxonomy]');
- if (this.ui.content.length > 0) {
- this.contentTypes = Array.from(
- this.ui.content
- ).map(content => content.value);
- } else {
- this.contentTypes = [this.container.dataset['content']];
- }
- if (this.ui.taxonomies.length>0) {
- this.taxonomies = Array.from(
- this.ui.taxonomies,
- ).map(content => content.dataset.taxonomy);
- } else {
- this.taxonomies = [];
- }
- }
-
- async initTaxonomies() {
- this.selector = window.jvbSelector;
- const buttons = document.querySelectorAll('[data-filter="taxonomy"]');
-
- this.selector.isInitializing = true;
- buttons.forEach((button) => {
- const taxonomy = button.dataset.taxonomy;
- this.currentTaxonomies.add(taxonomy);
-
- this.selector.registerFilterButton(button, {
- button: button,
- buttonSelector: '[data-filter="taxonomy"]',
- selected: this.ui.selectedTax
- });
-
- // Add preload listeners
- this.addTaxonomyPreloadListeners(button, taxonomy);
- });
-
- this.selector.isInitializing = false;
-
- this.selector.subscribe((event, data) => {
- if (event === 'selected-terms') this.handleTaxonomyChange(data);
- });
- }
-
- addTaxonomyPreloadListeners(button, taxonomy) {
- const preload = () => {
- this.selector.preloadTaxonomy(taxonomy);
- };
-
- // Desktop hover
- button.addEventListener('mouseenter', preload, { once: true });
-
- // Touch/keyboard (fires before click)
- button.addEventListener('pointerdown', preload, { once: true });
-
- // Keyboard focus
- button.addEventListener('focus', preload, { once: true });
- }
-
- handleTaxonomyChange(data) {
- const { terms, taxonomy } = data;
-
- // Update only the current taxonomy's terms
- if (terms.size > 0) {
- this.taxonomyFilters[taxonomy] = Array.from(terms.keys());
- } else {
- // Remove taxonomy if no terms selected
- delete this.taxonomyFilters[taxonomy];
- }
-
- // Build filters object with all taxonomies
- let filters = {
- page: 1
- };
-
- // Add taxonomy filters if any exist
- if (Object.keys(this.taxonomyFilters).length > 0) {
- filters.taxonomy = this.taxonomyFilters;
- }
-
- this.updateFilter(filters);
- }
-
- clearAllTaxonomies() {
- this.taxonomyFilters = {};
- window.removeChildren(this.ui.selectedTax);
-
- this.updateFilter({
- taxonomy: null,
- page: 1
- });
- }
-
- initFilters() {
- //defaults
- this.filters = {
- content: this.contentTypes[0],
- orderby: 'date',
- order: 'desc',
- page: 1
- };
- if (this.config.context) this.filters.context = this.config.context;
- if (this.config.source) this.filters.source = this.config.source;
-
- //check the cache
- this.processCachedFilters();
- //check url
- this.processURLFilters();
-
- // Set initial UI state
- this.syncUIToFilters();
- }
- syncUIToFilters() {
- // Check radio buttons
- Object.entries(this.filters).forEach(([key, value]) => {
- const input = this.ui.filterContainer.querySelector(`[data-filter="${key}"][value="${value}"]`);
- if (input) {
- input.checked = true;
- }
- });
-
- // Update content-specific visibility
- this.updateContentFor(this.filters.content);
- }
- nextPage() {
- this.store.setFilter('page', this.store.filters.page++);
- }
-
- initStore() {
- const store = window.jvbStore.register(
- 'feed',
- {
- storeName: 'feed',
- endpoint: 'feed',
- keyPath: 'id',
- indexes: [
- { name: 'content', keyPath: 'content'},
- { name: 'taxonomy', keyPath: 'taxonomy'},
- { name: 'user', keyPath: 'user'},
- { name: 'date', keyPath: 'modified'},
- { name: 'title', keyPath: 'title'}
- ],
- filters: this.filters,
- TTL: 6 * 60 * 60 * 1000,
- showLoading: true,
- required: 'content',
- delayFetch: true
- }
- );
- this.store = store.feed;
-
- this.store.subscribe((event, data) => {
- switch (event) {
- case 'data-loaded':
- this.renderItems();
- this.ui.loadMore.hidden = true;
- if (this.store.lastResponse && this.store.lastResponse['has_more']) {
- this.ui.loadMore.hidden = !this.store.lastResponse['has_more'];
- }
- break;
- }
- });
- }
-
- initGallery() {
- this.gallery = (this.config.gallery) ? window.jvbGallery : false;
- if (this.gallery) {
- this.gallery.subscribe((event, data) => {
- if (event === 'load-more' && this.store.lastResponse) {
- if (this.store.lastResponse['has_more']) {
- this.nextPage();
- }
- }
- });
- }
- }
-
- processCachedFilters() {
- Object.keys(this.filters).forEach(filter => {
- let cached = this.cache.get(`${this.config.source}_${this.config.context}_${filter}`);
- if (cached && cached !== this.filters[filter]){
- this.filters[filter] = cached;
- }
- });
- }
-
- processURLFilters() {
- if (this.filters.page > 1) {
- return false;
- }
- const params = new URLSearchParams(window.location.search);
-
- if (!params.toString()) {
- return false;
- }
- let filters = ['content', 'order', 'orderby', 'favourites', 'match'];
- filters.forEach(filter => {
- let value = params.get(`f_${filter}`);
- if (value) {
- this.filters[filter] = value;
- let input = this.ui.filters[filter];
- if (input) {
- input.checked = true;
- }
- }
- });
-
- let hasTaxonomy = false;
- // Load taxonomy filters from URL
- params.forEach((value, key) => {
- if (key.startsWith('f_tax_')) {
- hasTaxonomy = true;
- const taxonomy = key.replace('f_tax_', '');
- if (!this.taxonomyFilters[taxonomy]) {
- this.taxonomyFilters[taxonomy] = [];
- }
- this.taxonomyFilters[taxonomy] = value.split(',').map(Number);
- }
- });
- if (hasTaxonomy) {
- for (let [tax, ids] in Object.entries(this.taxonomyFilters)) {
- let button = this.ui.filterContainer.querySelector(`[data-taxonomy="${tax}"]`);
- if (button) {
- if (button.dataset.fieldId) {
- let field = this.selector.get(button.dataset.fieldId);
- field.selectedTerms = new Set(ids);
- this.selector.initFieldDisplay(button.dataset.fieldId);
- } else {
- this.selector.registerField(button, {
- button: button,
- buttonSelector: '[data-filter="taxonomy"]',
- selected: this.ui.selectedTax,
- selectedItems: ids
- });
- }
- }
- }
- }
- return true;
- }
-
- /**
- * Update URL with current filters (for sharing/bookmarking)
- */
- updateURL() {
- const params = new URLSearchParams();
-
- // Add simple filters
- ['content', 'order', 'orderby', 'match'].forEach(key => {
- if (this.filters[key]) {
- params.set(`f_${key}`, this.filters[key]);
- }
- });
-
- // Add taxonomy filters
- Object.entries(this.taxonomyFilters).forEach(([taxonomy, terms]) => {
- if (terms.length > 0) {
- params.set(`f_tax_${taxonomy}`, terms.join(','));
- }
- });
-
- // Update URL without reload
- const newURL = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
- window.history.pushState({ filters: this.filters }, '', newURL);
- }
-
- renderItems() {
- let items = this.store.getFiltered();
- if (this.store.filters['page'] === 1) {
- window.removeChildren(this.ui.grid);
- }
-
- if (items.length === 0) {
- this.a11y.announceItems(0, this.store.filters['page'] > 0);
- return;
- }
-
- 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);
- }
-
- if (endIndex < items.length) {
- requestAnimationFrame(() => processBatch(endIndex));
- } else {
- this.removePlaceholders();
- this.ui.grid.append(fragment);
-
- // Observe images after adding to DOM
- this.observeImages(this.ui.grid);
-
- if (this.config.gallery) {
- this.gallery.updateGalleryItems(this.gallery.getGalleryItems());
- }
-
- this.a11y.makeNavigable(this.ui.grid.querySelectorAll('.item:not([data-keyboard-nav])'));
- this.a11y.announceItems(items.length, this.store.filters['page'] > 1, this.store.hasMore);
+ grid: '.item-grid',
+ selected: '.selected-items',
+ buttons: {
+ loadMore: 'button.load-more',
+ remove: '.remove-term',
+ clearFilters: 'button.clear-filters',
+ refresh: 'button[data-action="refresh"]'
}
};
+ this.ui = window.uiFromSelectors(this.selectors, this.container);
+ this.ui.buttons.refresh = document.querySelector(this.selectors.buttons.refresh);
- if (items.length > 0) {
- processBatch(0);
- } else {
- this.a11y.announceItems(0, this.store.filters['page'] >1, false);
- }
+ //Add content and taxonomies
+ this.ui.content = this.ui.filters.container.querySelectorAll('[name="content"]');
+ if (this.ui.content.length === 0) this.ui.content = false;
+ this.ui.taxonomies = this.ui.filters.container.querySelectorAll('[data-taxonomy]');
+ if (this.ui.taxonomies.length === 0) this.ui.taxonomies = false;
+ this.ui.orderbyWrap = this.ui.filters.container.querySelector('[data-for-order]');
+ if (this.ui.orderbyWrap.length === 0) this.ui.orderbyWrap = false;
+ this.ui.order = this.ui.filters.container.querySelectorAll('[data-filter="order"]');
+ if (this.ui.order.length === 0) this.ui.order = false;
+ this.ui.orderby = this.ui.filters.container.querySelectorAll('[data-filter="orderby"]');
+ if (this.ui.orderby.length === 0) this.ui.orderby = false;
- this.ui.filters.match.hidden = Object.keys(this.taxonomyFilters).length === 0;
- this.ui.clearFilter.hidden = Object.keys(this.taxonomyFilters).length === 0;
+ this.orderbyFilters = (this.ui.orderby)
+ ? Array.from(this.ui.orderby).map(o => o.value)
+ : [];
+
+ this.contentTypes = (this.ui.content)
+ ? Array.from(this.ui.content).map(c => c.value)
+ : [this.container.dataset.content];
+ this.taxonomies = (this.ui.taxonomies?.length > 0)
+ ? Array.from(this.ui.taxonomies).map(t => t.dataset.taxonomy)
+ : [];
}
- /**
- *
- * @param {object} item
- */
- createItemElement(item) {
- let template = window.getTemplate('feed-item');
- if (Object.hasOwn(template.dataset, 'timeline')) {
- return this.createTimelineElement(item, template);
- }
- return template;
- }
-
- createTimelineElement(item, template) {
- let [
- main,
- link,
- beforeImg,
- afterImg,
- afterText,
- started,
- lastTreated,
- total,
- termList,
- timeline
- ] = [
- template,
- template.querySelector('a'),
- template.querySelector('img.before'),
- template.querySelector('img.after'),
- template.querySelector('summary span:last-of-type'),
- template.querySelector('p.started time'),
- template.querySelector('p.updated time'),
- template.querySelector('p.total b'),
- template.querySelector('.term-list'),
- Object.values(item.fields.order)
- ];
- let numberTreatments = timeline.length - 1;
- let beforeImgData = item.images[timeline[0]['post_thumbnail']];
- let afterImgData = item.images[timeline[numberTreatments]['post_thumbnail']];
-
- [
- main.dataset.id,
- link.href,
- beforeImg.src,
- beforeImg.dataset.small,
- beforeImg.dataset.medium,
- afterImg.src,
- afterImg.dataset.small,
- afterImg.dataset.medium,
- afterText.textContent,
- started.textContent,
- lastTreated.textContent,
- total.textContent
- ] = [
- item.id,
- item.url,
- beforeImgData['tiny'],
- beforeImgData.small,
- beforeImgData.medium,
- afterImgData['tiny'],
- afterImgData.small,
- afterImgData.medium,
- `${afterText.textContent} ${numberTreatments} Tx`,
- timeline[0].date??item.date,
- timeline[numberTreatments].date??'',
- `${numberTreatments} Treatments`
- ];
- return template;
- }
-
- removePlaceholders() {
- const placeholders = this.ui.grid.querySelectorAll('.placeholder');
- if (placeholders.length > 0) {
- placeholders.forEach(p => p.remove());
- }
- }
-
-
- addPlaceholders() {
- let total = this.contentTypes.length;
- const fragment = document.createDocumentFragment();
- for (let i = 0; i < 12; i++) {
- let template = window.getTemplate('placeholderTemplate');
-
- let rand = Math.floor(Math.random() * total);
- let icon;
- if (this.ui.content.length > 0) {
- icon = this.ui.content.filter((content) => { return content.value === this.contentTypes[rand]}).querySelector('.icon').cloneNode(true);
- } else {
- icon = window.getIcon(this.container.dataset.icon);
- }
- template.append(icon);
- fragment.append(template);
- }
- this.ui.grid.append(fragment);
- }
-
-
-
- /**
- *
- * @param {object} filters {name: value}
- */
- updateFilter(filters) {
- //double check filters are what we're expecting
- let allowed = ['taxonomy','favourites','match', ... Object.keys(this.filters)];
-
- filters = Object.keys(filters)
- .filter(key => allowed.includes(key))
- .reduce((obj, key) => {
- obj[key] = filters[key];
- return obj;
- }, {});
-
- if (window.getDifferences.map(this.filters, filters)) {
- this.filters = { ...this.filters, ...filters }; // Merge instead of replace
- this.updateURL();
- this.store.setFilters(filters);
- }
- }
- /**
- * Update visible filters based on selected content type
- */
- updateContentFor(contentType) {
- // Update taxonomy filter visibility
- const taxonomyButtons = this.ui.filterContainer.querySelectorAll('[data-filter="taxonomy"]');
- taxonomyButtons.forEach(button => {
- const forTypes = button.dataset.for?.split(',') || [];
- button.hidden = forTypes.length > 0 && !forTypes.includes(contentType);
- });
-
- // Update ordering options
- const orderButtons = this.ui.filterContainer.querySelectorAll('[data-for]');
- orderButtons.forEach(button => {
- const forTypes = button.dataset.for?.split(',') || [];
- if (forTypes.length > 0) {
- button.hidden = !forTypes.includes(contentType);
- // Uncheck if hiding
- if (button.hidden && button.checked) {
- button.checked = false;
- }
- }
- });
-
- // Update order direction visibility based on selected orderby
- const orderBy = this.ui.filterContainer.querySelector('[name="orderby"]:checked');
- this.updateOrderDirectionVisibility(orderBy?.value);
- }
-
- /**
- * Show/hide order direction based on orderby selection
- */
- updateOrderDirectionVisibility(orderBy) {
- const orderDirection = this.ui.filterContainer.querySelector('.order-direction');
- if (orderDirection) {
- const forOrders = orderDirection.dataset.forOrder?.split(',') || [];
- orderDirection.hidden = forOrders.length > 0 && !forOrders.includes(orderBy);
- }
- }
- /*********************************************************************
- LISTENERS
- *********************************************************************/
initListeners() {
- this.popStateHandler = this.handlePopState.bind(this);
+ this.popStateHandler = this.handlePopState.bind(this);
this.clickHandler = this.handleClick.bind(this);
this.changeHandler = this.handleChange.bind(this);
- this.imageObserver = null;
- this.resizeObserver = null;
- if ('IntersectionObserver' in window) {
- this.imageObserver = new IntersectionObserver(entries => {
- entries.forEach(entry => {
- this.loadImage(entry.target);
- this.imageObserver.unobserve(entry.target);
- });
- }, {
- rootMargin: '100px',
- threshold: .1
- });
- }
-
- if ('ResizeObserver' in window) {
- this.resizeObserver = new ResizeObserver(() => {
- window.debouncer.schedule(
- 'feed-update-images',
- () => this.updateImageSizes(),
- 250
- );
- });
- } else {
- window.addEventListener('resize', () => {
- window.debouncer.schedule(
- 'feed-update-images',
- () => this.updateImageSizes(),
- 250
- );
- });
- }
window.addEventListener('popstate', this.popStateHandler);
document.addEventListener('click', this.clickHandler);
document.addEventListener('change', this.changeHandler);
}
- loadImage(img) {
- const src = this.getAppropriateImageSize(img);
- if (src && src !== img.src) {
- img.src = src;
- img.dataset.loaded = 'true';
- }
+ initFilters() {
+ this.allowedFilters = ['content', 'order', 'orderby', 'favourites', 'match'];
+ let defaults = {
+ content: this.contentTypes[0],
+ orderby: 'date',
+ order: 'desc',
+ page: 1,
+ };
+ if (this.config.context) defaults.context = this.config.context;
+ if (this.config.source) defaults.source = this.config.source;
+
+ this.filters = defaults;
+ this.defaults = {...defaults};
}
+ updateFilterUI() {
+ if (this.ui.filters.container) {
+ //Get cached inputs
+ let groups = [
+ this.ui.content,
+ this.ui.orderby,
+ this.ui.order
+ ];
- getAppropriateImageSize(img) {
- const width = window.innerWidth;
+ groups.forEach(group => {
+ if(group) {
+ for (let input of group) {
+ let [filter, value] = [input.dataset.filter, input.value];
+ if (!Object.hasOwn(this.store.filters, filter)) break;
+ let doit = this.store.filters[filter] === value;
+ if (doit) {
+ input.checked = doit;
+ break;
+ }
+ }
+ }
+ });
- if (width < 768 && img.dataset.small) {
- return img.dataset.small;
- } else if (img.dataset.medium) {
- return img.dataset.medium;
- }
-
- return img.src; // Fallback to current src
- }
-
- observeImages(container) {
- const images = container.querySelectorAll('img[data-small], img[data-medium]');
- images.forEach(img => {
- if (!img.dataset.loaded) {
- this.imageObserver.observe(img);
+ if (Object.hasOwn(this.store.filters, 'taxonomy')) {
+ for (let [taxonomy, terms] of Object.entries(this.store.filters.taxonomy)) {
+ terms.forEach(termId => {
+ termId = parseInt(termId);
+ const term = this.selector.store.get(termId);
+ if (term) {
+ this.createTermElement(termId);
+ }
+ });
+ }
}
- });
+ }
}
handlePopState(e) {
@@ -623,64 +168,580 @@
}
handleClick(e) {
- if (window.targetCheck(e, this.elements.loadMore)) {
+ if (window.targetCheck(e, this.selectors.buttons.loadMore)) {
this.nextPage();
- } else if (window.targetCheck(e, this.elements.clearFilter)) {
- this.clearAllTaxonomies();
- } else if (window.targetCheck(e, '.remove-item')) {
- this.handleRemoveSelectedTerm(e);
+ } else if (window.targetCheck(e, this.selectors.buttons.clearFilters)) {
+ this.clearFilters();
+ }
+ let remove = window.targetCheck(e, this.selectors.buttons.remove);
+ if (remove) {
+ this.removeSelectedTerm(remove);
+ }
+
+ let refresh = window.targetCheck(e, this.selectors.buttons.refresh);
+ if (refresh) {
+ this.store.clearCache();
+ this.store.fetch();
+ }
+
+ let orderbyButton = window.targetCheck(e, '[data-filter="orderby"]');
+ if (orderbyButton && orderbyButton.value === 'random' && orderbyButton.checked) {
+ // Already selected random, just re-render to trigger new shuffle
+ this.renderItems();
}
}
- handleRemoveSelectedTerm(e) {
- const selectedItem = e.target.closest('.selected-item');
- if (!selectedItem) return;
-
- const termId = parseInt(selectedItem.dataset.id);
- const taxonomy = selectedItem.dataset.taxonomy;
-
- // Remove from filters
- if (this.taxonomyFilters[taxonomy]) {
- this.taxonomyFilters[taxonomy] = this.taxonomyFilters[taxonomy]
- .filter(id => id !== termId);
-
- if (this.taxonomyFilters[taxonomy].length === 0) {
- delete this.taxonomyFilters[taxonomy];
- }
- }
-
- // Remove from UI
- selectedItem.remove();
-
- // Update filters
- this.updateFilter({
- taxonomy: Object.keys(this.taxonomyFilters).length > 0
- ? this.taxonomyFilters
- : null,
- page: 1
- });
+ nextPage() {
+ const nextPage = (this.store.filters.page || 1) + 1;
+ const maxPage = this.store.lastResponse?.pages || nextPage;
+ this.store.setFilters({ page: Math.min(nextPage, maxPage) });
}
handleChange(e) {
- let target = e.target;
+ const target = e.target;
if (Object.hasOwn(target.dataset, 'filter')) {
- if (target.dataset.filter === 'content') {
- this.updateContentFor(target.value);
- this.updateFilter({ content: target.value, page: 1 });
- } else if (target.dataset.filter === 'orderby') {
- this.updateOrderDirectionVisibility(target.value);
- this.updateFilter({ orderby: target.value, page: 1 });
- } else if (target.dataset.filter === 'order') {
- this.updateFilter({ order: target.value, page: 1 });
- } else if (target.dataset.filter === 'match') {
- this.updateFilter({ match: target.checked ? 'all' : 'any', page: 1 });
- } else if (target.dataset.filter === 'favourites') {
- this.updateFilter({ favourites: target.checked, page: 1 });
+ if (this.allowedFilters.includes(target.dataset.filter)) {
+ let filters = {};
+ filters[target.dataset.filter] = target.value;
+ this.resetFilters(filters);
+ }
+ switch (target.dataset.filter) {
+ case 'content':
+ this.updateContentFor(target.value);
+ break;
+ case 'orderby':
+ this.updateOrderOptions(target.value);
+ break;
}
}
}
+
+ clearFilters() {
+ this.taxFilters = {};
+ window.removeChildren(this.ui.selected);
+
+ this.taxonomies.forEach(tax => {
+ let fieldId = this.getFieldId(tax);
+ this.selector.selectedTerms.get(fieldId)?.clear();
+ });
+
+ this.store.setFilters({
+ ...this.defaults,
+ taxonomy: null
+ });
+
+ this.updateURL();
+ this.saveToCacheFilters();
+ }
+
+ resetFilters(filters) {
+ filters = {
+ ...this.store.filters,
+ page: 1,
+ ... filters
+ }
+ this.store.setFilters(filters);
+
+ this.updateURL();
+ this.saveToCacheFilters();
+ }
+
+ getFieldId(taxonomy) {
+ return this.selector.getFieldId(Array.from(this.ui.taxonomies).filter(tax => tax.dataset.taxonomy === taxonomy)[0]??null);
+ }
+ removeSelectedTerm(button) {
+ const termId = parseInt(button.dataset.id);
+ const taxonomy = button.dataset.taxonomy;
+
+ if (Object.hasOwn(this.taxFilters, taxonomy)){
+ this.taxFilters[taxonomy] = this.taxFilters[taxonomy]
+ .filter(id => id !== termId);
+ if (this.taxFilters[taxonomy].length === 0) {
+ delete this.taxFilters[taxonomy];
+ }
+ }
+ button.remove();
+
+ // Find the fieldId for this taxonomy
+ const field = this.getFieldId(taxonomy);
+ if (field) {
+ this.selector.activeField = field;
+ // Notify selector to remove from its selectedTerms
+ this.selector.removeSelected(termId, field);
+ }
+
+ this.resetFilters({
+ taxonomy: Object.keys(this.taxFilters).length > 0
+ ? this.taxFilters
+ : null
+ });
+ }
+
+ updateContentFor(content) {
+ let checkIt = [
+ this.ui.taxonomies,
+ this.ui.orderby
+ ];
+ checkIt.forEach(check => {
+ if (!check) return;
+ check.forEach(button => {
+ const forTypes = button.dataset.for?.split(',')??[];
+ button.hidden = forTypes.length > 0 && !forTypes.includes(content);
+ if (button.hidden && button.checked) {
+ button.checked = false;
+ }
+ });
+ });
+ }
+ updateOrderOptions(order) {
+ if (this.ui.orderbyWrap) {
+ let options = this.ui.orderbyWrap.dataset.forOrder.split(',')??[];
+ this.ui.orderbyWrap.hidden = !options.includes(order);
+ }
+ }
+
+ updateFilterControls() {
+ const keys = Object.keys(this.taxFilters);
+ if (this.ui.buttons.clearFilters) {
+ this.ui.buttons.clearFilters.hidden = keys.length === 0;
+ }
+ if (this.ui.filters.actions) {
+ this.ui.filters.actions.hidden = keys.length <= 1;
+ }
+ }
+
+ async initTaxonomies() {
+ this.taxFilters = {};
+ this.selector = window.jvbSelector;
+ // this.selector.scanExistingFields(this.ui.filters.container);
+ // this.taxonomies.map(tax => this.selector.batchFetch.add(tax));
+ // this.selector.batchFetchTaxonomies();
+ this.selector.subscribe((event, data) => {
+ switch (event) {
+ case 'selected-terms':
+
+ this.handleTaxonomyChange(data);
+ break;
+
+ }
+ });
+ }
+ handleTaxonomyChange(data) {
+ const {terms, taxonomy } = data;
+ if (terms.size === 0) return;
+ this.taxFilters[taxonomy] = Array.from(terms);
+ this.resetFilters({ taxonomy: this.taxFilters });
+
+ terms.forEach(t => {
+ this.createTermElement(t);
+ });
+ this.updateFilterControls();
+ }
+ getTaxonomyIcon(taxonomy) {
+ let iconButton = Array.from(this.ui.taxonomies)
+ .find(t => t.dataset.taxonomy === taxonomy);
+ return iconButton?.dataset.icon.trim() || 'tag';
+ }
+ createTermElement(termId) {
+ const term = this.selector.store.get(termId);
+ if (!term) return;
+ if (this.ui.selected.querySelector(`[data-id="${termId}"]`)) return;
+
+ term.icon = this.getTaxonomyIcon(term.taxonomy);
+ this.ui.selected.append(this.templates.create('feedTerm', term));
+ }
+
+ processCachedFilters() {
+ Object.keys(this.filters).forEach(filter => {
+ let cached = this.cache.get(`${this.config.source}_${this.config.context}_${filter}`);
+ if (cached && cached !== this.filters[filter]) {
+ this.filters[filter] = cached;
+ }
+ });
+ }
+
+ processURLFilters() {
+ if (!this.isFirstPage()) return false;
+ const params = new URLSearchParams(window.location.search);
+ if (!params.toString()) return false;
+ let shouldUpdate = false;
+ this.allowedFilters.forEach(filter => {
+ let value = params.get(`f_${filter}`);
+ if (value) {
+ shouldUpdate = true;
+ this.filters[filter] = value;
+ }
+ });
+
+ let hasTax = false;
+ params.forEach((value, key) => {
+ if (key.startsWith('f_tax_')) {
+ hasTax = true;
+ shouldUpdate = true;
+ const taxonomy = key.replace('f_tax_','');
+ this.taxFilters[taxonomy] = value.split(',').map(Number);
+ }
+ });
+ if (shouldUpdate) {
+ if (hasTax) {
+ this.filters.taxonomy = this.taxFilters;
+ }
+ this.resetFilters(this.filters);
+ }
+ return true;
+ }
+
+ updateURL() {
+ const params = new URLSearchParams();
+ this.allowedFilters.forEach(key => {
+ if (Object.hasOwn(this.store.filters, key) && this.store.filters[key] !== this.defaults[key]) {
+ params.set(`f_${key}`, this.store.filters[key]);
+ }
+ });
+
+ for (let [tax, terms] of Object.entries(this.taxFilters)) {
+ if (terms.length > 0) {
+ params.set(`f_tax_${tax}`, terms.join(','));
+ }
+ }
+
+ const newURL = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
+ const currentURL = window.location.pathname + window.location.search; // Change this line
+
+ if (newURL !== currentURL) {
+ window.history.pushState({filters:this.store.filters}, '', newURL);
+ }
+ }
+
+ saveToCacheFilters() {
+ Object.keys(this.store.filters).forEach(filter => {
+ const cacheKey = `${this.config.source}_${this.config.context}_${filter}`;
+
+ if (this.store.filters[filter] !== this.defaults[filter]) {
+ this.cache.set(cacheKey, this.store.filters[filter]);
+ } else {
+ this.cache.remove(cacheKey);
+ }
+ });
+
+ const taxCacheKey = `${this.config.source}_${this.config.context}_taxonomy`;
+ if (Object.keys(this.taxFilters).length > 0) {
+ this.cache.set(taxCacheKey, this.taxFilters);
+ } else {
+ this.cache.remove(taxCacheKey);
+ }
+ }
+
+ initGallery() {
+ this.gallery = (this.config.gallery) ? window.jvbGallery : false;
+ if (this.gallery) {
+ this.gallery.subscribe((event, data) => {
+ if (event === 'load-more' && this.store.lastResponse?.has_more) {
+ this.nextPage();
+ }
+ });
+ }
+ }
+ initStore() {
+ let extraOrderby = this.orderbyFilters.filter(v => !['date','modified','title','random'].includes(v));
+ let extraIndexes = [];
+ extraOrderby.forEach(orderby =>{
+ extraIndexes.push({name:orderby, keyPath: orderby});
+ });
+ const store = window.jvbStore.register(
+ 'feed',
+ {
+ storeName: 'feed',
+ endpoint: 'feed',
+ keyPath: 'id',
+ indexes: [
+ { name: 'content', keyPath: 'content'},
+ { name: 'taxonomy', keyPath: 'taxonomy'},
+ { name: 'user', keyPath: 'user'},
+ { name: 'date', keyPath: 'date'},
+ { name: 'modified', keyPath: 'modified'},
+ { name: 'title', keyPath: 'title'},
+ ... extraIndexes
+ ],
+ filters: this.filters,
+ TTL: 6 * 60 * 60 * 1000, //6 hours
+ showLoading: true,
+ required: 'content',
+ }
+ );
+
+ this.store = store.feed;
+
+ this.store.subscribe((event, data) => {
+ switch (event) {
+ case 'data-loaded':
+ this.renderItems(data.items);
+ this.ui.buttons.loadMore.hidden = true;
+ if (this.store.lastResponse && this.store.lastResponse?.has_more) {
+ this.ui.buttons.loadMore.hidden = !this.store.lastResponse?.has_more??true;
+ }
+ break;
+ }
+ });
+ }
+
+ isFirstPage() {
+ return this.store.filters.page === 1;
+ }
+
+ renderItems(items = null) {
+ items = items??this.store.getFiltered();
+ if (this.isFirstPage()) {
+ window.removeChildren(this.ui.grid);
+ }
+ if (items.length === 0) {
+ this.showEmptyState();
+ this.a11y.announceItems(0, this.isFirstPage());
+ } else {
+ window.chunkIt(
+ items,
+ (item) => this.createItemElement(item),
+ (fragment) => {
+ this.removePlaceholders();
+ this.ui.grid.append(fragment);
+ if (this.config.gallery) this.gallery.buildGalleryItems('.item img');
+ this.a11y.makeNavigable(this.ui.grid.querySelectorAll('.item:not([data-keyboard-nav])'));
+ this.a11y.announceItems(items.length, !this.isFirstPage(), this.store.lastResponse?.has_more??false);
+ },
+ 5
+ ).then(()=>{});
+ }
+
+ this.updateFilterControls();
+ }
+
+ showEmptyState() {
+ window.removeChildren(this.ui.grid);
+ this.ui.grid.append(this.templates.create('emptyState'));
+ }
+
+ createItemElement(item) {
+ if (typeof item !== 'object') {
+ item = this.store.get(item);
+ if (!item) return;
+ }
+ return this.templates.create(`feedItem${window.uppercaseFirst(item.content)}`, item);
+ }
+ splitIDs(value) {
+ return String(value).split(',').map((value) => parseInt(value.trim())).filter(value=>value);
+ }
+
+ isImageField(item, value) {
+ if (!Object.hasOwn(item, 'images') || Object.keys(item.images).length === 0) {
+ return false;
+ }
+ let values = this.splitIDs(value);
+
+ return values.some(v =>
+ Object.keys(item.images).map(k => parseInt(k)).includes(parseInt(v))
+ );
+ }
+ formatImageFields(element, value, item) {
+ let values = this.splitIDs(value); // Convert string to array first
+ if (values.length === 0) return;
+
+ if (values.length > 1) {
+ let image = element.querySelector('img');
+ if (!image) return;
+ values.forEach(imgID => {
+ let img = image.cloneNode(true);
+ this.formatImageField(img, imgID, item);
+ element.append(img);
+ });
+ image.remove();
+ } else {
+ if (element.tagName !== 'IMG') {
+ element = element.querySelector('img');
+ if (!element) return;
+ }
+ this.formatImageField(element, values[0], item);
+ }
+ }
+ formatImageField(element, value, item) {
+ let imgData = item.images[value]??false;
+ if (!imgData) return;
+ [
+ element.src,
+ element.srcset,
+ element.alt
+ ] = [
+ imgData.tiny,
+ `${imgData.tiny} 50w, ${imgData.small} 300w, ${imgData.medium} 1024w`,
+ imgData['image-alt-text']
+ ]
+ }
+ isTaxonomyField(item, field) {
+ if (!Object.hasOwn(item, 'taxonomies') || Object.keys(item.taxonomies).length === 0) {
+ return false;
+ }
+
+ return Object.keys(item.taxonomies).includes(field);
+ }
+ formatTaxonomyField(element, item, field, value) {
+ if (element.tagName !== 'UL' || !element.querySelector('li')) return;
+ let values = this.splitIDs(value);
+ if (values.length === 0) {
+ element.remove();
+ }
+ let listItem = element.querySelector('li');
+ for (let termID of values) {
+ let term = item.taxonomies[field][termID]??false;
+ if (!term) continue;
+ let termItem = listItem.cloneNode(true);
+ let link = termItem.querySelector('a');
+ if (!link) continue;
+
+ let title = window.decodeHTMLEntities(term.title);
+
+ [
+ link.href,
+ link.title,
+ link.textContent
+ ] = [
+ term.url,
+ `See more ${title}`,
+ title
+ ];
+ element.append(termItem);
+ }
+ listItem.remove();
+ }
+ isTimeField(el) {
+ return el.tagName === 'TIME' || el.querySelector('time') !== null;
+ }
+ formatTimeField(element, value) {
+ if (element.tagName !== 'TIME') {
+ element = element.querySelector('time');
+ if (!element) return;
+ }
+ element.setAttribute('datetime', value);
+ element.textContent = window.formatTimeAgo(value, 'F Y');
+ }
+ formatField(element, value) {
+ element.textContent = window.decodeHTMLEntities(value);
+ }
+
+ addTimelineElements(item, template) {
+ let [
+ afterEl,
+ number,
+ started,
+ last
+ ] = [
+ template.querySelector('span.after-text'),
+ template.querySelector('[data-field="number"] b'),
+ template.querySelector('[data-field="started"] time'),
+ template.querySelector('[data-field="updated"] time')
+ ];
+
+ if (afterEl) {
+ afterEl.textContent = `After ${item.number - 1} Tx`;
+ }
+ if (number) {
+ number.textContent = item.number - 1;
+ }
+ if (started) {
+ this.formatTimeField(started, item.fields.timeline[0]['post_date']);
+ }
+ if (last) {
+ this.formatTimeField(last, item.fields.timeline[item.fields.timeline.length - 1]['post_date']);
+ }
+ }
+
+ removePlaceholders() {
+ const placeholders = this.ui.grid.querySelectorAll('.placeholder');
+ if (placeholders.length > 0) {
+ placeholders.forEach(p => p.remove());
+ }
+ }
+
+ defineTemplates() {
+ const T = this.templates;
+ const f = this;
+
+ T.define('feedTerm', {
+ refs: {
+ icon: '.icon',
+ span: 'span'
+ },
+ setup({el, refs, manyRefs, data}) {
+ el.dataset.id = data.id;
+ el.dataset.taxonomy = data.taxonomy;
+ if (refs.icon) refs.icon.className = `icon icon-${data.icon}`;
+ if (refs.span) refs.span.textContent = window.decodeHTMLEntities(data.name);
+ }
+ });
+ T.define('emptyState');
+
+ this.contentTypes.forEach(content => {
+ T.define(`feedItem${window.uppercaseFirst(content)}`, {
+ refs: {
+ link: 'a',
+ },
+ manyRefs: {
+ fields: '[data-field]',
+ },
+ setup({el, refs, manyRefs, data}) {
+ const isTimeline = Object.hasOwn(el.dataset, 'timeline');
+ if (manyRefs.fields) {
+ for (let field of manyRefs.fields) {
+ if (isTimeline && ['timeline','number'].includes(field.dataset.field)) continue;
+
+ const value = Object.hasOwn(data.fields, field.dataset.field)? data.fields[field.dataset.field] : false;
+ if (!value) {
+ field.remove();
+ continue;
+ }
+ if (f.isImageField(data, value)) {
+ f.formatImageField(field, value, data);
+ } else if (f.isTaxonomyField(data, field.dataset.field)) {
+ f.formatTaxonomyField(field, data, field.dataset.field, value);
+ } else if (f.isTimeField(field)) {
+ f.formatTimeField(field, value);
+ } else {
+ f.formatField(field, value);
+ }
+ }
+ if (refs.link && data.url !== '') {
+ refs.link.href = data.url;
+ refs.link.title = `View ${data.fields['post_title']??'Item'}`;
+ }
+ if (isTimeline ) f.addTimelineElements(data, el);
+ }
+ }
+ })
+ });
+ }
+
+ // addPlaceholders() {
+ // let total = this.contentTypes.length;
+ // const fragment = document.createDocumentFragment();
+ // for (let i = 0; i < 12; i++) {
+ // let template = window.getTemplate('placeholderTemplate');
+ //
+ // let rand = Math.floor(Math.random() * total);
+ // let icon;
+ // if (this.ui.content && this.ui.content.length > 0) {
+ // icon = this.ui.content.filter((content) => { return content.value === this.contentTypes[rand]}).querySelector('.icon').cloneNode(true);
+ // } else {
+ // icon = window.getIcon(this.container.dataset.icon);
+ // }
+ // template.append(icon);
+ // fragment.append(template);
+ // }
+ // this.ui.grid.append(fragment);
+ // }
}
-document.addEventListener('DOMContentLoaded', function() {
- window.feedBlock = new FeedBlock();
+document.addEventListener('DOMContentLoaded', async function() {
+ window.auth.subscribe(event => {
+ if (event === 'auth-loaded') {
+ window.feedBlock = new FeedBlock();
+ }
+ });
});
--
Gitblit v1.10.0