added i18n, refactoring

assets/main.js

@@ -12,27 +12,49 @@ require('./fonts/amiri/amiri.css');
 require('./fonts/dejavu/dejavu.css');
 require('./fonts/opensans/opensans.css');
 
-
-
-var m = require('mithril');
+const m = require('mithril');
 // var marked = require('marked');
 
 // var _helpers = require('modules/helpers');
-var _dbs = require('./modules/dbs');
-var _ModeText = require('./modules/ModeText');
-var _ModeConnections = require('./modules/ModeConnections');
+const _dbs = require('./modules/dbs');
+const _i18n = require('./modules/i18n');
+const _Header = require('./modules/header');
+const _Footer = require('./modules/footer');
+const _ModeText = require('./modules/ModeText');
+const _ModeConnections = require('./modules/ModeConnections');
 
+var Layout = {
+	view(vn){
+		console.log('Layout view : lang', vn.attrs.lang);
+		_i18n.setLang(vn.attrs.lang);
+		return [
+			m(_Header, vn.attrs),
+			vn.children,
+      m(_Footer, vn.attrs)
+		]
+	}
+}
 
 function init(){
   _dbs.load(function(){
-    console.log("Init _dbs.data", _dbs.data);
-    console.log("Init _dbs.data_byid", _dbs.data_byid);
-    console.log("Init _dbs.data_strct", _dbs.data_strct);
+		console.log('init dbs callback');
+	  // console.log("Init _dbs.data", _dbs.data);
+    // console.log("Init _dbs.data_byid", _dbs.data_byid);
+    // console.log("Init _dbs.data_strct", _dbs.data_strct);
     m.route.prefix("");
-    m.route(document.body, "/lat/text", {
-      "/:lang/text": _ModeText,
-      "/:lang/connections": _ModeConnections
-    });
+		m.route(document.body, "/fr/text", {
+			"/:lang/text": {
+				render(vn){
+					// console.log('Routing render : vn', vn);
+					return m(Layout, vn.attrs, m(_ModeText, vn.attrs));
+				}
+			},
+			"/:lang/conexions": {
+				render(vn){
+					return m(Layout, vn.attrs, m(_ModeConnections, vn.attrs));
+				}
+			}
+		});
   });
 };
 

assets/modules/ModeConnections.js

@@ -43,7 +43,7 @@ var _Dot = {
   oninit(vn){
     this.id = vn.attrs.id;
     this.type = vn.attrs.type;
-
+    this.title = vn.attrs.title || "title";
     this.setuptext(vn);
 
     if(typeof vn.attrs.active !== 'undefined')
@@ -352,18 +352,14 @@ module.exports = {
     _Ui.init();
   },
   view(vn){
-    console.log('_ModeConnections view', vn.attrs.lang);
-    return [
-      m(_Header),
-      m('main', {id:"content", 'class':'mode-connections'}, _dbs.data[vn.attrs.lang].map(p => {
-          if(p.id == 'intro'){
-            return m(_Intro,p);
-          }else{
-            return m(_Part,p);
-          }
-        })
-      ),
-      m(_Footer)
-    ];
+    // console.log('_ModeConnections view', vn.attrs.lang);
+    return m('main', {id:"content", 'class':'mode-connections'}, _dbs.data[vn.attrs.lang].map(p => {
+        if(p.id == 'intro'){
+          return m(_Intro,p);
+        }else{
+          return m(_Part,p);
+        }
+      })
+    );
   }
 }

assets/modules/ModeText.js

@@ -6,8 +6,8 @@ var markdown =  require('markdown-it')()
                   .use(require('markdown-it-footnote'));
 
 var _dbs = require('./dbs');
-var _Header = require('./header');
-var _Footer = require('./footer');
+// var _Header = require('./header');
+// var _Footer = require('./footer');
 var _Ui = require('./ui.js');
 
 //     __    _       __
@@ -29,7 +29,7 @@ var _Link = {
   view(vn){
     this.tid_known = typeof _dbs.data_byid[_dbs.lang][this.tid] === 'undefined' ? false : true;
     if (!this.tid_known) {
-      console.log('!! target id '+this.tid+' unkonwn !!');
+      // console.log('!! target id '+this.tid+' unkonwn !!');
     }
     if(this.opened && this.tid_known){
       // console.log('this.tid', vn.state);
@@ -140,7 +140,7 @@ var _Text = {
     // get the text nodes (avoid html document extra)
     this.textchilds = parseTextDom(this.textdom.getElementsByTagName('body')[0].childNodes);
     if(this.id == "115sc"){
-      console.log(this.textchilds);
+      // console.log(this.textchilds);
     }
   },
   oninit(vn){
@@ -308,7 +308,7 @@ var _Part = {
 // /___/_/ /_/\__/_/   \____/
 var _Intro = {
   oninit(vn){
-    console.log('_Intro : oninit : vn', vn);
+    // console.log('_Intro : oninit : vn', vn);
     this.id = vn.attrs.id;
     this.text = vn.attrs.text || '';
   },
@@ -329,27 +329,29 @@ var _Intro = {
 // /_/  \___/_/|_|\__/
 module.exports = {
   // oninit(vn){
-  //   this.lang = vn.attrs.lang;
+  //   // this.lang = vn.attrs.lang;
+  //   console.log('ModeText oninit : lang', vn.attrs.lang);
+  //   // i18next.changeLanguage(vn.attrs.lang);
   // },
   oncreate(vn){
     document.body.classList.add('mode-text');
     _Ui.init();
   },
+  // onbeforeupdate(vn, old){
+  //   console.log('ModeText onbeforeupdate : lang', vn.attrs.lang);
+  //   // i18next.changeLanguage(vn.attrs.lang);
+  // },
   view(vn){
-    console.log('_ModeText view', vn.attrs.lang);
-    return [
-      m(_Header),
-      m('main', {id:"content", 'class':'mode-text'}, _dbs.data[vn.attrs.lang].map((p) => {
-          console.log("MAP _dbs", p);
-          if(p.id == 'intro'){
-            return m(_Intro,p);
-          }else{
-            return m(_Part,p);
-          }
-        })
-      ),
-      m(_Footer)
-    ]
+    // console.log('_ModeText view : lang', vn.attrs.lang);
+    return m('main', {id:"content", 'class':'mode-text'}, _dbs.data[vn.attrs.lang].map((p) => {
+        // console.log("MAP _dbs", p);
+        if(p.id == 'intro'){
+          return m(_Intro,p);
+        }else{
+          return m(_Part,p);
+        }
+      })
+    );
   }
 
 }

assets/modules/dbs.js

@@ -50,7 +50,7 @@ module.exports = {
       // console.log('onreadystatechange', xobj.readyState);
       switch(xobj.readyState){
         case 3:
-          console.log('loading');
+          // console.log('loading');
         break;
         case 4:
           if (xobj.status === 200) {
@@ -66,12 +66,12 @@ module.exports = {
     xobj.send(null);
   },
   onJSONLoaded(lc, json, callback){
-    console.log('onDBLoaded '+lc);
+    // console.log('onDBLoaded '+lc);
     this.data[lc] = JSON.parse(json);
     this.loaded_dbs ++;
     //
     if (this.loaded_dbs == this.langs.length) {
-      console.log('All db loaded : data', this.data);
+      // console.log('All db loaded : data', this.data);
       this.parseByID(callback);
     }
 
@@ -133,7 +133,7 @@ module.exports = {
               this.data_strct[tid].from.push(id);
           }else{
             // if targets does not exists, the db has an issue, warn about that
-            console.log(`!! warning : ${tid} target id does not exists`);
+            // console.log(`!! warning : ${tid} target id does not exists`);
           }
         }
       }

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)
         );
       }))

assets/modules/i18n.js

@@ -0,0 +1,73 @@
+
+module.exports = {
+  t(key){
+    console.log('i18n',this);
+    if(this.locales[key]){
+      if(this.lang){
+        if(this.locales[key][this.lang]){
+          return this.locales[key][this.lang];
+        }else{
+          this.log(`Key "${key}" does not exists for language ${this.lang}`);
+        }
+      }else if(this.locales[key][this.fallback]){
+        return this.locales[key][this.fallback];
+      }else{
+        this.log(`Key "${key}" does not exists for fallback language ${this.fallback}`);
+      }
+    }else{
+      this.log(`Key "${key}" does not exists.`);
+    }
+    // if(this.lang){
+    //   if(this.locales[key][this.lang]){
+    //     // key exists in current language
+    //     return this.locales[key][this.lang];
+    //   }else{
+    //     console.log('Key ${key} does not exists for language ${this.lang}');
+    //   }
+    // }else if(this.locales[key][this.fallback]){
+    //   // key exists in fallback language
+    //   return this.locales[key][this.fallback];
+    // }
+    return key;
+  },
+  setLang(l){
+    this.lang = l
+  },
+  log(msg){
+    console.log(`i18n : ${msg}`);
+  },
+  fallback:'en',
+  lang: null,
+  locales:{
+    'Parts':{
+      'en':'Parts',
+      'fr':'Parties',
+      'bra':'Peças',
+      'lat':'Pars'
+    },
+    'Mode':{
+      'en':'Mode',
+      'fr':'Mode',
+      'bra':'Modo',
+      'lat':'Modus'
+    },
+    'Language':{
+      'en':'Language',
+      'fr':'Langue',
+      'bra':'Língua',
+      'lat':'Lingua'
+    },
+    'Text':{
+      'en':'Text',
+      'fr':'Texte',
+      'bra':'Texto',
+      'lat':'Illud'
+    },
+    'Conexions':{
+      'en':'Conexions',
+      'fr':'Connections',
+      'bra':'Conexões',
+      'lat':'Hospites'
+    },
+  }
+}

assets/modules/ui.js

@@ -17,7 +17,7 @@
 // var $window;
 
 var init = function(){
-  console.log('UI init');
+  // console.log('UI init');
   // $window = $(window);
   //    _____ __  _      __            __  _ __  __
   //   / ___// /_(_)____/ /____  __   / /_(_) /_/ /__
@@ -29,7 +29,7 @@ var init = function(){
 
   // var header_height = $('header').height();
   var header_height = document.getElementsByTagName('header')[0].clientHeight;
-  console.log(header_height);
+  // console.log(header_height);
 
   // var $sticky_clone_wrapper = $('<div>').addClass('sticky-clone-wrapper').appendTo('body');
   var sticky_clone_wrapper = document.createElement('div');

webpack.config.js

@@ -7,9 +7,9 @@
  * @License: GPL-V3
  */
 
-var webpack = require('webpack');
+const webpack = require('webpack');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
   entry: ["./assets/main.js", "./assets/main.scss"],
@@ -52,11 +52,6 @@ module.exports = {
         },
       }
     })
-    // new webpack.optimize.UglifyJsPlugin({
-    //   compress: {
-    //     warnings: false
-    //   }
-    // })
   ],
   watch: true
 };

yarn.lock

@@ -92,7 +92,7 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
-argparse@^1.0.7:
+argparse@^1.0.2, argparse@^1.0.7:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
   dependencies:
@@ -1426,6 +1426,21 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
+i18next-node-fs-backend@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/i18next-node-fs-backend/-/i18next-node-fs-backend-1.0.0.tgz#f5a625a3b287c1d098c7171b7dd376bb07299b59"
+  dependencies:
+    js-yaml "3.5.4"
+    json5 "0.5.0"
+
+i18next-xhr-backend@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/i18next-xhr-backend/-/i18next-xhr-backend-1.5.1.tgz#50282610780c6a696d880dfa7f4ac1d01e8c3ad5"
+
+i18next@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-9.1.0.tgz#408005fe262a990c8d93946a6de0c77bba11667b"
+
 icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
@@ -1652,6 +1667,13 @@ js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
+js-yaml@3.5.4:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.5.4.tgz#f64f16dcd78beb9ce8361068e733ebe47b079179"
+  dependencies:
+    argparse "^1.0.2"
+    esprima "^2.6.0"
+
 js-yaml@~3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
@@ -1689,6 +1711,10 @@ json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
 
+json5@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.0.tgz#9b20715b026cbe3778fd769edccd822d8332a5b2"
+
 json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
@@ -1814,7 +1840,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@^4.0.0, lodash@^4.14.0, lodash@~4.17.4:
+lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.4, lodash@~4.17.4:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
@@ -3154,6 +3180,10 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
+stream-buffers@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-3.0.1.tgz#68a38c5faadeded79ff79988d368e3fb1325ef06"
+
 stream-each@^1.1.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.2.tgz#8e8c463f91da8991778765873fe4d960d8f616bd"
@@ -3469,6 +3499,10 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+virtual-module-webpack-plugin@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/virtual-module-webpack-plugin/-/virtual-module-webpack-plugin-0.3.0.tgz#b2095b2b8c51480362ab3ec2bd613bdd507cbd46"
+
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
@@ -3575,6 +3609,18 @@ y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
 
+ya-i18next-webpack-plugin@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/ya-i18next-webpack-plugin/-/ya-i18next-webpack-plugin-0.4.0.tgz#d6734936607a51377eac19e1ea57723ebd70d2a3"
+  dependencies:
+    i18next "^9.1.0"
+    i18next-node-fs-backend "^1.0.0"
+    lodash "^4.17.4"
+    source-map "^0.6.1"
+    stream-buffers "^3.0.1"
+    virtual-module-webpack-plugin "^0.3.0"
+    webpack "^3.10.0"
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"