added first step of multi-linguage : switch all text from fr to bra

assets/dist/main.css

@@ -750,6 +750,20 @@ html, body {
   margin: 0;
   padding: 0; }
 
+header > * {
+  display: inline-block; }
+
+aside#menus {
+  float: right; }
+  aside#menus > ul {
+    display: inline-block; }
+  aside#menus ul#languages li {
+    list-style: none;
+    line-height: 0.9; }
+    aside#menus ul#languages li a {
+      text-decoration: none;
+      color: inherit; }
+
 #app {
   position: relative;
   text-align: center;

assets/main.js

@@ -17,23 +17,133 @@ var m = require('mithril');
 var markdown =  require('markdown-it')()
                   .use(require('markdown-it-footnote'));
 
-// console.log("Hello Ethica");
+var _lang;
+var _langs = [
+  {'lc':'fr',   'label':'fr (appuhn)',  'db':'2-Appuhn-FR-ethicadb.json'},
+  {'lc':'bra',  'label':'bra',          'db':'ethica-bresilen.json'}
+];
+// console.log(_langs);
 
-var _db = require('./jsondb/2-Appuhn-FR-ethicadb.json')
+var _dbs = {};
-// console.log("_db", _db);
+var _dbs_by_id = {};
+var _loaded_dbs = 0;
+
+function init(){
+  // var hash = window.location.hash;
+  _lang = getUrlVars()['lang'] || 'fr';
+  console.log(_lang);
+
+  // create lang menu
+  m.mount(document.getElementById('menus'), _LangMenu);
+
+  // load all dbs, when loaded init main app
+  for (var i = 0; i < _langs.length; i++) {
+    // if(_langs[i].lc == lang){
+      // var dbfile = _langs[i].db;
+    // }
+    loadJSON(_langs[i].lc, 'assets/jsondb/'+_langs[i].db, onDBLoaded);
 
-var _db_by_id = {};
-for (p in _db) {
-  for (e in _db[p]) {
-    // console.log(_db[p][e]);
-    _db_by_id[_db[p][e].id] = _db[p][e];
-    for (c in _db[p][e]){
-      // console.log(_db[p][e][c]);
-      _db_by_id[_db[p][e][c].id] = _db[p][e][c];
   }
+
+
+};
+
+//     __                      __  ___
+//    / /   ____ _____  ____ _/  |/  /__  ____  __  __
+//   / /   / __ `/ __ \/ __ `/ /|_/ / _ \/ __ \/ / / /
+//  / /___/ /_/ / / / / /_/ / /  / /  __/ / / / /_/ /
+// /_____/\__,_/_/ /_/\__, /_/  /_/\___/_/ /_/\__,_/
+//                   /____/
+var _LangMenu = {
+  view: function(){
+    // return m('main', {id:"content"}, DataItems.map(c => m(_Item,c)));
+    // create ul dom
+    return m('ul', {id:"languages"}, _langs.map(function(lang){
+        // create li dom for each lank link
+        return m('li',
+          // create a dom
+          m('a', {
+            'lang':lang.lc,
+            'href':'/?lang='+lang.lc,
+            onclick:function(e){
+              e.preventDefault();
+              // console.log('click lang', e);
+              var lang = e.target.getAttribute('lang');
+              console.log(lang);
+              if(lang != _lang){
+                // change url variable
+                // change db
+                _lang = lang;
+                // redraw UI
+                m.redraw();
+              }
+              return false;
+            }
+          }, lang.label)
+        );
+      })
+    );
   }
 }
-console.log('_db_by_id', _db_by_id);
+
+//        _
+//       (_)________  ____
+//      / / ___/ __ \/ __ \
+//     / (__  ) /_/ / / / /
+//  __/ /____/\____/_/ /_/
+// /___/
+function loadJSON(lc, file, callback) {
+
+  var xobj = new XMLHttpRequest();
+  xobj.overrideMimeType("application/json");
+  // xobj.setRequestHeader('Accept-Encoding', 'gzip');
+  xobj.open('GET', file, true); // Replace 'my_data' with the path to your file
+  // xobj.onload = callback;
+  xobj.onreadystatechange = function () {
+    // console.log(xobj);
+    if (xobj.readyState == 4 && xobj.status == "200") {
+      // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
+      callback(lc, xobj.responseText);
+    }
+  };
+
+  xobj.send(null);
+
+  // TODO: load and unzip gziped json
+  // TODO: load multiple languages jsons
+};
+
+function onDBLoaded(lc, json){
+
+  _dbs[lc] = JSON.parse(json);
+  _loaded_dbs ++;
+
+  if (_loaded_dbs == _langs.length) {
+    console.log("_dbs", _dbs);
+    parseDBs();
+    m.mount(document.getElementById('app'), _Tree);
+  }
+
+}
+
+function parseDBs(){
+  for(l in _dbs){
+    // console.log('l', l);
+    _dbs_by_id[l] = {};
+    for (p in _dbs[l]) {
+      // console.log(_dbs[l][p]);
+      for (e in _dbs[l][p].enonces) {
+        // console.log('e',e);
+        _dbs_by_id[l][_dbs[l][p].enonces[e].id] = _dbs[l][p].enonces[e];
+        for (c in _dbs[l][p][e]){
+          // console.log(_db[p][e][c]);
+          _dbs_by_id[_dbs[l][p][e][c].id] = _dbs[l][p][e][c];
+        }
+      }
+    }
+  }
+  console.log('_dbs_by_id', _dbs_by_id);
+}
 
 //     __    _       __
 //    / /   (_)___  / /__
@@ -48,15 +158,18 @@ var _Link = {
     // define target id
     vn.state.tid = vn.attrs.href;
   },
+  onupdate: function(vn){
+    vn.state.tid = vn.attrs.href;
+  },
   view: function(vn){
     if(vn.state.opened){
       // console.log('vn.state.tid', vn.state);
       return m('div', {'class':'opened-link'},
           [
             m('span', {'class':"link text"}, vn.children),
-            typeof _db_by_id[vn.state.tid].childs != "undefined"
+            typeof _dbs_by_id[_lang][vn.state.tid].childs != "undefined"
-              ? m(_Enonce, _db_by_id[vn.state.tid])
+              ? m(_Enonce, _dbs_by_id[_lang][vn.state.tid])
-              : m(_Item, _db_by_id[vn.state.tid])
+              : m(_Item, _dbs_by_id[_lang][vn.state.tid])
           ]
         );
     }else{
@@ -136,13 +249,20 @@ function populateTextDom(n,i){
 var _Text = {
   textchilds:[],
   oninit: function(vn){
-    debug = vn.attrs.id == '1a5';
+    // debug = vn.attrs.id == '1a5';
     // convert markdown to html
     var texthtml = markdown.render(vn.attrs.text)
+    // TODO: fixe number link text disapear [3](1d3) ( in 104d )
+    // TODO: fixe parenthèse disparait _(par les Défin. [test 3](1d3) et [test 5](1d5))_  ( in 104d )
     // parse html string to virtual dom
     var textdom = new DOMParser().parseFromString(texthtml, "text/html");
     // get the text nodes (avoid html document extra)
-    if(debug) console.log('textdom',textdom);
+    // if(debug) console.log('textdom',textdom);
+    vn.state.textchilds = parseTextDom(textdom.getElementsByTagName('body')[0].childNodes);
+  },
+  onupdate: function(vn){
+    var texthtml = markdown.render(vn.attrs.text)
+    var textdom = new DOMParser().parseFromString(texthtml, "text/html");
     vn.state.textchilds = parseTextDom(textdom.getElementsByTagName('body')[0].childNodes);
   },
   view: function(vn){
@@ -162,20 +282,20 @@ var _Text = {
 //  _/ // /_/  __/ / / / / /
 // /___/\__/\___/_/ /_/ /_/
 var _Item = {
-  id:null,
+  // id:null,
-  part:null,
+  // part:null,
-  type:null,
+  // type:null,
-  nested:false,
+  // nested:false,
-  oninit: function(vn){
+  // oninit: function(vn){
-    // console.log('vn.attrs', vn.attrs);
+  //   // console.log('vn.attrs', vn.attrs);
-    vn.state.id = vn.attrs.id;
+  //   vn.state.id = vn.attrs.id;
-    // vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
+  //   // vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
-    vn.state.nested = vn.attrs.nested | false;
+  //   vn.state.nested = vn.attrs.nested | false;
-  },
+  // },
   view: function(vn){
     return m("section", {
-        'id':vn.state.id,
+        'id':vn.attrs.id,
-        'class':'item'+(vn.state.nested ? ' nested':'')
+        'class':'item'+((vn.attrs.nested || false) ? ' nested':'')
       },
       [
         // create title node
@@ -198,29 +318,32 @@ var _Item = {
 //  / /___/ / / / /_/ / / / / /__/  __/
 // /_____/_/ /_/\____/_/ /_/\___/\___/
 var _Enonce = {
-  partid:null,
+  // partid:null,
-  id:null,
+  // id:null,
-  title:null,
+  // title:null,
-  nested:false,
+  // nested:false,
   childs:[],
   oninit:function(vn){
-    // console.log('Enonce on init', vn);
+  //   // console.log('Enonce on init', vn);
-    vn.state.partid = vn.attrs.partid;
+  //   vn.state.partid = vn.attrs.partid;
-    vn.state.id = vn.attrs.id;
+  //   vn.state.id = vn.attrs.id;
-    vn.state.title = vn.attrs.title;
+  //   vn.state.title = vn.attrs.title;
+    vn.state.childs = vn.attrs.childs;
+  //   vn.state.nested = vn.attrs.nested | false;
+  },
+  onupdate:function(vn) {
     vn.state.childs = vn.attrs.childs;
-    vn.state.nested = vn.attrs.nested | false;
   },
   view: function(vn){
     return m("section", {
-      'id'    :vn.state.id,
+      'id'    :vn.attrs.id,
-      'class' :'enonce'+(vn.state.nested ? ' nested':'')
+      'class' :'enonce'+((vn.attrs.nested || false) ? ' nested':'')
     },
     [
       // create title node
       m("h2", {}, vn.attrs.title),
       // create text node
-      m(_Text, {'text':vn.attrs.text, 'id':vn.state.id}),
+      m(_Text, {'text':vn.attrs.text, 'id':vn.attrs.id}),
       // addd children
       vn.state.childs.map(function(c){
         return m(_Item, c)
@@ -235,26 +358,17 @@ var _Enonce = {
 //  / ____/ /_/ / /  / /_
 // /_/    \__,_/_/   \__/
 var _Part = {
-  id:null, // get the part number
-  title:null,
-  enonces:[],
-  oninit:function(vn){
-    // console.log('Part on init', vn);
-    vn.state.id = vn.attrs.id;
-    vn.state.title = vn.attrs.title;
-    vn.state.enonces = vn.attrs.enonces;
-  },
   view: function(vn){
     return m("section", {
-      'id'    :vn.state.id,
+      'id'    :vn.attrs.id,
       'class' :'part'
     },
     [
       // create title node
-      m("h1", {'class':'part'}, vn.state.title),
+      m("h1", {'class':'part'}, vn.attrs.title),
       // create text node
-      vn.state.enonces.map(function(e){
+      vn.attrs.enonces.map(function(e){
-        return m(_Enonce, Object.assign({"partid":vn.state.id},e))
+        return m(_Enonce, Object.assign({"partid":vn.attrs.id},e))
       })
     ])
   }
@@ -267,12 +381,33 @@ var _Part = {
 // /_/ /_/   \___/\___/
 var _Tree = {
   view: function(){
-    // return m('main', {id:"content"}, DataItems.map(c => m(_Item,c)));
+    console.log('_Tree view', _lang);
-    return m('main', {id:"content"}, _db.map(function(p){
+    return m('main', {id:"content"}, _dbs[_lang].map(function(p){
-        // console.log("MAP _db", _db[k]);
+        // console.log("MAP _dbs", p);
         return m(_Part,p);
       })
     );
   }
 }
-m.mount(document.getElementById('app'), _Tree);
+
+//     __  __     __
+//    / / / /__  / /___  ___  __________
+//   / /_/ / _ \/ / __ \/ _ \/ ___/ ___/
+//  / __  /  __/ / /_/ /  __/ /  (__  )
+// /_/ /_/\___/_/ .___/\___/_/  /____/
+//             /_/
+
+function getUrlVars() {
+  var vars = {};
+  var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
+    vars[key] = value;
+  });
+  return vars;
+}
+
+//     _       _ __
+//    (_)___  (_) /_
+//   / / __ \/ / __/
+//  / / / / / / /_
+// /_/_/ /_/_/\__/
+init()

assets/main.scss

@@ -21,6 +21,29 @@ html, body{
   padding:0;
 }
 
+header{
+  >*{
+    display: inline-block;
+  }
+}
+
+aside#menus{
+  float:right;
+  >ul{
+    display: inline-block;
+  }
+  ul#languages{
+    li{
+      list-style: none;
+      line-height: 0.9;
+      a{
+        text-decoration: none;
+        color: inherit;
+      }
+    }
+  }
+}
+
 #app{
   position: relative;
   text-align: center;

index.html

@@ -8,6 +8,12 @@
   <body>
     <header>
       <h1>Ethica</h1>
+      <aside id="menus">
+        <!-- <ul id="languages"> -->
+          <!-- <li><a href="/?lang=fr">fr (Appuhn)</a></li>
+          <li><a href="/?lang=bra">bra</a></li> -->
+        <!-- </ul> -->
+      </aside>
     </header>
     <section id="app">
 

webpack.config.js

@@ -11,7 +11,7 @@ var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
-  entry: ["./assets/main.js", "./assets/main.scss"], //, "./scss/main.scss"
+  entry: ["./assets/main.js", "./assets/main.scss"],
   output: {
     path: __dirname + "/assets/dist/",
     filename: "main.js"

yarn.lock

@@ -131,6 +131,10 @@ async-foreach@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
 
+async@0.2.x:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+
 async@^2.1.2, async@^2.1.5:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.3.0.tgz#1013d1051047dd320fe24e494d5c66ecaf6147d9"
@@ -473,6 +477,21 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@^2.8.1:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+compression-webpack-plugin@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-0.4.0.tgz#811de04215f811ea6a12d4d8aed8457d758f13ac"
+  dependencies:
+    async "0.2.x"
+    webpack-sources "^0.1.0"
+  optionalDependencies:
+    node-zopfli "^2.0.0"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -661,6 +680,12 @@ deep-extend@~0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
 
+defaults@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  dependencies:
+    clone "^1.0.2"
+
 defined@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
@@ -962,6 +987,10 @@ graceful-fs@^4.1.2:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+
 har-schema@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
@@ -1520,7 +1549,7 @@ ms@0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
 
-nan@^2.3.0, nan@^2.3.2:
+nan@^2.0.0, nan@^2.3.0, nan@^2.3.2:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.1.tgz#8c84f7b14c96b89f57fbc838012180ec8ca39a01"
 
@@ -1570,7 +1599,7 @@ node-libs-browser@^2.0.0:
     util "^0.10.3"
     vm-browserify "0.0.4"
 
-node-pre-gyp@^0.6.29:
+node-pre-gyp@^0.6.29, node-pre-gyp@^0.6.4:
   version "0.6.34"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.34.tgz#94ad1c798a11d7fc67381b50d47f8cc18d9799f7"
   dependencies:
@@ -1607,6 +1636,15 @@ node-sass@^4.5.3:
     sass-graph "^2.1.1"
     stdout-stream "^1.4.0"
 
+node-zopfli@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/node-zopfli/-/node-zopfli-2.0.2.tgz#a7a473ae92aaea85d4c68d45bbf2c944c46116b8"
+  dependencies:
+    commander "^2.8.1"
+    defaults "^1.0.2"
+    nan "^2.0.0"
+    node-pre-gyp "^0.6.4"
+
 "nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"