100 lines
3.0 KiB
JavaScript
100 lines
3.0 KiB
JavaScript
const Fileinfo = require('./fileinfo')
|
|
|
|
const Articleslim = {
|
|
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 || '').replace(/([\.!?])/g, '$1 ')
|
|
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
|
|
|
|
if (article.content) {
|
|
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('articleslim', [
|
|
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', [
|
|
m(m.route.Link,
|
|
{ class: 'title', href: '/article/' + article.path },
|
|
article.name
|
|
),
|
|
(article.files && article.files.length
|
|
? article.files.map(function(file) {
|
|
return m(Fileinfo, { file: file, slim: true })
|
|
})
|
|
: this.description
|
|
? m('p.description', this.description)
|
|
: null),
|
|
]),
|
|
])
|
|
},
|
|
}
|
|
|
|
module.exports = Articleslim
|