Merge branch 'main' of https://github.com/jakevdwerf/jvb

Jake Vanderwerf

2026-01-02 b5abd615697146beeca6dba4acd057d049554a30

 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,6 +430,11 @@
            `View ${item.fields['post_title']??'Item'}`
         ];
      }

      if (isTimeline) {
         this.addTimelineElements(item, template);
      }

      return template;
   }
   splitIDs(value) {
@@ -443,63 +445,58 @@
         return false;
      }
      let values = this.splitIDs(value);
      values.forEach(v => {
         if (Object.hasOwn(item.images, v)) {
            return true;
         }
      });
      return false;

      return values.some(v =>
         Object.keys(item.images).map(k => parseInt(k)).includes(parseInt(v))
      );
   }
   formatImageFields(element, value, item) {
      console.log('Formatting image Field: ', element);
      console.log('value: ', value);
      console.log('item: ', 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);
         });
         image.remove();
      } else {
         console.log(element.tagName);
         if (element.tagName !== 'IMG') {
            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;
@@ -530,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,
@@ -568,6 +545,7 @@
         template.querySelector('[data-field="started"] time'),
         template.querySelector('[data-field="updated"] time')
      ];

      if (afterEl) {
         afterEl.textContent = `After ${item.fields.number} Tx`;
      }
@@ -580,8 +558,6 @@
      if (last) {
         this.formatTimeField(last, item.fields.timeline[item.fields.timeline.length - 1]['post_date']);
      }

      return template;
   }

   removePlaceholders() {