From de699440ff94e9c0d8e8b5201ee93179c085bf60 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Thu, 01 Jan 2026 20:51:26 +0000
Subject: [PATCH] =Timeline fields in feedroutes.php
---
src/feed/view.js | 166 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 112 insertions(+), 54 deletions(-)
diff --git a/src/feed/view.js b/src/feed/view.js
index 6c64b6e..4a1e1a5 100644
--- a/src/feed/view.js
+++ b/src/feed/view.js
@@ -63,15 +63,17 @@
};
this.ui = window.uiFromSelectors(this.elements);
- this.ui.content = this.ui.filterContainer.querySelectorAll('[name="content"]');
+
+ this.ui.content = this.ui.filterContainer.querySelectorAll('[name="content"]')??false;
this.ui.taxonomies = this.ui.filterContainer.querySelectorAll('[data-taxonomy]');
- if (this.ui.content.length > 0) {
+ if (this.ui.content && 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,
@@ -79,6 +81,8 @@
} else {
this.taxonomies = [];
}
+
+
}
async initTaxonomies() {
@@ -176,13 +180,15 @@
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;
- }
- });
+ if (this.ui.filterContainer) {
+ // 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);
@@ -282,7 +288,7 @@
this.taxonomyFilters[taxonomy] = value.split(',').map(Number);
}
});
- if (hasTaxonomy) {
+ if (this.ui.filterContainer && hasTaxonomy) {
for (let [tax, ids] in Object.entries(this.taxonomyFilters)) {
let button = this.ui.filterContainer.querySelector(`[data-taxonomy="${tax}"]`);
if (button) {
@@ -359,9 +365,6 @@
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());
}
@@ -377,8 +380,12 @@
this.a11y.announceItems(0, this.store.filters['page'] >1, false);
}
- this.ui.filters.match.hidden = window.isEmptyObject(this.taxonomyFilters);
- this.ui.clearFilter.hidden = window.isEmptyObject(this.taxonomyFilters);
+ if (this.ui.filters.match) {
+ this.ui.filters.match.hidden = Object.keys(this.taxonomyFilters).length === 0;
+ }
+ if (this.ui.clearFilter) {
+ this.ui.clearFilter.hidden = Object.keys(this.taxonomyFilters).length === 0;
+ }
}
/**
@@ -386,14 +393,53 @@
* @param {object} item
*/
createItemElement(item) {
- let template = window.getTemplate('feed-item');
+ let template = window.getTemplate(`feedItem${window.uppercaseFirst(item.content)}`);
if (Object.hasOwn(template.dataset, 'timeline')) {
return this.createTimelineElement(item, template);
}
+ //fields
+ for (let [fieldName, value] of Object.entries(item.fields)) {
+ let el = template.querySelector(`[data-field="${fieldName}"]`);
+ if (!el) {
+ continue;
+ }
+ if (Object.keys(item.images).map((img)=> parseInt(img)).includes(value)) {
+ [
+ el.src,
+ el.srcset,
+ el.alt
+ ] = [
+ item.images[value].tiny,
+ `${item.images[value].tiny} 50w, ${item.images[value].small} 300w, ${item.images[value].medium} 1024w`,
+ item.images[value]['image-alt-text']
+ ];
+ } else if (el.tagName === 'TIME') {
+ el.setAttribute('datetime', value);
+ el.textContent = window.formatTimeAgo(value);
+ } else {
+ el.textContent = value;
+ }
+ if (value === '') {
+ el.remove();
+ }
+ }
+ let link = template.querySelector('a');
+ if (link && item.url !== '') {
+ [
+ link.href,
+ link.title
+ ] = [
+ item.url,
+ `View ${item.fields['post_title']??'Item'}`
+ ];
+ }
return template;
}
+
createTimelineElement(item, template) {
+ console.log(item);
+ console.log(template);
let [
main,
link,
@@ -467,7 +513,7 @@
let rand = Math.floor(Math.random() * total);
let icon;
- if (this.ui.content.length > 0) {
+ 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);
@@ -562,13 +608,21 @@
}
if ('ResizeObserver' in window) {
- this.resizeObserver = new ResizeObserver(window.debounce(() => {
- this.updateImageSizes();
- }, 250));
+ this.resizeObserver = new ResizeObserver(() => {
+ window.debouncer.schedule(
+ 'feed-update-images',
+ () => this.updateImageSizes(),
+ 250
+ );
+ });
} else {
- window.addEventListener('resize', window.debounce(()=> {
- this.updateImageSizes();
- }, 250));
+ window.addEventListener('resize', () => {
+ window.debouncer.schedule(
+ 'feed-update-images',
+ () => this.updateImageSizes(),
+ 250
+ );
+ });
}
window.addEventListener('popstate', this.popStateHandler);
@@ -576,35 +630,6 @@
document.addEventListener('change', this.changeHandler);
}
- loadImage(img) {
- const src = this.getAppropriateImageSize(img);
- if (src && src !== img.src) {
- img.src = src;
- img.dataset.loaded = 'true';
- }
- }
-
- getAppropriateImageSize(img) {
- const width = window.innerWidth;
-
- 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);
- }
- });
- }
-
handlePopState(e) {
if (e.state?.filters) {
if (this.processURLFilters()) {
@@ -673,6 +698,39 @@
}
}
-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();
+ }
+ });
+
+ let item = {
+ content: "art",
+ date: "2025-12-24 03:37:26",
+ fields: {
+ gallery: "",
+ post_content: "",
+ post_thumbnail: 200,
+ post_title: "Great Gray Owl",
+ price: "",
+ },
+ icon: "arrows-clockwise",
+ id: 195,
+ images: {
+ 200: {
+ 'image-alt-text': "",
+ 'image-caption': "",
+ 'image-title': "Great Gray Owl",
+ large: "http://jakevan.test/wp-content/uploads/2025/12/Great-Gray-Owl.jpg",
+ medium: "http://jakevan.test/wp-content/uploads/2025/12/Great-Gray-Owl-1024x1024.jpg",
+ small: "http://jakevan.test/wp-content/uploads/2025/12/Great-Gray-Owl-300x300.jpg",
+ tiny: "http://jakevan.test/wp-content/uploads/2025/12/Great-Gray-Owl-50x50.jpg"
+ }
+ },
+ url: "http://jakevan.test/art/great-gray-owl/",
+ user_id: 3
+ };
});
+
+
--
Gitblit v1.10.0