nfp_sites/app/widgets/newsitem.js

80 lines
2.6 KiB
JavaScript

const Fileinfo = require('./fileinfo')
const Newsitem = {
oninit: function(vnode) {
let article = vnode.attrs.article
if (article.media_prefix) {
this.fallbackImage = article.media_prefix + '_small.jpg'
this.srcsetJpeg = article.media_prefix + '_small.jpg' + ' 720w, '
+ article.media_prefix + '_medium.jpg' + ' 1300w, '
+ article.media_prefix + '_large.jpg'
this.srcsetAvif = article.media_prefix + '_small.avif' + ' 720w, '
+ article.media_prefix + '_medium.avif' + ' 1300w, '
+ article.media_prefix + '_large.avif'
this.coverSizes = '(max-width: 639px) calc(100vw - 40px), '
+ '(max-width: 1000px) 300px, '
+ '400px'
} else {
this.fallbackImage = null
this.srcsetJpeg = null
this.srcsetAvif = null
this.coverSizes = null
}
},
view: function(vnode) {
let article = vnode.attrs.article
return m('newsitem', [
m(m.route.Link,
{ href: '/article/' + article.path, class: 'title' },
m('h3', [article.name])
),
m('div.newsitemcontent', [
this.fallbackImage
? m(m.route.Link, {
class: 'cover',
href: '/article/' + article.path,
},
m('picture', [
this.srcsetAvif ? m('source', {
srcset: this.srcsetAvif,
sizes: this.coverSizes,
type: 'image/avif',
}) : null,
m('img', {
srcset: this.srcsetJpeg,
sizes: this.coverSizes,
alt: 'Image for news item ' + article.name,
src: this.fallbackImage,
}),
])
)
: null,
m('div.entrycontent', {
class: article.media ? '' : 'extrapadding',
}, [
(article.content
? m('.fr-view', m.trust(article.content))
: null),
(article.files && article.files.length
? article.files.map(function(file) {
return m(Fileinfo, { file: file, trim: true })
})
: null),
m('span.entrymeta', [
'Posted ',
(article.page_path ? 'in' : ''),
(article.page_path ? m(m.route.Link, { href: '/page/' + article.page_path }, article.page_name) : null),
'at ' + (article.publish_at.replace('T', ' ').split('.')[0]).substr(0, 16),
' by ' + (article.admin_name || 'Admin'),
]),
]),
]),
])
},
}
module.exports = Newsitem