nfp_sites/app/pages/page.js

const m = require('mithril')
const ApiPage = require('../api/page.p')
const Article = require('../api/article.p')
const pagination = require('../api/pagination')
const Authentication = require('../authentication')
const Newsentry = require('../widgets/newsentry')
const Pages = require('../widgets/pages')

const Page = {
  oninit: function(vnode) {
    this.error = ''
    this.loading = false
    this.showLoading = null
    this.data = {
      page: null,
      articles: [],
      total_articles: 0,
      featured: null,
    }
    this.children = []
    this.currentPage = Number(m.route.param('page')) || 1

    if (window.__nfpdata) {
      this.path = m.route.param('id')
      this.data = window.__nfpdata

      window.__nfpdata = null
      window.__nfpsubdata = null
    } else {
      this.fetchPage(vnode)
    }
  },

  onbeforeupdate: function(vnode) {
    this.currentPage = Number(m.route.param('page')) || 1

    if (this.path !== m.route.param('id') || this.currentPage !== this.lastpage) {
      this.fetchPage(vnode)
    }
  },

  fetchPage: function(vnode) {
    this.error = ''
    this.lastpage = this.currentPage
    this.path = m.route.param('id')

    if (this.showLoading) {
      clearTimeout(this.showLoading)
    }

    if (this.data.page) {
      this.showLoading = setTimeout(() => {
        this.showLoading = null
        this.loading = true
        m.redraw()
      }, 150)
    } else {
      this.loading = true
    }

    this.children = ApiPage.TreeMap.get(this.path)
    this.children = this.children && this.children.children || []

    ApiPage.getPage(this.path, this.lastpage)
    .then((result) => {
      this.data = result

      if (!this.data.page) {
        this.error = 'Page not found'
        return
      }

      if (this.lastpage !== 1) {
        document.title = 'Page ' + this.lastpage + ' - ' + this.data.page.name + ' - NFP Moe'
      } else {
        document.title = this.data.page.name + ' - NFP Moe'
      }
    }, (err) => {
      this.error = err.message
    })
    .then(() => {
      clearTimeout(this.showLoading)
      this.showLoading = null
      this.loading = false
      m.redraw()
    })
  },

  view: function(vnode) {
    var deviceWidth = window.innerWidth
    var pixelRatio = window.devicePixelRatio || 1
    var bannerPath = ''
    var imagePath = ''

    if (this.data.page && this.data.page.banner) {
      if (deviceWidth < 400 && pixelRatio <= 1) {
        bannerPath = this.data.page.banner.small_url
      } else if ((deviceWidth < 800 && pixelRatio <= 1)
                || (deviceWidth < 600 && pixelRatio > 1)) {
        bannerPath = this.data.page.banner.medium_url
      } else {
        bannerPath = this.data.page.banner.large_url
      }
    }

    if (this.data.page && this.data.page.media) {
      if ((deviceWidth < 1000 && pixelRatio <= 1)
                || (deviceWidth < 800 && pixelRatio > 1)) {
        imagePath = this.data.page.media.medium_url
      } else {
        imagePath = this.data.page.media.large_url
      }
    }

    return ([
      this.loading
        ? m('article.page', m('div.loading-spinner'))
        : null,
      !this.loading && this.error
        ? m('div.error-wrapper', m('div.error', {
            onclick: function() {
              vnode.state.error = ''
              vnode.state.fetchPage(vnode)
            },
          }, 'Page error: ' + this.error))
        : null,
      !this.loading && !this.error
        ? m('article.page', [
          bannerPath
            ? m('.div.page-banner', { style: { 'background-image': 'url("' + bannerPath + '")' } } )
            : null,
          m('div.goback', ['« ', m(m.route.Link, {
            href: this.data.page.parent_path
              ? '/page/' + this.data.page.parent_path
              : '/'
            }, this.data.page.parent_name || 'Home')]),
          m('header', m('h1', this.data.page.name)),
          m('.container', {
              class: this.children.length ? 'multi' : '',
            }, [
              this.children.length
                ? m('aside.sidebar', [
                    m('h4', 'View ' + this.data.page.name + ':'),
                    this.children.map(function(page) {
                      return m(m.route.Link, { href: '/page/' + page.path }, page.name)
                    }),
                  ])
                : null,
              this.data.page.content
                ? m('.fr-view', [
                    imagePath
                      ? m('a', { href: this.data.page.media.link}, m('img.page-cover', { src: imagePath, alt: 'Cover image for ' + this.data.page.name } ))
                      : null,
                    m.trust(this.data.page.content),
                    this.data.articles.length && this.data.page.content
                      ? m('aside.news', [
                          m('h4', 'Latest posts under ' + this.data.page.name + ':'),
                          this.data.articles.map(function(article) {
                            return m(Newsentry, { article: article })
                          }),
                          m(Pages, {
                            base: '/page/' + this.data.page.path,
                            total: this.data.total_articles,
                            page: this.currentPage,
                          }),
                        ])
                      : null,
                  ])
                : this.data.articles.length
                  ? m('aside.news.single', [
                      imagePath ? m('a', { href: this.data.page.media.link}, m('img.page-cover', { src: imagePath, alt: 'Cover image for ' + this.data.page.name } )) : null,
                      m('h4', 'Latest posts under ' + this.data.page.name + ':'),
                      this.data.articles.map(function(article) {
                        return m(Newsentry, { article: article })
                      }),
                      m(Pages, {
                        base: '/page/' + this.data.page.path,
                        total: this.data.total_articles,
                        page: this.currentPage,
                      }),
                    ])
                  : this.data.page.media
                    ? m('img.page-cover.single', { src: this.data.page.media.medium_url, alt: 'Cover image for ' + this.data.page.name } )
                    : null,
          ]),
          Authentication.currentUser
            ? m('div.admin-actions', [
              m('span', 'Admin controls:'),
              m(m.route.Link, { href: '/admin/pages/' + this.data.page.path }, 'Edit page'),
            ])
            : null,
        ])
      : null,
    ])
  },
}

module.exports = Page