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

Jake Vanderwerf

2026-01-01 3acb42faee66868a76e653a34ef35de13ddf734f

 src/feed/view.js

@@ -435,63 +435,155 @@
      }
      return template;
   }
   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) {
         console.log('Item has no images, or the images object is empty');
         return false;
      }
      let values = this.splitIDs(value);
      values.forEach(v => {
         console.log('Checking id: ', v);
         if (Object.keys(item.images).includes(parseInt(v))) {
            console.log('Item.images does not have id');
            return true;
         }
      });
      return false;
   }
   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 image = element.querySelector('img');
         if (!image) return;
         value.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);
      }
   }
      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']
         ]
      }
   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;
   }
   formatTaxonomyField(element, item, field, value) {
      if (element.tagName !== 'UL' || !element.querySelector('li')) return;

      let values = this.splitIDs(value);
      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;

         [
            link.href,
            link.title,
            link.textContent
         ] = [
            term.url,
            `See more ${term.title}`,
            term.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);
   }
   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);
            }
         }
      }
      let [
         main,
         link,
         beforeImg,
         afterImg,
         afterText,
         afterEl,
         number,
         started,
         lastTreated,
         total,
         termList,
         timeline
         last
      ] = [
         template,
         template.querySelector('a'),
         template.querySelector('img.before'),
         template.querySelector('img.after'),
         template.querySelector('summary span:last-of-type'),
         template.querySelector('p.started time'),
         template.querySelector('p.updated time'),
         template.querySelector('p.total b'),
         template.querySelector('.term-list'),
         Object.values(item.fields.order)
         template.querySelector('span.after-text'),
         template.querySelector('[data-field="number"] b'),
         template.querySelector('[data-field="started"] time'),
         template.querySelector('[data-field="updated"] time')
      ];
      let numberTreatments = timeline.length - 1;
      let beforeImgData = item.images[timeline[0]['post_thumbnail']];
      let afterImgData = item.images[timeline[numberTreatments]['post_thumbnail']];
      if (afterEl) {
         afterEl.textContent = `After ${item.fields.number} Tx`;
      }
      if (number) {
         number.textContent = item.fields.number;
      }
      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']);
      }

      [
         main.dataset.id,
         link.href,
         beforeImg.src,
         beforeImg.dataset.small,
         beforeImg.dataset.medium,
         afterImg.src,
         afterImg.dataset.small,
         afterImg.dataset.medium,
         afterText.textContent,
         started.textContent,
         lastTreated.textContent,
         total.textContent
      ] = [
         item.id,
         item.url,
         beforeImgData['tiny'],
         beforeImgData.small,
         beforeImgData.medium,
         afterImgData['tiny'],
         afterImgData.small,
         afterImgData.medium,
         `${afterText.textContent} ${numberTreatments} Tx`,
         timeline[0].date??item.date,
         timeline[numberTreatments].date??'',
         `${numberTreatments} Treatments`
      ];
      return template;
   }