nfp_sites/app/frontpage/frontpage.js

const m = require('mithril')

const Page = require('../api/page.p')
const Article = require('../api/article.p')
const Pagination = require('../api/pagination')
const Pages = require('../widgets/pages')
const Newsitem = require('../widgets/newsitem')

const Frontpage = {
  oninit: function(vnode) {
    this.error = ''
    this.loading = false
    this.featured = null
    this.links = null

    if (window.__nfpfeatured) {
      this.featured = window.__nfpfeatured
    }

    if (window.__nfpdata
        && window.__nfplinks) {
      this.links = window.__nfplinks
      this.articles = window.__nfpdata
      this.lastpage = m.route.param('page') || '1'
      window.__nfpdata = null
      window.__nfplinks = null

      if (this.articles.length === 0) {
        m.route.set('/')
      } else {
        Frontpage.processFeatured(vnode, this.articles)
      }
    } else {
      this.fetchArticles(vnode)
    }
  },

  onupdate: function(vnode) {
    if (this.lastpage !== (m.route.param('page') || '1')) {
      this.fetchArticles(vnode)
      m.redraw()
    }
  },

  fetchArticles: function(vnode) {
    this.error = ''
    this.loading = true
    this.links = null
    this.articles = []
    this.lastpage = m.route.param('page') || '1'

    if (this.lastpage !== '1') {
      document.title = 'Page ' + this.lastpage + ' - NFP Moe - Anime/Manga translation group'
    } else {
      document.title = 'NFP Moe - Anime/Manga translation group'
    }

    return Pagination.fetchPage(Article.getAllArticlesPagination({
      per_page: 10,
      page: this.lastpage,
      includes: ['parent', 'files', 'media', 'banner', 'staff'],
    }))
    .then(function(result) {
      vnode.state.articles = result.data
      vnode.state.links = result.links
      Frontpage.processFeatured(vnode, result.data)
    })
    .catch(function(err) {
      vnode.state.error = err.message
    })
    .then(function() {
      vnode.state.loading = false
      m.redraw()
    })
  },

  processFeatured: function(vnode, data) {
    if (vnode.state.featured) return
    for (var i = data.length - 1; i >= 0; i--) {
      if (data[i].banner) {
        vnode.state.featured = data[i]
      }
    }
  },

  view: function(vnode) {
    var deviceWidth = window.innerWidth
    var bannerPath = ''

    if (this.featured && this.featured.banner) {
      var pixelRatio = window.devicePixelRatio || 1
      if (deviceWidth < 400 && pixelRatio <= 1) {
        bannerPath = window.supportsavif
                      && this.featured.banner.small_url_avif
                      || this.featured.banner.small_url
      } else if ((deviceWidth < 800 && pixelRatio <= 1)
                || (deviceWidth < 600 && pixelRatio > 1)) {
        bannerPath = window.supportsavif
                      && this.featured.banner.medium_url_avif
                      || this.featured.banner.medium_url
      } else {
        bannerPath = window.supportsavif
                      && this.featured.banner.large_url_avif
                      || this.featured.banner.large_url
      }
    }

    return [
      (bannerPath
        ? m(m.route.Link, {
            class: 'frontpage-banner',
            href: '/article/' + this.featured.path,
            style: { 'background-image': 'url("' + bannerPath + '")' },
          },
          this.featured.name
        )
        : null),
      m('frontpage', [
        m('aside.sidebar', [
          m('div.categories', [
            m('h4', 'Categories'),
            m('div',
              Page.Tree.map(function(page) {
                return [
                  m(m.route.Link, { class: 'root', href: '/page/' + page.path }, page.name),
                  (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),
                ]
              })
            ),
          ]),
          m('div.asunaside', {
            class: window.supportsavif ? 'avif' : 'jpeg'
          }),
        ]),
        m('.frontpage-news', [
          (this.loading
            ? m('div.loading-spinner')
            : null),
          this.articles.map(function(article) {
            return m(Newsitem, article)
          }),
          m(Pages, {
            base: '/',
            links: this.links,
          }),
        ]),
      ]),
    ]
  },
}

module.exports = Frontpage