added i18n, refactoring

assets/modules/header.js

@@ -1,9 +1,11 @@
 
 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';
 
 //     __  __               __
 //    / / / /__  ____ _____/ /__  _____
@@ -11,15 +13,16 @@ var markdown =  require('markdown-it')()
 //  / __  /  __/ /_/ / /_/ /  __/ /
 // /_/ /_/\___/\__,_/\__,_/\___/_/
 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', 'Benedictus Spinoza')
       ]),
-      // m('nav', {'id':'parts-nav'}, [
-      //
-      // ]),
       m('div', {'id':"menus"}, [
         m(_PartsNav),
         m(_RouteMenu),
@@ -37,10 +40,10 @@ module.exports = {
 var _PartsNav = {
   view(vn){
     var lang = m.route.param('lang');
-    console.log('partsmenu', lang);
+    // console.log('partsmenu', lang);
     return m('nav', {id:'parts-nav'}, [
       // TODO: replaced labels with localized content
-      m('h3', 'Parts'),
+      m('h3', _i18n.t('Parts')),
       m('ul', _dbs.data[lang].map(function(p){
         // console.log("anchors, part", p);
         if(p.id !== "intro"){
@@ -63,21 +66,21 @@ var _RouteMenu = {
   view(){
     var lang = m.route.param('lang');
     var path = m.route.get().match(/^(\/[^\/]+)(\/[^\/|#]+)(.*)$/);
-    console.log('Route menu Path', path);
+    // console.log('Route menu Path', path);
     return m('nav', {id:'routes'}, [
       // TODO: replaced labels with localized content
-      m('h3', 'Mode'),
+      m('h3', _i18n.t('Mode')),
       m('ul', [
         m('li', m('a', {
           'href':`/${lang}/text${path[3]}`,
           oncreate : m.route.link,
           onupdate : m.route.link
-        }, "Text")),
+        }, _i18n.t("Text"))),
         m('li', m('a', {
-          'href':`/${lang}/connections${path[3]}`,
+          'href':`/${lang}/conexions${path[3]}`,
           oncreate : m.route.link,
           onupdate : m.route.link
-        }, "Connections")),
+        }, _i18n.t("Conexions"))),
       ])
     ]);
   }
@@ -94,30 +97,17 @@ var _LangMenu = {
     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', 'languages'),
+      m('h3', _i18n.t('Language')),
       m('ul', _dbs.langs.map(lang => {
-        // create li dom for each lank link
-        return m('li',
-          // create a dom
-          m('a', {
+        // create li dom for each lang link
+        return m('li', 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;
-            // }
+            'href':`/${lang.lc}${path[1]}`,
+            oncreate : m.route.link,
+            onupdate : m.route.link
           }, lang.label)
         );
       }))