nfp_sites/nfp_moe_old/app/widgets/newsitem.js

89 lines
2.9 KiB
JavaScript

const Fileinfo = require('./fileinfo')
const EditorBlock = require('./editorblock')
const Newsitem = {
oninit: function(vnode) {
this.lastId = null
this.onbeforeupdate(vnode)
},
onbeforeupdate: function(vnode) {
let article = vnode.attrs.article
if (this.lastId !== article.id) {
this.lastId = article.id
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: 639px) calc(100vw - 40px), '
+ '(max-width: 1000px) 300px, '
+ '400px'
} else {
this.pictureFallback = null
this.pictureJpeg = null
this.pictureAvif = null
this.pictureCover = 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.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,
}),
])
)
: null,
m('div.entrycontent', [
article.content.blocks.map(block => {
return m(EditorBlock, { block: block })
}),
(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