app.ethica-spinoza.net/assets/modules/header.js

var m = require('mithril');
var _dbs = require('./dbs');
var markdown =  require('markdown-it')()
                  .use(require('markdown-it-footnote'));


//     __  __               __
//    / / / /__  ____ _____/ /__  _____
//   / /_/ / _ \/ __ `/ __  / _ \/ ___/
//  / __  /  __/ /_/ / /_/ /  __/ /
// /_/ /_/\___/\__,_/\__,_/\___/_/
module.exports = {
  view(vn){
    return m('header', [
      m('hgroup', [
        m('h1', 'Ethica'),
        m('h2', 'Benedictus Spinoza')
      ]),
      // m('nav', {'id':'parts-nav'}, [
      //
      // ]),
      m('div', {'id':"menus"}, [
        m(_PartsNav),
        m(_RouteMenu),
        m(_LangMenu)
      ])
    ]);
  }
}

//     ____             __
//    / __ \____ ______/ /______   ____ ___  ___  ____  __  __
//   / /_/ / __ `/ ___/ __/ ___/  / __ `__ \/ _ \/ __ \/ / / /
//  / ____/ /_/ / /  / /_(__  )  / / / / / /  __/ / / / /_/ /
// /_/    \__,_/_/   \__/____/  /_/ /_/ /_/\___/_/ /_/\__,_/
var _PartsNav = {
  view(vn){
    var lang = m.route.param('lang');
    console.log('partsmenu', lang);
    return m('nav', {id:'parts-nav'}, [
      // TODO: replaced labels with localized content
      m('h3', 'Parts'),
      m('ul', _dbs.data[lang].map(function(p){
        // console.log("anchors, part", p);
        if(p.id !== "intro"){
          return m('li', [
            m('a', {'href':'#'+p.id}, m.trust(markdown.renderInline(p.title)))
          ]);
        }
      })
      )
    ]);
  }
};

//     ____              __
//    / __ \____  __  __/ /____     ____ ___  ___  ____  __  __
//   / /_/ / __ \/ / / / __/ _ \   / __ `__ \/ _ \/ __ \/ / / /
//  / _, _/ /_/ / /_/ / /_/  __/  / / / / / /  __/ / / / /_/ /
// /_/ |_|\____/\__,_/\__/\___/  /_/ /_/ /_/\___/_/ /_/\__,_/
var _RouteMenu = {
  view(){
    var lang = m.route.param('lang');
    var path = m.route.get().match(/^(\/[^\/]+)(\/[^\/|#]+)(.*)$/);
    console.log('Route menu Path', path);
    return m('nav', {id:'routes'}, [
      // TODO: replaced labels with localized content
      m('h3', 'Mode'),
      m('ul', [
        m('li', m('a', {
          'href':`/${lang}/text${path[3]}`,
          oncreate : m.route.link,
          onupdate : m.route.link
        }, "Text")),
        m('li', m('a', {
          'href':`/${lang}/connections${path[3]}`,
          oncreate : m.route.link,
          onupdate : m.route.link
        }, "Connections")),
      ])
    ]);
  }
}

//     __                      __  ___
//    / /   ____ _____  ____ _/  |/  /__  ____  __  __
//   / /   / __ `/ __ \/ __ `/ /|_/ / _ \/ __ \/ / / /
//  / /___/ /_/ / / / / /_/ / /  / /  __/ / / / /_/ /
// /_____/\__,_/_/ /_/\__, /_/  /_/\___/_/ /_/\__,_/
//                   /____/
var _LangMenu = {
  view(){
    var path = m.route.get().match(/^\/[^\/]+(.+)$/);
    // console.log('Lang menu Path', path);
    // create ul dom
    return m('nav', {id:'languages'}, [
      // TODO: replaced labels with localized content
      m('h3', 'languages'),
      m('ul', _dbs.langs.map(lang => {
        // create li dom for each lank link
        return m('li',
          // create a dom
          m('a', {
            'lang':lang.lc,
            'href':'/'+lang.lc+path[1]
            // onclick(e){
            //   e.preventDefault();
            //   // console.log('click lang', e);
            //   var lang = e.target.getAttribute('lang');
            //   // console.log(lang);
            //   if(lang != _dbs.lang){
            //     // change url variable
            //     // change db
            //     _dbs.lang = lang;
            //     // redraw UI
            //     // m.redraw();
            //   }
            //   return false;
            // }
          }, lang.label)
        );
      }))
    ]);
  }
}