From d7e7d248cbe41cd7a9ef9c2fb022b6c4831f99a3 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 31 May 2026 15:22:56 +0000
Subject: [PATCH] =jakevan complete
---
build/feed/view.js | 690 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 689 insertions(+), 1 deletions(-)
diff --git a/build/feed/view.js b/build/feed/view.js
index 79d9a63..4cd0ac5 100644
--- a/build/feed/view.js
+++ b/build/feed/view.js
@@ -1 +1,689 @@
-(()=>{class e{constructor(){this.cache=window.jvbCache,this.a11y=window.jvbA11y,this.loading=window.jvbLoading,this.error=window.jvbError,this.container=document.querySelector("section.feed-block"),this.container&&(this.openGallery=!1,this.initElements(),this.addPlaceholders(),this.config={api:feedSettings.apiUrl,nonce:feedSettings.nonce,user:jvbSettings.currentUser||null,source:"",context:"",highlight:null,gallery:!1,showAuthor:!0,showDate:!1,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=!1,this.hasMore=!0,this.retries={count:0,max:3,delay:1e3},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)}),this.initListeners(),1===this.page?this.processURLFilters():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((e=>e.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)),"IntersectionObserver"in window&&(this.imageObserver=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting&&(this.loadImage(e.target),this.imageObserver.unobserve(e.target))}))}),{rootMargin:"100px",threshold:.1})),"ResizeObserver"in window?(this.resizeObserver=new ResizeObserver(window.debounce((()=>{this.updateImageSizes()}),250)),this.resizeObserver.observe(this.container)):window.addEventListener("resize",window.debounce((()=>{this.updateImageSizes()}),250)),this.taxonomies={},this.container.querySelectorAll(".jvb-selector:not([hidden])").forEach((e=>{let t=e.dataset.taxonomy;Object.hasOwn(this.taxonomies,t)||(this.taxonomies[t]=new window.jvbTaxonomySelector(e,{multiple:!0,feed:!0,selected:{},onClose:()=>this.setSelectedTerms(t)}))}))}handlePopState(e){e.state&&e.state.filters&&this.processURLFilters()&&(this.resetPage(),this.fetchFeed(),this.a11y.announce("Feed filters updated from browser history."))}processURLFilters(){const e=new URLSearchParams(window.location.search);if(e.toString()){for(var[t,i]of(["content","order","orderby","favourites","match"].forEach((t=>{let i=e.get("f_"+t);e.delete("f_"+t),i&&this.filterForm.querySelector(`input[name="${t}"][value="${i}"]`)&&(this.filterForm.querySelector(`input[name="${t}"][value="${i}"]`).checked=!0)})),Object.entries(Object.fromEntries(e))))t=t.replace("f_",""),this.contentTypes.includes(t)?this.openGallery=i:(this.taxonomies[t].addTermsFromURL(i),this.setSelectedTerms(t));this.updateFilters()}else this.updateFilters()}handleClick(e){if(e.target.classList.contains("load-more")||e.target.closest(".load-more"))this.fetchFeed(!1),e.target.disabled=!0;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 t=e.target.closest(".selected-item"),i=t.dataset.taxonomy;this.taxonomies[i].removeSelectedTerm(t.dataset.id),this.setSelectedTerms(i),this.updateFilters()}}handleChange(e){e.target.closest(this.filterSelector)&&(this.resetPage(),window.removeChildren(this.grid),this.addPlaceholders(),this.updateFilters())}updateFilters(){this.page=1;const e=new URLSearchParams(window.location.search);let t=Object.fromEntries(new FormData(this.filterForm)),i=[];for(let[r,s]of Object.entries(t)){let a=!1;switch(r){case"content":s!==this.contentTypes[0]?a=!0:e.delete("f_"+r);break;case"orderby":"date"!==s&&(a=!0);break;case"order":"desc"!==s&&(a=!0);break;default:a=!0}a||e.delete("f_"+r),a&&!1!==s&&""!==s&&e.set("f_"+r,s),""!==s&&i.push(s);const o=`${window.location.pathname}?${e.toString()}`;history.pushState(t,"",o)}this.filters=t,this.updateContentFor(t.content),this.updateFilterControls(),this.loading.setContent(i),this.fetchFeed(!0)}updateFilterControls(){this.filterControls.hidden=this.selectedTerms.children.length<2}updateContentFor(e){this.filterForm.querySelectorAll(".jvb-selector").forEach((t=>{let i=t.dataset.for.includes(e);if(t.hidden=!i,!i){let e=t.dataset.taxonomy;this.clearSelectedTerms(e)}})),this.filterForm.querySelectorAll("input[data-for]").forEach((t=>{t.hidden=!t.dataset.for.includes(e)})),this.filterForm.querySelectorAll('input[name="order"]').forEach((e=>{e.hidden="random"===this.filters.order}))}clearSelectedTerms(e){this.filterForm.querySelector(`input[name="${e}"]`).value="",Object.hasOwn(this.taxonomies,e)&&(this.taxonomies[e].selectedItems={})}setSelectedTerms(e){let t=this.filterForm.querySelector(`input[name="${e}"]`);t.value="";let i=this.taxonomies[e].selectedTerms;if(!window.isEmptyObject(i)){let e=Object.keys(i);t.value=e.join(",")}this.updateFilters()}nextPage(){this.hasMore&&this.page++}resetPage(){this.page=1,this.hasMore=!0}resetState(){this.resetPage(!0),this.isLoading=!1,this.retries={count:0,max:3,delay:1e3}}resetFilters(){this.filterForm.reset(),this.filterForm.querySelector('input[name="content"]').checked=!0,this.filterForm.querySelector('input[name="orderby"][value="date"]').checked=!0,this.page=1,this.updateFilters()}buildFilterRequest(){let e={};for(let[t,i]of Object.entries(this.filters))!1!==i&&""!==i&&(e[t]=i);return e.page=parseInt(this.page),this.container.dataset.context&&(e.context=this.container.dataset.context),this.container.dataset.source&&(e.source=this.container.dataset.source),new URLSearchParams(e).toString()}async fetchFeed(e=!1,t=!1){if(this.isLoading)return!1;this.loading.showLoading(this.filters);try{1===this.page&&(window.removeChildren(this.grid),this.addPlaceholders());const e=await this.cache.fetchWithCache(`${this.config.api}feed?${this.buildFilterRequest()}`,{method:"GET"},{context:"feed",forceRefresh:!0});return e&&e.items&&0!==e.items.length?(this.hasMore=e.has_more,this.renderItems(e.items,this.page>1),this.hasMore&&this.nextPage(),!0):(1===this.page&&this.showEmptyState(),this.hasMore=!1,!1)}catch(e){this.handleError(e)}finally{this.loading.hideLoading(),!1!==this.openGallery&&(this.gallery.openWhenReady=this.openGallery,this.openGallery=!1),this.loadMore.disabled=!1,this.loadMore.hidden=!this.hasMore}}removePlaceholders(){this.grid.querySelector(".placeholder")&&window.removeChildren(this.grid)}showEmptyState(){window.removeChildren(this.grid);let e=window.getTemplate("emptyState"),t=Object.hasOwn(this.filters,"favourites")&&!0===this.filters.favourites;t&&([e.querySelector("h3").textContent,e.querySelector("p:first-of-type").textContent,e.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(e),this.a11y.announceEmpty(t)}handleError(e){return this.error.handleApiError(e,{component:"Feed Block",action:"loaditems"},(()=>this.fetchFeed()))}addPlaceholders(){let e=this.contentTypes.length-1;for(let t=0;t<9;t++){let t=window.getTemplate("placeholderTemplate"),i=Math.floor(Math.random()*e+1),r=window.getIcon(this.contentTypes[i]).cloneNode(!0);t.append(r),this.grid.append(t)}}renderItems(e,t=!1){if(t||(window.removeChildren(this.grid),this.addPlaceholders()),0===e.length)return void this.a11y.announceUpdate(0,t);const i=document.createDocumentFragment(),r=s=>{const a=Math.min(s+10,e.length);for(let t=s;t<a;t++){const r=e[t],s=this.createItemElement(r);i.appendChild(s),this.imageObserver.observe(s)}a<e.length?requestAnimationFrame((()=>{r(a)})):(this.removePlaceholders(),this.grid.appendChild(i),this.config.gallery&&this.gallery.updateGalleryItems(this.gallery.getGalleryItems()),this.a11y.makeNavigable(this.grid.querySelectorAll(".item:not([data-keyboard-nav])")),this.a11y.announceItems(e.length,t,this.hasMore))};e.length>0?r(0):this.a11y.announceUpdate(0,t)}createItemElement(e){var t;if(this.rendered[e.icon]||(this.rendered[e.icon]=new Map),this.rendered[e.icon].has(e.id))return this.rendered[e.icon].get(e.id);const i=null!==(t=window.isFavourited(e.icon,e.id))&&void 0!==t&&t,r=window.getTemplate("feed-item");r.id=`${e.icon}-${e.id}`,r.dataset.id=e.id,r.classList.add(e.icon),e.umami_view&&this.buildUmamiData(r,e.umami_view);let s=r.querySelector("button.favourite");[s.dataset.id,s.dataset.type,s.dataset.artist,s.title]=[e.id,e.icon,e.user_id,i?"Remove from Favourites":"Add to Favourites"];let a=e.order,o=r.querySelector(".item"),n=r.querySelector(".item-list"),l=(r.querySelector(".feed-images"),r.querySelector("summary")),d=r.querySelector(".item-info");for(let[t,i]of Object.entries(a)){let t,s=e[i];if("title"===i)t=r.querySelector("h3 a"),""!==e.title?([t.textContent,t.href,t.url]=[e.title,e.url,`Learn more about this ${e.icon}`],""!==e.icon&&t.closest("h3").prepend(window.getIcon(e.icon)),e.umami_click&&this.buildUmamiData(t,e.umami_click)):t.remove();else if(Object.hasOwn(s,"terms")){if(0===s.terms.length)continue;let e=n.cloneNode(!0),t=e.querySelector(".label"),i=e.querySelector("ul"),r=e.querySelector("li");s.label&&(t.textContent=s.label),s.icon&&t.prepend(window.getIcon(s.icon)),s.label||s.icon||t.remove(),s.terms.forEach((e=>{let t=r.cloneNode(!0),s=t.querySelector("a");[s.href,s.title,s.textContent]=[e.url,`Learn more about ${e.title}`,e.title],e.umami_click.length>0&&this.buildUmamiData(s,e.umami_click),i.append(t)})),r.remove(),d.appendChild(e)}else if(Object.hasOwn(s,"value")&&""!==s.value){let e=o.cloneNode(!0),t=e.querySelector(".label"),i=e.querySelector("a"),r=e.querySelector("p");Object.hasOwn(s,"label")&&(t.textContent=s.label),Object.hasOwn(s,"icon")&&t.prepend(window.getIcon(s.icon)),Object.hasOwn(s,"icon")||Object.hasOwn(s,"label")||t.remove(),Object.hasOwn(s,"url")?(r.remove(),[i.textContent,i.href,i.title]=[s.value,s.url,`Learn more about ${s.value}`]):(i.remove(),r.textContent=s.value),d.appendChild(e)}else if("image"===i){let t=l.querySelector(".feed-images"),i=t.querySelector("a"),r=i.cloneNode(!0);this.config.gallery||(r.href=e.url),r.classList.add("feed-image"),this.buildImageData(r.querySelector("img"),e.image),t.append(r),e.content?.length>0&&(t.classList.add("multi"),e.content.forEach((e=>{let r=i.cloneNode(!0);this.config.gallery||(r.href=e.url);let s=r.querySelector("img");s.src=e.image.small,s.alt=e.image.alt,t.append(r)}))),i.remove()}}return o.remove(),n.remove(),this.rendered[e.icon].set(e.id,r),r}buildImageData(e,t){"string"==typeof t.tiny&&([e.src,e.dataset.small,e.dataset.medium,e.dataset.large,e.alt]=[t.tiny,t.small,t.medium,t.large,t.alt])}buildUmamiData(e,t){for(let[i,r]of Object.entries(t))e.dataset[i]=r}loadImage(e){const t=e.querySelector("img");if(!t)return;const i=this.getImageSize();t.src=t.dataset[i]||t.dataset.src,e.setAttribute("data-loaded","true")}updateImageSizes(){const e=this.getImageSize();this.grid.querySelectorAll(".item").forEach((t=>{const i=t.querySelector("img");i&&i.dataset[e]&&i.src!==i.dataset[e]&&(i.src=i.dataset[e])}))}getImageSize(){const e=window.innerWidth;return e>1024||e>500?"medium":"small"}}document.addEventListener("DOMContentLoaded",(()=>{window.feedBlock=new e}))})();
\ No newline at end of file
+/******/ (() => { // webpackBootstrap
+/*!**************************!*\
+ !*** ./src/feed/view.js ***!
+ \**************************/
+class FeedBlock {
+ constructor() {
+ this.container = document.querySelector('section.feed-block');
+ if (!this.container) return;
+ this.a11y = window.jvbA11y;
+ this.error = window.jvbError;
+ this.cache = new window.jvbCache('feed');
+ this.templates = window.jvbTemplates;
+ this.config = {
+ contextId: '',
+ context: '',
+ highlight: null,
+ gallery: false,
+ view: this.cache.get('feedView') || 'grid',
+ ...this.container.dataset
+ };
+ console.log(this.config);
+ this.init();
+ }
+ init() {
+ this.initElements();
+ this.defineTemplates();
+ this.initListeners();
+ this.initFilters();
+ if ('requestIdleCallback' in window) {
+ requestIdleCallback(() => {
+ this.initStore();
+ this.initTaxonomies();
+ this.processCachedFilters();
+ this.processURLFilters();
+ this.updateFilterUI();
+ this.initGallery();
+ }, {
+ timeout: 2000
+ });
+ } else {
+ setTimeout(() => {
+ this.initStore();
+ this.initTaxonomies();
+ this.processCachedFilters();
+ this.processURLFilters();
+ this.updateFilterUI();
+ this.initGallery();
+ }, 100);
+ }
+ }
+ initElements() {
+ this.selectors = {
+ filterTrigger: '[data-filter]',
+ filters: {
+ actions: '.filter-actions .toggle-text',
+ container: '.all-filters',
+ showing: '.all-filters summary .current',
+ content: '[data-filter="content"]',
+ ordering: '.ordering',
+ orderby: '[data-filter="orderby"]',
+ order: '[data-filter="order"]',
+ orderWrap: '.order-direction',
+ match: '[data-filter="match"]',
+ favourites: '[data-filter="favourites"]',
+ taxonomy: '[data-filter^="taxonomy"]'
+ },
+ 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);
+
+ //Add content and taxonomies
+ let getAll = ['content', 'orderby', 'order', 'taxonomy'];
+ getAll.forEach(item => {
+ let items = this.ui.filters.container.querySelectorAll(this.selectors.filters[item]);
+ this.ui[item] = Array.from(items);
+ });
+ this.contentTypes = this.ui.content.length > 0 ? 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 {string} item
+ */
+ getChecked(item) {
+ if (!['content', 'orderby', 'order'].includes(item)) {
+ console.log('Invalid item to check: ', item);
+ }
+ let items = this.ui[item];
+ if (!items) {
+ return;
+ }
+ let checked = items.filter(i => i.checked);
+ if (item === 'content' && checked.length > 0) {
+ this.updateContentFor(checked[0].value);
+ }
+ return checked.length === 0 ? items[0].value : checked[0].value;
+ }
+ initListeners() {
+ this.popStateHandler = this.handlePopState.bind(this);
+ this.clickHandler = this.handleClick.bind(this);
+ this.changeHandler = this.handleChange.bind(this);
+ window.addEventListener('popstate', this.popStateHandler);
+ document.addEventListener('click', this.clickHandler);
+ document.addEventListener('change', this.changeHandler);
+ }
+ initFilters() {
+ this.allowedFilters = ['content', 'order', 'orderby', 'favourites', 'match'];
+ let defaults = {
+ content: this.getChecked('content'),
+ orderby: this.getChecked('orderby'),
+ order: this.getChecked('order'),
+ page: 1
+ };
+ if (this.config.context) defaults.context = this.config.context;
+ if (this.config.contextId) defaults.contextId = this.config.contextId;
+ this.filters = defaults;
+ console.log(this.filters);
+ this.defaults = {
+ ...defaults
+ };
+ }
+ updateFilterUI() {
+ if (this.ui.filters.container) {
+ //Get cached inputs
+ let groups = [this.ui.content, this.ui.orderby, this.ui.order];
+ 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 (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) {
+ if (e.state?.filters) {
+ if (this.processURLFilters()) {
+ this.store.setFilters(this.filters);
+ this.a11y.announce('Feed filters updated from browser history');
+ }
+ }
+ }
+ handleClick(e) {
+ if (window.targetCheck(e, this.selectors.buttons.loadMore)) {
+ this.nextPage();
+ } 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();
+ }
+ }
+ 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) {
+ const target = e.target;
+ if (Object.hasOwn(target.dataset, 'filter')) {
+ 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(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];
+ this.ui.filters.showing.textContent = this.ui.content.filter(c => c.value === content)[0].dataset.label;
+ 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.filters.orderWrap) {
+ let options = this.ui.filters.orderWrap.dataset.forOrder.split(',') ?? [];
+ this.ui.filters.orderWrap.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 = 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.contextId}_${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.contextId}_${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.contextId}_${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.ui.orderby.filter(v => !['date', 'date_modified', 'title', 'random'].includes(v.value));
+ let extraIndexes = [];
+ extraOrderby.forEach(orderby => {
+ extraIndexes.push({
+ name: orderby.value,
+ keyPath: orderby.value
+ });
+ });
+ 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', async function () {
+ window.auth.subscribe(event => {
+ if (event === 'auth-loaded') {
+ window.feedBlock = new FeedBlock();
+ }
+ });
+});
+/******/ })()
+;
+//# sourceMappingURL=view.js.map
\ No newline at end of file
--
Gitblit v1.10.0