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 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.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()
      }, 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

      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'
      }

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

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

  view: function(vnode) {
    let page = this.data.page
    let featuredBanner = media.getBannerImage(this.data.featured, '/article/')
    let pageBanner = media.getBannerImage(this.data.page, '/page/')
    let paginatorMaxPath = Math.floor(this.data.total_articles / ArticlesPerPage) + 1
    let paginatorPrefix = page ? '/page/' + page.path : '/'

    return ([
      this.loading
        ? m('div.loading-spinner')
        : null,
      !this.loading && this.error
        ? 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.page-goback', ['« ', m(m.route.Link, {
              href: page.parent_path
                ? '/page/' + page.parent_path
                : '/'
              }, page.parent_name || 'Home')]
            ),
            m('h2', page.name)
          ])
        : null),
      m('.inside', [
        this.children.length
          ? m('aside', [
              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),
                ]
              })
            ])
          : null,
        m('div.container', [
          (page && page.pictureFallback
            ? m('a.cover', {
                rel: 'noopener',
                href: page.media_path,
              }, [
                m('picture', [
                  m('source', {
                    srcset: page.pictureAvif,
                    sizes: page.pictureCover,
                    type: 'image/avif',
                  }),
                  m('img', {
                    srcset: page.pictureJpeg,
                    sizes: page.pictureCover,
                    alt: 'Image for news item ' + page.name,
                    src: page.pictureFallback,
                  }),
                ]),
              ])
            : null),
          (page && page.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,
          }),
        ]),
      ]),
    ])
  },
}

module.exports = SitePage