| | |
|---|
| | | (()=>{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}))})(); |
|---|
| | | (()=>{class e{constructor(){this.container=document.querySelector("section.feed-block"),this.container&&(this.a11y=window.jvbA11y,this.error=window.jvbError,this.cache=new window.jvbCache("feed"),this.templates=window.jvbTemplates,this.config={source:"",context:"",highlight:null,gallery:!1,view:this.cache.get("feedView")||"grid",...this.container.dataset},this.init())}init(){this.initElements(),this.defineTemplates(),this.initListeners(),this.initFilters(),"requestIdleCallback"in window?requestIdleCallback(()=>{this.initStore(),this.initTaxonomies(),this.processCachedFilters(),this.processURLFilters(),this.updateFilterUI(),this.initGallery()},{timeout:2e3}):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:".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"]'},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),this.ui.content=this.ui.filters.container.querySelectorAll('[name="content"]'),0===this.ui.content.length&&(this.ui.content=!1),this.ui.taxonomies=this.ui.filters.container.querySelectorAll("[data-taxonomy]"),0===this.ui.taxonomies.length&&(this.ui.taxonomies=!1),this.ui.orderbyWrap=this.ui.filters.container.querySelector("[data-for-order]"),0===this.ui.orderbyWrap.length&&(this.ui.orderbyWrap=!1),this.ui.order=this.ui.filters.container.querySelectorAll('[data-filter="order"]'),0===this.ui.order.length&&(this.ui.order=!1),this.ui.orderby=this.ui.filters.container.querySelectorAll('[data-filter="orderby"]'),0===this.ui.orderby.length&&(this.ui.orderby=!1),this.orderbyFilters=this.ui.orderby?Array.from(this.ui.orderby).map(e=>e.value):[],this.contentTypes=this.ui.content?Array.from(this.ui.content).map(e=>e.value):[this.container.dataset.content],this.taxonomies=this.ui.taxonomies?.length>0?Array.from(this.ui.taxonomies).map(e=>e.dataset.taxonomy):[]}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 e={content:this.contentTypes[0],orderby:"date",order:"desc",page:1};this.config.context&&(e.context=this.config.context),this.config.source&&(e.source=this.config.source),this.filters=e,this.defaults={...e}}updateFilterUI(){if(this.ui.filters.container&&([this.ui.content,this.ui.orderby,this.ui.order].forEach(e=>{if(e)for(let t of e){let[e,i]=[t.dataset.filter,t.value];if(!Object.hasOwn(this.store.filters,e))break;let s=this.store.filters[e]===i;if(s){t.checked=s;break}}}),Object.hasOwn(this.store.filters,"taxonomy")))for(let[e,t]of Object.entries(this.store.filters.taxonomy))t.forEach(e=>{e=parseInt(e),this.selector.store.get(e)&&this.createTermElement(e)})}handlePopState(e){e.state?.filters&&this.processURLFilters()&&(this.store.setFilters(this.filters),this.a11y.announce("Feed filters updated from browser history"))}handleClick(e){window.targetCheck(e,this.selectors.buttons.loadMore)?this.nextPage():window.targetCheck(e,this.selectors.buttons.clearFilters)&&this.clearFilters();let t=window.targetCheck(e,this.selectors.buttons.remove);t&&this.removeSelectedTerm(t),window.targetCheck(e,this.selectors.buttons.refresh)&&(this.store.clearCache(),this.store.fetch());let i=window.targetCheck(e,'[data-filter="orderby"]');i&&"random"===i.value&&i.checked&&this.renderItems()}nextPage(){const e=(this.store.filters.page||1)+1,t=this.store.lastResponse?.pages||e;this.store.setFilters({page:Math.min(e,t)})}handleChange(e){const t=e.target;if(Object.hasOwn(t.dataset,"filter")){if(this.allowedFilters.includes(t.dataset.filter)){let e={};e[t.dataset.filter]=t.value,this.resetFilters(e)}switch(t.dataset.filter){case"content":this.updateContentFor(t.value);break;case"orderby":this.updateOrderOptions(t.value)}}}clearFilters(){this.taxFilters={},window.removeChildren(this.ui.selected),this.taxonomies.forEach(e=>{let t=this.getFieldId(e);this.selector.selectedTerms.get(t)?.clear()}),this.store.setFilters({...this.defaults,taxonomy:null}),this.updateURL(),this.saveToCacheFilters()}resetFilters(e){e={...this.store.filters,page:1,...e},this.store.setFilters(e),this.updateURL(),this.saveToCacheFilters()}getFieldId(e){var t;return this.selector.getFieldId(null!==(t=Array.from(this.ui.taxonomies).filter(t=>t.dataset.taxonomy===e)[0])&&void 0!==t?t:null)}removeSelectedTerm(e){const t=parseInt(e.dataset.id),i=e.dataset.taxonomy;Object.hasOwn(this.taxFilters,i)&&(this.taxFilters[i]=this.taxFilters[i].filter(e=>e!==t),0===this.taxFilters[i].length&&delete this.taxFilters[i]),e.remove();const s=this.getFieldId(i);s&&(this.selector.activeField=s,this.selector.removeSelected(t,s)),this.resetFilters({taxonomy:Object.keys(this.taxFilters).length>0?this.taxFilters:null})}updateContentFor(e){[this.ui.taxonomies,this.ui.orderby].forEach(t=>{t&&t.forEach(t=>{var i;const s=null!==(i=t.dataset.for?.split(","))&&void 0!==i?i:[];t.hidden=s.length>0&&!s.includes(e),t.hidden&&t.checked&&(t.checked=!1)})})}updateOrderOptions(e){if(this.ui.orderbyWrap){var t;let i=null!==(t=this.ui.orderbyWrap.dataset.forOrder.split(","))&&void 0!==t?t:[];this.ui.orderbyWrap.hidden=!i.includes(e)}}updateFilterControls(){const e=0===Object.keys(this.taxFilters).length;this.ui.buttons.clearFilters&&(this.ui.buttons.clearFilters.hidden=e),this.ui.filters.actions&&(this.ui.filters.actions.hidden=e)}async initTaxonomies(){this.taxFilters={},this.selector=window.jvbSelector,this.selector.subscribe((e,t)=>{"selected-terms"===e&&this.handleTaxonomyChange(t)})}handleTaxonomyChange(e){const{terms:t,taxonomy:i}=e;0!==t.size&&(this.taxFilters[i]=Array.from(t),this.resetFilters({taxonomy:this.taxFilters}),t.forEach(e=>{this.createTermElement(e)}),this.updateFilterControls())}getTaxonomyIcon(e){let t=Array.from(this.ui.taxonomies).find(t=>t.dataset.taxonomy===e);return t?.dataset.icon.trim()||"tag"}createTermElement(e){const t=this.selector.store.get(e);t&&(this.ui.selected.querySelector(`[data-id="${e}"]`)||(t.icon=this.getTaxonomyIcon(t.taxonomy),this.ui.selected.append(this.templates.create("feedTerm",t))))}processCachedFilters(){Object.keys(this.filters).forEach(e=>{let t=this.cache.get(`${this.config.source}_${this.config.context}_${e}`);t&&t!==this.filters[e]&&(this.filters[e]=t)})}processURLFilters(){if(!this.isFirstPage())return!1;const e=new URLSearchParams(window.location.search);if(!e.toString())return!1;let t=!1;this.allowedFilters.forEach(i=>{let s=e.get(`f_${i}`);s&&(t=!0,this.filters[i]=s)});let i=!1;return e.forEach((e,s)=>{if(s.startsWith("f_tax_")){i=!0,t=!0;const r=s.replace("f_tax_","");this.taxFilters[r]=e.split(",").map(Number)}}),t&&(i&&(this.filters.taxonomy=this.taxFilters),this.resetFilters(this.filters)),!0}updateURL(){const e=new URLSearchParams;this.allowedFilters.forEach(t=>{Object.hasOwn(this.store.filters,t)&&this.store.filters[t]!==this.defaults[t]&&e.set(`f_${t}`,this.store.filters[t])});for(let[t,i]of Object.entries(this.taxFilters))i.length>0&&e.set(`f_tax_${t}`,i.join(","));const t=`${window.location.pathname}${e.toString()?"?"+e.toString():""}`;t!==window.location.pathname+window.location.search&&window.history.pushState({filters:this.store.filters},"",t)}saveToCacheFilters(){Object.keys(this.store.filters).forEach(e=>{const t=`${this.config.source}_${this.config.context}_${e}`;this.store.filters[e]!==this.defaults[e]?this.cache.set(t,this.store.filters[e]):this.cache.remove(t)});const e=`${this.config.source}_${this.config.context}_taxonomy`;Object.keys(this.taxFilters).length>0?this.cache.set(e,this.taxFilters):this.cache.remove(e)}initGallery(){this.gallery=!!this.config.gallery&&window.jvbGallery,this.gallery&&this.gallery.subscribe((e,t)=>{"load-more"===e&&this.store.lastResponse?.has_more&&this.nextPage()})}initStore(){let e=this.orderbyFilters.filter(e=>!["date","modified","title","random"].includes(e)),t=[];e.forEach(e=>{t.push({name:e,keyPath:e})});const i=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"},...t],filters:this.filters,TTL:216e5,showLoading:!0,required:"content"});this.store=i.feed,this.store.subscribe((e,t)=>{var i;"data-loaded"===e&&(this.renderItems(t.items),this.ui.buttons.loadMore.hidden=!0,this.store.lastResponse&&this.store.lastResponse?.has_more&&(this.ui.buttons.loadMore.hidden=null===(i=!this.store.lastResponse?.has_more)||void 0===i||i))})}isFirstPage(){return 1===this.store.filters.page}renderItems(e=null){e=null!=e?e:this.store.getFiltered(),this.isFirstPage()&&window.removeChildren(this.ui.grid),0===e.length?(this.showEmptyState(),this.a11y.announceItems(0,this.isFirstPage())):window.chunkIt(e,e=>this.createItemElement(e),t=>{var i;this.removePlaceholders(),this.ui.grid.append(t),this.config.gallery&&this.gallery.buildGalleryItems(".item img"),this.a11y.makeNavigable(this.ui.grid.querySelectorAll(".item:not([data-keyboard-nav])")),this.a11y.announceItems(e.length,!this.isFirstPage(),null!==(i=this.store.lastResponse?.has_more)&&void 0!==i&&i)},5).then(()=>{}),this.updateFilterControls()}showEmptyState(){window.removeChildren(this.ui.grid),this.ui.grid.append(this.templates.create("emptyState"))}createItemElement(e){if("object"==typeof e||(e=this.store.get(e)))return this.templates.create(`feedItem${window.uppercaseFirst(e.content)}`,e)}splitIDs(e){return String(e).split(",").map(e=>parseInt(e.trim())).filter(e=>e)}isImageField(e,t){return!(!Object.hasOwn(e,"images")||0===Object.keys(e.images).length)&&this.splitIDs(t).some(t=>Object.keys(e.images).map(e=>parseInt(e)).includes(parseInt(t)))}formatImageFields(e,t,i){let s=this.splitIDs(t);if(0!==s.length)if(s.length>1){let t=e.querySelector("img");if(!t)return;s.forEach(s=>{let r=t.cloneNode(!0);this.formatImageField(r,s,i),e.append(r)}),t.remove()}else{if("IMG"!==e.tagName&&!(e=e.querySelector("img")))return;this.formatImageField(e,s[0],i)}}formatImageField(e,t,i){var s;let r=null!==(s=i.images[t])&&void 0!==s&&s;r&&([e.src,e.srcset,e.alt]=[r.tiny,`${r.tiny} 50w, ${r.small} 300w, ${r.medium} 1024w`,r["image-alt-text"]])}isTaxonomyField(e,t){return!(!Object.hasOwn(e,"taxonomies")||0===Object.keys(e.taxonomies).length)&&Object.keys(e.taxonomies).includes(t)}formatTaxonomyField(e,t,i,s){if("UL"!==e.tagName||!e.querySelector("li"))return;let r=this.splitIDs(s);0===r.length&&e.remove();let o=e.querySelector("li");for(let s of r){var a;let r=null!==(a=t.taxonomies[i][s])&&void 0!==a&&a;if(!r)continue;let n=o.cloneNode(!0),l=n.querySelector("a");if(!l)continue;let h=window.decodeHTMLEntities(r.title);[l.href,l.title,l.textContent]=[r.url,`See more ${h}`,h],e.append(n)}o.remove()}isTimeField(e){return"TIME"===e.tagName||null!==e.querySelector("time")}formatTimeField(e,t){("TIME"===e.tagName||(e=e.querySelector("time")))&&(e.setAttribute("datetime",t),e.textContent=window.formatTimeAgo(t,"F Y"))}formatField(e,t){e.textContent=window.decodeHTMLEntities(t)}addTimelineElements(e,t){let[i,s,r,o]=[t.querySelector("span.after-text"),t.querySelector('[data-field="number"] b'),t.querySelector('[data-field="started"] time'),t.querySelector('[data-field="updated"] time')];i&&(i.textContent=`After ${e.number-1} Tx`),s&&(s.textContent=e.number-1),r&&this.formatTimeField(r,e.fields.timeline[0].post_date),o&&this.formatTimeField(o,e.fields.timeline[e.fields.timeline.length-1].post_date)}removePlaceholders(){const e=this.ui.grid.querySelectorAll(".placeholder");e.length>0&&e.forEach(e=>e.remove())}defineTemplates(){const e=this.templates,t=this;e.define("feedTerm",{refs:{icon:".icon",span:"span"},setup({el:e,refs:t,manyRefs:i,data:s}){e.dataset.id=s.id,e.dataset.taxonomy=s.taxonomy,t.icon&&(t.icon.className=`icon icon=${s.icon}`),t.span&&(t.span.textContent=window.decodeHTMLEntities(s.name))}}),e.define("emptyState"),this.contentTypes.forEach(i=>{e.define(`feedItem${window.uppercaseFirst(i)}`,{refs:{link:"a"},manyRefs:{fields:"[data-field]"},setup({el:e,refs:i,manyRefs:s,data:r}){const o=Object.hasOwn(e.dataset,"timeline");if(s.fields){for(let e of s.fields){if(o&&["timeline","number"].includes(e.dataset.field))continue;const i=!!Object.hasOwn(r.fields,e.dataset.field)&&r.fields[e.dataset.field];i?t.isImageField(r,i)?t.formatImageField(e,i,r):t.isTaxonomyField(r,e.dataset.field)?t.formatTaxonomyField(e,r,e.dataset.field,i):t.isTimeField(e)?t.formatTimeField(e,i):t.formatField(e,i):e.remove()}var a;i.link&&""!==r.url&&(i.link.href=r.url,i.link.title=`View ${null!==(a=r.fields.post_title)&&void 0!==a?a:"Item"}`),o&&t.addTimelineElements(r,e)}}})})}}document.addEventListener("DOMContentLoaded",async function(){window.auth.subscribe(t=>{"auth-loaded"===t&&(window.feedBlock=new e)})})})(); |
|---|
