nfp_sites/nfp_moe/app/widgets/newsentry.js
2022-08-02 08:00:57 +00:00

99 lines
3 KiB
JavaScript

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