nfp_sites/nfp_moe/app/site_page.js

const m = require('mithril')
const api = require('./api')
const PageTree = require('./page_tree')
const Paginator = require('./paginator')
// const Authentication = require('./authentication')
const Article = require('./article')
const Articleslim = require('./article_slim')
const media = require('./media')
const EditorBlock = require('./editorblock')
const NotFoundView = require('./site_404')

const ArticlesPerPage = 10

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

    console.log('test', window.__nfpdata)
    if (window.__nfpdata) {
      this.path = m.route.param('id')
      this.lastpage = this.currentPage

      this.data = window.__nfpdata
      window.__nfpdata = null

      this.children = PageTree.Tree
      if (this.path) {
        this.children = PageTree.TreeMap.get(this.path)
        this.children = this.children && this.children.children || []
      }
      this.afterData()
    } 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()
      }, 300)
    } else {
      this.loading = true
    }

    if (this.path) {
      this.children = PageTree.TreeMap.get(this.path)
      this.children = this.children && this.children.children || []
    } else {
      this.children = PageTree.Tree
    }

    api.sendRequest({
      method: 'GET',
      url: '/api/' + (this.path ? 'pages/' + this.path : 'frontpage') + '?page=' + (this.lastpage || 1),
    })
    .then((result) => {
      this.data = result
      this.afterData()
    }, (err) => {
      this.error = err.message
    })
    .then(() => {
      clearTimeout(this.showLoading)
      this.showLoading = null
      this.loading = false
      m.redraw()
    })
  },

  afterData: function() {
    if (!this.data.page && this.path) {
      this.error = 'Page not found'
      return
    }

    let title = 'Page not found - NFP Moe - Anime/Manga translation group'
    if (this.data.page) {
      title = this.data.page.name + ' - NFP Moe'
    } else if (!this.path) {
      title = 'NFP Moe - Anime/Manga translation group'
    }

    this.picture = media.generatePictureSource(this.data.page,
      '(max-width: 840px) calc(100vw - 82px), '
      + '758px')

    if (this.lastpage !== 1) {
      document.title = 'Page ' + this.lastpage + ' - ' + title
    } else {
      document.title = title
    }
  },

  view: function(vnode) {
    let page = this.data.page
    let featuredBanner = media.getBannerImage(this.data.featured, '/article/')
    let pageBanner = media.getBannerImage(this.data.page, '/page/')

    return ([
      this.loading
        ? m('div.loading-spinner')
        : null,
      !this.loading && this.error === 'Page not found'
        ? NotFoundView.view()
        : null,
      !this.loading && this.error && this.error !== 'Page not found'
        ? m('div.wrapper', m('div.error', {
            onclick: () => {
              this.error = ''
              this.fetchPage(vnode)
            },
          }, 'Page error: ' + this.error + '. Click here to try again'))
        : null,
      (featuredBanner
        ? m(m.route.Link, {
            class: 'page-banner',
            href: featuredBanner.path,
            style: { 'background-image': 'url("' + featuredBanner.banner + '")' },
          },
          m('div.inside', m('div.page-banner-title', featuredBanner.name))
        )
        : null),
      (!featuredBanner && pageBanner
        ? m('a.page-banner', {
            href: pageBanner.original,
            target: '_blank',
            style: { 'background-image': 'url("' + pageBanner.banner + '")' },
          },
        )
        : null),
      (page
        ? m('.inside.vertical', [
            m('div.actions', [
              '« ',
              m(m.route.Link, {
                href: page.parent_path
                  ? '/page/' + page.parent_path
                  : '/'
                }, page.parent_name || 'Home'),
              Authentication.currentUser
                ? [
                    m('div.filler'),
                    'Actions:',
                    m(m.route.Link, { href: '/admin/pages/' + page.id }, 'Edit page'),
                  ]
                : null,
            ]),
            m('h2.title', page.name)
          ])
        : null),
      (page || this.data.articles.length
        ? m('.inside', [
            this.children.length
              ? m('aside', { class: page ? '' : 'frontpage' }, [
                  m('h5', page ? 'View ' + page.name + ':' : 'Categories'),
                  this.children.map((page) => {
                    return [
                      m(m.route.Link, { class: 'root', href: '/page/' + page.path }, page.name),
                      (page.children && page.children.length
                        ? m('ul', page.children.map(function(subpage) {
                            return m('li', m(m.route.Link, { class: 'child', href: '/page/' + subpage.path }, subpage.name))
                          }))
                        : null),
                    ]
                  }),
                  !page
                    ? m('div.asuna.spritesheet')
                    : null,
                ])
              : null,
            m('div.container', [
              (page
                ? media.getArticlePicture(this.picture, false, page.media_path, 'Image for page ' + page.name)
                : null),
              (page && page.content
                ? m('div.content', page.content.blocks.map(block => {
                    return m(EditorBlock, { block: block })
                  }))
                : null),
              (page && this.data.articles.length
                ? [
                    m('h5', 'Latest posts under ' + page.name + ':'),
                    this.data.articles.map(function(article) {
                      return m(Articleslim, { article: article })
                    }),
                  ]
                : null),
              (!page && this.data.articles.length
                ? this.data.articles.map(function(article) {
                    return m(Article, { article: article })
                  })
                : null),
              m(Paginator, {
                base: page ? '/page/' + page.path : '/',
                page: this.currentPage,
                perPage: ArticlesPerPage,
                total: this.data.total_articles,
              }),
            ]),
          ])
        : null),
    ])
  },
}

module.exports = SitePage