|
@@ -17,23 +17,133 @@ var m = require('mithril');
|
|
var markdown = require('markdown-it')()
|
|
var markdown = require('markdown-it')()
|
|
.use(require('markdown-it-footnote'));
|
|
.use(require('markdown-it-footnote'));
|
|
|
|
|
|
-// console.log("Hello Ethica");
|
|
|
|
-
|
|
|
|
-var _db = require('./jsondb/2-Appuhn-FR-ethicadb.json')
|
|
|
|
-// console.log("_db", _db);
|
|
|
|
-
|
|
|
|
-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 _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 _dbs = {};
|
|
|
|
+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 _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)
|
|
|
|
+ );
|
|
|
|
+ })
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// _
|
|
|
|
+// (_)________ ____
|
|
|
|
+// / / ___/ __ \/ __ \
|
|
|
|
+// / (__ ) /_/ / / / /
|
|
|
|
+// __/ /____/\____/_/ /_/
|
|
|
|
+// /___/
|
|
|
|
+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);
|
|
}
|
|
}
|
|
-console.log('_db_by_id', _db_by_id);
|
|
|
|
|
|
|
|
// __ _ __
|
|
// __ _ __
|
|
// / / (_)___ / /__
|
|
// / / (_)___ / /__
|
|
@@ -48,15 +158,18 @@ var _Link = {
|
|
// define target id
|
|
// define target id
|
|
vn.state.tid = vn.attrs.href;
|
|
vn.state.tid = vn.attrs.href;
|
|
},
|
|
},
|
|
|
|
+ onupdate: function(vn){
|
|
|
|
+ vn.state.tid = vn.attrs.href;
|
|
|
|
+ },
|
|
view: function(vn){
|
|
view: function(vn){
|
|
if(vn.state.opened){
|
|
if(vn.state.opened){
|
|
// console.log('vn.state.tid', vn.state);
|
|
// console.log('vn.state.tid', vn.state);
|
|
return m('div', {'class':'opened-link'},
|
|
return m('div', {'class':'opened-link'},
|
|
[
|
|
[
|
|
m('span', {'class':"link text"}, vn.children),
|
|
m('span', {'class':"link text"}, vn.children),
|
|
- typeof _db_by_id[vn.state.tid].childs != "undefined"
|
|
|
|
- ? m(_Enonce, _db_by_id[vn.state.tid])
|
|
|
|
- : m(_Item, _db_by_id[vn.state.tid])
|
|
|
|
|
|
+ typeof _dbs_by_id[_lang][vn.state.tid].childs != "undefined"
|
|
|
|
+ ? m(_Enonce, _dbs_by_id[_lang][vn.state.tid])
|
|
|
|
+ : m(_Item, _dbs_by_id[_lang][vn.state.tid])
|
|
]
|
|
]
|
|
);
|
|
);
|
|
}else{
|
|
}else{
|
|
@@ -136,13 +249,20 @@ function populateTextDom(n,i){
|
|
var _Text = {
|
|
var _Text = {
|
|
textchilds:[],
|
|
textchilds:[],
|
|
oninit: function(vn){
|
|
oninit: function(vn){
|
|
- debug = vn.attrs.id == '1a5';
|
|
|
|
|
|
+ // debug = vn.attrs.id == '1a5';
|
|
// convert markdown to html
|
|
// convert markdown to html
|
|
var texthtml = markdown.render(vn.attrs.text)
|
|
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
|
|
// parse html string to virtual dom
|
|
var textdom = new DOMParser().parseFromString(texthtml, "text/html");
|
|
var textdom = new DOMParser().parseFromString(texthtml, "text/html");
|
|
// get the text nodes (avoid html document extra)
|
|
// 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);
|
|
vn.state.textchilds = parseTextDom(textdom.getElementsByTagName('body')[0].childNodes);
|
|
},
|
|
},
|
|
view: function(vn){
|
|
view: function(vn){
|
|
@@ -162,20 +282,20 @@ var _Text = {
|
|
// _/ // /_/ __/ / / / / /
|
|
// _/ // /_/ __/ / / / / /
|
|
// /___/\__/\___/_/ /_/ /_/
|
|
// /___/\__/\___/_/ /_/ /_/
|
|
var _Item = {
|
|
var _Item = {
|
|
- id:null,
|
|
|
|
- part:null,
|
|
|
|
- type:null,
|
|
|
|
- nested:false,
|
|
|
|
- oninit: function(vn){
|
|
|
|
- // console.log('vn.attrs', vn.attrs);
|
|
|
|
- vn.state.id = vn.attrs.id;
|
|
|
|
- // vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
|
|
|
|
- vn.state.nested = vn.attrs.nested | false;
|
|
|
|
- },
|
|
|
|
|
|
+ // id:null,
|
|
|
|
+ // part:null,
|
|
|
|
+ // type:null,
|
|
|
|
+ // nested:false,
|
|
|
|
+ // oninit: function(vn){
|
|
|
|
+ // // console.log('vn.attrs', vn.attrs);
|
|
|
|
+ // vn.state.id = vn.attrs.id;
|
|
|
|
+ // // vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
|
|
|
|
+ // vn.state.nested = vn.attrs.nested | false;
|
|
|
|
+ // },
|
|
view: function(vn){
|
|
view: function(vn){
|
|
return m("section", {
|
|
return m("section", {
|
|
- 'id':vn.state.id,
|
|
|
|
- 'class':'item'+(vn.state.nested ? ' nested':'')
|
|
|
|
|
|
+ 'id':vn.attrs.id,
|
|
|
|
+ 'class':'item'+((vn.attrs.nested || false) ? ' nested':'')
|
|
},
|
|
},
|
|
[
|
|
[
|
|
// create title node
|
|
// create title node
|
|
@@ -198,29 +318,32 @@ var _Item = {
|
|
// / /___/ / / / /_/ / / / / /__/ __/
|
|
// / /___/ / / / /_/ / / / / /__/ __/
|
|
// /_____/_/ /_/\____/_/ /_/\___/\___/
|
|
// /_____/_/ /_/\____/_/ /_/\___/\___/
|
|
var _Enonce = {
|
|
var _Enonce = {
|
|
- partid:null,
|
|
|
|
- id:null,
|
|
|
|
- title:null,
|
|
|
|
- nested:false,
|
|
|
|
|
|
+ // partid:null,
|
|
|
|
+ // id:null,
|
|
|
|
+ // title:null,
|
|
|
|
+ // nested:false,
|
|
childs:[],
|
|
childs:[],
|
|
oninit:function(vn){
|
|
oninit:function(vn){
|
|
- // console.log('Enonce on init', vn);
|
|
|
|
- vn.state.partid = vn.attrs.partid;
|
|
|
|
- vn.state.id = vn.attrs.id;
|
|
|
|
- vn.state.title = vn.attrs.title;
|
|
|
|
|
|
+ // // console.log('Enonce on init', vn);
|
|
|
|
+ // vn.state.partid = vn.attrs.partid;
|
|
|
|
+ // vn.state.id = vn.attrs.id;
|
|
|
|
+ // 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.childs = vn.attrs.childs;
|
|
- vn.state.nested = vn.attrs.nested | false;
|
|
|
|
},
|
|
},
|
|
view: function(vn){
|
|
view: function(vn){
|
|
return m("section", {
|
|
return m("section", {
|
|
- 'id' :vn.state.id,
|
|
|
|
- 'class' :'enonce'+(vn.state.nested ? ' nested':'')
|
|
|
|
|
|
+ 'id' :vn.attrs.id,
|
|
|
|
+ 'class' :'enonce'+((vn.attrs.nested || false) ? ' nested':'')
|
|
},
|
|
},
|
|
[
|
|
[
|
|
// create title node
|
|
// create title node
|
|
m("h2", {}, vn.attrs.title),
|
|
m("h2", {}, vn.attrs.title),
|
|
// create text node
|
|
// 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
|
|
// addd children
|
|
vn.state.childs.map(function(c){
|
|
vn.state.childs.map(function(c){
|
|
return m(_Item, c)
|
|
return m(_Item, c)
|
|
@@ -235,26 +358,17 @@ var _Enonce = {
|
|
// / ____/ /_/ / / / /_
|
|
// / ____/ /_/ / / / /_
|
|
// /_/ \__,_/_/ \__/
|
|
// /_/ \__,_/_/ \__/
|
|
var _Part = {
|
|
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){
|
|
view: function(vn){
|
|
return m("section", {
|
|
return m("section", {
|
|
- 'id' :vn.state.id,
|
|
|
|
|
|
+ 'id' :vn.attrs.id,
|
|
'class' :'part'
|
|
'class' :'part'
|
|
},
|
|
},
|
|
[
|
|
[
|
|
// create title node
|
|
// create title node
|
|
- m("h1", {'class':'part'}, vn.state.title),
|
|
|
|
|
|
+ m("h1", {'class':'part'}, vn.attrs.title),
|
|
// create text node
|
|
// create text node
|
|
- vn.state.enonces.map(function(e){
|
|
|
|
- return m(_Enonce, Object.assign({"partid":vn.state.id},e))
|
|
|
|
|
|
+ vn.attrs.enonces.map(function(e){
|
|
|
|
+ return m(_Enonce, Object.assign({"partid":vn.attrs.id},e))
|
|
})
|
|
})
|
|
])
|
|
])
|
|
}
|
|
}
|
|
@@ -267,12 +381,33 @@ var _Part = {
|
|
// /_/ /_/ \___/\___/
|
|
// /_/ /_/ \___/\___/
|
|
var _Tree = {
|
|
var _Tree = {
|
|
view: function(){
|
|
view: function(){
|
|
- // return m('main', {id:"content"}, DataItems.map(c => m(_Item,c)));
|
|
|
|
- return m('main', {id:"content"}, _db.map(function(p){
|
|
|
|
- // console.log("MAP _db", _db[k]);
|
|
|
|
|
|
+ console.log('_Tree view', _lang);
|
|
|
|
+ return m('main', {id:"content"}, _dbs[_lang].map(function(p){
|
|
|
|
+ // console.log("MAP _dbs", p);
|
|
return m(_Part,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()
|