nfp_sites/app/pages/page.js

178 lines
5.9 KiB
JavaScript
Raw Normal View History

2019-09-13 13:33:10 +00:00
const m = require('mithril')
const ApiPage = require('../api/page.p')
const Article = require('../api/article.p')
2019-10-01 11:35:00 +00:00
const pagination = require('../api/pagination')
2019-09-13 13:33:10 +00:00
const Authentication = require('../authentication')
const Newsentry = require('../widgets/newsentry')
2019-09-14 19:03:38 +00:00
const Pages = require('../widgets/pages')
2019-09-13 13:33:10 +00:00
const Page = {
oninit: function(vnode) {
this.error = ''
2019-09-14 19:03:38 +00:00
this.lastpage = m.route.param('page') || '1'
this.loadingnews = false
if (window.__nfpdata) {
this.path = m.route.param('id')
this.page = window.__nfpdata
this.news = []
this.newslinks = null
window.__nfpdata = null
vnode.state.fetchArticles(vnode)
} else {
this.fetchPage(vnode)
}
2019-09-14 19:03:38 +00:00
},
fetchPage: function(vnode) {
this.path = m.route.param('id')
this.news = []
this.newslinks = null
2019-09-13 13:33:10 +00:00
this.page = {
id: 0,
name: '',
path: '',
description: '',
media: null,
}
this.loading = true
2019-10-02 21:48:50 +00:00
this.loadingnews = true
2019-09-13 13:33:10 +00:00
2019-10-01 11:35:00 +00:00
ApiPage.getPage(this.path)
2019-09-13 13:33:10 +00:00
.then(function(result) {
vnode.state.page = result
document.title = result.name + ' - NFP Moe'
2019-09-13 13:33:10 +00:00
})
.catch(function(err) {
vnode.state.error = err.message
})
.then(function() {
2019-09-14 19:03:38 +00:00
return vnode.state.fetchArticles(vnode)
})
},
onupdate: function(vnode) {
if (this.path !== m.route.param('id')) {
this.fetchPage(vnode)
2019-10-02 21:48:50 +00:00
m.redraw()
2019-09-14 19:03:38 +00:00
} else if (m.route.param('page') && m.route.param('page') !== this.lastpage) {
this.fetchArticles(vnode)
2019-10-02 21:48:50 +00:00
m.redraw()
2019-09-14 19:03:38 +00:00
}
},
fetchArticles: function(vnode) {
this.loadingnews = true
this.newslinks = null
this.lastpage = m.route.param('page') || '1'
2019-10-01 11:35:00 +00:00
return pagination.fetchPage(Article.getAllPageArticlesPagination(this.page.id, {
2019-09-14 19:03:38 +00:00
per_page: 10,
page: this.lastpage,
includes: ['files', 'media'],
}))
.then(function(result) {
vnode.state.news = result.data
vnode.state.newslinks = result.links
})
.catch(function(err) {
vnode.state.error = err.message
})
.then(function() {
vnode.state.loading = vnode.state.loadingnews = false
2019-09-13 13:33:10 +00:00
m.redraw()
})
},
view: function(vnode) {
var deviceWidth = window.innerWidth
var pixelRatio = window.devicePixelRatio || 1
var bannerPath = ''
var imagePath = ''
if (this.page && this.page.banner) {
if (deviceWidth < 400 && pixelRatio <= 1) {
bannerPath = this.page.banner.small_url
} else if ((deviceWidth < 800 && pixelRatio <= 1)
|| (deviceWidth < 600 && pixelRatio > 1)) {
bannerPath = this.page.banner.medium_url
} else {
bannerPath = this.page.banner.large_url
}
}
if (this.page && this.page.media) {
if ((deviceWidth < 1000 && pixelRatio <= 1)
|| (deviceWidth < 800 && pixelRatio > 1)) {
imagePath = this.page.media.medium_url
} else {
imagePath = this.page.media.large_url
}
}
2019-09-13 13:33:10 +00:00
return (
this.loading ?
2019-10-02 21:48:50 +00:00
m('article.page', m('div.loading-spinner'))
2019-09-13 13:33:10 +00:00
: m('article.page', [
bannerPath ? m('.div.page-banner', { style: { 'background-image': 'url("' + bannerPath + '")' } } ) : null,
this.page.parent
? m('div.goback', ['« ', m(m.route.Link, { href: '/page/' + this.page.parent.path }, this.page.parent.name)])
: m('div.goback', ['« ', m(m.route.Link, { href: '/' }, 'Home')]),
2019-09-13 13:33:10 +00:00
m('header', m('h1', this.page.name)),
m('.container', {
class: this.page.children.length ? 'multi' : '',
}, [
this.page.children.length
? m('aside.sidebar', [
m('h4', 'View ' + this.page.name + ':'),
this.page.children.map(function(page) {
2019-09-14 19:03:38 +00:00
return m(m.route.Link, { href: '/page/' + page.path }, page.name)
2019-09-13 13:33:10 +00:00
}),
])
: null,
this.page.description
? m('.fr-view', [
imagePath ? m('a', { href: this.page.media.link}, m('img.page-cover', { src: imagePath, alt: 'Cover image for ' + this.page.name } )) : null,
2019-09-13 13:33:10 +00:00
m.trust(this.page.description),
2019-09-14 19:03:38 +00:00
this.news.length && this.page.description
2019-09-13 13:33:10 +00:00
? m('aside.news', [
2019-09-14 19:03:38 +00:00
m('h4', 'Latest posts under ' + this.page.name + ':'),
this.loadingnews ? m('div.loading-spinner') : this.news.map(function(article) {
2019-09-13 13:33:10 +00:00
return m(Newsentry, article)
}),
2019-09-14 19:03:38 +00:00
m(Pages, {
base: '/page/' + this.page.path,
links: this.newslinks,
}),
2019-09-13 13:33:10 +00:00
])
2019-09-14 19:03:38 +00:00
: null,
2019-09-13 13:33:10 +00:00
])
2019-09-14 19:03:38 +00:00
: this.news.length
? m('aside.news.single', [
imagePath ? m('a', { href: this.page.media.link}, m('img.page-cover', { src: imagePath, alt: 'Cover image for ' + this.page.name } )) : null,
2019-09-14 19:03:38 +00:00
m('h4', 'Latest posts under ' + this.page.name + ':'),
this.loadingnews ? m('div.loading-spinner') : this.news.map(function(article) {
return m(Newsentry, article)
}),
m(Pages, {
base: '/page/' + this.page.path,
links: this.newslinks,
}),
])
: this.page.media
? m('img.page-cover.single', { src: this.page.media.medium_url, alt: 'Cover image for ' + this.page.name } )
2019-09-14 19:03:38 +00:00
: null,
2019-09-13 13:33:10 +00:00
]),
Authentication.currentUser
? m('div.admin-actions', [
m('span', 'Admin controls:'),
m(m.route.Link, { href: '/admin/pages/' + this.page.id }, 'Edit page'),
])
: null,
])
)
},
}
module.exports = Page