nfp_sites/app/widgets/newsentry.js

const Fileinfo = require('./fileinfo')

const Newsentry = {
  oninit: function(vnode) {
    this.lastId = null
    this.onbeforeupdate(vnode)
  },

  strip: function(html) {
    var doc = new DOMParser().parseFromString(html, 'text/html')
    var out = doc.body.textContent || ''
    var splitted = out.split('.')
    if (splitted.length > 2) {
    return splitted.slice(0, 2).join('.') + '...'
    }
    return out
  },

  onbeforeupdate: function(vnode) {
    let article = vnode.attrs.article

    if (this.lastId !== article.id) {
      this.lastId = article.id
      this.description = null

      for (let i = 0; i < article.content.blocks.length; i++) {
        if (article.content.blocks[i].type === 'paragraph') {
          this.description = article.content.blocks[i].data.text
          break
        } else if (article.content.blocks[i].type === 'htmlraw') {
          this.description = this.strip(article.content.blocks[i].data.html)
          break
        }
      }

      if (article.media_alt_prefix) {
        this.pictureFallback = article.media_alt_prefix + '_small.jpg'
        this.pictureJpeg = article.media_alt_prefix + '_small.jpg' + ' 720w, '
                        + article.media_alt_prefix + '_medium.jpg' + ' 1300w, '
                        + article.media_alt_prefix + '_large.jpg 1920w'
        this.pictureAvif = article.media_alt_prefix + '_small.avif' + ' 720w, '
                        + article.media_alt_prefix + '_medium.avif' + ' 1300w, '
                        + article.media_alt_prefix + '_large.avif 1920w'

        this.pictureCover = '(max-width: 440px) calc(100vw - 40px), '
                        + '124px'
      } else {
        this.pictureFallback = null
        this.pictureJpeg = null
        this.pictureAvif = null
        this.pictureCover = null
      }
    }
  },

  view: function(vnode) {
    let article = vnode.attrs.article

    return m('newsentry', [
      this.pictureFallback
        ? m(m.route.Link, {
              class: 'cover',
              href: '/article/' + article.path,
            },
            m('picture', [
              m('source', {
                srcset: this.pictureAvif,
                sizes: this.pictureCover,
                type: 'image/avif',
              }),
              m('img', {
                srcset: this.pictureJpeg,
                sizes: this.pictureCover,
                alt: 'Image for news item ' + article.name,
                src: this.pictureFallback,
              }),
            ])
          )
        : m('a.cover.nobg'),
      m('div.entrycontent', [
        m('div.title', [
          m(m.route.Link,
            { href: '/article/' + article.path },
            m('h3', [article.name])
          ),
        ]),
        (article.files && article.files.length
          ? article.files.map(function(file) {
              return m(Fileinfo, { file: file, slim: true })
            })
          : this.description
            ? m('span.entrydescription', this.description)
            : null),
      ]),
    ])
  },
}

module.exports = Newsentry