From b5abd615697146beeca6dba4acd057d049554a30 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Fri, 02 Jan 2026 00:16:00 +0000
Subject: [PATCH] Merge branch 'main' of https://github.com/jakevdwerf/jvb
---
src/feed/view.js | 130 ++++++++++++++++++-------------------------
1 files changed, 55 insertions(+), 75 deletions(-)
diff --git a/src/feed/view.js b/src/feed/view.js
index fae4874..7110cad 100644
--- a/src/feed/view.js
+++ b/src/feed/view.js
@@ -394,35 +394,32 @@
*/
createItemElement(item) {
let template = window.getTemplate(`feedItem${window.uppercaseFirst(item.content)}`);
- if (Object.hasOwn(template.dataset, 'timeline')) {
- return this.createTimelineElement(item, template);
- }
- //fields
+
+ const isTimeline = Object.hasOwn(template.dataset, 'timeline');
+
+ // Format fields using helpers
for (let [fieldName, value] of Object.entries(item.fields)) {
+ if (isTimeline && ['timeline', 'number'].includes(fieldName)) continue;
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 (!el) continue;
+
if (value === '') {
el.remove();
+ continue;
+ }
+
+ if (this.isImageField(item, value)) {
+ this.formatImageFields(el, value, item);
+ } else if (this.isTaxonomyField(item, fieldName)) {
+ this.formatTaxonomyField(el, item, fieldName, value);
+ } else if (this.isTimeField(el)) {
+ this.formatTimeField(el, value);
+ } else {
+ this.formatField(el, value);
}
}
+
+ // Handle link
let link = template.querySelector('a');
if (link && item.url !== '') {
[
@@ -433,30 +430,34 @@
`View ${item.fields['post_title']??'Item'}`
];
}
+
+ if (isTimeline) {
+ this.addTimelineElements(item, template);
+ }
+
return template;
}
splitIDs(value) {
- return value.split(',').map((value) => parseInt(trim(value))).filter(value=>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);
- values.forEach(v => {
- if (Object.keys(item.images).includes(v)) {
- return true;
- }
- });
- return false;
+
+ return values.some(v =>
+ Object.keys(item.images).map(k => parseInt(k)).includes(parseInt(v))
+ );
}
formatImageFields(element, value, item) {
- if (value.length === 0) return;
- //If it's a gallery, we're cloning the original image, then removing it
- if (value.length > 1) {
+ 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;
- value.forEach(imgID => {
+ values.forEach(imgID => {
let img = image.cloneNode(true);
this.formatImageField(img, imgID, item);
element.append(img);
@@ -467,35 +468,35 @@
element = element.querySelector('img');
if (!element) return;
}
- this.formatImageField(element, value[0], item);
+ this.formatImageField(element, values[0], item);
}
}
formatImageField(element, value, item) {
- [
- element.src,
- element.srset,
- element.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']
- ]
+ 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;
}
- Object.keys(item.taxonomies).forEach(taxonomy => {
- if (taxonomy === field) {
- return true;
- }
- });
- 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;
@@ -526,33 +527,13 @@
if (!element) return;
}
element.setAttribute('datetime', value);
- element.textContent = window.formatTimeAgo(value);
+ element.textContent = window.formatTimeAgo(value, 'F Y');
}
formatField(element, value) {
element.textContent = value;
}
- createTimelineElement(item, template) {
- console.log(item);
- console.log(template);
- for (let [field, value] of Object.entries(item.fields)) {
- if (!['timeline', 'number'].includes(field)) {
- let el = template.querySelector(`[data-field="${field}"]`);
- if (!el) {
- console.log(`Element Not found for ${field}`);
- }
- if (!el || value === '') continue;
- if (this.isImageField(item, value)) {
- this.formatImageFields(el, value, item);
- } else if (this.isTaxonomyField(item, field)) {
- this.formatTaxonomyField(el, item, field, value);
- } else if (this.isTimeField(el)) {
- this.formatTimeField(el, value);
- } else {
- this.formatField(el, value);
- }
- }
- }
+ addTimelineElements(item, template) {
let [
afterEl,
number,
@@ -564,6 +545,7 @@
template.querySelector('[data-field="started"] time'),
template.querySelector('[data-field="updated"] time')
];
+
if (afterEl) {
afterEl.textContent = `After ${item.fields.number} Tx`;
}
@@ -576,8 +558,6 @@
if (last) {
this.formatTimeField(last, item.fields.timeline[item.fields.timeline.length - 1]['post_date']);
}
-
- return template;
}
removePlaceholders() {
--
Gitblit v1.10.0