89 lines
2.9 KiB
JavaScript
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
|