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

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

// import * as i18next from 'i18next';

//     __  __               __
//    / / / /__  ____ _____/ /__  _____
//   / /_/ / _ \/ __ `/ __  / _ \/ ___/
//  / __  /  __/ /_/ / /_/ /  __/ /
// /_/ /_/\___/\__,_/\__,_/\___/_/
module.exports = {
  // onupdate(vn){
  //   // console.log("Header onupdate : vn", vn);
  // },
  view(vn){
    // console.log("Header view : vn", vn);
    return m('header', [
      m('hgroup', [
        m('h1', 'Ethica'),
        m('h2', 'Spinoza (1632-1677)')
      ]),
      m('div', {'id':"menus"}, [
        m(_PartsNav),
        m(_Filters),
        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', _i18n.t('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 _Filters = {
  view(vn){
    var lang = m.route.param('lang');
    return m('nav', {id:'filters'}, [
      m('h3', _i18n.t('Filters')),
      m('ul', _dbs.types[lang].map(function(p){
        // console.log("types", p);
        return m('li', [
          m('a', {
            'href':`#filter-${p}`,
            'type':`${p}`,
            onclick(e){
              // console.log('click filter btn', type);
              e.preventDefault();
              if(e.target.parentNode.classList.contains('active')){
                // unshow active filter
                e.target.parentNode.classList.remove('active');
                // remove the filter
                _dbs.active_type_filter = null;
              }else{
                // deactivate active filter if any
                // a.li.ul.li.active.a.click
                var prev_activelink = e.target.parentNode.parentNode.getElementsByClassName('active').item(0);//.getElementsByName('a');//.dispatchEvent('click');
                if(prev_activelink){
                  prev_activelink.firstChild.click();
                }
                console.log('prev_activelink', prev_activelink);
                // show the active filter
                e.target.parentNode.classList.add('active');
                // activate the filter
                let type = e.target.getAttribute("type");
                _dbs.active_type_filter = type;
                // matomo
                if(typeof _paq !== 'undefined'){
                  // console.log('Matomo Connection closed', vn.state.breadcrumb);
                  _paq.push(['trackEvent', 'Filter', 'opened', type]);
                }
              }
              return false;
            }
          }, _i18n.t(p))
        ]);
      })
      )
    ]);
  }
}


//     ____              __
//    / __ \____  __  __/ /____     ____ ___  ___  ____  __  __
//   / /_/ / __ \/ / / / __/ _ \   / __ `__ \/ _ \/ __ \/ / / /
//  / _, _/ /_/ / /_/ / /_/  __/  / / / / / /  __/ / / / /_/ /
// /_/ |_|\____/\__,_/\__/\___/  /_/ /_/ /_/\___/_/ /_/\__,_/
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', _i18n.t('Mode')),
      m('ul', [
        m('li', m('a', {
          'href':`/${lang}/text${path[3]}`,
          oncreate : m.route.link,
          onupdate : m.route.link
        }, _i18n.t("Text"))),
        m('li', m('a', {
          'href':`/${lang}/connections${path[3]}`,
          oncreate : m.route.link,
          onupdate : m.route.link
        }, _i18n.t("Connections"))),
      ])
    ]);
  }
}

//     __                      __  ___
//    / /   ____ _____  ____ _/  |/  /__  ____  __  __
//   / /   / __ `/ __ \/ __ `/ /|_/ / _ \/ __ \/ / / /
//  / /___/ /_/ / / / / /_/ / /  / /  __/ / / / /_/ /
// /_____/\__,_/_/ /_/\__, /_/  /_/\___/_/ /_/\__,_/
//                   /____/
var _LangMenu = {
  view(){
    var path = m.route.get().match(/^\/[^\/]+(.+)$/);
    // console.log('Lang menu Path', path);
    // create ul dom
    // console.log("Header _LangMenu view : i18next", i18next);
    return m('nav', {id:'languages'}, [
      // TODO: replaced labels with localized content
      m('h3', _i18n.t('Language')),
      m('ul', _dbs.langs.map(lang => {
        // create li dom for each lang link
        return m('li', m('a', {
            'lang':lang.lc,
            'href':`/${lang.lc}${path[1]}`,
            oncreate : m.route.link,
            onupdate : m.route.link
          }, lang.label)
        );
      }))
    ]);
  }
}