|
|
@@ -12,418 +12,28 @@ require('./fonts/amiri/amiri.css');
|
|
|
require('./fonts/dejavu/dejavu.css');
|
|
|
require('./fonts/opensans/opensans.css');
|
|
|
|
|
|
+
|
|
|
+
|
|
|
var m = require('mithril');
|
|
|
// var marked = require('marked');
|
|
|
-var markdown = require('markdown-it')()
|
|
|
- .use(require('markdown-it-footnote'));
|
|
|
|
|
|
-var _lang;
|
|
|
-var _langs = [
|
|
|
- {'lc':'fr', 'label':'fr', 'db':'2-Appuhn-FR-ethicadb.json'},
|
|
|
- {'lc':'bra', 'label':'bra', 'db':'ethica-bresilen.json'}
|
|
|
-];
|
|
|
-
|
|
|
-var _dbs = {};
|
|
|
-var _dbs_by_id = {};
|
|
|
-var _loaded_dbs = 0;
|
|
|
+// var _helpers = require('modules/helpers');
|
|
|
+var _dbs = require('./modules/dbs');
|
|
|
+var _Tree = require('./modules/tree');
|
|
|
+var _Dots = require('./modules/dots');
|
|
|
|
|
|
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);
|
|
|
- m.mount(document.body, _App);
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-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);
|
|
|
-}
|
|
|
-
|
|
|
-// __ _ __
|
|
|
-// / / (_)___ / /__
|
|
|
-// / / / / __ \/ //_/
|
|
|
-// / /___/ / / / / ,<
|
|
|
-// /_____/_/_/ /_/_/|_|
|
|
|
-var _Link = {
|
|
|
- targetid:"",
|
|
|
- opened:false,
|
|
|
- oninit: function(vn){
|
|
|
- // console.log("INIT LINK : vn", vn);
|
|
|
- // 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 _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{
|
|
|
- // console.log(vn);
|
|
|
- return m('a', {
|
|
|
- 'class':'link',
|
|
|
- 'href':'#'+vn.state.tid,
|
|
|
- 'rel':vn.state.tid,
|
|
|
- onclick:function(e){
|
|
|
- e.preventDefault();
|
|
|
- console.log('click', vn);
|
|
|
- vn.state.opened = true;
|
|
|
- return false;
|
|
|
- }
|
|
|
- }, vn.children);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// ______ __
|
|
|
-// /_ __/__ _ __/ /_
|
|
|
-// / / / _ \| |/_/ __/
|
|
|
-// / / / __/> </ /_
|
|
|
-// /_/ \___/_/|_|\__/
|
|
|
-
|
|
|
-// recusive function to record information of all subnodes
|
|
|
-function parseTextDom(nodes){
|
|
|
- var list = [];
|
|
|
- // loop through childNodes
|
|
|
- for (var i = 0; i < nodes.length; i++) {
|
|
|
- var n = {};
|
|
|
- if(typeof nodes[i].localName != "undefined"){
|
|
|
- n.tag=nodes[i].localName;
|
|
|
- if (n.tag == 'p') {
|
|
|
- // replace p by div as we will insert other div in them
|
|
|
- n.tag = 'div';
|
|
|
- n.attrs = {'class':'paragraph'};
|
|
|
- }
|
|
|
- if (n.tag == 'a') {
|
|
|
- // record the href attribute for cross reference
|
|
|
- n.attrs = {'href':nodes[i].attributes.href.value};
|
|
|
- }
|
|
|
- if(nodes[i].childNodes.length){
|
|
|
- // again parse node's childs
|
|
|
- n.childs = parseTextDom(nodes[i].childNodes);
|
|
|
- }
|
|
|
- }else if (nodes[i].textContent.length > 1){
|
|
|
- // if node has no localName it is probably a #text node
|
|
|
- // we record it if it's not empty
|
|
|
- n.tag='#text';
|
|
|
- n.text=nodes[i].textContent;
|
|
|
- }
|
|
|
- // add the node to the list if it has a tag
|
|
|
- if(typeof n.tag != "undefined")
|
|
|
- list.push(n);
|
|
|
- }
|
|
|
- return list;
|
|
|
-}
|
|
|
-
|
|
|
-// recusive fucntion to generate mithril object from information recorded with parseTextDom()
|
|
|
-function populateTextDom(n,i){
|
|
|
- // console.log('populateTextDom : '+i,n);
|
|
|
- return n.tag == "#text"
|
|
|
- ? m.trust(n.text)
|
|
|
- : m(
|
|
|
- n.tag != 'a' ? n.tag : _Link,
|
|
|
- typeof n.attrs != "undefined" ? n.attrs : {},
|
|
|
- typeof n.childs != "undefined"
|
|
|
- ? n.childs.map(populateTextDom)
|
|
|
- : typeof n.text != "undefined"
|
|
|
- ? m.trust(n.text)
|
|
|
- : null
|
|
|
- );
|
|
|
-}
|
|
|
-
|
|
|
-var _Text = {
|
|
|
- id:null,
|
|
|
- text:"",
|
|
|
- texthtml:"",
|
|
|
- textdom:null,
|
|
|
- textchilds:[],
|
|
|
- parsetext: function(){
|
|
|
- // console.log('parsetext', this);
|
|
|
- // !! we need to convert markdown to html here because parseTextDom() is recursive through nodes tree
|
|
|
- // convert markdown to html
|
|
|
- this.texthtml = markdown.render(this.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
|
|
|
- this.textdom = new DOMParser().parseFromString(this.texthtml, "text/html");
|
|
|
- // get the text nodes (avoid html document extra)
|
|
|
- this.textchilds = parseTextDom(this.textdom.getElementsByTagName('body')[0].childNodes);
|
|
|
- },
|
|
|
- oninit: function(vn){
|
|
|
- this.id = vn.attrs.id;
|
|
|
- this.text = vn.attrs.text;
|
|
|
- this.parsetext();
|
|
|
- },
|
|
|
- onbeforeupdate: function(vn,old){
|
|
|
- this.text = vn.attrs.text;
|
|
|
- this.parsetext();
|
|
|
- },
|
|
|
- view: function(vn){
|
|
|
- // console.log('_Text :: view : '+vn.attrs.slug, vn);
|
|
|
- return m('div',
|
|
|
- {'class':'text'},
|
|
|
- // loop through childNodes list generated by parseTextDom() in init
|
|
|
- this.textchilds.map(populateTextDom)
|
|
|
- ); // /m.div.text
|
|
|
- } // view:
|
|
|
-}
|
|
|
-
|
|
|
-// ______
|
|
|
-// / _/ /____ ____ ___
|
|
|
-// / // __/ _ \/ __ `__ \
|
|
|
-// _/ // /_/ __/ / / / / /
|
|
|
-// /___/\__/\___/_/ /_/ /_/
|
|
|
-var _Item = {
|
|
|
- id:null,
|
|
|
- part:null,
|
|
|
- type:null,
|
|
|
- nested:false,
|
|
|
- oninit: function(vn){
|
|
|
- // console.log('vn.attrs', vn.attrs);
|
|
|
- this.id = vn.attrs.id;
|
|
|
- this.type = vn.attrs.type;
|
|
|
- // vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
|
|
|
- this.text = vn.attrs.text;
|
|
|
- this.nested = vn.attrs.nested || false;
|
|
|
- },
|
|
|
- onbeforeupdate: function(vn, old){
|
|
|
- this.nested = vn.attrs.nested || false;
|
|
|
- this.type = vn.attrs.type;
|
|
|
- this.text = vn.attrs.text;
|
|
|
- },
|
|
|
- view: function(vn){
|
|
|
- return m("section", {
|
|
|
- 'id':this.id,
|
|
|
- 'class':'item'+(this.nested ? ' nested':'')
|
|
|
- },
|
|
|
- [
|
|
|
- // create title node
|
|
|
- m("h3", {
|
|
|
- // 'ref':vn.attrs.href,
|
|
|
- onclick: function(e){
|
|
|
- vn.state.active = vn.state.active ? 0 : 1;
|
|
|
- }
|
|
|
- }, this.type),
|
|
|
- // create text node
|
|
|
- m(_Text, {'text':this.text, 'id':this.id})
|
|
|
- ]
|
|
|
- )
|
|
|
- }
|
|
|
+ _dbs.load(function(){
|
|
|
+ console.log("Init _dbs.data", _dbs.data);
|
|
|
+ console.log("Init _dbs.data_byid", _dbs.data_byid);
|
|
|
+ m.route(document.body, "/tree", {
|
|
|
+ "/tree": _Tree,
|
|
|
+ "/dots": _Dots,
|
|
|
+ });
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
-// ______
|
|
|
-// / ____/___ ____ ____ ________
|
|
|
-// / __/ / __ \/ __ \/ __ \/ ___/ _ \
|
|
|
-// / /___/ / / / /_/ / / / / /__/ __/
|
|
|
-// /_____/_/ /_/\____/_/ /_/\___/\___/
|
|
|
-var _Enonce = {
|
|
|
- partid:null,
|
|
|
- id:null,
|
|
|
- title:null,
|
|
|
- text:null,
|
|
|
- nested:false,
|
|
|
- childs:[],
|
|
|
- oninit:function(vn){
|
|
|
- // // console.log('Enonce on init', vn);
|
|
|
- this.partid = vn.attrs.partid;
|
|
|
- this.id = vn.attrs.id;
|
|
|
- this.title = vn.attrs.title;
|
|
|
- this.text = vn.attrs.text;
|
|
|
- this.childs = vn.attrs.childs;
|
|
|
- this.nested = vn.attrs.nested || false;
|
|
|
- },
|
|
|
- onbeforeupdate:function(vn, old) {
|
|
|
- // console.log(vn.attrs.childs);
|
|
|
- this.title = vn.attrs.title;
|
|
|
- this.text = vn.attrs.text;
|
|
|
- this.childs = vn.attrs.childs;
|
|
|
- this.nested = vn.attrs.nested || false;
|
|
|
- // if(vn.attrs.id == '1d1') console.log('_Enonce UPDATE, text :', vn.attrs.text);
|
|
|
- },
|
|
|
- view: function(vn){
|
|
|
- // if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
|
|
|
- return m("section", {
|
|
|
- 'id' :this.id,
|
|
|
- 'class' :'enonce'+(this.nested ? ' nested':'')
|
|
|
- },
|
|
|
- [
|
|
|
- // create title node
|
|
|
- m("h2", {}, this.title),
|
|
|
- // create text node
|
|
|
- m(_Text, {'text':this.text, 'id':this.id}),
|
|
|
- // addd children
|
|
|
- this.childs.map(function(c){
|
|
|
- return m(_Item, c)
|
|
|
- })
|
|
|
- ])
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// ____ __
|
|
|
-// / __ \____ ______/ /_
|
|
|
-// / /_/ / __ `/ ___/ __/
|
|
|
-// / ____/ /_/ / / / /_
|
|
|
-// /_/ \__,_/_/ \__/
|
|
|
-var _Part = {
|
|
|
- oninit: function(vn){
|
|
|
- this.id = vn.attrs.id;
|
|
|
- this.title = vn.attrs.title;
|
|
|
- this.enonces = vn.attrs.enonces;
|
|
|
- },
|
|
|
- onbeforeupdate: function(vn, old){
|
|
|
- // console.log('_Part, onbeforeupdate old',old);
|
|
|
- this.title = vn.attrs.title;
|
|
|
- this.enonces = vn.attrs.enonces;
|
|
|
- },
|
|
|
- view: function(vn){
|
|
|
- // console.log(vn.attrs.enonces);
|
|
|
- return m("section", {
|
|
|
- 'id' :this.id,
|
|
|
- 'class' :'part'
|
|
|
- },
|
|
|
- [
|
|
|
- // create title node
|
|
|
- m("h1", {'class':'part'}, this.title),
|
|
|
- // create text node
|
|
|
- this.enonces.map(function(e){
|
|
|
- // console.log(e.text);
|
|
|
- return m(_Enonce, Object.assign({"partid":this.id},e))
|
|
|
- })
|
|
|
- ]
|
|
|
- )
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-// ______
|
|
|
-// /_ __/_______ ___
|
|
|
-// / / / ___/ _ \/ _ \
|
|
|
-// / / / / / __/ __/
|
|
|
-// /_/ /_/ \___/\___/
|
|
|
-var _Tree = {
|
|
|
- view: function(){
|
|
|
- console.log('_Tree view', _lang);
|
|
|
- return m('main', {id:"content"}, _dbs[_lang].map(function(p){
|
|
|
- // console.log("MAP _dbs", p);
|
|
|
- return m(_Part,p);
|
|
|
- })
|
|
|
- );
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
// ___
|
|
|
// / | ____ ____
|
|
|
@@ -431,35 +41,22 @@ var _Tree = {
|
|
|
// / ___ |/ /_/ / /_/ /
|
|
|
// /_/ |_/ .___/ .___/
|
|
|
// /_/ /_/
|
|
|
-var _App = {
|
|
|
- view: function(){
|
|
|
- console.log('_App view', _lang);
|
|
|
- return [
|
|
|
- m('header', [
|
|
|
- m('h1', 'Ethica'),
|
|
|
- m('aside', {'id':"menus"}, m(_LangMenu) )
|
|
|
- ]),
|
|
|
- m(_Tree),
|
|
|
- m('footer', [
|
|
|
- m('p', m.trust('© 2017 <a href="./">Ethica Spinoza</a>'))
|
|
|
- ])
|
|
|
- ]
|
|
|
- }
|
|
|
-}
|
|
|
-// __ __ __
|
|
|
-// / / / /__ / /___ ___ __________
|
|
|
-// / /_/ / _ \/ / __ \/ _ \/ ___/ ___/
|
|
|
-// / __ / __/ / /_/ / __/ / (__ )
|
|
|
-// /_/ /_/\___/_/ .___/\___/_/ /____/
|
|
|
-// /_/
|
|
|
+// var _App = {
|
|
|
+// view: function(){
|
|
|
+// console.log('_App view', _lang);
|
|
|
+// return [
|
|
|
+// m('header', [
|
|
|
+// m('h1', 'Ethica'),
|
|
|
+// m('aside', {'id':"menus"}, m(_LangMenu) )
|
|
|
+// ]),
|
|
|
+// m(_Tree),
|
|
|
+// m('footer', [
|
|
|
+// m('p', m.trust('© 2017 <a href="./">Ethica Spinoza</a>'))
|
|
|
+// ])
|
|
|
+// ]
|
|
|
+// }
|
|
|
+// }
|
|
|
|
|
|
-function getUrlVars() {
|
|
|
- var vars = {};
|
|
|
- var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
|
|
|
- vars[key] = value;
|
|
|
- });
|
|
|
- return vars;
|
|
|
-}
|
|
|
|
|
|
// _ _ __
|
|
|
// (_)___ (_) /_
|
Bachir Soussi Chiadmi